replace theme switcher feature flag with local storage value

.vscode/settings.json

@@ -36,12 +36,7 @@
   "typescript.tsdk": "node_modules/typescript/lib",
   "typescript.enablePromptUseWorkspaceTsdk": true,
   "git.mergeEditor": false,
-  "tailwindCSS.experimental.classRegex": [
-    ["cva\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"],
-    ["cx\\(([^)]*)\\)", "(?:'|\"|`)([^']*)(?:'|\"|`)"],
-    ["cn\\(([^)]*)\\)", "(?:'|\"|`)([^']*)(?:'|\"|`)"],
-    ["clsx\\(([^)]*)\\)", "(?:'|\"|`)([^']*)(?:'|\"|`)"]
-  ],
+  "tailwindCSS.classFunctions": ["cva", "cx", "cn", "clsx"],
   "[typescript]": {
     "editor.defaultFormatter": "esbenp.prettier-vscode"
   },

packages/web/app/src/components/common/index.tsx

@@ -5,7 +5,7 @@ export function Label({ className, children, ...props }: ComponentProps<'span'>)
   return (
     <span
       className={cn(
-        'inline-block rounded-sm bg-yellow-50 px-2 py-1 text-xs font-medium tracking-widest text-yellow-600 dark:bg-white/10 dark:text-yellow-300',
+        'inline-block rounded-sm bg-white/10 px-2 py-1 text-xs font-medium tracking-widest text-yellow-300',
         className,
       )}
       {...props}
@@ -36,20 +36,15 @@ export const Page = ({
     <div className={cn('relative flex h-full flex-col', className)}>
       <div className="flex shrink-0 flex-row items-center justify-between p-4">
         <div>
-          <h2 className="text-xl font-bold text-black dark:text-white">{title}</h2>
-          <span className="mt-2 text-sm text-gray-600 dark:text-gray-300">{subtitle}</span>
+          <h2 className="text-xl font-bold text-white">{title}</h2>
+          <span className="mt-2 text-sm text-gray-300">{subtitle}</span>
         </div>
         <div className="flex flex-row items-center space-x-2">{actions}</div>
       </div>
       {noPadding ? (
         children
       ) : (
-        <div
-          className={cn(
-            'px-4 pb-4 dark:text-white',
-            scrollable ? 'grow overflow-y-auto' : 'h-full',
-          )}
-        >
+        <div className={cn('px-4 pb-4 text-white', scrollable ? 'grow overflow-y-auto' : 'h-full')}>
           {children}
         </div>
       )}
@@ -59,17 +54,17 @@ export const Page = ({
 
 export const Section = {
   Title: ({ className, children, ...props }: ComponentProps<'h3'>): ReactElement => (
-    <h3 className={cn('text-base font-bold text-black dark:text-white', className)} {...props}>
+    <h3 className={cn('text-base font-bold text-white', className)} {...props}>
       {children}
     </h3>
   ),
   BigTitle: ({ className, children, ...props }: ComponentProps<'h2'>): ReactElement => (
-    <h2 className={cn('text-base font-bold text-black dark:text-white', className)} {...props}>
+    <h2 className={cn('text-base font-bold text-white', className)} {...props}>
       {children}
     </h2>
   ),
   Subtitle: ({ className, children, ...props }: ComponentProps<'div'>): ReactElement => (
-    <div className={cn('text-sm text-gray-600 dark:text-gray-300', className)} {...props}>
+    <div className={cn('text-sm text-gray-300', className)} {...props}>
       {children}
     </div>
   ),

packages/web/app/src/components/target/history/errors-and-changes.tsx

@@ -155,7 +155,7 @@ export function ChangesBlock(
 ): ReactElement | null {
   return (
     <div>
-      <h2 className="mb-3 font-bold text-gray-900 dark:text-white">{props.title}</h2>
+      <h2 className="mb-3 font-bold text-white">{props.title}</h2>
       <div className="list-inside list-disc space-y-2 text-sm leading-relaxed">
         {props.changesWithUsage?.map((change, key) => (
           <ChangeItem
@@ -233,7 +233,7 @@ function ChangeItem(
               )}
             >
               <div>
-                <span className="text-gray-600 dark:text-white">{labelize(change.message)}</span>
+                <span className="text-white">{labelize(change.message)}</span>
                 {change.isSafeBasedOnUsage && (
                   <span className="cursor-pointer text-yellow-500">
                     {' '}

packages/web/app/src/components/target/insights/Stats.tsx

@@ -215,9 +215,7 @@ function SuccessRateStats({
   return (
     <Card className="bg-gray-900/50">
       <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-        <CardTitle className="text-sm font-medium text-emerald-500 dark:text-emerald-500">
-          Success rate
-        </CardTitle>
+        <CardTitle className="text-sm font-medium text-emerald-500">Success rate</CardTitle>
         <SmileIcon className="text-muted-foreground size-4" />
       </CardHeader>
       <CardContent>
@@ -242,9 +240,7 @@ function FailureRateStats({
   return (
     <Card className="bg-gray-900/50">
       <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-        <CardTitle className="text-sm font-medium text-red-500 dark:text-red-500">
-          Failure rate
-        </CardTitle>
+        <CardTitle className="text-sm font-medium text-red-500">Failure rate</CardTitle>
         <FrownIcon className="text-muted-foreground size-4" />
       </CardHeader>
       <CardContent>
@@ -1114,7 +1110,7 @@ export function OperationsStats({
         : 'success';
 
   return (
-    <section className="space-y-12 text-gray-600 transition-opacity duration-700 ease-in-out dark:text-gray-400">
+    <section className="space-y-12 text-gray-400 transition-opacity duration-700 ease-in-out">
       <OperationsFallback state={state} refetch={refetch}>
         <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
           <RequestsStats requests={operationsStats?.totalRequests} dateRangeText={dateRangeText} />

packages/web/app/src/components/target/proposals/change-detail.tsx

@@ -22,7 +22,7 @@ export function ProposalChangeDetail(props: {
     <Accordion type="single">
       <AccordionItem value="item-1">
         <AccordionHeader className="flex">
-          <AccordionTrigger className="py-3 text-gray-600 hover:no-underline dark:text-white">
+          <AccordionTrigger className="py-3 text-white hover:no-underline">
             <div className="flex w-full flex-row items-center text-left">
               <div>{labelize(props.change.message)}</div>
               <div className="min-w-fit grow pr-2 md:flex-none">{props.icon}</div>
@@ -49,7 +49,7 @@ export function ChangeBlock(props: {
   return (
     props.changes.length !== 0 && (
       <>
-        <h2 className="mb-2 mt-6 flex items-center font-bold text-gray-900 dark:text-white">
+        <h2 className="mb-2 mt-6 flex items-center font-bold text-white">
           {props.title}
           {props.info && <ChangesBlockTooltip info={props.info} />}
         </h2>

packages/web/app/src/components/theme/theme-provider.tsx

@@ -1,9 +1,13 @@
 import { createContext, useContext, useEffect, useMemo, useState } from 'react';
-import { env } from '@/env/frontend';
 import { useLocalStorage } from '@/lib/hooks';
 
 const STORAGE_KEY = 'hive-theme';
-const isThemeSwitcherEnabled = env.featureFlags.themeSwitcher;
+const TEMP_THEME_SWITCHER_KEY = 'hive-temp-theme-switcher';
+
+export function isThemeSwitcherEnabled(): boolean {
+  if (typeof window === 'undefined') return false;
+  return localStorage.getItem(TEMP_THEME_SWITCHER_KEY) === 'true';
+}
 
 export type Theme = 'light' | 'dark' | 'system';
 export type ResolvedTheme = 'light' | 'dark';
@@ -33,8 +37,8 @@ export function ThemeProvider({ children }: { children: React.ReactNode }) {
   const [storedTheme, setStoredTheme] = useLocalStorage(STORAGE_KEY, 'dark');
   const [systemTheme, setSystemTheme] = useState<ResolvedTheme>(getSystemTheme);
 
-  // When feature flag is disabled, always use dark mode regardless of stored value
-  const theme: Theme = isThemeSwitcherEnabled
+  // When theme switcher is disabled, always use dark mode regardless of stored value
+  const theme: Theme = isThemeSwitcherEnabled()
     ? ((storedTheme === 'light' || storedTheme === 'dark' || storedTheme === 'system'
         ? storedTheme
         : 'system') as Theme)
@@ -46,9 +50,9 @@ export function ThemeProvider({ children }: { children: React.ReactNode }) {
     setStoredTheme(newTheme);
   };
 
-  // Listen for system theme changes (only when feature is enabled)
+  // Listen for system theme changes (only when theme switcher is enabled)
   useEffect(() => {
-    if (!isThemeSwitcherEnabled) return;
+    if (!isThemeSwitcherEnabled()) return;
 
     const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
 
@@ -62,7 +66,9 @@ export function ThemeProvider({ children }: { children: React.ReactNode }) {
 
   // Apply theme to document
   useEffect(() => {
-    applyTheme(resolvedTheme);
+    // TODO: we're forcing dark mode here, remove when color palette work is complete
+    // applyTheme(resolvedTheme);
+    applyTheme('dark');
   }, [resolvedTheme]);
 
   const value = useMemo(() => ({ theme, setTheme, resolvedTheme }), [theme, resolvedTheme]);

packages/web/app/src/components/ui/alert.tsx

@@ -8,8 +8,7 @@ const alertVariants = cva(
     variants: {
       variant: {
         default: 'bg-background text-foreground',
-        destructive:
-          'border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive',
+        destructive: 'text-destructive border-destructive [&>svg]:text-destructive',
       },
     },
     defaultVariants: {

packages/web/app/src/components/ui/callout.tsx

@@ -20,13 +20,10 @@ type CalloutType = keyof typeof TypeToEmoji;
 const calloutVariants = cva('mt-6 flex items-center gap-4 rounded-lg border px-4 py-2', {
   variants: {
     type: {
-      default:
-        'border-orange-100 bg-orange-50 text-orange-800 dark:border-orange-400/30 dark:bg-orange-400/20 dark:text-orange-300',
-      error:
-        'border-red-200 bg-red-100 text-red-900 dark:border-red-200/30 dark:bg-red-900/30 dark:text-red-200',
-      info: 'border-blue-200 bg-blue-100 text-blue-900 dark:border-blue-200/30 dark:bg-blue-900/30 dark:text-blue-200',
-      warning:
-        'border-yellow-100 bg-yellow-50 text-yellow-900 dark:border-yellow-200/30 dark:bg-yellow-700/30 dark:text-yellow-200',
+      default: ' border-orange-400/30 bg-orange-400/20 text-orange-300',
+      error: ' border-red-200/30 bg-red-900/30 text-red-200',
+      info: ' border-blue-200/30 bg-blue-900/30 text-blue-200',
+      warning: ' border-yellow-200/30 bg-yellow-700/30 text-yellow-200',
     },
   },
   defaultVariants: {

packages/web/app/src/components/ui/user-menu.tsx

@@ -2,6 +2,7 @@ import cookies from 'js-cookie';
 import { LifeBuoyIcon } from 'lucide-react';
 import { FaGithub, FaGoogle, FaKey, FaUsersSlash } from 'react-icons/fa';
 import { useMutation } from 'urql';
+import { isThemeSwitcherEnabled } from '@/components/theme/theme-provider';
 import { ThemeSwitcher } from '@/components/theme/theme-switcher';
 import { Button } from '@/components/ui/button';
 import {
@@ -206,7 +207,7 @@ export function UserMenu(props: {
                 <SettingsIcon className="mr-2 size-4" />
                 Profile settings
               </DropdownMenuItem>
-              {env.featureFlags.themeSwitcher ? (
+              {isThemeSwitcherEnabled() ? (
                 <>
                   <DropdownMenuSeparator />
                   <ThemeSwitcher />

packages/web/app/src/components/v2/accordion.tsx

@@ -74,10 +74,10 @@ function Header({
           triggerClassName,
         )}
       >
-        <span className="text-sm font-medium text-gray-900 dark:text-gray-100">{children}</span>
+        <span className="text-sm font-medium text-gray-100">{children}</span>
         <ChevronDownIcon
           className={clsx(
-            'ml-2 size-5 shrink-0 text-gray-700 ease-in-out dark:text-gray-400',
+            'ml-2 size-5 shrink-0 text-gray-400 ease-in-out',
             'group-data-[state=open]:rotate-180 group-data-[state=open]:duration-300',
           )}
         />
@@ -95,7 +95,7 @@ function Content({
 }): ReactElement {
   return (
     <A.Content className={clsx('w-full rounded-b-lg px-4 pb-3 pt-1', className)}>
-      <div className="text-sm text-gray-700 dark:text-gray-400">{children}</div>
+      <div className="text-sm text-gray-400">{children}</div>
     </A.Content>
   );
 }

packages/web/app/src/components/v2/radix-button.tsx

@@ -9,12 +9,12 @@ const Button = forwardRef<HTMLButtonElement, ComponentProps<'button'>>(
         {...props}
         className={clsx(
           'inline-flex select-none items-center justify-center rounded-md px-4 py-2 text-sm font-medium',
-          'bg-white text-gray-700 dark:bg-gray-800 dark:text-gray-100 dark:hover:bg-gray-900',
+          'bg-gray-800 text-gray-100 hover:bg-gray-900',
           'focus-within:ring',
           // Register all radix states
           'group',
-          'dark:data-[state=open]:bg-gray-900',
-          'dark:data-[state=on]:bg-gray-900',
+          'data-[state=open]:bg-gray-900',
+          'data-[state=on]:bg-gray-900',
           className,
         )}
       >

packages/web/app/src/components/v2/radix-select.tsx

@@ -51,11 +51,8 @@ export function RadixSelect<T extends string>({
           )}
         </RadixButton>
       </S.Trigger>
-      <S.Content
-        className="z-50 rounded-lg bg-white p-2 shadow-lg dark:bg-gray-800"
-        position={position}
-      >
-        <S.ScrollUpButton className="flex items-center justify-center text-gray-700 dark:text-gray-300">
+      <S.Content className="z-50 rounded-lg bg-gray-800 p-2 shadow-lg" position={position}>
+        <S.ScrollUpButton className="flex items-center justify-center text-gray-300">
           <ChevronUpIcon />
         </S.ScrollUpButton>
         <S.Viewport>
@@ -66,7 +63,7 @@ export function RadixSelect<T extends string>({
                 key={value}
                 value={value}
                 className={clsx(
-                  'relative flex items-center rounded-md px-8 py-2 text-sm font-medium text-gray-700 focus:bg-gray-100 dark:text-gray-300 dark:focus:bg-gray-900',
+                  'relative flex items-center rounded-md px-8 py-2 text-sm font-medium text-gray-300 focus:bg-gray-900',
                   'data-disabled:opacity-50',
                   'cursor-pointer select-none focus:outline-none',
                 )}
@@ -79,7 +76,7 @@ export function RadixSelect<T extends string>({
             ))}
           </S.Group>
         </S.Viewport>
-        <S.ScrollDownButton className="flex items-center justify-center text-gray-700 dark:text-gray-300">
+        <S.ScrollDownButton className="flex items-center justify-center text-gray-300">
           <ChevronDownIcon />
         </S.ScrollDownButton>
       </S.Content>

packages/web/app/src/components/v2/slider.tsx

@@ -5,7 +5,7 @@ import * as S from '@radix-ui/react-slider';
 export function Slider(props: S.SliderProps): ReactElement {
   return (
     <S.Root aria-label="value" className="relative flex h-5 touch-none items-center" {...props}>
-      <S.Track className="relative h-1 w-full grow rounded-full bg-white dark:bg-gray-800">
+      <S.Track className="relative h-1 w-full grow rounded-full bg-gray-800">
         <S.Range className="absolute h-full rounded-full bg-white" />
       </S.Track>
       <S.Thumb className={clsx('block size-5 rounded-full bg-white', 'focus-within:ring')} />

packages/web/app/src/env/frontend-public-variables.ts

@@ -23,7 +23,6 @@ export const ALLOWED_ENVIRONMENT_VARIABLES = [
   'SENTRY',
   'SENTRY_DSN',
   'MEMBER_ROLES_DEADLINE',
-  'FEATURE_FLAGS_THEME_SWITCHER_ENABLED',
 ] as const;
 
 export type AllowedEnvironmentVariables = (typeof ALLOWED_ENVIRONMENT_VARIABLES)[number];

packages/web/app/src/env/frontend.ts

@@ -96,10 +96,6 @@ const MigrationsSchema = protectedObject({
   ),
 });
 
-const FeatureFlagsSchema = protectedObject({
-  FEATURE_FLAGS_THEME_SWITCHER_ENABLED: enabledOrDisabled,
-});
-
 const envValues = getAllEnv();
 
 function buildConfig() {
@@ -112,7 +108,6 @@ function buildConfig() {
     authOkta: AuthOktaConfigSchema.safeParse(envValues),
     authOktaMultiTenant: AuthOktaMultiTenantSchema.safeParse(envValues),
     migrations: MigrationsSchema.safeParse(envValues),
-    featureFlags: FeatureFlagsSchema.safeParse(envValues),
   };
 
   const environmentErrors: Array<string> = [];
@@ -144,7 +139,6 @@ function buildConfig() {
   const authOkta = extractConfig(configs.authOkta);
   const authOktaMultiTenant = extractConfig(configs.authOktaMultiTenant);
   const migrations = extractConfig(configs.migrations);
-  const featureFlags = extractConfig(configs.featureFlags);
 
   return {
     appBaseUrl: base.APP_BASE_URL.replace(/\/$/, ''),
@@ -175,9 +169,6 @@ function buildConfig() {
     migrations: {
       member_roles_deadline: migrations.MEMBER_ROLES_DEADLINE ?? null,
     },
-    featureFlags: {
-      themeSwitcher: featureFlags.FEATURE_FLAGS_THEME_SWITCHER_ENABLED === '1',
-    },
   } as const;
 }
 

packages/web/app/src/laboratory/components/graphql-type.tsx

@@ -31,8 +31,8 @@ export const GraphQLType = (props: {
   }
 
   if (props.type instanceof GraphQLScalarType || props.type instanceof GraphQLEnumType) {
-    return <span className="text-teal-500 dark:text-teal-400">{props.type.name}</span>;
+    return <span className="text-teal-400">{props.type.name}</span>;
   }
 
-  return <span className="text-amber-500 dark:text-amber-400">{props.type.name}</span>;
+  return <span className="text-amber-400">{props.type.name}</span>;
 };

packages/web/app/src/laboratory/components/laboratory/builder.tsx

@@ -83,7 +83,7 @@ export const BuilderArgument = (props: {
           }
         }}
       />
-      <BoxIcon className="size-4 text-rose-500 dark:text-rose-400" />
+      <BoxIcon className="size-4 text-rose-400" />
       {props.field.name}: <GraphQLType type={props.field.type} />
     </Button>
   );
@@ -153,7 +153,7 @@ export const BuilderScalarField = (props: {
             size="sm"
           >
             <div className="bg-card absolute left-0 top-0 -z-20 size-full" />
-            <div className="group-hover:bg-accent dark:group-hover:bg-accent/50 absolute left-0 top-0 -z-10 size-full transition-colors" />
+            <div className="group-hover:bg-accent/50 absolute left-0 top-0 -z-10 size-full transition-colors" />
             <ChevronDownIcon
               className={cn('text-muted-foreground size-4 transition-all', {
                 '-rotate-90': !isOpen,
@@ -331,7 +331,7 @@ export const BuilderObjectField = (props: {
           size="sm"
         >
           <div className="bg-card absolute left-0 top-0 -z-20 size-full" />
-          <div className="group-hover:bg-accent dark:group-hover:bg-accent/50 absolute left-0 top-0 -z-10 size-full transition-colors" />
+          <div className="group-hover:bg-accent/50 absolute left-0 top-0 -z-10 size-full transition-colors" />
           <ChevronDownIcon
             className={cn('text-muted-foreground size-4 transition-all', {
               '-rotate-90': !isOpen,