pride gay theme yay

webui/src/components/CardFrame/index.jsx

@@ -60,7 +60,7 @@ export default function CardFrame({
   return (
     <section
       className={cx(
-        'panel-section border border-neutral-500/60 bg-neutral-900/95 shadow-[0_1px_0_rgba(255,255,255,0.05)_inset,0_10px_24px_rgba(0,0,0,0.28)]',
+        'panel-section border border-neutral-500/60 bg-neutral-900/95',
         clipOverflow ? 'overflow-hidden' : 'overflow-visible',
         fillHeight && 'flex h-full min-h-0 flex-col',
         className,

webui/src/components/RightPaneTabs/index.jsx

@@ -27,6 +27,7 @@ import OverseerPreferencePanel from '../OverseerPreferencePanel/index.jsx';
 import CardFrame from '../CardFrame/index.jsx';
 import { useState } from 'react';
 import { useManualDockAssist } from '../../features/manualDockAssist/useManualDockAssist.js';
+import { themeGapClass, themeStackClass } from '../../themeFlags.js';
 
 function TopDownMapPanel() {
   const {
@@ -75,10 +76,10 @@ function DriveDockPanel() {
   const cameraDisabled = Boolean(!roverId || dockAssist.cameraLocked);
 
   return (
-    <section className="panel-section grid h-full min-h-0 grid-rows-[minmax(0,1fr)_auto] gap-0.5">
+    <section className={`panel-section grid h-full min-h-0 grid-rows-[minmax(0,1fr)_auto] ${themeGapClass}`}>
       <DriveDockAction layout="desktop" expand driveDockState={driveDockState} />
       {!hideInlineControls ? (
-        <div className="surface space-y-0.5 p-0 text-sm text-slate-200">
+        <div className={`surface ${themeStackClass} p-0 text-sm text-slate-200`}>
           {nightVisionAvailable && (
             <NightVisionControl
               nightVisionOn={nightVisionState?.nightVisionOn}
@@ -107,7 +108,7 @@ function DriveDockPanel() {
               onChange={setServoAngle}
               keyDownLabel={downLabel}
               keyUpLabel={upLabel}
-              className="space-y-0.5 px-1 py-1"
+              className={`${themeStackClass} px-1 py-1`}
               labelRowClass="text-xs text-slate-300"
               labelClass=""
               valueClass="font-mono text-slate-100"
@@ -149,7 +150,7 @@ export default function RightPaneTabs({ layout, onOpenHelpOverlay }) {
       ownAudioForward?.state === 'playing',
   );
   return (
-    <section className="panel text-base">
+    <section className="text-base">
       <Tabs defaultTab="telemetry" currentTab={activeTab} onTabChange={setActiveTab}>
         <TabList>
           <Tab id="telemetry">Controls</Tab>
@@ -168,19 +169,19 @@ export default function RightPaneTabs({ layout, onOpenHelpOverlay }) {
         </TabList>
         <TabPanels>
           <TabPanel id="telemetry">
-            <div className="space-y-0.5">
-              <div className="grid items-stretch gap-0.5 grid-cols-[minmax(0,1.35fr)_minmax(0,0.95fr)]">
+            <div className={themeStackClass}>
+              <div className={`grid items-stretch ${themeGapClass} grid-cols-[minmax(0,1.35fr)_minmax(0,0.95fr)]`}>
                 <TopDownMapPanel />
                 <DriveDockPanel />
               </div>
-              <div className="grid gap-0.5 grid-cols-[minmax(0,1fr)_minmax(0,0.9fr)_minmax(0,0.75fr)]">
+              <div className={`grid ${themeGapClass} grid-cols-[minmax(0,1fr)_minmax(0,0.9fr)_minmax(0,0.75fr)]`}>
                 <RoverQueuesPanel />
                 <ReplaySourcesPanel panelId="replay-sources-desktop" fillHeight />
                 <LinkButtonsPanel />
               </div>
-              <div className="grid items-stretch gap-0.5 grid-cols-[minmax(0,1.3fr)_minmax(0,0.22fr)] h-[14rem]">
+              <div className={`grid items-stretch ${themeGapClass} grid-cols-[minmax(0,1.3fr)_minmax(0,0.22fr)] h-[14rem]`}>
                 <ChatPanel fillHeight />
-                <div className="grid min-h-0 gap-0.5 grid-rows-[auto_minmax(0,1fr)]">
+                <div className={`grid min-h-0 ${themeGapClass} grid-rows-[auto_minmax(0,1fr)]`}>
                   <OverseerPreferencePanel />
                   <RawUserPilePanel compact hideNicknameForm fillHeight />
                 </div>

webui/src/components/Tabs/index.jsx

@@ -2,7 +2,7 @@
 // Purpose: Defines the Tabs module and the local helpers/components used in this file.
 // Scope: Keeps behavior unchanged while isolating this concern into a clear, single-responsibility unit.
 import { createContext, useCallback, useContext, useMemo, useState, useEffect } from 'react';
-import { useSessionSelector } from '../../context/SessionContext.jsx';
+import { themeGapClass, themeStackClass } from '../../themeFlags.js';
 
 const TabsContext = createContext(null);
 
@@ -34,28 +34,6 @@ function classNames(...parts) {
   return parts.filter(Boolean).join(' ');
 }
 
-function hexToRgb(hex) {
-  const raw = String(hex || '').trim();
-  const normalized = raw.startsWith('#') ? raw.slice(1) : raw;
-  if (!/^[0-9a-fA-F]{3}$|^[0-9a-fA-F]{6}$/.test(normalized)) return null;
-  const expanded =
-    normalized.length === 3
-      ? normalized
-          .split('')
-          .map((ch) => ch + ch)
-          .join('')
-      : normalized;
-  return {
-    r: Number.parseInt(expanded.slice(0, 2), 16),
-    g: Number.parseInt(expanded.slice(2, 4), 16),
-    b: Number.parseInt(expanded.slice(4, 6), 16),
-  };
-}
-
-function rgba(rgb, alpha) {
-  return `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${alpha})`;
-}
-
 export default function Tabs({ children, defaultTab, currentTab, onTabChange, variant = DEFAULT_VARIANT }) {
   const [internalTab, setInternalTab] = useState(defaultTab ?? null);
   const [tabOrder, setTabOrder] = useState([]);
@@ -118,30 +96,14 @@ export default function Tabs({ children, defaultTab, currentTab, onTabChange, va
 }
 
 export function TabList({ children, className = '' }) {
-  const ownRoverColor = useSessionSelector((state) => {
-    const roverId = String(state.session?.assignment?.roverId || '').trim();
-    if (!roverId) return null;
-    const roster = Array.isArray(state.session?.roster) ? state.session.roster : [];
-    const rover = roster.find((entry) => String(entry?.id) === roverId);
-    return rover?.color || null;
-  });
-  const accentRgb = hexToRgb(ownRoverColor);
-  const frameStyle = accentRgb ? { borderColor: rgba(accentRgb, 0.35) } : undefined;
-  const headerStyle = accentRgb
-    ? {
-        backgroundImage: `linear-gradient(90deg, rgba(23,23,23,0.96) 0%, rgba(38,38,38,0.94) 58%, ${rgba(accentRgb, 0.18)} 100%)`,
-      }
-    : undefined;
-
   return (
     <div
       className={classNames(
-        'panel-section overflow-hidden border border-neutral-500/60 bg-neutral-900/95 p-0.5 shadow-[0_1px_0_rgba(255,255,255,0.05)_inset,0_10px_24px_rgba(0,0,0,0.28)]',
+        'panel-section overflow-hidden border border-neutral-500/60 bg-neutral-900/95 p-0.5',
         className
       )}
-      style={frameStyle}
     >
-      <div className="flex gap-0.5" style={headerStyle}>{children}</div>
+      <div className={`flex ${themeGapClass}`}>{children}</div>
     </div>
   );
 }
@@ -176,7 +138,7 @@ export function Tab({ id, children, className = '', disabled = false, highlight
 }
 
 export function TabPanels({ children, className = '' }) {
-  return <div className={classNames('mt-0 space-y-0.5', className)}>{children}</div>;
+  return <div className={classNames('mt-0', themeStackClass, className)}>{children}</div>;
 }
 
 export function TabPanel({ id, children, keepMounted = false }) {