diff --git a/apps/studio/components/interfaces/Account/Preferences/ThemeColorSettings.tsx b/apps/studio/components/interfaces/Account/Preferences/ThemeColorSettings.tsx index 0e897095990..65b336420b2 100644 --- a/apps/studio/components/interfaces/Account/Preferences/ThemeColorSettings.tsx +++ b/apps/studio/components/interfaces/Account/Preferences/ThemeColorSettings.tsx @@ -3,7 +3,7 @@ import { Button, CardContent, Slider } from 'ui' import { useThemeOverrides } from '@/hooks/misc/useThemeOverrides' import { - applyThemeOverrides, + applyResolvedThemeOverrides, getThemeOverrideValue, hasThemeOverrides, previewThemeOverride, @@ -33,7 +33,8 @@ export const ThemeColorSettings = () => { useEffect( () => () => { - applyThemeOverrides(document.documentElement, modeRef.current, overridesRef.current) + const root = document.documentElement + applyResolvedThemeOverrides(root, root.dataset.theme, modeRef.current, overridesRef.current) }, [] ) diff --git a/apps/studio/components/interfaces/App/AppearanceSettingsProvider.tsx b/apps/studio/components/interfaces/App/AppearanceSettingsProvider.tsx index 0a20a514c5e..1a45aed2500 100644 --- a/apps/studio/components/interfaces/App/AppearanceSettingsProvider.tsx +++ b/apps/studio/components/interfaces/App/AppearanceSettingsProvider.tsx @@ -4,7 +4,7 @@ import { useTheme } from 'next-themes' import { useTextSize } from '@/hooks/misc/useTextSize' import { useThemeOverrides } from '@/hooks/misc/useThemeOverrides' import { applyTextSize } from '@/lib/text-size' -import { applyThemeOverrides } from '@/lib/theme-overrides' +import { applyResolvedThemeOverrides } from '@/lib/theme-overrides' export const AppearanceSettingsProvider = () => { const { resolvedTheme } = useTheme() @@ -12,10 +12,8 @@ export const AppearanceSettingsProvider = () => { const { textSize } = useTextSize() useIsomorphicLayoutEffect(() => { - if (resolvedTheme === 'classic-dark') { - applyThemeOverrides(document.documentElement, 'dark', {}) - } else if (resolvedTheme !== undefined) { - applyThemeOverrides(document.documentElement, mode, overrides) + if (resolvedTheme !== undefined) { + applyResolvedThemeOverrides(document.documentElement, resolvedTheme, mode, overrides) } applyTextSize(document.documentElement, textSize) }, [mode, overrides, resolvedTheme, textSize]) diff --git a/apps/studio/lib/__tests__/theme-overrides.test.ts b/apps/studio/lib/__tests__/theme-overrides.test.ts index 26803ca6fd1..fb34acc6027 100644 --- a/apps/studio/lib/__tests__/theme-overrides.test.ts +++ b/apps/studio/lib/__tests__/theme-overrides.test.ts @@ -1,6 +1,7 @@ import { describe, expect, it } from 'vitest' import { + applyResolvedThemeOverrides, applyThemeOverrides, clearThemeOverridesForMode, getThemeOverrideRange, @@ -141,6 +142,15 @@ describe('theme override application', () => { expect(root.style.getPropertyValue('--contrast')).toBe('') }) + it('removes stored settings from Classic Dark', () => { + const root = document.createElement('html') + root.style.setProperty('--chroma', '0.04') + + applyResolvedThemeOverrides(root, 'classic-dark', 'dark', { chroma: 0.02 }) + + expect(root.style.getPropertyValue('--chroma')).toBe('') + }) + it('reports whether a mode has overrides', () => { expect(hasThemeOverrides({})).toBe(false) expect(hasThemeOverrides({ chroma: 0.02 })).toBe(true) diff --git a/apps/studio/lib/theme-overrides.ts b/apps/studio/lib/theme-overrides.ts index d363f6fb072..9ecbe8b741d 100644 --- a/apps/studio/lib/theme-overrides.ts +++ b/apps/studio/lib/theme-overrides.ts @@ -195,6 +195,15 @@ export function applyThemeOverrides( }) } +export function applyResolvedThemeOverrides( + root: HTMLElement, + resolvedTheme: string | undefined, + mode: ThemeOverrideMode, + overrides: ThemeOverrides +) { + applyThemeOverrides(root, mode, resolvedTheme === 'classic-dark' ? {} : overrides) +} + export function previewThemeOverride( knob: ThemeOverrideKnob, mode: ThemeOverrideMode, diff --git a/apps/studio/tests/components/interfaces/Account/Preferences/ThemeColorSettings.test.tsx b/apps/studio/tests/components/interfaces/Account/Preferences/ThemeColorSettings.test.tsx index ed43a16e7b4..d063adce894 100644 --- a/apps/studio/tests/components/interfaces/Account/Preferences/ThemeColorSettings.test.tsx +++ b/apps/studio/tests/components/interfaces/Account/Preferences/ThemeColorSettings.test.tsx @@ -46,6 +46,7 @@ describe('ThemeColorSettings', () => { resetOverrides.mockReset() setOverride.mockReset() document.documentElement.style.removeProperty('--chroma') + document.documentElement.dataset.theme = 'dark' }) it('persists a rapid pointer change for the active mode', () => { @@ -86,4 +87,14 @@ describe('ThemeColorSettings', () => { expect(document.documentElement.style.getPropertyValue('--chroma')).toBe('0.02') }) + + it('does not restore persisted Dark values when switching to Classic Dark', () => { + const { unmount } = customRender() + + fireEvent.click(screen.getByRole('slider', { name: 'Color intensity' })) + document.documentElement.dataset.theme = 'classic-dark' + unmount() + + expect(document.documentElement.style.getPropertyValue('--chroma')).toBe('') + }) })