Multiple themes management (#18871)

* set up multiple themes in studio

* set up multiple themes in studio

* set up multiple themes in docs and www

* update all resolvedTheme to also include deep-dark

* update all resolvedTheme checks to also include deep-dark

* update tailwind.config.js tokens

* update tailwind.config.js tokens

* update leftover scale12 token

* update if resolvedTheme _doesn't_ include 'dark'

* update more styling tokens

* add dynamic themes to CmdK

* fix nav and footer for multi theme

* add data-theme selector output to transformTokens.js

* update code-hike.css to target data-theme css

* update tailwindcss to ^3.3.5

* ThemeImage with light and dark src for www and docs

* add brand-button styling token

* update old dark theme boolean

* update old dark theme boolean

* make homepage product visuals themeable

* update product page themed images

* update badge green with brand

* fix roles list appearance

* fix auth widget in auth page

* update more dark logic

* update more dark logic

* add button default bg and border

* update pricing page theme styling

* clean up Themeimage

* remove forceDark in homepage

* update dark:border-dark occurrences

* update dark:border-dark occurrences

* fix dark mode base colors

* remove foreground-strong

* fix notification badge bg

* remove some dark: selectors

* update dark: selectors

* update code-hike deep dark bg color

* fix comment typo

* update border-button-hover token

* fix customer story logo

* remove some more dark: selectors

* restore forceDark in www homepage

* fix auth react icon

* fix homepage product visuals

* remove theme

* add brand-link token

* fix checkbox bg

* npm install

* more visible EntityListItem active bg

* fix --background-alternative-default css vars

---------

Co-authored-by: Jonathan Summers-Muir <MildTomato@users.noreply.github.com>

apps/docs/components/Frameworks.tsx

@@ -110,7 +110,7 @@ const Frameworks = () => {
             layout="horizontal"
             to={x.href}
             title={x.name}
-            icon={resolvedTheme === 'dark' ? x.logo.dark : x.logo.light}
+            icon={resolvedTheme?.includes('dark') ? x.logo.dark : x.logo.light}
           />
         </div>
       ))}

apps/docs/components/GuidesTableOfContents.tsx

@@ -46,7 +46,7 @@ const GuidesTableOfContents: FC<Props> = ({ list }) => {
         <li key={`${item.level}-${i}`} className={item.level === 3 ? 'ml-4' : ''}>
           <a
             href={`#${formatSlug(item.link)}`}
-            className="text-foreground-lighter hover:text-brand transition-colors"
+            className="text-foreground-lighter hover:text-brand-link transition-colors"
             dangerouslySetInnerHTML={{ __html: formatTOCHeader(removeAnchor(item.text)) }}
           />
         </li>

apps/docs/components/HomePageCover.tsx

@@ -76,7 +76,7 @@ const HomePageCover = (props) => {
             <IconBackground>
               <IconPlay className="text-brand w-4" strokeWidth={2} />
             </IconBackground>
-            <h3 className="text-2xl m-0">Getting Started</h3>
+            <h3 className="text-2xl m-0 text-foreground">Getting Started</h3>
           </div>
           <p className="text-foreground-light text-sm">
             Discover how to set up a database to an app making queries in just a few minutes.
@@ -99,12 +99,12 @@ const HomePageCover = (props) => {
   )
 
   return (
-    <div className="w-full bg-alternative border-b prose dark:prose-dar max-w-none mb-16 md:mb-12 xl:mb-0">
+    <div className="w-full bg-alternative border-b max-w-none mb-16 md:mb-12 xl:mb-0">
       <div className="max-w-7xl px-5 mx-auto py-8 sm:pb-16 sm:pt-12 xl:pt-16 flex flex-col xl:flex-row justify-between gap-12 xl:gap-12">
         <div className="flex flex-col sm:flex-row gap-4 sm:gap-8 items-start sm:items-center w-full max-w-xl xl:max-w-[33rem]">
           <DocsCoverLogo />
           <div className="flex flex-col">
-            <h1 className="m-0 mb-3 text-2xl sm:text-3xl">{props.meta?.title}</h1>
+            <h1 className="m-0 mb-3 text-2xl sm:text-3xl text-foreground">{props.meta?.title}</h1>
             <p className="m-0 text-foreground-light">
               Learn how to get up and running with Supabase through tutorials, APIs and platform
               resources.

apps/docs/components/Navigation/Footer.tsx

@@ -30,7 +30,7 @@ const Footer = () => (
             <p>{text}</p>
             <Link
               href={url}
-              className="text-brand hover:underline"
+              className="text-brand-link hover:underline"
               target="_blank"
               rel="noreferrer noopener"
             >

apps/docs/components/Navigation/NavigationMenu/NavigationMenuGuideListItems.tsx

@@ -69,7 +69,7 @@ const ContentAccordionLink = React.memo(function ContentAccordionLink(props: any
               'cursor-pointer transition text-sm',
               activeItem
                 ? 'text-brand font-medium'
-                : 'hover:text-foreground dark:hover:text-foreground-light text-foreground-lighter',
+                : 'hover:text-foreground text-foreground-lighter',
             ].join(' ')}
             parent={props.subItem.parent}
           >
@@ -78,7 +78,7 @@ const ContentAccordionLink = React.memo(function ContentAccordionLink(props: any
                 alt={props.subItem.name + router.basePath}
                 src={
                   `${router.basePath}` +
-                  `${props.subItem.icon}${resolvedTheme !== 'dark' ? '-light' : ''}.svg`
+                  `${props.subItem.icon}${!resolvedTheme?.includes('dark') ? '-light' : ''}.svg`
                 }
                 width={15}
                 height={15}
@@ -124,8 +124,8 @@ const ContentLink = React.memo(function ContentLink(props: any) {
         className={[
           'cursor-pointer transition text-sm',
           props.url === router.asPath
-            ? 'text-brand'
-            : 'hover:text-foreground dark:hover:text-foreground-light text-foreground-lighter',
+            ? 'text-brand-link'
+            : 'hover:text-foreground text-foreground-lighter',
         ].join(' ')}
       >
         {props.icon && (
@@ -146,7 +146,7 @@ const Content = (props) => {
         href={`${menu.parent ?? '/'}`}
         className={[
           'flex items-center gap-1 text-xs group mb-3',
-          'text-base transition-all duration-200 text-brand hover:text-brand-600 hover:cursor-pointer ',
+          'text-base transition-all duration-200 text-brand-link hover:text-brand-600 hover:cursor-pointer ',
         ].join(' ')}
       >
         <div className="relative w-2">
@@ -158,7 +158,7 @@ const Content = (props) => {
       </Link>
 
       <Link href={menu.url ?? ''}>
-        <div className="flex items-center gap-3 my-3 text-brand">
+        <div className="flex items-center gap-3 my-3 text-brand-link">
           <HomeMenuIconPicker icon={menu.icon} />
           <HeaderLink title={menu.title} url={menu.url} id={id} />
         </div>

apps/docs/components/Navigation/NavigationMenu/NavigationMenuRefListItems.tsx

@@ -151,7 +151,7 @@ const SideMenuTitle = ({ title }: { title: string }) => {
 }
 
 const Divider = () => {
-  return <div className="h-px w-full bg-blackA-300 dark:bg-whiteA-300 my-3"></div>
+  return <div className="h-px w-full bg-control my-3"></div>
 }
 
 interface NavigationMenuRefListItemsProps {

apps/docs/components/Navigation/NavigationMenu/TopNavBar.tsx

@@ -59,13 +59,15 @@ const TopNavBar: FC = () => {
             <Image
               className="cursor-pointer"
               src={
-                resolvedTheme === 'dark' ? '/docs/supabase-dark.svg' : '/docs/supabase-light.svg'
+                resolvedTheme?.includes('dark')
+                  ? '/docs/supabase-dark.svg'
+                  : '/docs/supabase-light.svg'
               }
               width={96}
               height={24}
               alt="Supabase Logo"
             />
-            <span className="font-mono text-sm font-medium text-brand">DOCS</span>
+            <span className="font-mono text-sm font-medium text-brand-link">DOCS</span>
           </Link>
         </div>
 

apps/docs/components/Navigation/SideBar.tsx

@@ -80,7 +80,7 @@ const SideBar = ({ menuItems = [] }: { menuItems: any }) => {
                   'py-1.5 px-5 rounded text-sm transition',
                   `${
                     item.url === asPath
-                      ? 'bg-background text-brand'
+                      ? 'bg-background text-brand-link'
                       : 'text-foreground-light hover:text-foreground'
                   }`,
                 ].join(' ')}

apps/docs/components/index.tsx

@@ -32,7 +32,7 @@ import CliGlobalFlagsHandler from '~/components/reference/enrichments/cli/CliGlo
 import Options from '~/components/Options'
 import Param from '~/components/Params'
 
-import { Admonition } from 'ui'
+import { Admonition, ThemeImage } from 'ui'
 import {
   IconMenuJavascript,
   IconMenuHome,
@@ -102,6 +102,7 @@ const components = {
       {props.children}
     </Heading>
   ),
+  Image: (props: any) => <ThemeImage fill className="object-contain" {...props} />,
   RefSubLayout,
   RefHeaderSection: (props: any) => <RefHeaderSection {...props} />,
   CliGlobalFlagsHandler: () => <CliGlobalFlagsHandler />,

apps/docs/components/reference/ApiOperationSection.tsx

@@ -33,7 +33,7 @@ const ApiOperationSection = (props) => {
             {operation.path}
           </code>
         </div>
-        <div className="prose dark:prose-dark py-4">
+        <div className="prose py-4">
           <p>{operation.description}</p>
         </div>
         {/* Path Parameters */}

apps/docs/layouts/DefaultLayout.tsx

@@ -62,7 +62,7 @@ const Layout: FC<Props> = (props: Props) => {
       />
       <LayoutMainContent>
         <div className={['relative transition-all ease-out', 'duration-150 '].join(' ')}>
-          <article className="prose dark:prose-dar max-w-none">
+          <article className="prose max-w-none">
             <h1>{props.meta.title}</h1>
             <MDXProvider components={components}>{props.children}</MDXProvider>
           </article>

apps/docs/layouts/HomeLayout.tsx

@@ -64,7 +64,7 @@ const HomeLayout: FC<Props> = (props: Props) => {
       <HomePageCover meta={props.meta} />
       <LayoutMainContent>
         <div className={['relative transition-all ease-out', 'duration-150 '].join(' ')}>
-          <article className="prose dark:prose-dar max-w-none">
+          <article className="prose max-w-none">
             <MDXProvider components={components}>{props.children}</MDXProvider>
           </article>
         </div>

apps/docs/layouts/SiteLayout.tsx

@@ -238,12 +238,14 @@ const HeaderLogo = memo(function HeaderLogo() {
     <Link href="/" className="px-10 flex items-center gap-2">
       <Image
         className="cursor-pointer"
-        src={resolvedTheme === 'dark' ? '/docs/supabase-dark.svg' : '/docs/supabase-light.svg'}
+        src={
+          resolvedTheme?.includes('dark') ? '/docs/supabase-dark.svg' : '/docs/supabase-light.svg'
+        }
         width={96}
         height={24}
         alt="Supabase Logo"
       />
-      <span className="font-mono text-sm font-medium text-brand">DOCS</span>
+      <span className="font-mono text-sm font-medium text-brand-link">DOCS</span>
     </Link>
   )
 })

apps/docs/layouts/guides/index.tsx

@@ -121,7 +121,7 @@ const Layout: FC<Props> = (props) => {
               ref={articleRef}
               className={`${
                 props.meta?.hide_table_of_contents || !hasTableOfContents ? '' : ''
-              } prose dark:prose-dark max-w-none`}
+              } prose max-w-none`}
             >
               <h1 className="mb-0">{props.meta.title}</h1>
               {props.meta.subtitle && (

apps/docs/layouts/ref/RefSubLayout.tsx

@@ -65,7 +65,7 @@ const Section: FC<PropsWithChildren<ISectionContainer>> = (props) => {
     <article
       key={props.id + 'section'}
       className={[
-        props.singleColumn ? 'prose dark:prose-dark w-full' : 'w-full',
+        props.singleColumn ? 'prose w-full' : 'w-full',
         'py-16 lg:py-32 first:pt-8 last:pb-8',
       ].join(' ')}
     >
@@ -161,7 +161,7 @@ const EducationSection: FC<PropsWithChildren<IEducationSection>> = ({
   return (
     <article
       key={props.id + 'education'}
-      className={'prose dark:prose-dark max-w-none py-16 lg:py-32 first:pt-8 last:pb-8'}
+      className={'prose max-w-none py-16 lg:py-32 first:pt-8 last:pb-8'}
     >
       {!hideTitle && <StickyHeader {...props} icon={icon} />}
       {props.children}

apps/docs/layouts/ref/RefSubLayoutNonFunc.tsx

@@ -39,9 +39,7 @@ const Section: FC<PropsWithChildren<ISectionContainer>> = (props) => {
   return (
     <article
       key={props.id}
-      className={`${
-        props.singleColumn ? 'prose dark:prose-dark py-16 lg:py-32 ' : 'py-16 lg:py-32'
-      }`}
+      className={`${props.singleColumn ? 'prose py-16 lg:py-32 ' : 'py-16 lg:py-32'}`}
     >
       <StickyHeader {...props} />
       <div

apps/docs/layouts/tutorials/TutorialLayout.tsx

@@ -62,7 +62,7 @@ const Layout: FC<Props> = (props: Props) => {
       >
         <div>
           <p className="text-brand tracking-wider">Tutorials</p>
-          <article className={['prose dark:prose-dark ', 'max-w-none'].join(' ')}>
+          <article className={['prose', 'max-w-none'].join(' ')}>
             <h1>{props.meta.title}</h1>
             <div className="max-w-xs w-32 h-[1px] bg-gradient-to-r from-brand-300 to-brand my-16"></div>
 

apps/docs/pages/_app.tsx

@@ -1,9 +1,6 @@
-import '../../../packages/ui/build/css/themes/dark.css'
-import '../../../packages/ui/build/css/themes/light.css'
-
 import '@code-hike/mdx/styles'
 import 'config/code-hike.scss'
-import '../styles/main.scss?v=1.0.0'
+import '../styles/main.scss'
 import '../styles/new-docs.scss'
 import '../styles/prism-okaidia.scss'
 
@@ -161,12 +158,7 @@ function MyApp({ Component, pageProps }: AppPropsWithLayout) {
     <>
       <Favicons />
       <AuthContainer>
-        <ThemeProvider
-          attribute="class"
-          defaultTheme="system"
-          enableSystem
-          disableTransitionOnChange
-        >
+        <ThemeProvider defaultTheme="system" enableSystem disableTransitionOnChange>
           <CommandMenuProvider site="docs">
             <TabsProvider>
               <SiteLayout>

apps/docs/pages/guides/ai/choosing-compute-addon.mdx

@@ -125,15 +125,12 @@ It is possible to upload more vectors to a single table if Memory allows it (for
 </Admonition>
 
 <div>
-  <img
+  <Image
     alt="multi database"
-    className="dark:hidden"
-    src="/docs/img/ai/instance-type/hnsw-dims--light.png"
-  />
-  <img
-    alt="multi database"
-    className="hidden dark:block"
-    src="/docs/img/ai/instance-type/hnsw-dims--dark.png"
+    src={{
+      light: '/docs/img/ai/instance-type/hnsw-dims--light.png',
+      dark: '/docs/img/ai/instance-type/hnsw-dims--dark.png',
+    }}
   />
 </div>
 
@@ -263,15 +260,12 @@ For 1,000,000 vectors 40 probes results to accuracy of 0.98. Note that exact val
 </Tabs>
 
 <div>
-  <img
+  <Image
     alt="multi database"
-    className="dark:hidden"
-    src="/docs/img/ai/going-prod/size-to-rps--light.png"
-  />
-  <img
-    alt="multi database"
-    className="hidden dark:block"
-    src="/docs/img/ai/going-prod/size-to-rps--dark.png"
+    src={{
+      light: '/docs/img/ai/going-prod/size-to-rps--light.png',
+      dark: '/docs/img/ai/going-prod/size-to-rps--dark.png',
+    }}
   />
 </div>
 
@@ -303,30 +297,24 @@ You can increase the Requests per Second by increasing `m` and `ef_construction`
 <TabPanel id="hnsw" label="HNSW">
 
 <div>
-  <img
-    alt="dbpedia embeddings comparing hnsw queries-per-second using different build parameters (light)"
-    className="dark:hidden"
-    src="/docs/img/ai/going-prod/dbpedia-hnsw-build-parameters--light.png"
-  />
-  <img
-    alt="dbpedia embeddings comparing hnsw queries-per-second using different build parameters (dark)"
-    className="hidden dark:block"
-    src="/docs/img/ai/going-prod/dbpedia-hnsw-build-parameters--dark.png"
+  <Image
+    alt="multi database"
+    src={{
+      light: '/docs/img/ai/going-prod/dbpedia-hnsw-build-parameters--light.png',
+      dark: '/docs/img/ai/going-prod/dbpedia-hnsw-build-parameters--dark.png',
+    }}
   />
 </div>
 
 </TabPanel>
 <TabPanel id="ivfflat" label="IVFFlat">
 <div>
-  <img
+  <Image
     alt="multi database"
-    className="dark:hidden"
-    src="/docs/img/ai/instance-type/lists-for-1m--light.png"
-  />
-  <img
-    alt="multi database"
-    className="hidden dark:block"
-    src="/docs/img/ai/instance-type/lists-for-1m--dark.png"
+    src={{
+      light: '/docs/img/ai/instance-type/lists-for-1m--light.png',
+      dark: '/docs/img/ai/instance-type/lists-for-1m--dark.png',
+    }}
   />
 </div>
 </TabPanel>
@@ -339,15 +327,12 @@ Check out more tips and the complete step-by-step guide in [Going to Production
 We follow techniques outlined in the [ANN Benchmarks](https://github.com/erikbern/ann-benchmarks) methodology. A Python test runner is responsible for uploading the data, creating the index, and running the queries. The pgvector engine is implemented using [vecs](https://github.com/supabase/vecs), a Python client for pgvector.
 
 <div>
-  <img
+  <Image
     alt="multi database"
-    className="dark:hidden"
-    src="/docs/img/ai/instance-type/vecs-benchmark--light.png"
-  />
-  <img
-    alt="multi database"
-    className="hidden dark:block"
-    src="/docs/img/ai/instance-type/vecs-benchmark--dark.png"
+    src={{
+      light: '/docs/img/ai/instance-type/vecs-benchmark--light.png',
+      dark: '/docs/img/ai/instance-type/vecs-benchmark--dark.png',
+    }}
   />
 </div>
 

apps/docs/pages/guides/ai/engineering-for-scale.mdx

@@ -17,15 +17,12 @@ For small workloads, it's typical to store your data in a single database.
 If you've used [Vecs](/docs/guides/ai/vecs-python-client) to create 3 different collections, you can expose collections to your web or mobile application using [views](/docs/guides/database/tables#views):
 
 <div>
-  <img
+  <Image
     alt="single database"
-    className="dark:hidden"
-    src="/docs/img/ai/scaling/engineering-for-scale--single-database--light.png"
-  />
-  <img
-    alt="single database"
-    className="hidden dark:block"
-    src="/docs/img/ai/scaling/engineering-for-scale--single-database--dark.png"
+    src={{
+      light: '/docs/img/ai/scaling/engineering-for-scale--single-database--light.png',
+      dark: '/docs/img/ai/scaling/engineering-for-scale--single-database--dark.png',
+    }}
   />
 </div>
 
@@ -56,15 +53,12 @@ const { data, error } = await supabase
 As you move into production, we recommend splitting your collections into separate projects. This is because it allows your vector stores to scale independently of your production data. Vectors typically grow faster than operational data, and they have different resource requirements. Running them on separate databases removes the single-point-of-failure.
 
 <div>
-  <img
+  <Image
     alt="With secondaries"
-    className="dark:hidden"
-    src="/docs/img/ai/scaling/engineering-for-scale--with-secondaries--light.png"
-  />
-  <img
-    alt="With secondaries"
-    className="hidden dark:block"
-    src="/docs/img/ai/scaling/engineering-for-scale--with-secondaries--dark.png"
+    src={{
+      light: '/docs/img/ai/scaling/engineering-for-scale--with-secondaries--light.png',
+      dark: '/docs/img/ai/scaling/engineering-for-scale--with-secondaries--dark.png',
+    }}
   />
 </div>
 
@@ -143,15 +137,12 @@ const { data, error } = await supabase
 This diagram provides an example architecture that allows you to access the collections either with our client libraries or using Vecs. You can add as many secondary databases as you need (in this example we only show one):
 
 <div>
-  <img
+  <Image
     alt="multi database"
-    className="dark:hidden"
-    src="/docs/img/ai/scaling/engineering-for-scale--multi-database--light.png"
-  />
-  <img
-    alt="multi database"
-    className="hidden dark:block"
-    src="/docs/img/ai/scaling/engineering-for-scale--multi-database--dark.png"
+    src={{
+      light: '/docs/img/ai/scaling/engineering-for-scale--multi-database--light.png',
+      dark: '/docs/img/ai/scaling/engineering-for-scale--multi-database--dark.png',
+    }}
   />
 </div>
 

apps/docs/pages/guides/ai/examples/building-chatgpt-plugins.mdx

@@ -33,16 +33,13 @@ This plugin requires several steps:
 
 We'll be saving the Postgres documentation in Postgres, and ChatGPT will be retrieving the documentation whenever a user asks a question:
 
-<img
-  className="dark:hidden !m-0"
+<Image
   alt="diagram reference"
-  src="/docs/img/ai/chatgpt-plugins/chatgpt-plugin-scheme--light.png"
-/>
-
-<img
-  className="hidden dark:block !m-0"
-  alt="diagram reference"
-  src="/docs/img/ai/chatgpt-plugins/chatgpt-plugin-scheme--dark.png"
+  className="!m-0"
+  src={{
+    light: '/docs/img/ai/chatgpt-plugins/chatgpt-plugin-scheme--light.png',
+    dark: '/docs/img/ai/chatgpt-plugins/chatgpt-plugin-scheme--dark.png',
+  }}
 />
 
 ### Step 1: Fork the ChatGPT Retrieval Plugin repository

apps/docs/pages/guides/ai/going-to-prod.mdx

@@ -31,15 +31,12 @@ On the other hand, if you need to scale your application, you will need to [crea
 `pgvector` supports two types of indexes: HNSW and IVFFlat. We recommend using [HNSW](/docs/guides/ai/vector-indexes/hnsw-indexes) because of its [performance](https://supabase.com/blog/increase-performance-pgvector-hnsw#hnsw-performance-1536-dimensions) and [robustness against changing data](/docs/guides/ai/vector-indexes/hnsw-indexes#when-should-you-create-hnsw-indexes).
 
 <div>
-  <img
-    alt="dbpedia embeddings comparing ivfflat and hnsw queries-per-second using the 4XL compute addon (light)"
-    className="dark:hidden"
-    src="/docs/img/ai/going-prod/dbpedia-ivfflat-vs-hnsw-4xl--light.png"
-  />
-  <img
-    alt="dbpedia embeddings comparing ivfflat and hnsw queries-per-second using the 4XL compute addon (dark)"
-    className="hidden dark:block"
-    src="/docs/img/ai/going-prod/dbpedia-ivfflat-vs-hnsw-4xl--dark.png"
+  <Image
+    alt="dbpedia embeddings comparing ivfflat and hnsw queries-per-second using the 4XL compute addon"
+    src={{
+      light: '/docs/img/ai/going-prod/dbpedia-ivfflat-vs-hnsw-4xl--light.png',
+      dark: '/docs/img/ai/going-prod/dbpedia-ivfflat-vs-hnsw-4xl--dark.png',
+    }}
   />
 </div>
 
@@ -56,15 +53,12 @@ Search parameters:
 - `ef_search` is the size of the dynamic list for the nearest neighbors (used during the search). Increasing `ef_search` will result in better accuracy, but it will also increase the time required to execute a query (40 is the default value).
 
 <div>
-  <img
-    alt="dbpedia embeddings comparing hnsw queries-per-second using different build parameters (light)"
-    className="dark:hidden"
-    src="/docs/img/ai/going-prod/dbpedia-hnsw-build-parameters--light.png"
-  />
-  <img
-    alt="dbpedia embeddings comparing hnsw queries-per-second using different build parameters (dark)"
-    className="hidden dark:block"
-    src="/docs/img/ai/going-prod/dbpedia-hnsw-build-parameters--dark.png"
+  <Image
+    alt="dbpedia embeddings comparing hnsw queries-per-second using different build parameters"
+    src={{
+      light: '/docs/img/ai/going-prod/dbpedia-hnsw-build-parameters--light.png',
+      dark: '/docs/img/ai/going-prod/dbpedia-hnsw-build-parameters--dark.png',
+    }}
   />
 </div>
 
@@ -81,15 +75,12 @@ The values of lists and probes directly affect accuracy and queries per second (
 You can find more examples of how `lists` and `probes` constants affect accuracy and QPS in [pgvector 0.4.0 performance](https://supabase.com/blog/pgvector-performance) blogpost.
 
 <div>
-  <img
+  <Image
     alt="multi database"
-    className="dark:hidden"
-    src="/docs/img/ai/going-prod/lists-count--light.png"
-  />
-  <img
-    alt="multi database"
-    className="hidden dark:block"
-    src="/docs/img/ai/going-prod/lists-count--dark.png"
+    src={{
+      light: '/docs/img/ai/going-prod/lists-count--light.png',
+      dark: '/docs/img/ai/going-prod/lists-count--dark.png',
+    }}
   />
 </div>
 
@@ -126,15 +117,12 @@ You can look at our [Choosing Compute Add-on](/docs/guides/ai/choosing-compute-a
 Or take a look at our [pgvector 0.5.0 performance](https://supabase.com/blog/increase-performance-pgvector-hnsw) and [pgvector 0.4.0 performance](https://supabase.com/blog/pgvector-performance) blog posts to see what pgvector is capable of and how the above technique can be used to achieve the best results.
 
 <div>
-  <img
+  <Image
     alt="multi database"
-    className="dark:hidden"
-    src="/docs/img/ai/going-prod/size-to-rps--light.png"
-  />
-  <img
-    alt="multi database"
-    className="hidden dark:block"
-    src="/docs/img/ai/going-prod/size-to-rps--dark.png"
+    src={{
+      light: '/docs/img/ai/going-prod/size-to-rps--light.png',
+      dark: '/docs/img/ai/going-prod/size-to-rps--dark.png',
+    }}
   />
 </div>
 

apps/docs/pages/guides/ai/vector-indexes/hnsw-indexes.mdx

@@ -55,15 +55,12 @@ The hierarchical aspect of HNSW builds off of the idea of skip lists.
 Skip lists are multi-layer linked lists. The bottom layer is a regular linked list connecting an ordered sequence of elements. Each new layer above removes some elements from the underlying layer (based on a fixed probability), producing a sparser subsequence that “skips” over elements.
 
 <div>
-  <img
-    alt="visual of an example skip list (light)"
-    className="dark:hidden"
-    src="/docs/img/ai/vector-indexes/hnsw-indexes/skip-list--light.png"
-  />
-  <img
-    alt="visual of an example skip list (dark)"
-    className="hidden dark:block"
-    src="/docs/img/ai/vector-indexes/hnsw-indexes/skip-list--dark.png"
+  <Image
+    alt="visual of an example skip list"
+    src={{
+      light: '/docs/img/ai/vector-indexes/hnsw-indexes/skip-list--light.png',
+      dark: '/docs/img/ai/vector-indexes/hnsw-indexes/skip-list--dark.png',
+    }}
   />
 </div>
 

apps/docs/pages/guides/database/partitions.mdx

@@ -9,11 +9,12 @@ export const meta = {
 Table partitioning is a technique that allows you to divide a large table into smaller, more manageable parts called “partitions”.
 
 <div>
-  <img alt="multi database" className="dark:hidden" src="/docs/img/database/partitions-light.png" />
-  <img
+  <Image
     alt="multi database"
-    className="hidden dark:block"
-    src="/docs/img/database/partitions-dark.png"
+    src={{
+      light: '/docs/img/database/partitions-light.png',
+      dark: '/docs/img/database/partitions-dark.png',
+    }}
   />
 </div>
 

apps/docs/pages/guides/platform/org-based-billing.mdx

@@ -55,15 +55,12 @@ Each plan includes a quota for unified egress, which is applied to your entire o
 You can see a breakdown of the different types of egress on your [organization usage page](https://supabase.com/dashboard/org/_/usage).
 
 <div>
-  <img
+  <Image
     alt="Unified Egress"
-    className="dark:hidden w-full object-contain"
-    src="/docs/img/guides/platform/unified-egress--light.png"
-  />
-  <img
-    alt="Unified Egress"
-    className="hidden dark:block w-full object-contain"
-    src="/docs/img/guides/platform/unified-egress.png"
+    src={{
+      light: '/docs/img/guides/platform/unified-egress--light.png',
+      dark: '/docs/img/guides/platform/unified-egress.png',
+    }}
   />
 </div>
 
@@ -258,15 +255,13 @@ While we will roll out the new billing for all users during the next few weeks,
 Head over to your [organization billing settings](https://supabase.com/dashboard/org/_/billing) to initiate the migration.
 
 <div>
-  <img
+  <Image
     alt="Self-Serve migration"
-    className="dark:hidden w-full object-contain"
-    src="/docs/img/guides/platform/org-billing-migration--light.png"
-  />
-  <img
-    alt="Self-Serve migration"
-    className="hidden dark:block w-full object-contain"
-    src="/docs/img/guides/platform/org-billing-migration.png"
+    className="w-full object-contain"
+    src={{
+      light: '/docs/img/database/partitions-light.png',
+      dark: '/docs/img/database/partitions-dark.png',
+    }}
   />
 </div>
 

apps/docs/pages/guides/platform/project-transfer.mdx

@@ -9,28 +9,22 @@ export const meta = {
 With the introduction of [Organization-based Billing](/docs/guides/platform/org-based-billing), we’re adding the ability to freely transfer projects between different organizations. Head to your [projects' general settings](https://supabase.com/dashboard/project/_/settings/general) to initiate a project transfer.
 
 <div>
-  <img
+  <Image
     alt="Project Transfer: General Settings"
-    className="dark:hidden w-full object-contain"
-    src="/docs/img/guides/platform/project-transfer-overview--light.png"
-  />
-  <img
-    alt="Project Transfer: General Settings"
-    className="hidden dark:block w-full object-contain"
-    src="/docs/img/guides/platform/project-transfer-overview.png"
+    src={{
+      light: '/docs/img/guides/platform/project-transfer-overview--light.png',
+      dark: '/docs/img/guides/platform/project-transfer-overview.png',
+    }}
   />
 </div>
 
 <div>
-  <img
+  <Image
     alt="Project Transfer: Confirmation Modal"
-    className="dark:hidden w-full object-contain"
-    src="/docs/img/guides/platform/project-transfer-modal--light.png"
-  />
-  <img
-    alt="Project Transfer: Confirmation Modal"
-    className="hidden dark:block w-full object-contain"
-    src="/docs/img/guides/platform/project-transfer-modal.png"
+    src={{
+      light: '/docs/img/guides/platform/project-transfer-modal--light.png',
+      dark: '/docs/img/guides/platform/project-transfer-modal.png',
+    }}
   />
 </div>
 

apps/docs/pages/index.mdx

@@ -25,7 +25,7 @@ export const meta = {
       ## Products
     </div>
 
-    <div className="grid grid-cols-12 gap-6 not-prose [&_svg]:text-brand-600 [&_svg]dark:text-brand">
+    <div className="grid grid-cols-12 gap-6 not-prose [&_svg]:text-brand-600">
       {products.map((product) => {
         return (
           <Link href={product.href} key={product.title} passHref className={product.span ?? 'col-span-12 md:col-span-4'}>
@@ -42,7 +42,7 @@ export const meta = {
       <div className="col-span-4 flex flex-col gap-1 [&_h2]:m-0 [&_h3]:m-0">
 
         <div className="md:max-w-xs 2xl:max-w-none">
-          <div className="flex items-center gap-3 mb-3 text-brand-600 dark:text-brand">
+          <div className="flex items-center gap-3 mb-3 text-brand-600">
             {/* <IconBackground>
               <HomeMenuIconPicker icon="reference-cli" width={18} height={18} />
             </IconBackground> */}
@@ -141,7 +141,7 @@ export const meta = {
     <div className="col-span-4 flex flex-col gap-1 [&_h2]:m-0 [&_h3]:m-0">
 
       <div className="md:max-w-xs 2xl:max-w-none">
-        <div className="flex items-center gap-3 mb-3 text-brand-600 dark:text-brand">
+        <div className="flex items-center gap-3 mb-3 text-brand-600">
           <IconBackground>
             <HomeMenuIconPicker icon="self-hosting" width={18} height={18} />
           </IconBackground>

apps/studio/components/grid/components/header/RLSBannerWarning.tsx

@@ -46,7 +46,7 @@ export default function RLSBannerWarning() {
     <>
       {!isAcknowledged && !rlsEnabled && isPublicTable ? (
         <div>
-          <div className="text-center bg-amber-500 text-amber-1100 dark:text-amber-900 text-xs py-2.5 flex items-center justify-center relative">
+          <div className="text-center bg-amber-500 text-amber-1100 text-xs py-2.5 flex items-center justify-center relative">
             <IconAlertCircle size={16} strokeWidth={2} />
             <span className="uppercase font-bold ml-2">Warning</span>: You are allowing anonymous
             access to your table.{' '}
@@ -59,7 +59,7 @@ export default function RLSBannerWarning() {
             <div className="ml-20 absolute right-2">
               <Button
                 type="outline"
-                className="hover:text-foreground text-amber-900 dark:text-amber-900 border border-amber-800"
+                className="hover:text-foreground text-amber-900 border border-amber-800"
                 onClick={() => setIsOpen(true)}
               >
                 Dismiss

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

@@ -1,5 +1,5 @@
 import { useTheme } from 'next-themes'
-import { IconMoon, IconSun, Listbox } from 'ui'
+import { IconMoon, IconSun, Listbox, Theme, themes } from 'ui'
 
 import Panel from 'components/ui/Panel'
 
@@ -18,15 +18,11 @@ const ThemeSettings = () => {
           icon={theme ? <IconMoon /> : <IconSun />}
           onChange={(value: string) => setTheme(value)}
         >
-          <Listbox.Option label="System default" value="system">
-            System default
-          </Listbox.Option>
-          <Listbox.Option label="Dark" value="dark">
-            Dark
-          </Listbox.Option>
-          <Listbox.Option label="Light" value="light">
-            Light
-          </Listbox.Option>
+          {themes.map((theme: Theme) => (
+            <Listbox.Option key={theme.value} label={theme.name} value={theme.value}>
+              {theme.name}
+            </Listbox.Option>
+          ))}
         </Listbox>
       </Panel.Content>
     </Panel>

apps/studio/components/interfaces/Auth/Policies/PolicyEditor/PolicyEditorFooter.tsx

@@ -12,7 +12,7 @@ const PolicyEditorFooter = ({
   onViewTemplates = noop,
   onReviewPolicy = noop,
 }: PolicyEditorFooterProps) => (
-  <div className="flex justify-between items-center border-t px-6 py-4 dark:border-dark">
+  <div className="flex justify-between items-center border-t px-6 py-4 border-default">
     <a
       href="https://supabase.com/docs/learn/auth-deep-dive/auth-policies"
       target="_blank"

apps/studio/components/interfaces/Auth/Policies/PolicyReview.tsx

@@ -52,7 +52,7 @@ const PolicyReview = ({
           </div>
         </div>
       </Modal.Content>
-      <div className="flex w-full items-center justify-end gap-2 border-t px-6 py-4 dark:border-dark">
+      <div className="flex w-full items-center justify-end gap-2 border-t px-6 py-4 border-default">
         <Button type="default" onClick={onSelectBack}>
           Back to edit
         </Button>

apps/studio/components/interfaces/Auth/Policies/PolicyTemplates/TemplatesList.tsx

@@ -16,7 +16,7 @@ const TemplatesList = ({
   selectedTemplate,
   setSelectedTemplate = noop,
 }: TemplatesListProps) => (
-  <div className="flex flex-col justify-between border-r dark:border-dark" style={{ width: '30%' }}>
+  <div className="flex flex-col justify-between border-r border-default" style={{ width: '30%' }}>
     <div
       className="hide-scrollbar  divide-border-primary space-y-0 divide-y divide-solid overflow-y-auto"
       style={{ maxHeight: '24rem' }}

apps/studio/components/interfaces/Auth/Policies/PolicyTemplates/index.tsx

@@ -20,7 +20,7 @@ const PolicyTemplates = ({
   const [selectedTemplate, setSelectedTemplate] = useState(templates[0])
   return (
     <div>
-      <div className="flex justify-between border-t dark:border-dark">
+      <div className="flex justify-between border-t border-default">
         <TemplatesList
           templatesNote={templatesNote}
           templates={templates}
@@ -29,7 +29,7 @@ const PolicyTemplates = ({
         />
         <TemplatePreview selectedTemplate={selectedTemplate} />
       </div>
-      <div className="flex w-full items-center justify-end gap-3 border-t px-6 py-4 dark:border-dark">
+      <div className="flex w-full items-center justify-end gap-3 border-t px-6 py-4 border-default">
         <span className="text-sm text-foreground-lighter">
           This will override any existing code you've written
         </span>

apps/studio/components/interfaces/Billing/Payment/AddNewPaymentMethodModal.tsx

@@ -90,7 +90,7 @@ const AddNewPaymentMethodModal = ({
 
   const options = {
     clientSecret: intent ? intent.client_secret : '',
-    appearance: { theme: resolvedTheme === 'dark' ? 'night' : 'flat', labels: 'floating' },
+    appearance: { theme: resolvedTheme?.includes('dark') ? 'night' : 'flat', labels: 'floating' },
   } as any
 
   const onLocalCancel = () => {

apps/studio/components/interfaces/Database/Backups/BackupItem.tsx

@@ -65,7 +65,7 @@ const BackupItem = ({ index, backup, projectRef, onSelectBackup }: BackupItemPro
   return (
     <div
       className={`flex h-12 items-center justify-between px-6 ${
-        index ? 'border-t dark:border-dark' : ''
+        index ? 'border-t border-default' : ''
       }`}
     >
       <p className="text-sm text-foreground ">{generateBackupName(backup)}</p>

apps/studio/components/interfaces/Database/Extensions/ExtensionCard.tsx

@@ -124,8 +124,8 @@ const ExtensionCard = ({ extension }: ExtensionCardProps) => {
         </div>
         <div
           className={[
-            'bg-panel-header-light dark:bg-panel-header-dark',
-            'bg-panel-secondary-light dark:bg-panel-secondary-dark flex h-full flex-col justify-between',
+            'bg-panel-header-light',
+            'bg-panel-secondary-light flex h-full flex-col justify-between',
           ].join(' ')}
         >
           <div className="py-3 px-4">

apps/studio/components/interfaces/Database/Functions/CreateFunction.tsx

@@ -708,7 +708,7 @@ const InputDefinition = observer(({}) => {
           </p>
         )}
       </div>
-      <div className="h-60 resize-y border dark:border-dark">
+      <div className="h-60 resize-y border border-default">
         <SqlEditor
           defaultValue={_localState!.formState.definition.value}
           onInputChange={(value: string | undefined) => {

apps/studio/components/interfaces/Database/Roles/RolesList.tsx

@@ -120,7 +120,7 @@ const RolesList = ({}) => {
                     value={totalActiveConnections}
                     barClass={
                       maxConnectionLimit === 0
-                        ? 'bg-gray-100 dark:bg-gray-600'
+                        ? 'bg-control'
                         : totalActiveConnections > 0.9 * maxConnectionLimit
                         ? 'bg-red-800'
                         : totalActiveConnections > 0.75 * maxConnectionLimit

apps/studio/components/interfaces/Database/Schemas/SchemaGraph.tsx

@@ -302,12 +302,13 @@ function TableNode({ data, targetPosition, sourcePosition }: NodeProps<TableNode
 
 const TablesGraph = ({ tables }: { tables: PostgresTable[] }) => {
   const { resolvedTheme } = useTheme()
-  const backgroundPatternColor = resolvedTheme === 'dark' ? '#2e2e2e' : '#e6e8eb'
-  const edgeStrokeColor = resolvedTheme === 'dark' ? '#ededed' : '#111318'
+  const backgroundPatternColor = resolvedTheme?.includes('dark') ? '#2e2e2e' : '#e6e8eb'
+  const edgeStrokeColor = resolvedTheme?.includes('dark') ? '#ededed' : '#111318'
 
   const miniMapNodeColor = '#111318'
-  const miniMapMaskColor =
-    resolvedTheme === 'dark' ? 'rgb(17, 19, 24, .8)' : 'rgb(237, 237, 237, .8)'
+  const miniMapMaskColor = resolvedTheme?.includes('dark')
+    ? 'rgb(17, 19, 24, .8)'
+    : 'rgb(237, 237, 237, .8)'
 
   const reactFlowInstance = useReactFlow()
   const nodeTypes = useMemo(

apps/studio/components/interfaces/Database/Triggers/ChooseFunctionForm.tsx

@@ -133,7 +133,7 @@ const SchemaFunctionGroup = observer(({ schema, selectFunction }: SchemaFunction
         <h5 className="text-foreground-light">schema</h5>
         <h5>{schema}</h5>
       </div>
-      <div className="space-y-0 divide-y border-t border-b dark:divide-dark dark:border-dark">
+      <div className="space-y-0 divide-y border-t border-b border-default">
         {_functions.map((x) => (
           <Function
             id={x.id}
@@ -191,7 +191,7 @@ const Function = ({ id, completeStatement, name, onClick }: FunctionProps) => {
         leaveFrom="transform opacity-100"
         leaveTo="transform opacity-0"
       >
-        <div className="mt-4 h-64 border dark:border-dark">
+        <div className="mt-4 h-64 border border-default">
           <SqlEditor defaultValue={completeStatement} readOnly={true} contextmenu={false} />
         </div>
       </Transition>

apps/studio/components/interfaces/Database/Wrappers/WrappersDisabledState.tsx

@@ -71,10 +71,9 @@ const WrappersDisabledState = () => {
         style={{
           backgroundSize: '45%',
           backgroundPosition: '105% 40%',
-          backgroundImage:
-            resolvedTheme === 'dark'
-              ? `url("${BASE_PATH}/img/wrappers-dark.png")`
-              : `url("${BASE_PATH}/img/wrappers-light.png")`,
+          backgroundImage: resolvedTheme?.includes('dark')
+            ? `url("${BASE_PATH}/img/wrappers-dark.png")`
+            : `url("${BASE_PATH}/img/wrappers-light.png")`,
         }}
       >
         <div className="w-3/5 space-y-8">

apps/studio/components/interfaces/Docs/ResourceContent.tsx

@@ -44,7 +44,7 @@ const ResourceContent = ({
   return (
     <>
       <h2 className="doc-section__table-name text-foreground mt-0 flex items-center px-6 gap-2">
-        <span className="bg-slate-300 dark:bg-slate-400 p-2 rounded-lg">
+        <span className="bg-slate-300 p-2 rounded-lg">
           <IconTable size="small" />
         </span>
         <span className="text-2xl font-bold">{resourceId}</span>

apps/studio/components/interfaces/Home/ExampleProject.tsx

@@ -28,7 +28,7 @@ const ExampleProject = ({ framework, title, description, url }: ExampleProjectPr
             className="transition-all group-hover:scale-110"
             src={`${BASE_PATH}/img/libraries/${framework.toLowerCase()}${
               ['expo', 'nextjs'].includes(framework.toLowerCase())
-                ? resolvedTheme === 'dark'
+                ? resolvedTheme?.includes('dark')
                   ? '-dark'
                   : ''
                 : ''

apps/studio/components/interfaces/Organization/BillingSettings/CostControl/CostControl.tsx

@@ -167,10 +167,10 @@ const CostControl = ({}: CostControlProps) => {
                       src={
                         isUsageBillingEnabled
                           ? `${BASE_PATH}/img/spend-cap-off${
-                              resolvedTheme === 'dark' ? '' : '--light'
+                              resolvedTheme?.includes('dark') ? '' : '--light'
                             }.png?v=3`
                           : `${BASE_PATH}/img/spend-cap-on${
-                              resolvedTheme === 'dark' ? '' : '--light'
+                              resolvedTheme?.includes('dark') ? '' : '--light'
                             }.png?v=3`
                       }
                     />

apps/studio/components/interfaces/Organization/BillingSettings/CostControl/SpendCapSidePanel.tsx

@@ -258,7 +258,7 @@ const SpendCapSidePanel = () => {
                       )}
                       width={160}
                       height={96}
-                      src={resolvedTheme === 'dark' ? option.imageUrl : option.imageUrlLight}
+                      src={resolvedTheme?.includes('dark') ? option.imageUrl : option.imageUrlLight}
                     />
 
                     <p

apps/studio/components/interfaces/Organization/BillingSettings/Subscription/EnterpriseCard.tsx

@@ -47,7 +47,7 @@ const EnterpriseCard = ({ plan, isCurrentPlan }: EnterpriseCardProps) => {
           {plan.features.map((feature) => (
             <li key={feature} className="flex items-center py-2 first:mt-0">
               <IconCheck className="text-brand h-4 w-4" aria-hidden="true" strokeWidth={3} />
-              <span className="dark:text-foreground mb-0 ml-3 ">{feature}</span>
+              <span className="text-foreground mb-0 ml-3 ">{feature}</span>
             </li>
           ))}
         </ul>

apps/studio/components/interfaces/Organization/TeamSettings/MembersView.tsx

@@ -305,10 +305,7 @@ const MembersView = ({ searchString }: MembersViewProps) => {
                 }),
                 ...(searchString.length > 0 && filteredMembers.length === 0
                   ? [
-                      <Table.tr
-                        key="no-results"
-                        className="bg-panel-secondary-light dark:bg-panel-secondary-dark"
-                      >
+                      <Table.tr key="no-results" className="bg-panel-secondary-light">
                         <Table.td colSpan={12}>
                           <div className="flex items-center space-x-3 opacity-75">
                             <IconAlertCircle size={16} strokeWidth={2} />
@@ -320,10 +317,7 @@ const MembersView = ({ searchString }: MembersViewProps) => {
                       </Table.tr>,
                     ]
                   : []),
-                <Table.tr
-                  key="footer"
-                  className="bg-panel-secondary-light dark:bg-panel-secondary-dark"
-                >
+                <Table.tr key="footer" className="bg-panel-secondary-light">
                   <Table.td colSpan={4}>
                     <p className="text-foreground-light">
                       {searchString ? `${filteredMembers.length} of ` : ''}

apps/studio/components/interfaces/Organization/Usage/SectionContent.tsx

@@ -38,9 +38,7 @@ const SectionContent = ({
                 </div>
                 {links && links.length && (
                   <div className="space-y-2">
-                    <p className="text-sm text-foreground dark:text-foreground-light mb-2">
-                      More information
-                    </p>
+                    <p className="text-sm text-foreground mb-2">More information</p>
                     {links.map((link) => (
                       <div key={link.url}>
                         <Link href={link.url} target="_blank" rel="noreferrer">

apps/studio/components/interfaces/Realtime/Inspector/MessageSelection.tsx

@@ -33,8 +33,8 @@ const MessageSelection = ({ log, onClose }: MessageSelectionProps) => {
             log ? 'mt-0 scale-95 opacity-0' : 'mt-8 scale-100 opacity-100'
           )}
         >
-          <div className="relative flex h-4 w-32 items-center rounded border border-scale-600 px-2 dark:border-scale-400">
-            <div className="h-0.5 w-2/3 rounded-full bg-scale-600 dark:bg-scale-500"></div>
+          <div className="relative flex h-4 w-32 items-center rounded border border-default px-2">
+            <div className="h-0.5 w-2/3 rounded-full bg-overlay-hover"></div>
             <div className="absolute right-1 -bottom-4">
               <svg
                 xmlns="http://www.w3.org/2000/svg"

apps/studio/components/interfaces/Realtime/Inspector/SelectedRealtimeMessagePanel.tsx

@@ -3,7 +3,7 @@ import { jsonSyntaxHighlight, SelectionDetailedTimestampRow } from './MessagesFo
 
 const LogsDivider = () => {
   return (
-    <div className="h-px w-full bg-panel-border-interior-light dark:bg-panel-border-interior-dark" />
+    <div className="h-px w-full bg-panel-border-interior-light [[data-theme*=dark]_&]:bg-panel-border-interior-dark" />
   )
 }
 

apps/studio/components/interfaces/Reports/GridResize.tsx

@@ -40,7 +40,7 @@ const GridResize = ({ startDate, endDate, interval, editableReport, setEditableR
             <div
               key={x.id}
               data-grid={{ ...x, minH: 4, maxH: 4, minW: 8 }}
-              className="react-grid-layout__report-item bg-surface-100 border-overlay group relative rounded border px-6 py-4 shadow-sm hover:border-green-900 dark:hover:border-green-900"
+              className="react-grid-layout__report-item bg-surface-100 border-overlay group relative rounded border px-6 py-4 shadow-sm hover:border-green-900"
             >
               <ChartHandler
                 startDate={startDate}

apps/studio/components/interfaces/Reports/Reports.tsx

@@ -398,7 +398,7 @@ const Reports = () => {
       </div>
 
       {config.layout.length <= 0 ? (
-        <div className="flex min-h-full items-center justify-center rounded border-2 border-dashed p-16 dark:border-dark">
+        <div className="flex min-h-full items-center justify-center rounded border-2 border-dashed p-16 border-default">
           {canUpdateReport ? (
             <DropdownMenu>
               <DropdownMenuTrigger>

apps/studio/components/interfaces/SQLEditor/AISchemaSuggestionPopover.tsx

@@ -64,7 +64,7 @@ const AISchemaSuggestionPopover = ({
             animate="visible"
           >
             <Popover.Arrow className="fill-background-surface-300" />
-            <div className="flex flex-col gap-2 border border-background-surface-100 dark:border-default rounded-md p-4 bg-surface-100 shadow-xl">
+            <div className="flex flex-col gap-2 border border-default rounded-md p-4 bg-surface-100 shadow-xl">
               <div className="flex flex-row items-center gap-4 max-w-md">
                 <IconInfo className="w-6 h-6" />
                 <p className="text-sm">

apps/studio/components/interfaces/SQLEditor/ResultsPane.tsx

@@ -7,7 +7,7 @@ interface ResultsPaneProps {
 const ResultsPane = ({ results }: ResultsPaneProps) => {
   if (results.length === 0) {
     return (
-      <div className="p-5 flex items-center space-x-2 bg-gray-100 dark:bg-gray-700">
+      <div className="p-5 flex items-center space-x-2 bg-alternative">
         <p>Success. No rows returned.</p>
       </div>
     )

apps/studio/components/interfaces/SQLEditor/SQLEditor.tsx

@@ -595,7 +595,7 @@ const SQLEditor = () => {
                         disabled={isDiffOpen}
                         ref={inputRef}
                         className={cn(
-                          '!p-0 bg-transparent border-transparent text-sm text-brand-600 dark:text-brand placeholder:text-brand-500 focus:!ring-0',
+                          '!p-0 bg-transparent border-transparent text-sm text-brand-600 placeholder:text-brand-500 focus:!ring-0',
                           'focus-visible:ring-0 focus-visible:ring-offset-0',
                           'appearance-none outline-none'
                         )}
@@ -799,12 +799,12 @@ const SQLEditor = () => {
                           setIsSchemaSuggestionDismissed(true)
                           setIsAISettingsOpen(true)
                         }}
-                        className="text-brand-600 dark:text-brand hover:text-brand-600 transition"
+                        className="text-brand-600 hover:text-brand-600 transition"
                       >
                         <IconSettings className="cursor-pointer" />
                       </button>
                       <button
-                        className="text-brand-600 dark:text-brand hover:text-brand-600"
+                        className="text-brand-600 hover:text-brand-600"
                         onClick={() => setIsAiOpen(false)}
                       >
                         <IconX size={21} />

apps/studio/components/interfaces/SQLEditor/UtilityPanel/Results.tsx

@@ -78,7 +78,7 @@ const Results = ({ id, rows }: { id: string; rows: readonly any[] }) => {
 
   if (rows.length <= 0) {
     return (
-      <div className="bg-table-header-light dark:bg-table-header-dark">
+      <div className="bg-table-header-light [[data-theme*=dark]_&]:bg-table-header-dark">
         <p className="m-0 border-0 px-6 py-4 font-mono text-sm">Success. No rows returned</p>
       </div>
     )

apps/studio/components/interfaces/SQLEditor/UtilityPanel/UtilityTabResults.tsx

@@ -64,7 +64,7 @@ const UtilityTabResults = ({ id, isExecuting }: UtilityTabResultsProps) => {
 
   if (isExecuting) {
     return (
-      <div className="bg-table-header-light dark:bg-table-header-dark">
+      <div className="bg-table-header-light [[data-theme*=dark]_&]:bg-table-header-dark">
         <p className="m-0 border-0 px-6 py-4 font-mono text-sm">Running...</p>
       </div>
     )
@@ -74,7 +74,7 @@ const UtilityTabResults = ({ id, isExecuting }: UtilityTabResultsProps) => {
     )
 
     return (
-      <div className="bg-table-header-light dark:bg-table-header-dark">
+      <div className="bg-table-header-light [[data-theme*=dark]_&]:bg-table-header-dark">
         <div className="flex flex-row justify-between items-start py-4 px-6">
           {isTimeout ? (
             <div className="flex flex-col gap-y-1">
@@ -161,7 +161,7 @@ const UtilityTabResults = ({ id, isExecuting }: UtilityTabResultsProps) => {
     )
   } else if (!result) {
     return (
-      <div className="bg-table-header-light dark:bg-table-header-dark">
+      <div className="bg-table-header-light [[data-theme*=dark]_&]:bg-table-header-dark">
         <p className="m-0 border-0 px-6 py-4 text-sm text-foreground-light">
           Click <code>Run</code> to execute your query.
         </p>

apps/studio/components/interfaces/Settings/API/JWTSettings.tsx

@@ -94,7 +94,7 @@ const JWTSettings = () => {
   return (
     <>
       <Panel title={<h5 className="mb-0">JWT Settings</h5>}>
-        <Panel.Content className="space-y-6 border-t border-panel-border-interior-light dark:border-panel-border-interior-dark">
+        <Panel.Content className="space-y-6 border-t border-panel-border-interior-light [[data-theme*=dark]_&]:border-panel-border-interior-dark">
           {isError ? (
             <div className="flex items-center justify-center py-8 space-x-2">
               <IconAlertCircle size={16} strokeWidth={1.5} />

apps/studio/components/interfaces/Settings/Addons/Addons.tsx

@@ -182,10 +182,10 @@ const Addons = () => {
                         src={
                           computeInstance !== undefined
                             ? `${BASE_PATH}/img/optimized-compute-on${
-                                resolvedTheme === 'dark' ? '' : '--light'
+                                resolvedTheme?.includes('dark') ? '' : '--light'
                               }.png`
                             : `${BASE_PATH}/img/optimized-compute-off${
-                                resolvedTheme === 'dark' ? '' : '--light'
+                                resolvedTheme?.includes('dark') ? '' : '--light'
                               }.png`
                         }
                       />
@@ -371,10 +371,10 @@ const Addons = () => {
                         src={
                           pitr !== undefined
                             ? `${BASE_PATH}/img/pitr-on${
-                                resolvedTheme === 'dark' ? '' : '--light'
+                                resolvedTheme?.includes('dark') ? '' : '--light'
                               }.png?v=2`
                             : `${BASE_PATH}/img/pitr-off${
-                                resolvedTheme === 'dark' ? '' : '--light'
+                                resolvedTheme?.includes('dark') ? '' : '--light'
                               }.png?v=2`
                         }
                       />
@@ -466,10 +466,10 @@ const Addons = () => {
                         src={
                           customDomain !== undefined
                             ? `${BASE_PATH}/img/custom-domain-on${
-                                resolvedTheme === 'dark' ? '' : '--light'
+                                resolvedTheme?.includes('dark') ? '' : '--light'
                               }.png`
                             : `${BASE_PATH}/img/custom-domain-off${
-                                resolvedTheme === 'dark' ? '' : '--light'
+                                resolvedTheme?.includes('dark') ? '' : '--light'
                               }.png`
                         }
                       />

apps/studio/components/interfaces/Settings/Addons/ComputeInstanceSidePanel.tsx

@@ -248,7 +248,9 @@ const ComputeInstanceSidePanel = () => {
                         )}
                         width={160}
                         height={96}
-                        src={resolvedTheme === 'dark' ? option.imageUrl : option.imageUrlLight}
+                        src={
+                          resolvedTheme?.includes('dark') ? option.imageUrl : option.imageUrlLight
+                        }
                       />
 
                       <p

apps/studio/components/interfaces/Settings/Addons/PITRSidePanel.tsx

@@ -208,7 +208,7 @@ const PITRSidePanel = () => {
                       )}
                       width={160}
                       height={96}
-                      src={resolvedTheme === 'dark' ? option.imageUrl : option.imageUrlLight}
+                      src={resolvedTheme?.includes('dark') ? option.imageUrl : option.imageUrlLight}
                     />
 
                     <p

apps/studio/components/interfaces/Settings/Infrastructure/InfrastructureActivity.tsx

@@ -223,9 +223,7 @@ const InfrastructureActivity = () => {
                       </div>
                     </div>
                     <div className="space-y-2">
-                      <p className="text-sm text-foreground dark:text-foreground-light mb-2">
-                        More information
-                      </p>
+                      <p className="text-sm text-foreground mb-2">More information</p>
                       {attribute.links.map((link) => (
                         <div key={link.url}>
                           <Link href={link.url} target="_blank" rel="noreferrer">

apps/studio/components/interfaces/Settings/Logs/LogSelectionRenderers/FunctionLogsSelectionRender.tsx

@@ -17,7 +17,7 @@ const FunctionLogsSelectionRender = ({ log }: any) => {
           {log.event_message}
         </div>
       </div>
-      <div className="h-px w-full bg-panel-border-interior-light dark:bg-panel-border-interior-dark"></div>
+      <div className="h-px w-full bg-panel-border-interior-light [[data-theme*=dark]_&]:bg-panel-border-interior-dark"></div>
       <div className={`${LOGS_TAILWIND_CLASSES.log_selection_x_padding} space-y-2`}>
         <SelectionDetailedRow
           label="Severity"

apps/studio/components/interfaces/Settings/Logs/Logs.Divider.tsx

@@ -1,6 +1,6 @@
 const LogsDivider = () => {
   return (
-    <div className="h-px w-full bg-panel-border-interior-light dark:bg-panel-border-interior-dark"></div>
+    <div className="h-px w-full bg-panel-border-interior-light [[data-theme*=dark]_&]:bg-panel-border-interior-dark"></div>
   )
 }
 

apps/studio/components/interfaces/Settings/Logs/LogsFormatters.tsx

@@ -105,9 +105,7 @@ export const ResponseCodeFormatter = ({ value }: any) => {
 
             "
           >
-            <label className="block font-mono text-sm text-amber-1100 dark:text-amber-900">
-              {value}
-            </label>
+            <label className="block font-mono text-sm text-amber-1100">{value}</label>
           </div>
         </div>
       )

apps/studio/components/interfaces/Settings/Vault/VaultToggle.tsx

@@ -64,10 +64,9 @@ const VaultToggle = () => {
         style={{
           backgroundSize: isNotAvailable ? '50%' : '40%',
           backgroundPosition: '100% 24%',
-          backgroundImage:
-            resolvedTheme === 'dark'
-              ? `url("${BASE_PATH}/img/vault-dark.png")`
-              : `url("${BASE_PATH}/img/vault-light.png")`,
+          backgroundImage: resolvedTheme?.includes('dark')
+            ? `url("${BASE_PATH}/img/vault-dark.png")`
+            : `url("${BASE_PATH}/img/vault-light.png")`,
         }}
       >
         <div className="w-3/5 space-y-8">

apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/RowEditor/JsonEditor/DrilldownViewer/DrilldownPane.tsx

@@ -13,7 +13,7 @@ interface DrilldownPaneProps {
 const DrilldownPane = ({ pane, jsonData, activeKey, onSelectKey = noop }: DrilldownPaneProps) => {
   if (!jsonData) {
     return (
-      <div className={`flex-1 ${pane === 2 ? 'border-l border-gray-500' : ''}`}>
+      <div className={`flex-1 ${pane === 2 ? 'border-l border-default' : ''}`}>
         <div className="flex space-x-2 py-2 px-5">
           <p className="text-sm">Invalid JSON</p>
         </div>
@@ -23,7 +23,7 @@ const DrilldownPane = ({ pane, jsonData, activeKey, onSelectKey = noop }: Drilld
 
   if (Object.keys(jsonData).length === 0) {
     return (
-      <div className={`max-w-[50%] flex-1 ${pane === 2 ? 'border-l border-gray-500' : ''}`}>
+      <div className={`max-w-[50%] flex-1 ${pane === 2 ? 'border-l border-default' : ''}`}>
         <div className="flex space-x-2 py-2 px-5">
           <p className="text-sm opacity-50">No data available</p>
         </div>
@@ -40,18 +40,18 @@ const DrilldownPane = ({ pane, jsonData, activeKey, onSelectKey = noop }: Drilld
   )
 
   return (
-    <div className={`max-w-[50%] flex-1 ${pane === 2 ? 'border-l border-gray-500' : ''}`}>
+    <div className={`max-w-[50%] flex-1 ${pane === 2 ? 'border-l border-default' : ''}`}>
       {keysWithChildren.map((key: string) => (
         <div
           key={key}
           className={`
-              ${key === activeKey ? 'bg-gray-100 dark:bg-gray-400' : ''}
+              ${key === activeKey ? 'bg-alternative' : ''}
               group flex cursor-pointer items-center
-              justify-between py-2 px-5 hover:bg-gray-100 dark:hover:bg-gray-500
+              justify-between py-2 px-5 hover:bg-alternative
             `}
           onClick={() => onSelectKey(key, pane)}
         >
-          <p className="font-mono text-xs !text-blue-700 dark:!text-blue-1100">{key}</p>
+          <p className="font-mono text-xs !text-blue-700">{key}</p>
           <div className={`${key === activeKey ? 'block' : 'hidden'} group-hover:block`}>
             <IconChevronRight strokeWidth={2} size={16} />
           </div>
@@ -59,12 +59,10 @@ const DrilldownPane = ({ pane, jsonData, activeKey, onSelectKey = noop }: Drilld
       ))}
       {keysWithoutChildren.map((key: string) => (
         <div key={key} className="flex space-x-2 py-2 px-5">
-          <p className="font-mono text-xs !text-blue-700 dark:!text-blue-1100">{key}:</p>
+          <p className="font-mono text-xs !text-blue-700">{key}:</p>
           <p
             className={`break-all font-mono text-xs ${
-              typeof jsonData[key] !== 'string'
-                ? '!text-green-700 dark:!text-green-1000'
-                : '!text-yellow-700 dark:!text-yellow-900'
+              typeof jsonData[key] !== 'string' ? '!text-green-700' : '!text-yellow-700'
             }`}
           >
             {isNull(jsonData[key])

apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/RowEditor/JsonEditor/JsonEditor.tsx

@@ -100,7 +100,7 @@ const JsonEdit = ({
         <SidePanel.Content>
           <div className="mt-4 flex flex-auto flex-col space-y-4">
             {view === 'edit' ? (
-              <div className="h-[500px] w-full flex-grow border dark:border-dark">
+              <div className="h-[500px] w-full flex-grow border border-default">
                 <JsonEditor
                   key={jsonString}
                   readOnly={readOnly}

apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/SpreadsheetImport/SpreadSheetFileUpload.tsx

@@ -49,7 +49,7 @@ const SpreadSheetFileUpload = ({
       </div>
       {!uploadedFile ? (
         <div
-          className={`flex h-48 cursor-pointer items-center justify-center rounded-md border border-dashed dark:border-gray-700 ${
+          className={`flex h-48 cursor-pointer items-center justify-center rounded-md border border-dashed border-strong ${
             isDraggedOver ? 'bg-gray-500' : ''
           }`}
           onDragOver={onDragOver}
@@ -62,7 +62,7 @@ const SpreadSheetFileUpload = ({
           </p>
         </div>
       ) : (
-        <div className="flex h-28 flex-col items-center justify-center space-y-2 rounded-md border border-dashed dark:border-gray-700">
+        <div className="flex h-28 flex-col items-center justify-center space-y-2 rounded-md border border-dashed border-strong">
           <div className="flex items-center space-x-2">
             <IconFileText size={14} strokeWidth={1.5} />
             <p className="text-sm text-foreground">{uploadedFile.name}</p>

apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/Column.tsx

@@ -84,7 +84,7 @@ const Column = ({
             title={column.name}
             disabled={hasImportContent}
             placeholder="column_name"
-            className={`table-editor-columns-input bg-white dark:bg-transparent lg:gap-0 ${
+            className={`table-editor-columns-input bg-surface-100 lg:gap-0 ${
               hasImportContent ? 'opacity-50' : ''
             } rounded-md`}
             onChange={(event: any) => onUpdateColumn({ name: event.target.value })}
@@ -166,7 +166,7 @@ const Column = ({
             size="small"
             value={column.defaultValue ?? ''}
             disabled={column.format.includes('int') && column.isIdentity}
-            className={`rounded bg-white dark:bg-transparent lg:gap-0 ${
+            className={`rounded bg-surface-100 lg:gap-0 ${
               column.format.includes('int') && column.isIdentity ? 'opacity-50' : ''
             }`}
             suggestions={suggestions}

apps/studio/components/interfaces/TableGridEditor/TableDefinition.tsx

@@ -112,7 +112,7 @@ const TableDefinition = ({ id }: TableDefinitionProps) => {
       </Button>
       <Editor
         className="monaco-editor"
-        theme={resolvedTheme === 'dark' ? 'vs-dark' : 'vs'}
+        theme={resolvedTheme?.includes('dark') ? 'vs-dark' : 'vs'}
         onMount={handleEditorOnMount}
         defaultLanguage="pgsql"
         value={formattedDefinition}

apps/studio/components/layouts/APIAuthorizationLayout.tsx

@@ -23,7 +23,7 @@ const APIAuthorizationLayout = ({ children }: PropsWithChildren<APIAuthorization
                   <span className="sr-only">Supabase</span>
                   <Image
                     src={
-                      resolvedTheme === 'dark'
+                      resolvedTheme?.includes('dark')
                         ? `${BASE_PATH}/img/supabase-dark.svg`
                         : `${BASE_PATH}/img/supabase-light.svg`
                     }

apps/studio/components/layouts/BillingLayout.tsx

@@ -15,7 +15,7 @@ const BillingLayout = ({ children }: PropsWithChildren<BillingLayoutProps>) => {
     <BaseLayout hideHeader hideIconBar>
       <div className="flex h-full w-full flex-col">
         {/* Header */}
-        <div className="flex items-center space-x-4 border-b py-4 px-5 dark:border-dark">
+        <div className="flex items-center space-x-4 border-b py-4 px-5 border-default">
           <Link
             href={`/org/${selectedOrganization?.slug}/billing`}
             className="text-foreground-lighter transition-colors hover:text-foreground"

apps/studio/components/layouts/ProjectLayout/LayoutHeader/BreadcrumbsView.tsx

@@ -11,7 +11,7 @@ const BreadcrumbsView = ({ defaultValue: breadcrumbs }: BreadcrumbsViewProps) =>
       {breadcrumbs?.length
         ? breadcrumbs.map((breadcrumb: any) => (
             <Fragment key={breadcrumb.key}>
-              <span className="text-border-stronger dark:text-border-strong">
+              <span className="text-border-stronger">
                 <svg
                   viewBox="0 0 24 24"
                   width="16"

apps/studio/components/layouts/ProjectLayout/LayoutHeader/LayoutHeader.tsx

@@ -62,7 +62,7 @@ const LayoutHeader = ({ customHeaderComponents, breadcrumbs = [], headerBorder =
 
             {projectRef && (
               <>
-                <span className="text-border-stronger dark:text-border-strong">
+                <span className="text-border-stronger">
                   <svg
                     viewBox="0 0 24 24"
                     width="16"
@@ -92,7 +92,7 @@ const LayoutHeader = ({ customHeaderComponents, breadcrumbs = [], headerBorder =
 
             {selectedProject && enableBranchManagement && (
               <>
-                <span className="text-border-stronger dark:text-border-strong">
+                <span className="text-border-stronger">
                   <svg
                     viewBox="0 0 24 24"
                     width="16"

apps/studio/components/layouts/ProjectLayout/LayoutHeader/NotificationsPopover/index.tsx

@@ -218,7 +218,7 @@ const NotificationsPopover = ({ alt = false }: NotificationsPopoverProps) => {
                 className={alt ? 'px-1' : ''}
                 icon={
                   hasNewNotifications ? (
-                    <div className="-mr-3.5 z-10 h-4 w-4 flex items-center justify-center rounded-full bg-black dark:bg-white">
+                    <div className="-mr-3.5 z-10 h-4 w-4 flex items-center justify-center rounded-full bg-foreground">
                       <p className="text-xs text-background-alternative">
                         {newNotifications.length}
                       </p>

apps/studio/components/layouts/ProjectLayout/NavigationBar/NavigationBar.tsx

@@ -23,6 +23,8 @@ import {
   IconSearch,
   IconSettings,
   IconUser,
+  Theme,
+  themes,
   useCommandMenu,
 } from 'ui'
 
@@ -242,9 +244,11 @@ const NavigationBar = () => {
                     setTheme(value)
                   }}
                 >
-                  <DropdownMenuRadioItem value={'system'}>System</DropdownMenuRadioItem>
-                  <DropdownMenuRadioItem value={'dark'}>Dark</DropdownMenuRadioItem>
-                  <DropdownMenuRadioItem value={'light'}>Light</DropdownMenuRadioItem>
+                  {themes.map((theme: Theme) => (
+                    <DropdownMenuRadioItem key={theme.value} value={theme.value}>
+                      {theme.name}
+                    </DropdownMenuRadioItem>
+                  ))}
                 </DropdownMenuRadioGroup>
               </DropdownMenuGroup>
             </DropdownMenuContent>

apps/studio/components/layouts/ProjectLayout/ProductMenuBar.tsx

@@ -14,7 +14,7 @@ const ProductMenuBar = ({ title, children }: PropsWithChildren<ProductMenuBarPro
       ].join(' ')}
     >
       <div
-        className="dark:border-dark flex max-h-12 items-center border-b px-6"
+        className="border-default flex max-h-12 items-center border-b px-6"
         style={{ minHeight: '3rem' }}
       >
         <h4 className="text-lg">{title}</h4>

apps/studio/components/layouts/SignInLayout/ForgotPasswordLayout.tsx

@@ -30,7 +30,7 @@ const ForgotPasswordLayout = ({
               <Link href={logoLinkToMarketingSite ? 'https://supabase.com' : '/projects'}>
                 <Image
                   src={
-                    resolvedTheme === 'dark'
+                    resolvedTheme?.includes('dark')
                       ? `${BASE_PATH}/img/supabase-dark.svg`
                       : `${BASE_PATH}/img/supabase-light.svg`
                   }

apps/studio/components/layouts/SignInLayout/SignInLayout.tsx

@@ -100,7 +100,7 @@ const SignInLayout = ({
                 <Link href={logoLinkToMarketingSite ? 'https://supabase.com' : '/projects'}>
                   <Image
                     src={
-                      resolvedTheme === 'dark'
+                      resolvedTheme?.includes('dark')
                         ? `${BASE_PATH}/img/supabase-dark.svg`
                         : `${BASE_PATH}/img/supabase-light.svg`
                     }

apps/studio/components/layouts/TableEditorLayout/EntityListItem.tsx

@@ -114,7 +114,7 @@ const EntityListItem = ({ id, projectRef, item: entity, isLocked }: EntityListIt
     <div
       className={clsx(
         'group flex items-center justify-between rounded-md',
-        isActive && 'text-foreground bg-surface-100'
+        isActive && 'text-foreground bg-surface-200'
       )}
     >
       <Link

apps/studio/components/layouts/WizardLayout.tsx

@@ -41,7 +41,7 @@ export const WizardLayoutWithoutAuth = observer(WizardLayout)
 const Header = ({ organization, project }: WizardLayoutProps) => {
   let stepNumber = organization ? 1 : project ? 2 : 0
   return (
-    <div className="border-b p-3 dark:border-dark">
+    <div className="border-b p-3 border-default">
       <div className="PageHeader">
         <div className="Breadcrumbs flex justify-between">
           <div className="flex items-center text-sm">
@@ -50,7 +50,7 @@ const Header = ({ organization, project }: WizardLayoutProps) => {
                 <img
                   src={`${BASE_PATH}/img/supabase-logo.svg`}
                   alt="Supabase"
-                  className="rounded border p-1 hover:border-white dark:border-dark"
+                  className="rounded border p-1 hover:border-white border-default"
                   style={{ height: 24 }}
                 />
               </Link>

apps/studio/components/to-be-cleaned/ListIcons.tsx

@@ -15,7 +15,7 @@ export const vercelIcon = (
 )
 
 export const databaseIcon = (
-  <div className="flex items-center justify-center rounded bg-green-500 p-1 dark:text-typography-body-dark ">
+  <div className="flex items-center justify-center rounded bg-green-500 p-1 [[data-theme*=dark]_&]:text-typography-body-dark ">
     {/* <SVG
       src={'/icons/feather/database.svg'}
       style={{ width: `12px`, height: `12px`, strokeWidth: '2px' }}

apps/studio/components/to-be-cleaned/Storage/StorageExplorer/FileExplorerColumn.tsx

@@ -164,7 +164,7 @@ const FileExplorerColumn = ({
       {/* Checkbox selection for select all */}
       {view === STORAGE_VIEWS.COLUMNS && (
         <div
-          className={`sticky top-0 z-10 mb-0 flex items-center bg-table-header-light px-2.5 dark:bg-table-header-dark ${
+          className={`sticky top-0 z-10 mb-0 flex items-center bg-table-header-light px-2.5 [[data-theme*=dark]_&]:bg-table-header-dark ${
             haveSelectedItems ? 'h-10 py-3 opacity-100' : 'h-0 py-0 opacity-0'
           } transition-all duration-200`}
           onClick={(event) => event.stopPropagation()}
@@ -273,7 +273,7 @@ const FileExplorerColumn = ({
         <div
           className="
           sticky bottom-0
-          z-10 flex min-w-min items-center bg-panel-footer-light px-2.5 py-2 dark:bg-panel-footer-dark
+          z-10 flex min-w-min items-center bg-panel-footer-light px-2.5 py-2 [[data-theme*=dark]_&]:bg-panel-footer-dark
         "
         >
           <p className="text-sm">

apps/studio/components/to-be-cleaned/Storage/StorageExplorer/FileExplorerHeaderSelection.tsx

@@ -13,7 +13,7 @@ const FileExplorerHeaderSelection = () => {
   } = storageExplorerStore
 
   return (
-    <div className="z-10 flex h-[40px] items-center rounded-t-md bg-brand-400 px-2 py-1 shadow dark:bg-brand-600">
+    <div className="z-10 flex h-[40px] items-center rounded-t-md bg-brand-400 px-2 py-1 shadow [[data-theme*=dark]_&]:bg-brand-600">
       <Button
         icon={<IconX size={16} strokeWidth={2} />}
         type="text"

apps/studio/components/to-be-cleaned/Storage/StorageExplorer/FileExplorerRow.tsx

@@ -309,7 +309,7 @@ const FileExplorerRow = ({
 
   return (
     <div
-      className="h-full border-b dark:border-dark"
+      className="h-full border-b border-default"
       onContextMenu={(event) => {
         event.stopPropagation()
         item.type === STORAGE_ROW_TYPES.FILE
@@ -320,9 +320,9 @@ const FileExplorerRow = ({
       <div
         className={[
           'storage-row group flex h-full items-center px-2.5',
-          'hover:bg-panel-footer-light dark:hover:bg-panel-footer-dark',
+          'hover:bg-panel-footer-light [[data-theme*=dark]_&]:hover:bg-panel-footer-dark',
           `${isOpened ? 'bg-surface-200' : ''}`,
-          `${isPreviewed ? 'bg-green-500 hover:bg-green-500 dark:hover:bg-green-500' : ''}`,
+          `${isPreviewed ? 'bg-green-500 hover:bg-green-500' : ''}`,
           `${item.status !== STORAGE_ROW_STATUS.LOADING ? 'cursor-pointer' : ''}`,
         ].join(' ')}
         onClick={(event) => {

apps/studio/components/to-be-cleaned/Storage/StoragePolicies/StoragePoliciesBucketRow.js

@@ -105,7 +105,7 @@ const StoragePoliciesBucketRow = ({
           <p className="text-sm text-foreground-lighter">No policies created yet</p>
         </div>
       ) : (
-        <div className="grid grid-cols-1 divide-y dark:divide-dark">
+        <div className="grid grid-cols-1 divide-y [[data-theme*=dark]_&]:divide-dark">
           {policies.map((policy) => (
             <PolicyRow
               key={policy.name}

apps/studio/components/to-be-cleaned/Storage/StoragePolicies/StoragePoliciesEditor.js

@@ -82,7 +82,7 @@ const PolicyAllowedOperations = ({ allowedOperations = [], onToggleOperation = (
 }
 
 const PolicyEditorFooter = ({ onViewTemplates = () => {}, onReviewPolicy = () => {} }) => (
-  <div className="flex w-full items-center justify-end space-x-4 border-t px-6 py-3 dark:border-dark">
+  <div className="flex w-full items-center justify-end space-x-4 border-t px-6 py-3 border-default">
     <Button asChild type="link" icon={<IconExternalLink size={14} strokeWidth={1.5} />}>
       <a
         href="https://supabase.com/docs/guides/storage/access-control"

apps/studio/components/to-be-cleaned/Storage/StoragePolicies/StoragePoliciesReview.js

@@ -50,7 +50,7 @@ const StoragePoliciesReview = ({
           </div>
         </div>
       </Modal.Content>
-      <div className="flex w-full items-center justify-end gap-2 border-t px-6 py-4 dark:border-dark">
+      <div className="flex w-full items-center justify-end gap-2 border-t px-6 py-4 border-default">
         <Button type="default" onClick={onSelectBack}>
           Back to edit
         </Button>

apps/studio/components/to-be-cleaned/TooltipListener.tsx

@@ -28,7 +28,7 @@ export default function TooltipListener({
   const tooltipId = `tooltip-${makeRandomString(5)}`
   const tooltip = document.createElement('div')
   tooltip.id = tooltipId
-  tooltip.className = `tooltips ${position} absolute p-2 m-1 bg-black border border-solid dark:border-dark rounded-lg rounded text-center ${className} z-50`
+  tooltip.className = `tooltips ${position} absolute p-2 m-1 bg-black border border-solid border-default rounded-lg rounded text-center ${className} z-50`
   tooltip.innerHTML = `<span class="title ${
     nowrap ? 'nowrap' : ''
   }">${title}</span> ${renderToString(

apps/studio/components/ui/CodeEditor/CodeEditor.utils.ts

@@ -10,21 +10,22 @@ export const alignEditor = (editor: any) => {
 }
 
 export const getTheme = (theme: string) => {
+  const isDarkMode = theme.includes('dark')
   // [TODO] Probably need better theming for light mode
   return {
-    base: theme === 'dark' ? 'vs-dark' : 'vs', // can also be vs-dark or hc-black
+    base: isDarkMode ? 'vs-dark' : 'vs', // can also be vs-dark or hc-black
     inherit: true, // can also be false to completely replace the builtin rules
     rules: [
-      { background: theme === 'dark' ? '1f1f1f' : 'f0f0f0' },
+      { background: isDarkMode ? '1f1f1f' : 'f0f0f0' },
       {
         token: '',
-        background: theme === 'dark' ? '1f1f1f' : 'f0f0f0',
-        foreground: theme === 'dark' ? 'd4d4d4' : '444444',
+        background: isDarkMode ? '1f1f1f' : 'f0f0f0',
+        foreground: isDarkMode ? 'd4d4d4' : '444444',
       },
       { token: 'string.sql', foreground: '24b47e' },
       { token: 'comment', foreground: '666666' },
-      { token: 'predefined.sql', foreground: theme === 'dark' ? 'D4D4D4' : '444444' },
+      { token: 'predefined.sql', foreground: isDarkMode ? 'D4D4D4' : '444444' },
     ],
-    colors: { 'editor.background': theme === 'dark' ? '#1f1f1f' : '#f0f0f0' },
+    colors: { 'editor.background': isDarkMode ? '#1f1f1f' : '#f0f0f0' },
   }
 }

apps/studio/components/ui/MultiSelect/Badges.tsx

@@ -3,7 +3,7 @@ import { IconX } from 'ui'
 export const BadgeDisabled = ({ name }: { name: string }) => (
   <div
     className={[
-      'text-typography-body-light dark:text-typography-body-dark',
+      'text-typography-body-light [[data-theme*=dark]_&]:text-typography-body-dark',
       'flex cursor-not-allowed items-center space-x-2 rounded bg-gray-600',
       'py-0.5 px-2 text-sm',
     ].join(' ')}
@@ -21,7 +21,7 @@ export const BadgeSelected = ({
 }) => (
   <div
     className={[
-      'text-typography-body-light dark:text-typography-body-dark',
+      'text-typography-body-light [[data-theme*=dark]_&]:text-typography-body-dark',
       'flex items-center space-x-2 rounded bg-surface-300',
       'py-0.5 px-2 text-sm',
     ].join(' ')}

apps/studio/components/ui/MultiSelect/index.tsx

@@ -209,10 +209,14 @@ export default function MultiSelect({
                       key={`multiselect-option-${option.id}`}
                       onClick={() => handleChange(option)}
                       className={[
-                        'text-typography-body-light dark:text-typography-body-dark',
+                        'text-typography-body-light [[data-theme*=dark]_&]:text-typography-body-dark',
                         'group flex cursor-pointer items-center justify-between transition',
                         'space-x-1 rounded bg-transparent p-2 px-4 text-sm hover:bg-overlay-hover',
-                        `${active ? ' dark:bg-green-600 dark:bg-opacity-25' : ''}`,
+                        `${
+                          active
+                            ? ' [[data-theme*=dark]_&]:bg-green-600 [[data-theme*=dark]_&]:bg-opacity-25'
+                            : ''
+                        }`,
                       ].join(' ')}
                     >
                       <div className="flex items-center space-x-2">
@@ -240,7 +244,7 @@ export default function MultiSelect({
               ) : options.length === 0 ? (
                 <div
                   className={[
-                    'flex h-full w-full flex-col dark:border-dark',
+                    'flex h-full w-full flex-col border-default',
                     'items-center justify-center border border-dashed p-3',
                   ].join(' ')}
                 >
@@ -260,7 +264,7 @@ export default function MultiSelect({
               ) : (
                 <div
                   className={[
-                    'flex h-full w-full flex-col dark:border-dark',
+                    'flex h-full w-full flex-col border-default',
                     'items-center justify-center border border-dashed p-3',
                   ].join(' ')}
                 >

apps/studio/components/ui/ProjectSettings/DisplayApiSettings.tsx

@@ -77,7 +77,7 @@ const DisplayApiSettings = () => {
             key={x.api_key}
             className={
               i >= 1 &&
-              'border-t border-panel-border-interior-light dark:border-panel-border-interior-dark'
+              'border-t border-panel-border-interior-light [[data-theme*=dark]_&]:border-panel-border-interior-dark'
             }
           >
             <Input

apps/studio/components/ui/ProjectSettings/DisplayConfigSettings.tsx

@@ -67,7 +67,7 @@ const DisplayConfigSettings = () => {
               layout="horizontal"
             />
           </Panel.Content>
-          <Panel.Content className="border-t border-panel-border-interior-light dark:border-panel-border-interior-dark">
+          <Panel.Content className="border-t border-panel-border-interior-light [[data-theme*=dark]_&]:border-panel-border-interior-dark">
             <Input
               label="JWT Secret"
               readOnly

apps/studio/components/ui/TwoOptionToggle.tsx

@@ -50,7 +50,7 @@ const TwoOptionToggle = ({
         >
           <span
             className={clsx(
-              'capitalize hover:text-foreground dark:hover:text-foreground',
+              'capitalize hover:text-foreground',
               activeOption === option ? 'text-foreground' : 'text-foreground-light'
             )}
           >

apps/studio/package.json

@@ -160,7 +160,7 @@
     "prettier": "^2.8.8",
     "storybook-dark-mode": "^3.0.1",
     "superjson": "^1.12.3",
-    "tailwindcss": "^3.1.8",
+    "tailwindcss": "^3.3.5",
     "typescript": "^5.2.2"
   }
 }

apps/studio/pages/404.tsx

@@ -25,7 +25,7 @@ const Error404: NextPage = ({}) => {
               <Link href="/projects">
                 <Image
                   src={
-                    resolvedTheme === 'dark'
+                    resolvedTheme?.includes('dark')
                       ? `${BASE_PATH}/img/supabase-dark.svg`
                       : `${BASE_PATH}/img/supabase-light.svg`
                   }

apps/studio/pages/500.tsx

@@ -28,7 +28,7 @@ const Error500: NextPage = () => {
               <Link href="/projects">
                 <Image
                   src={
-                    resolvedTheme === 'dark'
+                    resolvedTheme?.includes('dark')
                       ? `${router.basePath}/img/supabase-dark.svg`
                       : `${router.basePath}/img/supabase-light.svg`
                   }

apps/studio/pages/_app.tsx

@@ -1,6 +1,5 @@
 import 'ui/build/css/themes/dark.css'
 import 'ui/build/css/themes/light.css'
-
 import 'styles/code.scss'
 import 'styles/contextMenu.scss'
 import 'styles/date-picker.scss'
@@ -161,12 +160,7 @@ function CustomApp({ Component, pageProps }: AppPropsWithLayout) {
                 <PageTelemetry>
                   <TooltipProvider>
                     <RouteValidationWrapper>
-                      <ThemeProvider
-                        attribute="class"
-                        defaultTheme="system"
-                        enableSystem
-                        disableTransitionOnChange
-                      >
+                      <ThemeProvider defaultTheme="system" enableSystem disableTransitionOnChange>
                         <CommandMenuWrapper>
                           <AppBannerWrapper>
                             <FeaturePreviewContextProvider>