diff --git a/src/components/nostr/user-menu.tsx b/src/components/nostr/user-menu.tsx index 7439458..c6afaea 100644 --- a/src/components/nostr/user-menu.tsx +++ b/src/components/nostr/user-menu.tsx @@ -1,4 +1,4 @@ -import { User, HardDrive } from "lucide-react"; +import { User, HardDrive, Palette } from "lucide-react"; import accounts from "@/services/accounts"; import { useProfile } from "@/hooks/useProfile"; import { use$ } from "applesauce-react/hooks"; @@ -20,6 +20,7 @@ import { RelayLink } from "./RelayLink"; import SettingsDialog from "@/components/SettingsDialog"; import LoginDialog from "./LoginDialog"; import { useState } from "react"; +import { useTheme } from "@/lib/themes"; function UserAvatar({ pubkey }: { pubkey: string }) { const profile = useProfile(pubkey); @@ -57,6 +58,7 @@ export default function UserMenu() { const blossomServers = state.activeAccount?.blossomServers; const [showSettings, setShowSettings] = useState(false); const [showLogin, setShowLogin] = useState(false); + const { themeId, setTheme, availableThemes } = useTheme(); function openProfile() { if (!account?.pubkey) return; @@ -153,22 +155,72 @@ export default function UserMenu() { )} - {/* setShowSettings(true)} - className="cursor-pointer" - > - - Settings - - */} + + + + Theme + + {availableThemes.map((theme) => ( + setTheme(theme.id)} + > + + {theme.name} + {themeId === theme.id && ( + + active + + )} + + ))} + + Log out ) : ( - setShowLogin(true)}> - Log in - + <> + + + + Theme + + {availableThemes.map((theme) => ( + setTheme(theme.id)} + > + + {theme.name} + {themeId === theme.id && ( + + active + + )} + + ))} + + + setShowLogin(true)}> + Log in + + )} diff --git a/src/lib/themes/apply.ts b/src/lib/themes/apply.ts index a64ba4a..f08d860 100644 --- a/src/lib/themes/apply.ts +++ b/src/lib/themes/apply.ts @@ -81,12 +81,6 @@ export function applyTheme(theme: Theme): void { root.style.setProperty("--gradient-2", theme.gradient.color2); root.style.setProperty("--gradient-3", theme.gradient.color3); root.style.setProperty("--gradient-4", theme.gradient.color4); - - // Layout - root.style.setProperty("--radius", theme.radius); - - // Remove the dark class management - we now handle this via CSS variables directly - // The dark class is no longer needed as themes apply their own color values } /** @@ -144,7 +138,5 @@ export function getThemeVariables(): string[] { "--gradient-2", "--gradient-3", "--gradient-4", - // Layout - "--radius", ]; } diff --git a/src/lib/themes/builtin/dark.ts b/src/lib/themes/builtin/dark.ts index 290ff47..6a2fa66 100644 --- a/src/lib/themes/builtin/dark.ts +++ b/src/lib/themes/builtin/dark.ts @@ -75,6 +75,4 @@ export const darkTheme: Theme = { color3: "168 85 247", // purple-500 color4: "34 211 238", // cyan-400 }, - - radius: "0.5rem", }; diff --git a/src/lib/themes/builtin/light.ts b/src/lib/themes/builtin/light.ts index 942aa8f..82ab7d6 100644 --- a/src/lib/themes/builtin/light.ts +++ b/src/lib/themes/builtin/light.ts @@ -75,6 +75,4 @@ export const lightTheme: Theme = { color3: "147 51 234", // purple-600 color4: "6 182 212", // cyan-500 }, - - radius: "0.5rem", }; diff --git a/src/lib/themes/builtin/plan9.ts b/src/lib/themes/builtin/plan9.ts index 1302e57..f467cd9 100644 --- a/src/lib/themes/builtin/plan9.ts +++ b/src/lib/themes/builtin/plan9.ts @@ -9,7 +9,6 @@ import type { Theme } from "../types"; * - Black text for high contrast * - Bright yellow selections * - Dark blue accents - * - No rounded corners (squared aesthetic) */ export const plan9Theme: Theme = { id: "plan9", @@ -92,7 +91,4 @@ export const plan9Theme: Theme = { color3: "100 60 180", // Muted purple color4: "40 160 180", // Teal }, - - // Plan9 has no rounded corners - everything is squared - radius: "0", }; diff --git a/src/lib/themes/types.ts b/src/lib/themes/types.ts index 6fc1746..48fc40e 100644 --- a/src/lib/themes/types.ts +++ b/src/lib/themes/types.ts @@ -126,9 +126,6 @@ export interface Theme { /** Gradient colors */ gradient: ThemeGradient; - - /** Border radius base value (e.g., "0.5rem", "0") */ - radius: string; } /** Theme metadata for listings (without full color data) */