add light/system theme

Author: alindt

src/components/ui/DarkModeToggle.tsx

@@ -39,7 +39,6 @@ export default function DarkModeToggle() {
         <DropdownMenuItem
           onClick={() => setTheme("light")}
           className={"flex gap-2"}
-          disabled={true}
         >
           <SunIcon size={16} />
           Light
@@ -52,7 +51,6 @@ export default function DarkModeToggle() {
           Dark
         </DropdownMenuItem>
         <DropdownMenuItem
-          disabled={true}
           onClick={() => setTheme("system")}
           className={"flex gap-2"}
         >

src/contexts/GlobalThemeProvider.tsx

@@ -7,12 +7,27 @@ import dynamic from "next/dynamic";
 import { type ThemeProviderProps } from "next-themes/dist/types";
 import * as React from "react";
 import { SkeletonTheme } from "react-loading-skeleton";
+import { useTheme } from "next-themes";
 
 const NextThemesProvider = dynamic(
   () => import("next-themes").then((mod) => mod.ThemeProvider),
   { ssr: false },
 );
 
+function ThemedSkeletonProvider({ children }: { children: React.ReactNode }) {
+  const { resolvedTheme } = useTheme();
+  const isDark = resolvedTheme === "dark";
+
+  return (
+    <SkeletonTheme
+      baseColor={isDark ? "#25282d" : "#e4e7e9"}
+      highlightColor={isDark ? "#33373e" : "#f4f6f7"}
+    >
+      {children}
+    </SkeletonTheme>
+  );
+}
+
 export function GlobalThemeProvider({
   children,
   ...props
@@ -22,14 +37,14 @@ export function GlobalThemeProvider({
       attribute="class"
       defaultTheme="dark"
       storageKey="netbird-theme"
-      enableSystem={false}
+      enableSystem={true}
       disableTransitionOnChange
       {...props}
     >
       <Flowbite theme={{ theme: netbirdTheme }}>
-        <SkeletonTheme baseColor={"#25282d"} highlightColor={"#33373e"}>
+        <ThemedSkeletonProvider>
           {children}
-        </SkeletonTheme>
+        </ThemedSkeletonProvider>
       </Flowbite>
     </NextThemesProvider>
   );