Light Mode + OKLCH

app/components/CapacityBar.tsx

@@ -87,10 +87,10 @@ function Bar({ pct }: { pct: number }) {
   return (
     <div className="flex w-full gap-0.5">
       <div
-        className="bg-accent-secondary border-accent-secondary h-3 rounded-l border"
+        className="bg-accent border-accent-secondary h-3 rounded-l-md border"
         style={{ width: `${pct.toFixed(2)}%` }}
       ></div>
-      <div className="bg-info-secondary border-info-secondary h-3 grow rounded-r border"></div>
+      <div className="bg-info-secondary border-info-secondary h-3 grow rounded-r-md border"></div>
     </div>
   )
 }

app/components/CapacityBars.tsx

@@ -23,7 +23,7 @@ export const CapacityBars = ({
   allocatedLabel: string
 }) => {
   return (
-    <div className="1000:flex-row flex min-w-min flex-col gap-3">
+    <div className="1000:flex-row bg-default flex min-w-min flex-col gap-3">
       <CapacityBar
         icon={<Cpu16Icon />}
         title="CPU"

app/components/DocsPopover.tsx

@@ -54,7 +54,7 @@ export const DocsPopover = ({ heading, icon, summary, links }: DocsPopoverProps)
       </PopoverButton>
       <PopoverPanel
         // popover-panel needed for enter animation
-        className="popover-panel bg-raise border-secondary elevation-2 z-10 w-96 rounded-lg border"
+        className="popover-panel bg-raise light:bg-default shadow-menu z-10 w-96 rounded-lg"
         anchor={{ to: 'bottom end', gap: 12 }}
       >
         <div className="px-4">

app/components/ErrorPage.tsx

@@ -20,7 +20,7 @@ const GradientBackground = () => (
     className="fixed top-0 right-0 bottom-0 left-0 -z-10"
     style={{
       background:
-        'radial-gradient(200% 100% at 50% 100%, var(--surface-default) 0%, #161B1D 100%)',
+        'radial-gradient(200% 100% at 50% 100%, var(--surface-default) 0%, var(--surface-secondary) 100%)',
     }}
   />
 )
@@ -41,10 +41,10 @@ export function ErrorPage({ children }: Props) {
         </Link>
         <SignOutButton className="mt-4 mr-6" />
       </div>
-      <div className="bg-raise! border-secondary elevation-3 absolute top-1/2 left-1/2 flex w-96 -translate-x-1/2 -translate-y-1/2 flex-col items-center justify-center space-y-4 rounded-lg border p-8">
+      <div className="bg-raise! shadow-modal absolute top-1/2 left-1/2 flex w-96 -translate-x-1/2 -translate-y-1/2 flex-col items-center justify-center space-y-4 rounded-lg p-8">
         <div className="my-2 flex h-12 w-12 items-center justify-center">
-          <div className="bg-destructive absolute h-12 w-12 rounded-full opacity-20 motion-safe:animate-[ping_2s_cubic-bezier(0,0,0.2,1)_infinite]" />
-          <Error12Icon className="text-error relative h-8 w-8" />
+          <div className="bg-destructive-inverse absolute h-10 w-10 rounded-full opacity-40 motion-safe:animate-[ping_2s_cubic-bezier(0,0,0.2,1)_infinite]" />
+          <Error12Icon className="text-error light:text-error-secondary relative h-8 w-8" />
         </div>
 
         <div className="space-y-2 text-center">{children}</div>

app/components/InstanceAutoRestartPopover.tsx

@@ -50,7 +50,7 @@ export const InstanceAutoRestartPopover = ({ instance }: { instance: Instance })
       </PopoverButton>
       <PopoverPanel
         // popover-panel needed for enter animation
-        className="popover-panel bg-raise border-secondary elevation-2 z-10 w-96 rounded-lg border"
+        className="popover-panel bg-raise shadow-menu z-10 w-96 rounded-lg"
         anchor={{ to: 'bottom start', gap: 12 }}
       >
         <PopoverRow label="Auto Restart">

app/components/MoreActionsMenu.tsx

@@ -29,10 +29,7 @@ export const MoreActionsMenu = ({
     <DropdownMenu.Root>
       <DropdownMenu.Trigger
         aria-label={label}
-        className={cn(
-          'headless-hide-focus rounded',
-          variant === 'filled' && 'h-full w-full'
-        )}
+        className={cn('rounded-md', variant === 'filled' && 'h-full w-full')}
       >
         <div
           className={cn(

app/components/MswBanner.tsx

@@ -49,7 +49,7 @@ export function MswBanner({ disableButton }: Props) {
   return (
     <>
       {/* The [&+*]:pt-10 style is to ensure the page container isn't pushed out of screen as it uses 100vh for layout */}
-      <aside className="text-sans-md text-info-secondary bg-info-secondary absolute z-(--z-top-bar) flex h-10 w-full items-center justify-center [&+*]:pt-10">
+      <aside className="text-sans-md text-info bg-info absolute z-(--z-top-bar) flex h-10 w-full items-center justify-center [&+*]:pt-10">
         <Info16Icon className="mr-2" /> This is a technical preview.
         <button
           type="button"

app/components/PageSkeleton.tsx

@@ -52,7 +52,7 @@ export function PageSkeleton({ skipPaths }: { skipPaths?: RegExp[] }) {
             <Block className="h-4 w-14" />
           </div>
         </div>
-        <div className="" />
+        <div className="light:bg-raise" />
       </PageContainer>
     </>
   )

app/components/RefetchIntervalPicker.tsx

@@ -52,7 +52,7 @@ export function useIntervalPicker({ enabled, isLoading, fn, className }: Props)
         <button
           type="button"
           className={cn(
-            'border-default flex w-10 items-center justify-center rounded-l border-t border-b border-l disabled:cursor-default',
+            'border-default bg-default flex w-10 items-center justify-center rounded-l-md border-t border-b border-l disabled:cursor-default',
             isLoading && 'hover:bg-hover',
             !enabled && 'bg-disabled cursor-not-allowed'
           )}

app/components/Sidebar.tsx

@@ -19,7 +19,7 @@ const linkStyles = (isActive = false) =>
   cn(
     'flex h-7 items-center rounded-md px-2 text-sans-md [&>svg]:mr-2',
     isActive
-      ? 'text-accent bg-accent-secondary hover:bg-accent-secondary-hover [&>svg]:text-accent-tertiary'
+      ? 'text-accent bg-accent hover:bg-accent-hover [&>svg]:text-accent-tertiary'
       : 'hover:bg-hover [&>svg]:text-quaternary text-default'
   )
 
@@ -84,7 +84,7 @@ Sidebar.Nav = ({ children, heading }: SidebarNav) => (
       </div>
     )}
     <nav aria-label="Sidebar navigation">
-      <ul className="space-y-0.5">{children}</ul>
+      <ul className="space-y-px">{children}</ul>
     </nav>
   </div>
 )

app/components/TimeSeriesChart.tsx

@@ -64,9 +64,9 @@ const longDateTime = (ts: number) => format(new Date(ts), 'MMM d, yyyy HH:mm:ss
 
 const GRID_GRAY = 'var(--stroke-secondary)'
 const CURSOR = 'var(--chart-stroke-item)'
-const GREEN_400 = 'var(--theme-accent-400)'
-const GREEN_600 = 'var(--theme-accent-600)'
-const GREEN_800 = 'var(--theme-accent-800)'
+const GREEN_400 = 'var(--surface-accent-secondary)'
+const GREEN_600 = 'var(--content-accent-tertiary)'
+const GREEN_800 = 'var(--content-accent)'
 
 // TODO: figure out how to do this with TW classes instead. As far as I can tell
 // ticks only take direct styling
@@ -92,7 +92,7 @@ function renderTooltip(props: TooltipProps<number, string>, unit?: string) {
   } = payload[0]
   if (!timestamp || typeof value !== 'number') return null
   return (
-    <div className="text-sans-md text-secondary bg-raise border-secondary elevation-2 rounded-md border outline-0">
+    <div className="text-sans-md text-secondary bg-raise shadow-tooltip rounded-md outline-0">
       <div className="border-secondary border-b px-3 py-2 pr-6">
         {longDateTime(timestamp)}
       </div>
@@ -315,10 +315,10 @@ const MetricsMessage = ({
       </div>
     </div>
     <div
-      className="bg-accent-secondary absolute inset-x-0 top-1 bottom-12"
+      className="bg-accent absolute inset-x-0 top-1 bottom-12"
       style={{
         background:
-          'radial-gradient(197.76% 54.9% at 50% 50%, var(--surface-default) 0%, rgba(8, 15, 17, 0.00) 100%)',
+          'radial-gradient(200% 100% at 50% 100%, var(--surface-default) 0%, var(--surface-secondary) 100%)',
       }}
     />
   </>
@@ -344,7 +344,7 @@ const MetricsEmpty = () => (
     description="There is no data for this time period."
   />
 )
-export const ChartContainer = classed.div`flex w-full grow flex-col rounded-lg border border-default`
+export const ChartContainer = classed.div`flex w-full grow flex-col rounded-lg border border-default bg-default`
 
 type ChartHeaderProps = {
   title: string

app/components/TopBar.tsx

@@ -10,15 +10,20 @@ import { Link } from 'react-router'
 
 import { api, navToLogin, useApiMutation } from '@oxide/api'
 import {
+  DirectionRightIcon,
+  Monitor12Icon,
+  Moon12Icon,
   Organization16Icon,
   Profile16Icon,
   SelectArrows6Icon,
   Servers16Icon,
   Success12Icon,
+  Sun12Icon,
 } from '@oxide/design-system/icons/react'
 
 import { useCrumbs } from '~/hooks/use-crumbs'
 import { useCurrentUser } from '~/hooks/use-current-user'
+import { setThemePreference, useThemeStore, type ThemePreference } from '~/stores/theme'
 import { buttonStyle } from '~/ui/lib/Button'
 import * as DropdownMenu from '~/ui/lib/DropdownMenu'
 import { Identicon } from '~/ui/lib/Identicon'
@@ -50,13 +55,10 @@ export function TopBar({ systemOrSilo }: { systemOrSilo: 'system' | 'silo' }) {
   )
 }
 
-const bigIconBox = 'flex h-[34px] w-[34px] items-center justify-center rounded'
+const bigIconBox = 'flex h-[34px] w-[34px] items-center justify-center rounded-md'
 
 const BigIdenticon = ({ name }: { name: string }) => (
-  <Identicon
-    className={cn(bigIconBox, 'text-accent bg-accent-secondary-hover')}
-    name={name}
-  />
+  <Identicon className={cn(bigIconBox, 'text-accent bg-accent-hover')} name={name} />
 )
 
 const SystemIcon = () => (
@@ -136,7 +138,7 @@ function UserMenu() {
         <div
           className={cn(
             buttonStyle({ size: 'sm', variant: 'ghost' }),
-            'border-secondary! flex items-center gap-1.5 px-2!'
+            'flex items-center gap-1.5 px-2!'
           )}
         >
           <Profile16Icon className="text-tertiary" />
@@ -147,12 +149,77 @@ function UserMenu() {
       </DropdownMenu.Trigger>
       <DropdownMenu.Content gap={8}>
         <DropdownMenu.LinkItem to={pb.profile()}>Settings</DropdownMenu.LinkItem>
+        <ThemeSubmenu />
         <DropdownMenu.Item onSelect={() => logout.mutate({})} label="Sign out" />
       </DropdownMenu.Content>
     </DropdownMenu.Root>
   )
 }
 
+function ThemeSubmenu() {
+  const { preference } = useThemeStore()
+  return (
+    <DropdownMenu.Submenu>
+      <DropdownMenu.SubmenuTrigger className="DropdownMenuItem ox-menu-item border-secondary border-b">
+        <span className="flex w-full items-center justify-between">
+          Theme
+          <DirectionRightIcon className="text-quaternary absolute right-3" aria-hidden />
+        </span>
+      </DropdownMenu.SubmenuTrigger>
+      <DropdownMenu.SubContent>
+        <DropdownMenu.RadioGroup
+          value={preference}
+          onValueChange={(v) => setThemePreference(v as ThemePreference)}
+        >
+          <ThemeRadioItem
+            value="light"
+            icon={<Sun12Icon />}
+            label="Light"
+            selected={preference === 'light'}
+          />
+          <ThemeRadioItem
+            value="dark"
+            icon={<Moon12Icon />}
+            label="Dark"
+            selected={preference === 'dark'}
+          />
+          <ThemeRadioItem
+            value="system"
+            icon={<Monitor12Icon />}
+            label="System"
+            selected={preference === 'system'}
+          />
+        </DropdownMenu.RadioGroup>
+      </DropdownMenu.SubContent>
+    </DropdownMenu.Submenu>
+  )
+}
+
+function ThemeRadioItem({
+  value,
+  icon,
+  label,
+  selected,
+}: {
+  value: ThemePreference
+  icon: React.ReactNode
+  label: string
+  selected: boolean
+}) {
+  return (
+    <DropdownMenu.RadioItem
+      value={value}
+      className={cn('DropdownMenuItem ox-menu-item', selected && 'is-selected')}
+    >
+      <span className="flex w-full items-center gap-2">
+        <span className="text-quaternary">{icon}</span>
+        <span>{label}</span>
+        {selected && <Success12Icon className="absolute right-3" />}
+      </span>
+    </DropdownMenu.RadioItem>
+  )
+}
+
 /**
  * Choose between System and Silo-scoped route trees, or if the user doesn't
  * have access to system routes (i.e., if /v1/me has fleetViewer: false) show
@@ -161,20 +228,24 @@ function UserMenu() {
 function SiloSystemPicker({ level }: { level: 'silo' | 'system' }) {
   return (
     <DropdownMenu.Root>
-      <DropdownMenu.Trigger
-        aria-label="Switch between system and silo"
-        className="headless-hide-focus rounded-md"
-      >
-        <div className="active-clicked text-sans-md text-default border-secondary hover:bg-hover flex items-center rounded-md border px-2 py-1.5">
+      <DropdownMenu.Trigger aria-label="Switch between system and silo">
+        <div
+          className={cn(
+            buttonStyle({ size: 'sm', variant: 'ghost' }),
+            'flex items-center gap-1.5 px-2!'
+          )}
+        >
           <div className="text-tertiary flex items-center">
             {level === 'system' ? <Servers16Icon /> : <Organization16Icon />}
           </div>
-          <div className="mr-3 ml-1.5">{level === 'system' ? 'System' : 'Silo'}</div>
+          <span className="text-sans-md text-default normal-case">
+            {level === 'system' ? 'System' : 'Silo'}
+          </span>
           {/* aria-hidden is a tip from the Reach docs */}
-          <SelectArrows6Icon className="text-quaternary" aria-hidden />
+          <SelectArrows6Icon className="text-quaternary ml-3 w-1.5!" aria-hidden />
         </div>
       </DropdownMenu.Trigger>
-      <DropdownMenu.Content className="mt-2 max-h-80 overflow-y-auto" anchor="bottom start">
+      <DropdownMenu.Content className="mt-2" anchor="bottom start">
         <SystemSiloItem to={pb.silos()} label="System" isSelected={level === 'system'} />
         <SystemSiloItem to={pb.projects()} label="Silo" isSelected={level === 'silo'} />
       </DropdownMenu.Content>

app/forms/image-upload.tsx

@@ -675,7 +675,7 @@ export default function ImageCreate() {
                   label="Image uploaded successfully"
                   className={
                     allDone
-                      ? 'bg-accent-secondary *:text-accent transition-colors'
+                      ? 'bg-accent *:text-accent transition-colors'
                       : 'transition-colors'
                   }
                 />

app/layouts/AuthLayout.tsx

@@ -15,7 +15,7 @@ export default function AuthLayout() {
       className="relative h-screen"
       style={{
         background:
-          'radial-gradient(200% 100% at 50% 100%, var(--surface-default) 0%, #161B1D 100%)',
+          'radial-gradient(200% 100% at 50% 100%, var(--surface-default) 0%, var(--surface-secondary) 100%)',
       }}
     >
       <OxideLogo className="absolute bottom-8 left-1/2 -translate-x-1/2" />

app/layouts/RootLayout.tsx

@@ -11,6 +11,7 @@ import { Outlet, useNavigation } from 'react-router'
 import { MswBanner } from '~/components/MswBanner'
 import { ToastStack } from '~/components/ToastStack'
 import { useCrumbs } from '~/hooks/use-crumbs'
+import { useApplyTheme } from '~/stores/theme'
 
 /**
  * non top-level route: Instances / mock-project / Projects / maze-war / Oxide Console
@@ -28,6 +29,7 @@ const useTitle = () =>
  * anything to actually belong here.
  */
 export default function RootLayout() {
+  useApplyTheme()
   const title = useTitle()
   useEffect(() => {
     document.title = title

app/layouts/helpers.tsx

@@ -22,7 +22,7 @@ export function ContentPane() {
   return (
     <div
       ref={ref}
-      className="flex flex-col overflow-auto"
+      className="light:bg-raise flex flex-col overflow-auto"
       id="scroll-container"
       data-testid="scroll-container"
     >

app/pages/DeviceAuthSuccessPage.tsx

@@ -12,7 +12,7 @@ import { Success12Icon } from '@oxide/design-system/icons/react'
  */
 export default function DeviceAuthSuccessPage() {
   return (
-    <div className="bg-raise! border-secondary elevation-3 flex w-full max-w-[470px] flex-col items-center rounded-lg border p-9 text-center">
+    <div className="bg-raise! shadow-modal flex w-full max-w-[470px] flex-col items-center rounded-lg p-9 text-center">
       <div className="my-2 flex h-12 w-12 items-center justify-center">
         <div className="bg-accent absolute h-12 w-12 rounded-full opacity-20 motion-safe:animate-[ping_2s_cubic-bezier(0,0,0.2,1)_infinite]" />
         <Success12Icon className="text-accent relative h-8 w-8" />

app/pages/DeviceAuthVerifyPage.tsx

@@ -33,7 +33,7 @@ export default function DeviceAuthVerifyPage() {
 
   return (
     <form
-      className="bg-raise! border-secondary elevation-3 w-full max-w-[470px] rounded-lg border p-9 text-center"
+      className="bg-raise! shadow-modal w-full max-w-[470px] rounded-lg p-9 text-center"
       onSubmit={(event) => {
         event.preventDefault()
 

app/pages/LoginPage.tsx

@@ -44,7 +44,7 @@ export default function LoginPage() {
     <>
       <div className="mb-3 flex items-end space-x-3">
         <Identicon
-          className="text-accent bg-accent-secondary-hover flex h-[34px] w-[34px] items-center justify-center rounded-md"
+          className="text-accent bg-accent-hover flex h-[34px] w-[34px] items-center justify-center rounded-md"
           name={silo}
         />
         <div className="text-sans-2xl text-raise">{silo}</div>

app/pages/LoginPageSaml.tsx

@@ -24,7 +24,7 @@ export default function LoginPageSaml() {
     <>
       <div className="mb-3 flex items-end space-x-3">
         <Identicon
-          className="text-accent bg-accent-secondary-hover flex h-[34px] w-[34px] items-center justify-center rounded-md"
+          className="text-accent bg-accent-hover flex h-[34px] w-[34px] items-center justify-center rounded-md"
           name={silo}
         />
         <div className="text-sans-2xl text-raise">{silo}</div>