From ba49cd809f8823a1256370e31cb50e0333ecce3e Mon Sep 17 00:00:00 2001
From: Danny White <3104761+dnywh@users.noreply.github.com>
Date: Wed, 16 Sep 2026 14:16:18 +1000
Subject: [PATCH] fix(studio): isolate Classic Dark colour settings

---
 .../Account/Preferences/ThemeColorSettings.tsx        |  5 +++--
 .../interfaces/App/AppearanceSettingsProvider.tsx     |  9 ++-------
 apps/studio/lib/__tests__/theme-overrides.test.ts     | 10 ++++++++++
 apps/studio/lib/theme-overrides.ts                    |  9 +++++++++
 .../Account/Preferences/ThemeColorSettings.test.tsx   | 11 +++++++++++
 5 files changed, 35 insertions(+), 9 deletions(-)

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 7f87b4d0bb7..566cbc93c4f 100644
--- a/apps/studio/components/interfaces/App/AppearanceSettingsProvider.tsx
+++ b/apps/studio/components/interfaces/App/AppearanceSettingsProvider.tsx
@@ -2,7 +2,7 @@ import { useIsomorphicLayoutEffect } from 'common'
 import { useTheme } from 'next-themes'
 
 import { useThemeOverrides } from '@/hooks/misc/useThemeOverrides'
-import { applyThemeOverrides } from '@/lib/theme-overrides'
+import { applyResolvedThemeOverrides } from '@/lib/theme-overrides'
 
 export const AppearanceSettingsProvider = () => {
   const { resolvedTheme } = useTheme()
@@ -10,12 +10,7 @@ export const AppearanceSettingsProvider = () => {
 
   useIsomorphicLayoutEffect(() => {
     if (resolvedTheme === undefined) return
-    if (resolvedTheme === 'classic-dark') {
-      applyThemeOverrides(document.documentElement, 'dark', {})
-      return
-    }
-
-    applyThemeOverrides(document.documentElement, mode, overrides)
+    applyResolvedThemeOverrides(document.documentElement, resolvedTheme, mode, overrides)
   }, [mode, overrides, resolvedTheme])
 
   return null
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(<ThemeColorSettings />)
+
+    fireEvent.click(screen.getByRole('slider', { name: 'Color intensity' }))
+    document.documentElement.dataset.theme = 'classic-dark'
+    unmount()
+
+    expect(document.documentElement.style.getPropertyValue('--chroma')).toBe('')
+  })
 })