Merge PR 49804 Classic Dark fix

# Conflicts:
#	apps/studio/components/interfaces/App/AppearanceSettingsProvider.tsx

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)
     },
     []
   )

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])

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)

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,

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(<ThemeColorSettings />)
+
+    fireEvent.click(screen.getByRole('slider', { name: 'Color intensity' }))
+    document.documentElement.dataset.theme = 'classic-dark'
+    unmount()
+
+    expect(document.documentElement.style.getPropertyValue('--chroma')).toBe('')
+  })
 })