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) */