administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-02-10 05:05:26 +03:00
Code Issues Actions 1 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 Theme = "dark" | "light" | "system";
type ColorScheme = type ColorScheme =
@ -41,6 +41,7 @@ type ThemeProviderProps = {
type ThemeProviderState = { type ThemeProviderState = {
theme: Theme; theme: Theme;
systemTheme?: Theme;
colorScheme: ColorScheme; colorScheme: ColorScheme;
setTheme: (theme: Theme) => void; setTheme: (theme: Theme) => void;
setColorScheme: (colorScheme: ColorScheme) => void; setColorScheme: (colorScheme: ColorScheme) => void;
@ -48,6 +49,7 @@ type ThemeProviderState = {
const initialState: ThemeProviderState = { const initialState: ThemeProviderState = {
theme: "system", theme: "system",
systemTheme: undefined,
colorScheme: "theme-default", colorScheme: "theme-default",
setTheme: () => null, setTheme: () => null,
setColorScheme: () => 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(() => { useEffect(() => {
//localStorage.removeItem(storageKey); //localStorage.removeItem(storageKey);
//console.log(localStorage.getItem(storageKey)); //console.log(localStorage.getItem(storageKey));
@ -95,21 +107,17 @@ export function ThemeProvider({
root.classList.add(theme, colorScheme); root.classList.add(theme, colorScheme);
if (theme === "system") { if (systemTheme) {
const systemTheme = window.matchMedia("(prefers-color-scheme: dark)")
.matches
? "dark"
: "light";
root.classList.add(systemTheme); root.classList.add(systemTheme);
return; return;
} }
root.classList.add(theme); root.classList.add(theme);
}, [theme, colorScheme]); }, [theme, colorScheme, systemTheme]);
const value = { const value = {
theme, theme,
systemTheme,
colorScheme, colorScheme,
setTheme: (theme: Theme) => { setTheme: (theme: Theme) => {
localStorage.setItem(storageKey, JSON.stringify({ theme, colorScheme })); 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 { data: config } = useSWR<string>("config/raw");
const { theme } = useTheme(); const { theme, systemTheme } = useTheme();
const [error, setError] = useState<string | undefined>(); const [error, setError] = useState<string | undefined>();
const editorRef = useRef<monaco.editor.IStandaloneCodeEditor | null>(null); const editorRef = useRef<monaco.editor.IStandaloneCodeEditor | null>(null);
@ -107,7 +107,7 @@ function ConfigEditor() {
language: "yaml", language: "yaml",
model: modelRef.current, model: modelRef.current,
scrollBeyondLastLine: false, scrollBeyondLastLine: false,
theme: theme == "dark" ? "vs-dark" : "vs-light", theme: (systemTheme || theme) == "dark" ? "vs-dark" : "vs-light",
}); });
} }