chore(ui): remove the Classic Dark theme (#50387)

## What kind of change does this PR introduce?

Chore.

## What is the current behaviour?

Classic Dark remains available across the shared theme library and
several apps. Studio now supports System, Dark, and Light as its theme
modes, but still carries compatibility paths for Classic Dark.

## What is the new behaviour?

- Removes Classic Dark from shared theme options, application commands,
stylesheets, previews, examples, and replay handling.
- Deletes the Classic Dark and faux Classic Dark stylesheets.
- Removes the now-unused Classic Dark branches from Studio theme colour
controls.
- Migrates `classic-dark` to `dark` so first rendered frame renders Dark
(not Light)

| After |
| --- |
| <img width="1458" height="1778" alt="CleanShot 2026-09-18 at 11 07
40@2x"
src="https://github.com/user-attachments/assets/679bf87f-a3c1-4599-ad2f-292d98d0b856"
/> |

## To test

1. In Studio, open Account Preferences → Appearance. Confirm the
available themes are System, Dark, and Light, and that theme colour
controls still work in each resolved mode.
2. Set the `theme` local storage value to `classic-dark`, then reload
Studio. Confirm it renders as Dark immediately and the stored value
becomes `dark`.
3. Open the theme switcher in Design System, Learn, and UI Library.
Confirm Classic Dark is no longer available and Light, Dark, and System
still apply correctly.


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

* **Changes**
* Removed the Classic Dark theme option from theme menus and settings
across the application.
* Classic Dark selections are automatically migrated to the standard
Dark theme.
* Updated theme documentation and demonstrations to list only System,
Light, and Dark.
* Removed Classic Dark styling and preview support; existing Dark,
Light, and System themes remain available.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

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 {
-  applyResolvedThemeOverrides,
+  applyThemeOverrides,
   getThemeOverrideValue,
   hasThemeOverrides,
   previewThemeOverride,
@@ -14,7 +14,7 @@ import {
   themeOverrideToSliderValue,
 } from '@/lib/theme-overrides'
 
-export const ThemeColorSettings = ({ isVisible = true }: { isVisible?: boolean }) => {
+export const ThemeColorSettings = () => {
   const { mode, overrides, setOverride, resetOverrides } = useThemeOverrides()
   const [draft, setDraft] = useState<ThemeOverrides>({})
   const draftRef = useRef<ThemeOverrides>({})
@@ -33,8 +33,7 @@ export const ThemeColorSettings = ({ isVisible = true }: { isVisible?: boolean }
 
   useEffect(
     () => () => {
-      const root = document.documentElement
-      applyResolvedThemeOverrides(root, root.dataset.theme, modeRef.current, overridesRef.current)
+      applyThemeOverrides(document.documentElement, modeRef.current, overridesRef.current)
     },
     []
   )
@@ -56,8 +55,6 @@ export const ThemeColorSettings = ({ isVisible = true }: { isVisible?: boolean }
     [setOverride, writeDraft]
   )
 
-  if (!isVisible) return null
-
   return (
     <CardContent className="grid grid-cols-12 gap-6">
       <div className="col-span-full md:col-span-4 flex flex-col gap-2">

apps/studio/components/interfaces/Account/Preferences/ThemeSettings.tsx

@@ -112,7 +112,7 @@ export const ThemeSettings = () => {
               <SingleThemeSelection theme={theme} setTheme={setTheme} />
             </div>
           </CardContent>
-          <ThemeColorSettings isVisible={theme !== 'classic-dark'} />
+          <ThemeColorSettings />
           <CardContent>
             <FormItemLayout
               isReactForm={false}

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 { applyResolvedThemeOverrides } from '@/lib/theme-overrides'
+import { applyThemeOverrides } from '@/lib/theme-overrides'
 
 export const AppearanceSettingsProvider = () => {
   const { resolvedTheme } = useTheme()
@@ -10,7 +10,7 @@ export const AppearanceSettingsProvider = () => {
 
   useIsomorphicLayoutEffect(() => {
     if (resolvedTheme === undefined) return
-    applyResolvedThemeOverrides(document.documentElement, resolvedTheme, mode, overrides)
+    applyThemeOverrides(document.documentElement, mode, overrides)
   }, [mode, overrides, resolvedTheme])
 
   return null

apps/studio/lib/__tests__/theme-overrides.test.ts

@@ -1,7 +1,6 @@
 import { describe, expect, it } from 'vitest'
 
 import {
-  applyResolvedThemeOverrides,
   applyThemeOverrides,
   clearThemeOverridesForMode,
   getThemeOverrideRange,
@@ -142,15 +141,6 @@ 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)
@@ -158,7 +148,6 @@ describe('theme override application', () => {
 
   it('resolves classic dark as dark for legacy stored themes', () => {
     expect(resolveThemeOverrideMode('dark')).toBe('dark')
-    expect(resolveThemeOverrideMode('classic-dark')).toBe('dark')
     expect(resolveThemeOverrideMode('light')).toBe('light')
     expect(resolveThemeOverrideMode(undefined)).toBe('light')
   })

apps/studio/lib/session-replay.test.ts

@@ -314,7 +314,7 @@ describe('maskReplayAttribute', () => {
     expect(maskReplayAttribute(name, value)).toBe(value)
   })
 
-  it.each(['dark', 'light', 'classic-dark', 'system'])(
+  it.each(['dark', 'light', 'system'])(
     'keeps data-theme=%o, which monaco.css and grid.css select on',
     (theme) => {
       expect(maskReplayAttribute('data-theme', theme)).toBe(theme)

apps/studio/lib/session-replay.ts

@@ -343,7 +343,7 @@ const RENDER_CRITICAL_ATTRIBUTES = new Set([
  * from the SQL editor and the data grid. Gated on the value so the attribute cannot
  * carry anything else.
  */
-const THEME_VALUES = new Set(['dark', 'light', 'classic-dark', 'system'])
+const THEME_VALUES = new Set(['dark', 'light', 'system'])
 
 /**
  * SVG presentation attributes that take either a plain value (`fill="#fff"`) or a

apps/studio/lib/theme-overrides.ts

@@ -195,15 +195,6 @@ 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/styles/globals.css

@@ -1,5 +1,4 @@
 @import 'config/tailwind.config.css';
-@import './../../../packages/ui/build/css/themes/classic-dark.css';
 @import 'config/typography.css';
 
 @source '../pages/**/*.{js,ts,jsx,tsx}';

apps/studio/tests/components/interfaces/Account/Preferences/ThemeColorSettings.test.tsx

@@ -4,7 +4,6 @@ import type * as UI from 'ui'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 
 import { ThemeColorSettings } from '@/components/interfaces/Account/Preferences/ThemeColorSettings'
-import { applyResolvedThemeOverrides } from '@/lib/theme-overrides'
 import { customRender } from '@/tests/lib/custom-render'
 
 type SliderProps = ComponentProps<typeof UI.Slider>
@@ -88,14 +87,4 @@ describe('ThemeColorSettings', () => {
 
     expect(document.documentElement.style.getPropertyValue('--chroma')).toBe('0.02')
   })
-
-  it('does not restore persisted Dark values when switching to Classic Dark', () => {
-    const { rerender } = customRender(<ThemeColorSettings />)
-
-    fireEvent.click(screen.getByRole('slider', { name: 'Color intensity' }))
-    applyResolvedThemeOverrides(document.documentElement, 'classic-dark', 'dark', { chroma: 0.02 })
-    rerender(<ThemeColorSettings isVisible={false} />)
-
-    expect(document.documentElement.style.getPropertyValue('--chroma')).toBe('')
-  })
 })