fix: invert qr codes if darkmode is enabled

getAlby · Jul 22, 2024 · 116f3ff · 116f3ff
1 parent d97a015
commit 116f3ff
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 3 deletions.
diff --git a/frontend/src/components/QRCode.tsx b/frontend/src/components/QRCode.tsx
@@ -19,9 +19,9 @@ export type Props = {
 };
 
 function QRCode({ value, size, level, className }: Props) {
-  const { theme } = useTheme();
-  const fgColor = theme === "dark" ? "#FFFFFF" : "#242424";
-  const bgColor = theme === "dark" ? "#242424" : "#FFFFFF";
+  const { isDarkMode } = useTheme();
+  const fgColor = isDarkMode ? "#FFFFFF" : "#242424";
+  const bgColor = isDarkMode ? "#242424" : "#FFFFFF";
 
   return (
     <ReactQRCode

diff --git a/frontend/src/components/ui/theme-provider.tsx b/frontend/src/components/ui/theme-provider.tsx
@@ -16,13 +16,15 @@ type ThemeProviderState = {
   darkMode: string;
   setTheme: (theme: Theme) => void;
   setDarkMode: (mode: DarkMode) => void;
+  isDarkMode: boolean;
 };
 
 const initialState: ThemeProviderState = {
   theme: "default",
   setTheme: () => null,
   darkMode: "system",
   setDarkMode: () => null,
+  isDarkMode: false,
 };
 
 const ThemeProviderContext = createContext<ThemeProviderState>(initialState);
@@ -46,6 +48,8 @@ export function ThemeProvider({
     );
   });
 
+  const [isDarkMode, setIsDarkMode] = useState<boolean>();
+
   useEffect(() => {
     const root = window.document.documentElement;
 
@@ -66,6 +70,8 @@ export function ThemeProvider({
       prefersDark = darkMode === "dark";
     }
 
+    setIsDarkMode(prefersDark);
+
     if (prefersDark) {
       classList.add("dark");
     } else {
@@ -84,6 +90,7 @@ export function ThemeProvider({
       localStorage.setItem(storageKey + "-darkmode", darkMode);
       setDarkMode(darkMode);
     },
+    isDarkMode,
   };
 
   return (