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/design-system/components/command-menu.tsx

@@ -108,10 +108,6 @@ export function CommandMenu({ ...props }: DialogProps) {
               <MoonIcon className="mr-2 h-4 w-4" strokeWidth={1} />
               Dark
             </CommandItem>
-            <CommandItem onSelect={() => runCommand(() => setTheme('classic-dark'))}>
-              <MoonIcon className="mr-2 h-4 w-4" strokeWidth={1} />
-              Classic dark
-            </CommandItem>
             <CommandItem onSelect={() => runCommand(() => setTheme('system'))}>
               <LaptopIcon className="mr-2 h-4 w-4" strokeWidth={1} />
               System

apps/design-system/content/docs/theming.mdx

@@ -5,11 +5,10 @@ description: Themes used in Supabase
 
 Design System currently takes into account varying themes.
 
-Themes currently in development:
+Available themes:
 
 - Light
-- Dark (Classic dark)
+- Dark
-- Deep dark
 
 We also support a system theme, which will automatically switch between light and dark themes based on the user's system settings.
 

apps/design-system/registry/default/example/radio-group-card-with-children.tsx

@@ -6,7 +6,6 @@ import { BASE_PATH } from '@/lib/constants'
 export default function RadioGroupDemo() {
   const singleThemes = [
     { name: 'Dark', value: 'dark' }, // Classic Supabase dark
-    { name: 'Classic dark', value: 'classic-dark' }, // Deep Dark Supabase dark
     { name: 'Light', value: 'light' }, // Classic Supabase light
     { name: 'System', value: 'system' }, // Classic Supabase light
   ] as const

apps/design-system/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 '../app/**/*.{js,ts,jsx,tsx}';

apps/docs/styles/globals.css

@@ -1,5 +1,4 @@
 @import 'config/tailwind.config.css';
-@import './../../../packages/ui/build/css/themes/faux-classic-dark.css';
 @import './code-block.css';
 @import './reference.css';
 

apps/learn/components/command-menu.tsx

@@ -96,10 +96,6 @@ export function CommandMenu({ ...props }: DialogProps) {
               <MoonIcon className="mr-2 h-4 w-4" strokeWidth={1} />
               Dark
             </CommandItem>
-            <CommandItem onSelect={() => runCommand(() => setTheme('classic-dark'))}>
-              <MoonIcon className="mr-2 h-4 w-4" strokeWidth={1} />
-              Classic dark
-            </CommandItem>
             <CommandItem onSelect={() => runCommand(() => setTheme('system'))}>
               <LaptopIcon className="mr-2 h-4 w-4" strokeWidth={1} />
               System

apps/learn/styles/globals.css

@@ -1,5 +1,4 @@
 @import 'config/tailwind.config.css';
-@import './../../../packages/ui/build/css/themes/classic-dark.css';
 
 @source '../app/**/*.{ts,tsx}';
 @source './../../../packages/ui/src/**/*.{tsx,ts,js}';
@@ -173,8 +172,7 @@
   --sidebar-ring: hsl(0 0% 70.8%);
 }
 
-[data-theme='dark'] .preview,
+[data-theme='dark'] .preview {
-[data-theme='classic-dark'] .preview {
   --background: hsl(0 0% 14.5%);
   --foreground: hsl(0 0% 98.5%);
   --card: hsl(0 0% 0%);

apps/lite-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 '../app/**/*.{ts,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 {
-  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
+      applyThemeOverrides(document.documentElement, modeRef.current, overridesRef.current)
-      applyResolvedThemeOverrides(root, root.dataset.theme, 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('')
-  })
 })

apps/ui-library/components/command-menu.tsx

@@ -96,10 +96,6 @@ export function CommandMenu({ ...props }: DialogProps) {
               <MoonIcon className="mr-2 h-4 w-4" strokeWidth={1} />
               Dark
             </CommandItem>
-            <CommandItem onSelect={() => runCommand(() => setTheme('classic-dark'))}>
-              <MoonIcon className="mr-2 h-4 w-4" strokeWidth={1} />
-              Classic dark
-            </CommandItem>
             <CommandItem onSelect={() => runCommand(() => setTheme('system'))}>
               <LaptopIcon className="mr-2 h-4 w-4" strokeWidth={1} />
               System

apps/ui-library/styles/globals.css

@@ -1,5 +1,4 @@
 @import 'config/tailwind.config.css';
-@import './../../../packages/ui/build/css/themes/classic-dark.css';
 
 @source '../app/**/*.{js,ts,jsx,tsx}';
 @source '../components/**/*.{js,ts,jsx,tsx}';
@@ -71,8 +70,7 @@
     --sidebar-ring: hsl(0 0% 70.8%);
   }
 
-  [data-theme='dark'],
+  [data-theme='dark'] {
-  [data-theme='classic-dark'] {
     --background: hsl(0 0% 14.5%);
     --foreground: hsl(0 0% 98.5%);
     --card: hsl(0 0% 0%);

apps/www/styles/globals.css

@@ -1,5 +1,4 @@
 @import 'config/tailwind.config.css';
-@import './../../../packages/ui/build/css/themes/faux-classic-dark.css';
 
 @source '../_blog/*.mdx';
 @source '../components/**/*.tsx';

packages/common/Providers.tsx

@@ -1,16 +1,32 @@
 'use client'
 
-import { ThemeProvider as NextThemesProvider, type ThemeProviderProps } from 'next-themes'
+import { ThemeProvider as NextThemesProvider, useTheme, type ThemeProviderProps } from 'next-themes'
+import { useEffect } from 'react'
+
+import { migrateLegacyTheme, THEME_DOM_VALUES } from './theme'
+
+function LegacyThemeMigration() {
+  const { theme, setTheme } = useTheme()
+
+  useEffect(() => {
+    const migratedTheme = migrateLegacyTheme(theme)
+    if (migratedTheme !== theme && migratedTheme !== undefined) setTheme(migratedTheme)
+  }, [setTheme, theme])
+
+  return null
+}
 
 export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
   return (
     <NextThemesProvider
-      themes={['dark', 'light', 'classic-dark']}
+      themes={['dark', 'light']}
+      value={THEME_DOM_VALUES}
       defaultTheme="system"
       enableSystem
       disableTransitionOnChange
       {...props}
     >
+      <LegacyThemeMigration />
       {children}
     </NextThemesProvider>
   )

packages/common/theme.test.ts

@@ -0,0 +1,17 @@
+import { describe, expect, it } from 'vitest'
+
+import { migrateLegacyTheme, THEME_DOM_VALUES } from './theme'
+
+it('renders the legacy preference as Dark before migration', () => {
+  expect(THEME_DOM_VALUES['classic-dark']).toBe('dark')
+})
+
+describe('migrateLegacyTheme', () => {
+  it('migrates Classic Dark to Dark', () => {
+    expect(migrateLegacyTheme('classic-dark')).toBe('dark')
+  })
+
+  it.each(['dark', 'light', 'system', undefined])('leaves %s unchanged', (theme) => {
+    expect(migrateLegacyTheme(theme)).toBe(theme)
+  })
+})

packages/common/theme.ts

@@ -0,0 +1,9 @@
+export const THEME_DOM_VALUES = {
+  dark: 'dark',
+  light: 'light',
+  'classic-dark': 'dark',
+}
+
+export function migrateLegacyTheme(theme: string | undefined) {
+  return theme === 'classic-dark' ? 'dark' : theme
+}

packages/ui-patterns/src/CommandMenu/prepackaged/ThemeSwitcher.test.tsx

@@ -245,6 +245,5 @@ describe('useThemeSwitcherCommands', () => {
       'Dark theme, Dark mode',
       'Light theme, Light mode',
     ])
-    expect(pageCommands.some((command) => command.name === 'Classic dark')).toBe(false)
   })
 })

packages/ui/build/css/themes/classic-dark.css

@@ -1,40 +0,0 @@
-[data-theme='classic-dark'],
-.classic-dark {
-  --helpers-os-appearance: Dark;
-  --hue: 159;
-  --chroma: 0.014;
-  --surface: 0.205;
-  --foreground-lightness: 0.97;
-  --muted-foreground-level: 0.72;
-  --tertiary-foreground-level: 0.52;
-
-  --code-block-5: 13.8deg 89.7% 69.6%;
-  --code-block-4: 276.1deg 67.7% 74.5%;
-  --code-block-3: 83.8deg 61.7% 63.1%;
-  --code-block-2: 33.2deg 90.3% 75.7%;
-  --code-block-1: 170.8deg 43.1% 61.4%;
-
-  /* Stepped numeric scales (per-theme literals; mapped in theme.css) */
-  --secondary-default: 0deg 0% 100%;
-  --secondary-400: 0deg 0% 100%;
-  --secondary-200: 0deg 0% 100%;
-  --brand-link: 153.1deg 60.2% 52.7%;
-  --brand-default: 153.1deg 60.2% 52.7%;
-  --brand-600: 153deg 59.5% 70%;
-  --brand-500: 153.5deg 61.8% 21.6%;
-  --brand-400: 153.3deg 65.2% 13.5%;
-  --brand-300: 153.8deg 69.6% 9%;
-  --brand-200: 152.5deg 75% 6.3%;
-  --warning-default: 38.9deg 100% 57.1%;
-  --warning-600: 38.9deg 89.8% 49.8%;
-  --warning-500: 34.8deg 90.9% 21.6%;
-  --warning-400: 33.2deg 100% 14.5%;
-  --warning-300: 32.3deg 100% 10.2%;
-  --warning-200: 36.8deg 100% 6.1%;
-  --destructive-default: 10.2deg 77.9% 53.9%;
-  --destructive-600: 9.7deg 85.2% 62.9%;
-  --destructive-500: 7.9deg 71.6% 29%;
-  --destructive-400: 6.7deg 60% 20.6%;
-  --destructive-300: 7.5deg 51.3% 15.3%;
-  --destructive-200: 10.9deg 23.4% 9.2%;
-}

packages/ui/build/css/themes/faux-classic-dark.css

@@ -1,44 +0,0 @@
-/*
- * This theme intentionally follows the standard dark theme. It exists for
- * apps that expose a classic-dark selector but only ship light/dark imagery.
- */
-[data-theme='classic-dark'],
-.classic-dark {
-  --helpers-os-appearance: Dark;
-  --hue: 159;
-  --chroma: 0.018;
-  --surface: 0.16;
-  --foreground-lightness: 0.985;
-  --muted-foreground-level: 0.72;
-  --tertiary-foreground-level: 0.52;
-
-  --code-block-5: 13.8deg 89.7% 69.6%;
-  --code-block-4: 276.1deg 67.7% 74.5%;
-  --code-block-3: 83.8deg 61.7% 63.1%;
-  --code-block-2: 33.2deg 90.3% 75.7%;
-  --code-block-1: 170.8deg 43.1% 61.4%;
-
-  /* Stepped numeric scales (per-theme literals; mapped in theme.css) */
-  --secondary-default: 247.8deg 100% 70%;
-  --secondary-400: 248.3deg 54.5% 25.9%;
-  --secondary-200: 248deg 53.6% 11%;
-  --brand-link: 155deg 100% 38.6%;
-  --brand-default: 153.1deg 60.2% 52.7%;
-  --brand-600: 154.9deg 59.5% 70%;
-  --brand-500: 154.9deg 100% 19.2%;
-  --brand-400: 155.5deg 100% 9.6%;
-  --brand-300: 155.1deg 100% 8%;
-  --brand-200: 162deg 100% 2%;
-  --warning-default: 38.9deg 100% 42.9%;
-  --warning-600: 38.9deg 100% 42.9%;
-  --warning-500: 34.8deg 90.9% 21.6%;
-  --warning-400: 33.2deg 100% 14.5%;
-  --warning-300: 32.3deg 100% 10.2%;
-  --warning-200: 36.6deg 100% 8%;
-  --destructive-default: 10.2deg 77.9% 53.9%;
-  --destructive-600: 9.7deg 85.2% 62.9%;
-  --destructive-500: 7.9deg 71.6% 29%;
-  --destructive-400: 6.7deg 60% 20.6%;
-  --destructive-300: 7.5deg 51.3% 15.3%;
-  --destructive-200: 10.9deg 23.4% 9.2%;
-}

packages/ui/src/components/ThemeProvider/singleThemes.ts

@@ -7,5 +7,4 @@ export const singleThemes = [
   { name: 'System', value: 'system' }, // Classic Supabase light
   { name: 'Dark', value: 'dark' }, // Classic Supabase dark
   { name: 'Light', value: 'light' }, // Classic Supabase light
-  { name: 'Classic Dark', value: 'classic-dark' }, // Deep Dark Supabase dark
 ]