feat: use resolvedTheme instead of systemTheme

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

View File

@@ -16,8 +16,7 @@ export default function ChatLayout({
const isNewThread = useMemo(() => { const isNewThread = useMemo(() => {
return pathname === "/workspace/chats/new"; return pathname === "/workspace/chats/new";
}, [pathname]); }, [pathname]);
const { theme, systemTheme } = useTheme(); const { resolvedTheme } = useTheme();
const currentTheme = theme === "system" ? systemTheme : theme;
return ( return (
<ArtifactsProvider> <ArtifactsProvider>
{isNewThread && ( {isNewThread && (
@@ -27,9 +26,9 @@ export default function ChatLayout({
squareSize={4} squareSize={4}
gridGap={4} gridGap={4}
color={ 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} flickerChance={0.1}
/> />
<FlickeringGrid <FlickeringGrid
@@ -37,9 +36,9 @@ export default function ChatLayout({
squareSize={4} squareSize={4}
gridGap={4} gridGap={4}
color={ 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} flickerChance={0.12}
/> />
</> </>

View File

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