administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-02-09 04:35:25 +03:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

Make conig editor respect system theme

Browse Source
This commit is contained in:
Nicolas Mowen 2024-03-20 17:10:47 -06:00
parent 830be5ad93
commit 4ee22410f7
2 changed files with 18 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
web/src/context/theme-provider.tsx
View File

@ -1,4 +1,4 @@
import { createContext, useContext, useEffect, useState } from "react";
import { createContext, useContext, useEffect, useMemo, useState } from "react";
type Theme = "dark" | "light" | "system";
type ColorScheme =
@ -41,6 +41,7 @@ type ThemeProviderProps = {
type ThemeProviderState = {
theme: Theme;
systemTheme?: Theme;
colorScheme: ColorScheme;
setTheme: (theme: Theme) => void;
setColorScheme: (colorScheme: ColorScheme) => void;
@ -48,6 +49,7 @@ type ThemeProviderState = {
const initialState: ThemeProviderState = {
theme: "system",
systemTheme: undefined,
colorScheme: "theme-default",
setTheme: () => null,
setColorScheme: () => null,
@ -86,6 +88,16 @@ export function ThemeProvider({
}
});
const systemTheme = useMemo<Theme | undefined>(() => {
if (theme != "system") {
return undefined;
}
return window.matchMedia("(prefers-color-scheme: dark)").matches
? "dark"
: "light";
}, [theme]);
useEffect(() => {
//localStorage.removeItem(storageKey);
//console.log(localStorage.getItem(storageKey));
@ -95,21 +107,17 @@ export function ThemeProvider({
root.classList.add(theme, colorScheme);
if (theme === "system") {
const systemTheme = window.matchMedia("(prefers-color-scheme: dark)")
.matches
? "dark"
: "light";
if (systemTheme) {
root.classList.add(systemTheme);
return;
}
root.classList.add(theme);
}, [theme, colorScheme]);
}, [theme, colorScheme, systemTheme]);
const value = {
theme,
systemTheme,
colorScheme,
setTheme: (theme: Theme) => {
localStorage.setItem(storageKey, JSON.stringify({ theme, colorScheme }));

4
web/src/pages/ConfigEditor.tsx
View File

@ -19,7 +19,7 @@ function ConfigEditor() {
const { data: config } = useSWR<string>("config/raw");
const { theme } = useTheme();
const { theme, systemTheme } = useTheme();
const [error, setError] = useState<string | undefined>();
const editorRef = useRef<monaco.editor.IStandaloneCodeEditor | null>(null);
@ -107,7 +107,7 @@ function ConfigEditor() {
language: "yaml",
model: modelRef.current,
scrollBeyondLastLine: false,
theme: theme == "dark" ? "vs-dark" : "vs-light",
theme: (systemTheme || theme) == "dark" ? "vs-dark" : "vs-light",
});
}