feat: use resolvedTheme instead of systemTheme

This commit is contained in:
Henry Li
2026-01-21 10:48:29 +08:00
parent 11c562eb98
commit fbe4d27ddd
2 changed files with 10 additions and 12 deletions

View File

@@ -16,8 +16,7 @@ export default function ChatLayout({
const isNewThread = useMemo(() => {
return pathname === "/workspace/chats/new";
}, [pathname]);
const { theme, systemTheme } = useTheme();
const currentTheme = theme === "system" ? systemTheme : theme;
const { resolvedTheme } = useTheme();
return (
<ArtifactsProvider>
{isNewThread && (
@@ -27,9 +26,9 @@ export default function ChatLayout({
squareSize={4}
gridGap={4}
color={
currentTheme === "dark" ? "#60A5FA" : "oklch(0 0.0098 87.47)"
resolvedTheme === "dark" ? "#60A5FA" : "oklch(0 0.0098 87.47)"
}
maxOpacity={currentTheme === "dark" ? 0.04 : 0.03}
maxOpacity={resolvedTheme === "dark" ? 0.04 : 0.03}
flickerChance={0.1}
/>
<FlickeringGrid
@@ -37,9 +36,9 @@ export default function ChatLayout({
squareSize={4}
gridGap={4}
color={
currentTheme === "dark" ? "#60A5FA" : "oklch(0 0.0098 87.47)"
resolvedTheme === "dark" ? "#60A5FA" : "oklch(0 0.0098 87.47)"
}
maxOpacity={currentTheme === "dark" ? 0.15 : 0.11}
maxOpacity={resolvedTheme === "dark" ? 0.15 : 0.11}
flickerChance={0.12}
/>
</>

View File

@@ -25,7 +25,7 @@ const languageOptions: { value: Locale; label: string }[] = [
export function AppearanceSettingsPage() {
const { t, locale, changeLocale } = useI18n();
const { theme, setTheme, resolvedTheme } = useTheme();
const { theme, setTheme, systemTheme } = useTheme();
const currentTheme = (theme ?? "system") as "system" | "light" | "dark";
const themeOptions = useMemo(
@@ -74,7 +74,7 @@ export function AppearanceSettingsPage() {
description={option.description}
active={currentTheme === option.id}
mode={option.id as "system" | "light" | "dark"}
resolvedTheme={resolvedTheme}
systemTheme={systemTheme}
onSelect={(value) => setTheme(value)}
/>
))}
@@ -113,7 +113,7 @@ function ThemePreviewCard({
description,
active,
mode,
resolvedTheme,
systemTheme,
onSelect,
}: {
icon: ComponentType<SVGProps<SVGSVGElement>>;
@@ -121,12 +121,11 @@ function ThemePreviewCard({
description: string;
active: boolean;
mode: "system" | "light" | "dark";
resolvedTheme?: string;
systemTheme?: string;
onSelect: (mode: "system" | "light" | "dark") => void;
}) {
const previewMode =
mode === "system" ? (resolvedTheme === "dark" ? "dark" : "light") : mode;
mode === "system" ? (systemTheme === "dark" ? "dark" : "light") : mode;
return (
<button
type="button"