diff --git a/apps/design-system/app/layout.tsx b/apps/design-system/app/layout.tsx
index d28af7c710a..3285e99f0ab 100644
--- a/apps/design-system/app/layout.tsx
+++ b/apps/design-system/app/layout.tsx
@@ -21,7 +21,11 @@ export default async function Layout({ children }: RootLayoutProps) {
     <html lang="en" suppressHydrationWarning>
       <head />
       <body className={inter.className}>
-        <ThemeProvider themes={['dark', 'light', 'deep-dark']} defaultTheme="system" enableSystem>
+        <ThemeProvider
+          themes={['dark', 'light', 'classic-dark']}
+          defaultTheme="system"
+          enableSystem
+        >
           <div vaul-drawer-wrapper="">
             <div className="relative flex min-h-screen flex-col bg-background">{children}</div>
           </div>
diff --git a/apps/design-system/components/command-menu.tsx b/apps/design-system/components/command-menu.tsx
index 1276f2db264..a770e33d315 100644
--- a/apps/design-system/components/command-menu.tsx
+++ b/apps/design-system/components/command-menu.tsx
@@ -116,9 +116,9 @@ export function CommandMenu({ ...props }: DialogProps) {
               <MoonIcon className="mr-2 h-4 w-4" strokeWidth={1} />
               Dark
             </CommandItem_Shadcn_>
-            <CommandItem_Shadcn_ onSelect={() => runCommand(() => setTheme('deep-dark'))}>
+            <CommandItem_Shadcn_ onSelect={() => runCommand(() => setTheme('classic-dark'))}>
               <MoonIcon className="mr-2 h-4 w-4" strokeWidth={1} />
-              Deep Dark
+              Classic dark
             </CommandItem_Shadcn_>
             <CommandItem_Shadcn_ onSelect={() => runCommand(() => setTheme('system'))}>
               <LaptopIcon className="mr-2 h-4 w-4" strokeWidth={1} />
diff --git a/apps/design-system/registry/default/example/radio-group-card-with-children.tsx b/apps/design-system/registry/default/example/radio-group-card-with-children.tsx
index 758221a1424..c234a73896d 100644
--- a/apps/design-system/registry/default/example/radio-group-card-with-children.tsx
+++ b/apps/design-system/registry/default/example/radio-group-card-with-children.tsx
@@ -4,7 +4,7 @@ import SVG from 'react-inlinesvg'
 export default function RadioGroupDemo() {
   const singleThemes = [
     { name: 'Dark', value: 'dark' }, // Classic Supabase dark
-    { name: 'Deep Dark', value: 'deep-dark' }, // Deep Dark 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
diff --git a/apps/studio/pages/_app.tsx b/apps/studio/pages/_app.tsx
index ece0531af2c..300e65caea1 100644
--- a/apps/studio/pages/_app.tsx
+++ b/apps/studio/pages/_app.tsx
@@ -167,7 +167,12 @@ function CustomApp({ Component, pageProps }: AppPropsWithLayout) {
                 <PageTelemetry>
                   <TooltipProvider>
                     <RouteValidationWrapper>
-                      <ThemeProvider defaultTheme="system" enableSystem disableTransitionOnChange>
+                      <ThemeProvider
+                        defaultTheme="system"
+                        themes={['dark', 'light', 'classic-dark']}
+                        enableSystem
+                        disableTransitionOnChange
+                      >
                         <AppBannerContextProvider>
                           <CommandMenuWrapper>
                             <AppBannerWrapper>
diff --git a/apps/www/lib/theme.utils.ts b/apps/www/lib/theme.utils.ts
index 184b7b0886b..473078c2b09 100644
--- a/apps/www/lib/theme.utils.ts
+++ b/apps/www/lib/theme.utils.ts
@@ -13,7 +13,7 @@ export function useForceDeepDark() {
   useEffect(() => {
     const handleDocumentLoad = () => {
       // Update the HTML element attributes
-      const theme = forceDarkMode || isDarkTheme ? (isGaSection ? 'deep-dark' : 'dark') : 'light'
+      const theme = forceDarkMode || isDarkTheme ? 'dark' : 'light'
 
       document.documentElement.setAttribute('data-theme', theme)
       document.documentElement.style.colorScheme = theme
diff --git a/apps/www/pages/_app.tsx b/apps/www/pages/_app.tsx
index 9246d163902..ebf7068ebed 100644
--- a/apps/www/pages/_app.tsx
+++ b/apps/www/pages/_app.tsx
@@ -118,7 +118,6 @@ export default function App({ Component, pageProps }: AppProps) {
         <AuthProvider>
           <ThemeProvider
             themes={themes.map((theme) => theme.value)}
-            defaultTheme="system"
             enableSystem
             disableTransitionOnChange
             forcedTheme={forceDarkMode ? 'dark' : undefined}
diff --git a/apps/www/pages/ga-week/tickets/[username].tsx b/apps/www/pages/ga-week/tickets/[username].tsx
index 1e46d014e98..9046d00a0bd 100644
--- a/apps/www/pages/ga-week/tickets/[username].tsx
+++ b/apps/www/pages/ga-week/tickets/[username].tsx
@@ -46,15 +46,15 @@ export default function UsernamePage({ user, ogImageUrl }: Props) {
   const isDark = resolvedTheme?.includes('dark')
   const isDarkTheme = resolvedTheme === 'dark'
 
-  useEffect(() => {
-    isDarkTheme && setTheme('deep-dark')
-  }, [isDarkTheme])
+  // useEffect(() => {
+  //   isDarkTheme && setTheme('deep-dark')
+  // }, [isDarkTheme])
 
-  useEffect(() => {
-    return () => {
-      isDark && setTheme('dark')
-    }
-  }, [])
+  // useEffect(() => {
+  //   return () => {
+  //     isDark && setTheme('dark')
+  //   }
+  // }, [])
 
   if (!ticketNumber) {
     return <Error statusCode={404} />
diff --git a/packages/common/Providers.tsx b/packages/common/Providers.tsx
index a3f7e8aa062..4fc2ff9bfa0 100644
--- a/packages/common/Providers.tsx
+++ b/packages/common/Providers.tsx
@@ -7,7 +7,7 @@ export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
   // @ts-ignore next-themes is old :/
 
   return (
-    <NextThemesProvider {...props} themes={['dark', 'light', 'deep-dark']}>
+    <NextThemesProvider {...props} themes={['dark', 'light']} defaultTheme="dark">
       {children}
     </NextThemesProvider>
   )
diff --git a/packages/ui/build/css/themes/dark-combined.css b/packages/ui/build/css/themes/dark-combined.css
index 5f141c0219e..d88ac21b51e 100644
--- a/packages/ui/build/css/themes/dark-combined.css
+++ b/packages/ui/build/css/themes/dark-combined.css
@@ -1,3 +1,5 @@
+[data-theme='deep-dark'],
+.deep-dark,
 [data-theme='classic-dark'],
 .classic-dark,
 [data-theme='dark'],
diff --git a/packages/ui/build/css/themes/dark.css b/packages/ui/build/css/themes/dark.css
index 7c5491cf268..94c8e953e87 100644
--- a/packages/ui/build/css/themes/dark.css
+++ b/packages/ui/build/css/themes/dark.css
@@ -1,3 +1,5 @@
+[data-theme='deep-dark'],
+.deep-dark,
 [data-theme='dark'],
 .dark {
   --helpers-os-appearance: Dark;
diff --git a/packages/ui/src/components/ThemeProvider/themes.ts b/packages/ui/src/components/ThemeProvider/themes.ts
index c9ca61b5e03..b143628bb5c 100644
--- a/packages/ui/src/components/ThemeProvider/themes.ts
+++ b/packages/ui/src/components/ThemeProvider/themes.ts
@@ -6,6 +6,6 @@ export interface Theme {
 export const themes = [
   { name: 'System', value: 'system' }, // Switches between dark and light
   { name: 'Dark', value: 'dark' }, // Classic Supabase dark
-  { name: 'Deep Dark', value: 'deep-dark' }, // Deep Dark Supabase dark
+  { name: 'Classic dark', value: 'classic-dark' }, // Deep Dark Supabase dark
   { name: 'Light', value: 'light' }, // Classic Supabase light
 ]
diff --git a/packages/ui/transformTokens.js b/packages/ui/transformTokens.js
index 45ee0726d60..f9f2319ef89 100644
--- a/packages/ui/transformTokens.js
+++ b/packages/ui/transformTokens.js
@@ -236,11 +236,18 @@ themeFiles.map(function (filePath, i) {
   fileName = fileName === 'concept-one' ? 'dark' : fileName
 
   const selector = isCombinedDark
-    ? `[data-theme='classic-dark'],
+    ? `[data-theme='deep-dark'],
+.deep-dark,
+[data-theme='classic-dark'],
 .classic-dark,
 [data-theme='dark'],
 .dark`
-    : `[data-theme='${fileName}'],
+    : fileName === 'dark'
+      ? `[data-theme='deep-dark'],
+.deep-dark,
+[data-theme='${fileName}'],
+.${fileName}`
+      : `[data-theme='${fileName}'],
 .${fileName}`
 
   let configTailwindFilesByType = []