feat: sync embedded analytics theme with parent app

This commit is contained in:
2026-04-02 20:11:33 +08:00
parent 1b5977a420
commit cc66034e59
8 changed files with 219 additions and 44 deletions

View File

@@ -10,7 +10,7 @@ import { useTheme, type Theme } from "@/lib/theme";
export function Sidebar() {
const pathname = usePathname();
const { t, locale, setLocale } = useI18n();
const { theme, setTheme } = useTheme();
const { theme, setTheme, isEmbedded } = useTheme();
const nav = [
{ href: "/", label: t("nav.overview"), icon: LayoutDashboard },
@@ -76,22 +76,23 @@ export function Sidebar() {
{/* Controls */}
<div className="space-y-3 p-4 border-t" style={{ borderColor: "var(--surface-border)" }}>
{/* Theme switcher */}
<div className="flex gap-1 rounded-lg p-0.5" style={{ background: "var(--row-hover)", border: "1px solid var(--surface-border)" }}>
{themes.map(({ value, icon: Icon }) => (
<button key={value} onClick={() => setTheme(value)}
className="flex-1 flex items-center justify-center rounded-md py-1.5 transition-colors"
style={{
background: theme === value ? "var(--btn-active-bg)" : "transparent",
color: theme === value ? "var(--text-accent)" : "var(--text-muted)",
border: theme === value ? "1px solid var(--surface-border)" : "1px solid transparent",
}}
title={themes.find(t => t.value === value)?.label}
>
<Icon className="h-3.5 w-3.5" />
</button>
))}
</div>
{!isEmbedded && (
<div className="flex gap-1 rounded-lg p-0.5" style={{ background: "var(--row-hover)", border: "1px solid var(--surface-border)" }}>
{themes.map(({ value, icon: Icon }) => (
<button key={value} onClick={() => setTheme(value)}
className="flex-1 flex items-center justify-center rounded-md py-1.5 transition-colors"
style={{
background: theme === value ? "var(--btn-active-bg)" : "transparent",
color: theme === value ? "var(--text-accent)" : "var(--text-muted)",
border: theme === value ? "1px solid var(--surface-border)" : "1px solid transparent",
}}
title={themes.find(t => t.value === value)?.label}
>
<Icon className="h-3.5 w-3.5" />
</button>
))}
</div>
)}
{/* Language switcher */}
<button