fix: themes v2

getAlby · Jul 4, 2024 · 9630cd5 · 9630cd5
1 parent f624bc4
commit 9630cd5
Show file tree

Hide file tree

Showing 14 changed files with 231 additions and 318 deletions.
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
@@ -13,7 +13,11 @@ function App() {
 
   return (
     <>
-      <ThemeProvider defaultTheme="system" storageKey="vite-ui-theme">
+      <ThemeProvider
+        defaultTheme="default"
+        defaultDarkMode="system"
+        storageKey="vite-ui-theme"
+      >
         <Toaster />
         <RouterProvider router={router} />
       </ThemeProvider>

diff --git a/frontend/src/components/ui/theme-provider.tsx b/frontend/src/components/ui/theme-provider.tsx
@@ -1,34 +1,50 @@
 import { createContext, useContext, useEffect, useState } from "react";
 
-type Theme = "dark" | "light" | "system";
+export type DarkMode = "system" | "light" | "dark";
+export const Themes = ["default", "alby", "bitcoin", "nostr"] as const;
+export type Theme = (typeof Themes)[number];
 
 type ThemeProviderProps = {
   children: React.ReactNode;
   defaultTheme?: Theme;
+  defaultDarkMode?: DarkMode;
   storageKey?: string;
 };
 
 type ThemeProviderState = {
   theme: string;
-  setTheme: (theme: string) => void;
+  darkMode: string;
+  setTheme: (theme: Theme) => void;
+  setDarkMode: (mode: DarkMode) => void;
 };
 
 const initialState: ThemeProviderState = {
-  theme: "system",
+  theme: "default",
   setTheme: () => null,
+  darkMode: "system",
+  setDarkMode: () => null,
 };
 
 const ThemeProviderContext = createContext<ThemeProviderState>(initialState);
 
 export function ThemeProvider({
   children,
-  defaultTheme = "system",
+  defaultTheme = "default",
+  defaultDarkMode = "system",
   storageKey = "vite-ui-theme",
   ...props
 }: ThemeProviderProps) {
   const [theme, setTheme] = useState<Theme>(() => {
     return (localStorage.getItem(storageKey) as Theme) || defaultTheme;
   });
+
+  const [darkMode, setDarkMode] = useState<DarkMode>(() => {
+    return (
+      (localStorage.getItem(storageKey + "-darkmode") as DarkMode) ||
+      defaultDarkMode
+    );
+  });
+
   useEffect(() => {
     const root = window.document.documentElement;
 
@@ -39,27 +55,34 @@ export function ThemeProvider({
         classList.remove(className);
       }
     });
-    root.classList.remove("light", "dark");
-    if (theme === "system") {
-      const systemTheme = window.matchMedia("(prefers-color-scheme: dark)")
-        .matches
-        ? "dark"
-        : "light";
-
-      root.classList.add(systemTheme);
-      setTheme(systemTheme);
-      return;
+
+    classList.add(`theme-${theme}`);
+
+    let prefersDark = false;
+    if (darkMode == "system") {
+      prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
+    } else {
+      prefersDark = darkMode === "dark";
     }
 
-    root.classList.add(theme);
-  }, [theme]);
+    if (prefersDark) {
+      classList.add("dark");
+    } else {
+      classList.remove("dark");
+    }
+  }, [theme, darkMode]);
 
   const value = {
     theme,
     setTheme: (theme: Theme) => {
       localStorage.setItem(storageKey, theme);
       setTheme(theme);
     },
+    darkMode,
+    setDarkMode: (darkMode: DarkMode) => {
+      localStorage.setItem(storageKey + "-darkmode", darkMode);
+      setDarkMode(darkMode);
+    },
   };
 
   return (

diff --git a/frontend/src/index.css b/frontend/src/index.css
@@ -1,15 +1,12 @@
-@import 'themes/dracula.css';
-@import 'themes/nord.css';
-@import 'themes/nostr.css';
-@import 'themes/purple.css';
-@import 'themes/blue.css';
-@import 'themes/default.css';
+@import "themes/default.css";
+@import "themes/alby.css";
+@import "themes/bitcoin.css";
+@import "themes/nostr.css";
 
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 
-
 @layer base {
   * {
     @apply border-border;

diff --git a/frontend/src/screens/settings/Settings.tsx b/frontend/src/screens/settings/Settings.tsx
@@ -7,11 +7,15 @@ import {
   SelectTrigger,
   SelectValue,
 } from "src/components/ui/select";
-import { useTheme } from "src/components/ui/theme-provider";
+import {
+  DarkMode,
+  Theme,
+  Themes,
+  useTheme,
+} from "src/components/ui/theme-provider";
 
 function Settings() {
-  const { theme, setTheme } = useTheme();
-
+  const { theme, darkMode, setTheme, setDarkMode } = useTheme();
   return (
     <>
       <SettingsHeader
@@ -21,44 +25,35 @@ function Settings() {
       <form className="w-full flex flex-col gap-3">
         <div className="grid gap-1.5">
           <Label htmlFor="theme">Theme</Label>
-          <Select value={theme} onValueChange={(value) => setTheme(value)}>
+          <Select
+            value={theme}
+            onValueChange={(value) => setTheme(value as Theme)}
+          >
             <SelectTrigger className="w-[150px]">
               <SelectValue placeholder="Theme" />
             </SelectTrigger>
             <SelectContent>
-              <SelectItem key="system" value="system">
-                System
-              </SelectItem>
-              <SelectItem key="dark" value="dark">
-                Dark
-              </SelectItem>
-              <SelectItem key="light" value="light">
-                Light
-              </SelectItem>
-              <SelectItem key="theme-nostr-light" value="theme-nostr-light">
-                Nostr (light)
-              </SelectItem>
-              <SelectItem key="theme-nostr-dark" value="theme-nostr-dark">
-                Nostr (dark)
-              </SelectItem>
-              <SelectItem key="theme-dracula-light" value="theme-dracula-light">
-                Dracula (light)
-              </SelectItem>
-              <SelectItem key="theme-dracula-dark" value="theme-dracula-dark">
-                Dracula (dark)
-              </SelectItem>
-              <SelectItem key="theme-nord-light" value="theme-nord-light">
-                Nord (light)
-              </SelectItem>
-              <SelectItem key="theme-nord-dark" value="theme-nord-dark">
-                Nord (dark)
-              </SelectItem>
-              <SelectItem key="theme-purple" value="theme-purple">
-                Purple
-              </SelectItem>
-              <SelectItem key="theme-blue" value="theme-blue">
-                Blue
-              </SelectItem>
+              {Themes.map((theme) => (
+                <SelectItem key={theme} value={theme}>
+                  {theme.charAt(0).toUpperCase() + theme.substring(1)}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+        <div className="grid gap-1.5">
+          <Label htmlFor="theme">Dark mode</Label>
+          <Select
+            value={darkMode}
+            onValueChange={(value) => setDarkMode(value as DarkMode)}
+          >
+            <SelectTrigger className="w-[150px]">
+              <SelectValue placeholder="Dark mode" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="system">System</SelectItem>
+              <SelectItem value="light">Light</SelectItem>
+              <SelectItem value="dark">Dark</SelectItem>
             </SelectContent>
           </Select>
         </div>

diff --git a/frontend/src/screens/wallet/OnboardingChecklist.tsx b/frontend/src/screens/wallet/OnboardingChecklist.tsx
@@ -141,7 +141,7 @@ function ChecklistItem({
     <div
       className={cn(
         "flex flex-col p-3 relative group rounded-lg",
-        !checked && "hover:bg-primary-foreground"
+        !checked && "hover:bg-muted"
       )}
     >
       {!checked && (

diff --git a/frontend/src/themes/alby.css b/frontend/src/themes/alby.css
@@ -0,0 +1,66 @@
+.theme-alby {
+  /* Name: custom color palette
+       Author: Ilias Ism
+       URL: https://gradient.page */
+
+  /* CSS: .bg-gradient { background: var(--gradient) } */
+  --background: 60 8% 95%;
+  --foreground: 30 8% 5%;
+
+  --card: 60 8% 95%;
+  --card-foreground: 30 8% 5%;
+
+  --popover: 60 8% 95%;
+  --popover-foreground: 30 8% 5%;
+
+  --primary: 47 100% 72%;
+  --primary-foreground: 0 9% 2%;
+
+  --secondary: 48 11% 91%;
+  --secondary-foreground: 30 8% 5%;
+
+  --muted: 45 9% 91%;
+  --muted-foreground: 46 9% 45%;
+
+  --accent: 48 11% 91%;
+  --accent-foreground: 30 8% 5%;
+
+  --destructive: 0 84% 60%;
+  --destructive-foreground: 0 0% 98%;
+
+  --border: 40 9% 87%;
+  --input: 47 9% 81%;
+  --ring: 47 36% 72%;
+
+  --radius: 0.5rem;
+}
+
+.theme-alby.dark {
+  --background: 60 4% 5%;
+  --foreground: 0 0% 98%;
+
+  --card: 60 4% 5%;
+  --card-foreground: 0 0% 98%;
+
+  --popover: 60 4% 5%;
+  --popover-foreground: 0 0% 98%;
+
+  --primary: 47 100% 72%;
+  --primary-foreground: 0 0% 2%;
+
+  --secondary: 60 2% 10%;
+  --secondary-foreground: 0 0% 98%;
+
+  --muted: 60 3% 15%;
+  --muted-foreground: 48 2% 49%;
+
+  --accent: 47 18% 10%;
+  --accent-foreground: 0 0% 98%;
+
+  --destructive: 0 84% 60%;
+  --destructive-foreground: 0 0% 98%;
+
+  --border: 60 2% 12%;
+  --input: 30 2% 18%;
+  --ring: 47 100% 40%;
+}
diff --git a/frontend/src/themes/bitcoin.css b/frontend/src/themes/bitcoin.css
@@ -0,0 +1,37 @@
+.theme-bitcoin {
+  /* Name: custom color palette
+       Author: Ilias Ism
+       URL: https://gradient.page */
+
+  /* CSS: .bg-gradient { background: var(--gradient) } */
+  --gradient: #f7931a;
+
+  --background: 35 60.45% 4.32%;
+  --foreground: 35 9.3% 97.7%;
+
+  --muted: 35 93% 3.24%;
+  --muted-foreground: 35 9.3% 55.4%;
+
+  --popover: 35 46.4% 7.0200000000000005%;
+  --popover-foreground: 35 9.3% 97.7%;
+
+  --card: 35 46.4% 7.0200000000000005%;
+  --card-foreground: 35 9.3% 97.7%;
+
+  --border: 35 93% 3.24%;
+  --input: 35 93% 3.24%;
+
+  --primary: 35 93% 54%;
+  --primary-foreground: 35 9.3% 5.4%;
+
+  --secondary: 35 93% 3.24%;
+  --secondary-foreground: 35 9.3% 97.7%;
+
+  --accent: 35 93% 3.24%;
+  --accent-foreground: 35 9.3% 97.7%;
+
+  --destructive: 0 62.8% 30.6%;
+  --destructive-foreground: 35 9.3% 97.7%;
+
+  --ring: 35 93% 54%;
+}
diff --git a/frontend/src/themes/blue.css b/frontend/src/themes/blue.css