diff --git a/ui/src/app.less b/ui/src/app.less
index db80238d10..027868a457 100644
--- a/ui/src/app.less
+++ b/ui/src/app.less
@@ -62,6 +62,41 @@ body, html {
     font-family: 'Poppins', sans-serif;
 }
 
+:root {
+    --app-bg-layout: #f7f8fa;
+    --app-bg-elevated: #ffffff;
+    --app-bg-subtle: #f4f6f9;
+    --app-bg-overlay: rgba(0, 0, 0, 0.4);
+    --app-sidebar-bg: #111111;
+    --app-sidebar-text: #a0b3c2;
+    --app-sidebar-text-active: #cddae4;
+    --app-border-subtle: rgba(0, 0, 0, 0.05);
+    --app-border-strong: #d9d9d9;
+    --app-text: #454545;
+    --app-text-secondary: #6b7280;
+    --app-minimap-border: #9cccf1;
+}
+
+[data-theme='dark'] {
+    --app-bg-layout: #0f141a;
+    --app-bg-elevated: #161d24;
+    --app-bg-subtle: #1b242d;
+    --app-bg-overlay: rgba(0, 0, 0, 0.55);
+    --app-sidebar-bg: #0b1016;
+    --app-sidebar-text: #8da0b3;
+    --app-sidebar-text-active: #d7e3ef;
+    --app-border-subtle: rgba(255, 255, 255, 0.08);
+    --app-border-strong: #2a333d;
+    --app-text: #d7dee7;
+    --app-text-secondary: #9cadbd;
+    --app-minimap-border: #36536b;
+}
+
+body {
+    background: var(--app-bg-layout);
+    color: var(--app-text);
+}
+
 .ant-btn {
     box-shadow: none !important;
 }
diff --git a/ui/src/app.tsx b/ui/src/app.tsx
index 5ceb990d50..fbdc85eb82 100644
--- a/ui/src/app.tsx
+++ b/ui/src/app.tsx
@@ -9,7 +9,7 @@ import { Project } from '@ui/pages/project';
 
 import { paths } from './config/paths';
 import { queryClient } from './config/query-client';
-import { themeConfig } from './config/themeConfig';
+import { getThemeConfig } from './config/themeConfig';
 import { AppExtensions } from './extensions/pages/app-extensions';
 import { ArgoCDExtension } from './extensions/pages/argocd-extension';
 import { ProjectExtensions } from './extensions/pages/project-extensions';
@@ -19,6 +19,8 @@ import { TokenRenew } from './features/auth/token-renew';
 import { MainLayout } from './features/common/layout/main-layout';
 import { Events } from './features/project/events/events';
 import { ProjectSettings } from './features/project/settings/project-settings';
+import { ThemeProvider } from './features/theme/theme-provider';
+import { useThemeContext } from './features/theme/use-theme-context';
 import { AnalysisRunLogsPage } from './pages/analysis-run-logs';
 import { Downloads } from './pages/downloads/downloads';
 import { Login } from './pages/login/login';
@@ -29,59 +31,69 @@ import { User } from './pages/user';
 import './app.less';
 import 'antd/dist/reset.css';
 
-export const App = () => (
-  <TransportProvider transport={transport}>
-    <QueryClientProvider client={queryClient}>
-      <ConfigProvider theme={themeConfig}>
-        <AuthContextProvider>
-          <BrowserRouter>
-            <Routes>
-              <Route element={<ProtectedRoute />}>
-                <Route element={<MainLayout />}>
-                  <Route path={paths.projects} element={<Projects />} />
-                  <Route path={paths.project} element={<Project />} />
-                  <Route path={paths.projectEvents} element={<Events />} />
-                  <Route path={paths.stage} element={<Project />} />
-                  <Route path={paths.promotion} element={<Project />} />
-                  <Route path={paths.promote} element={<Project />} />
-                  <Route path={paths.freight} element={<Project />} />
-                  <Route path={paths.warehouse} element={<Project />} />
-                  <Route path={paths.downloads} element={<Downloads />} />
-                  <Route path={paths.user} element={<User />} />
-                  <Route
-                    path={paths.createStage}
-                    element={<Project tab='pipelines' creatingStage={true} />}
-                  />
-                  <Route
-                    path={paths.createWarehouse}
-                    element={<Project tab='pipelines' creatingWarehouse />}
-                  />
-                  <Route path={paths.promotionTasks} element={<Project tab='promotionTasks' />} />
-                  <Route path={paths.projectSettings}>
-                    <Route index element={<ProjectSettings />} />
-                    <Route path='*' element={<ProjectSettings />} />
-                  </Route>
-                  <Route path={paths.projectExtensions}>
-                    <Route path='*' element={<ProjectExtensions />} />
-                  </Route>
-                  <Route path={paths.projectArgoCDExtension} element={<ArgoCDExtension />} />
+const AppContent = () => {
+  const { resolvedTheme } = useThemeContext();
+
+  return (
+    <ConfigProvider theme={getThemeConfig(resolvedTheme)}>
+      <AuthContextProvider>
+        <BrowserRouter>
+          <Routes>
+            <Route element={<ProtectedRoute />}>
+              <Route element={<MainLayout />}>
+                <Route path={paths.projects} element={<Projects />} />
+                <Route path={paths.project} element={<Project />} />
+                <Route path={paths.projectEvents} element={<Events />} />
+                <Route path={paths.stage} element={<Project />} />
+                <Route path={paths.promotion} element={<Project />} />
+                <Route path={paths.promote} element={<Project />} />
+                <Route path={paths.freight} element={<Project />} />
+                <Route path={paths.warehouse} element={<Project />} />
+                <Route path={paths.downloads} element={<Downloads />} />
+                <Route path={paths.user} element={<User />} />
+                <Route
+                  path={paths.createStage}
+                  element={<Project tab='pipelines' creatingStage={true} />}
+                />
+                <Route
+                  path={paths.createWarehouse}
+                  element={<Project tab='pipelines' creatingWarehouse />}
+                />
+                <Route path={paths.promotionTasks} element={<Project tab='promotionTasks' />} />
+                <Route path={paths.projectSettings}>
+                  <Route index element={<ProjectSettings />} />
+                  <Route path='*' element={<ProjectSettings />} />
+                </Route>
+                <Route path={paths.projectExtensions}>
+                  <Route path='*' element={<ProjectExtensions />} />
+                </Route>
+                <Route path={paths.projectArgoCDExtension} element={<ArgoCDExtension />} />
 
-                  <Route path={paths.appExtensions}>
-                    <Route path='*' element={<AppExtensions />} />
-                  </Route>
-                  <Route path={paths.settings}>
-                    <Route index element={<Settings />} />
-                    <Route path='*' element={<Settings />} />
-                  </Route>
+                <Route path={paths.appExtensions}>
+                  <Route path='*' element={<AppExtensions />} />
+                </Route>
+                <Route path={paths.settings}>
+                  <Route index element={<Settings />} />
+                  <Route path='*' element={<Settings />} />
                 </Route>
-                <Route path={paths.analysisRunLogs} element={<AnalysisRunLogsPage />} />
               </Route>
-              <Route path={paths.login} element={<Login />} />
-              <Route path={paths.tokenRenew} element={<TokenRenew />} />
-            </Routes>
-          </BrowserRouter>
-        </AuthContextProvider>
-      </ConfigProvider>
+              <Route path={paths.analysisRunLogs} element={<AnalysisRunLogsPage />} />
+            </Route>
+            <Route path={paths.login} element={<Login />} />
+            <Route path={paths.tokenRenew} element={<TokenRenew />} />
+          </Routes>
+        </BrowserRouter>
+      </AuthContextProvider>
+    </ConfigProvider>
+  );
+};
+
+export const App = () => (
+  <TransportProvider transport={transport}>
+    <QueryClientProvider client={queryClient}>
+      <ThemeProvider>
+        <AppContent />
+      </ThemeProvider>
       <ReactQueryDevtools buttonPosition='bottom-left' />
     </QueryClientProvider>
   </TransportProvider>
diff --git a/ui/src/config/themeConfig.ts b/ui/src/config/themeConfig.ts
index 5f38b0c983..d1fbdb0279 100644
--- a/ui/src/config/themeConfig.ts
+++ b/ui/src/config/themeConfig.ts
@@ -1,6 +1,9 @@
+import { theme } from 'antd';
 import { ThemeConfig } from 'antd/es/config-provider';
 import { MapToken } from 'antd/es/theme/interface';
 
+import type { ResolvedTheme } from '@ui/features/theme/types';
+
 export const token: Partial<MapToken> = {
   colorPrimary: '#30476c',
   fontSizeHeading1: 28,
@@ -8,32 +11,54 @@ export const token: Partial<MapToken> = {
   fontSizeHeading3: 20,
   fontSizeHeading4: 18,
   fontSizeHeading5: 14,
-  colorText: '#454545',
   borderRadius: 8,
-  fontFamily: 'Poppins, sans-serif',
-  colorBgLayout: '#f7f8fa'
+  fontFamily: 'Poppins, sans-serif'
 };
 
-export const themeConfig: ThemeConfig = {
-  // ...token,
-  token,
-  components: {
-    Menu: {
-      itemActiveBg: '#ebedf1',
-      itemSelectedBg: '#ebedf1',
-      itemHoverBg: '#f8f9fb',
-      itemHeight: 36
-    },
-    Layout: {
-      headerBg: '#fff',
-      headerHeight: 50,
-      headerPadding: '0 16px'
-    },
-    Card: {
-      borderRadius: 8
+const lightToken: Partial<MapToken> = {
+  colorText: '#454545',
+  colorBgLayout: '#f7f8fa',
+  colorBgContainer: '#ffffff',
+  colorBorderSecondary: '#eef2f6'
+};
+
+const darkToken: Partial<MapToken> = {
+  colorText: '#d7dee7',
+  colorTextSecondary: '#9cadbd',
+  colorBgLayout: '#0f141a',
+  colorBgContainer: '#161d24',
+  colorBorder: '#2a333d',
+  colorBorderSecondary: '#222b34'
+};
+
+export const getThemeConfig = (mode: ResolvedTheme): ThemeConfig => {
+  const isDark = mode === 'dark';
+
+  return {
+    cssVar: true,
+    algorithm: isDark ? theme.darkAlgorithm : theme.defaultAlgorithm,
+    token: {
+      ...token,
+      ...(isDark ? darkToken : lightToken)
     },
-    Button: {
-      contentFontSizeSM: 13
+    components: {
+      Menu: {
+        itemActiveBg: isDark ? '#1d2630' : '#ebedf1',
+        itemSelectedBg: isDark ? '#1d2630' : '#ebedf1',
+        itemHoverBg: isDark ? '#18212a' : '#f8f9fb',
+        itemHeight: 36
+      },
+      Layout: {
+        headerBg: isDark ? '#161d24' : '#fff',
+        headerHeight: 50,
+        headerPadding: '0 16px'
+      },
+      Card: {
+        borderRadius: 8
+      },
+      Button: {
+        contentFontSizeSM: 13
+      }
     }
-  }
+  };
 };
diff --git a/ui/src/features/assemble-freight/artifact-menu-item.tsx b/ui/src/features/assemble-freight/artifact-menu-item.tsx
index b13004d957..513d312139 100644
--- a/ui/src/features/assemble-freight/artifact-menu-item.tsx
+++ b/ui/src/features/assemble-freight/artifact-menu-item.tsx
@@ -12,10 +12,13 @@ export interface ArtifactMenuItemProps {
 export const ArtifactMenuItem = ({ onClick, selected, children }: ArtifactMenuItemProps) => (
   <div
     onClick={onClick}
-    className={classNames(
-      'p-2 bg-white mb-1 cursor-pointer rounded-md border border-solid border-gray-100 break-words',
-      { 'border-sky-500': selected }
-    )}
+    className={classNames('p-2 mb-1 cursor-pointer rounded-md border border-solid break-words', {
+      'border-sky-500': selected
+    })}
+    style={{
+      background: 'var(--app-bg-elevated)',
+      borderColor: selected ? undefined : 'var(--app-border-subtle)'
+    }}
   >
     {children}
   </div>
diff --git a/ui/src/features/common/code-editor/yaml-editor-lazy.tsx b/ui/src/features/common/code-editor/yaml-editor-lazy.tsx
index 91a3644b41..b272104eb0 100644
--- a/ui/src/features/common/code-editor/yaml-editor-lazy.tsx
+++ b/ui/src/features/common/code-editor/yaml-editor-lazy.tsx
@@ -6,6 +6,8 @@ import { configureMonacoYaml } from 'monaco-yaml';
 import React, { FC, useEffect, useRef } from 'react';
 import yaml from 'yaml';
 
+import { useThemeContext } from '@ui/features/theme/use-theme-context';
+
 import styles from './yaml-editor.module.less';
 
 loader.config({ monaco });
@@ -41,6 +43,8 @@ const YamlEditor: FC<YamlEditorProps> = (props) => {
     resourceType
   } = props;
 
+  const { resolvedTheme } = useThemeContext();
+
   const handleOnChange = (newValue: string | undefined) => {
     onChange?.(newValue);
   };
@@ -100,10 +104,11 @@ const YamlEditor: FC<YamlEditorProps> = (props) => {
         <div>{label}</div>
       </Flex>
       <div
-        style={{ border: '1px solid #d9d9d9', height, overflow: 'hidden' }}
+        style={{ border: '1px solid var(--ant-color-border)', height, overflow: 'hidden' }}
         className={className}
       >
         <Editor
+          theme={resolvedTheme === 'dark' ? 'vs-dark' : 'light'}
           options={{
             readOnly: disabled,
             lineDecorationsWidth: 5,
diff --git a/ui/src/features/common/layout/base-header.tsx b/ui/src/features/common/layout/base-header.tsx
index 01720be0d3..db27bd6279 100644
--- a/ui/src/features/common/layout/base-header.tsx
+++ b/ui/src/features/common/layout/base-header.tsx
@@ -4,7 +4,7 @@ import { PropsWithChildren } from 'react';
 export const BaseHeader = ({ children }: PropsWithChildren) => (
   <Header
     className='flex items-center justify-between'
-    style={{ borderBottom: '2px solid rgba(0,0,0,.05)' }}
+    style={{ borderBottom: '2px solid var(--app-border-subtle)' }}
   >
     {children}
   </Header>
diff --git a/ui/src/features/common/layout/main-layout.module.less b/ui/src/features/common/layout/main-layout.module.less
index b21c6bd4e7..e77c8de60d 100644
--- a/ui/src/features/common/layout/main-layout.module.less
+++ b/ui/src/features/common/layout/main-layout.module.less
@@ -8,14 +8,14 @@
   display: flex;
   flex-direction: column;
   flex: 0 0 110px;
-  background-color: #111;
+  background-color: var(--app-sidebar-bg);
   color: @colorWhite;
 }
 
 .contentWrapper {
   position: relative;
   flex: 1;
-  background-color: @colorBgLayout;
+  background-color: var(--app-bg-layout);
   overflow: hidden;
 }
 
@@ -49,10 +49,19 @@
 }
 
 .logout {
-  color: #a0b3c2;
+  color: var(--app-sidebar-text);
   margin: ~'@{sizeSM}px 0';
 
   &:hover {
-    color: #cddae4 !important;
+    color: var(--app-sidebar-text-active) !important;
+  }
+}
+
+.themeButton {
+  color: var(--app-sidebar-text);
+  margin: 0 auto;
+
+  &:hover {
+    color: var(--app-sidebar-text-active) !important;
   }
 }
diff --git a/ui/src/features/common/layout/main-layout.tsx b/ui/src/features/common/layout/main-layout.tsx
index 5fdfaa607e..6890115927 100644
--- a/ui/src/features/common/layout/main-layout.tsx
+++ b/ui/src/features/common/layout/main-layout.tsx
@@ -20,6 +20,7 @@ import { KargoLogo } from '@ui/features/common/logo/logo';
 
 import * as styles from './main-layout.module.less';
 import { NavItem } from './nav-item/nav-item';
+import { ThemeToggle } from './theme-toggle';
 
 export const MainLayout = () => {
   const { logout, JWTInfo } = useAuthContext();
@@ -69,6 +70,7 @@ export const MainLayout = () => {
               </NavItem>
             </nav>
 
+            <ThemeToggle />
             <Button
               className={styles.logout}
               onClick={logout}
diff --git a/ui/src/features/common/layout/nav-item/nav-item.module.less b/ui/src/features/common/layout/nav-item/nav-item.module.less
index a39a96c92b..c63833cd3c 100644
--- a/ui/src/features/common/layout/nav-item/nav-item.module.less
+++ b/ui/src/features/common/layout/nav-item/nav-item.module.less
@@ -1,5 +1,5 @@
 .navItem {
-  color: #a0b3c2;
+  color: var(--app-sidebar-text);
   text-decoration: none;
   display: flex;
   flex-direction: column;
@@ -12,6 +12,6 @@
 
   &:hover,
   &.active {
-    color: #cddae4;
+    color: var(--app-sidebar-text-active);
   }
 }
diff --git a/ui/src/features/common/layout/theme-toggle.tsx b/ui/src/features/common/layout/theme-toggle.tsx
new file mode 100644
index 0000000000..34e2caa0dd
--- /dev/null
+++ b/ui/src/features/common/layout/theme-toggle.tsx
@@ -0,0 +1,57 @@
+import { faCircleHalfStroke, faDesktop, faMoon, faSun } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { Button, Dropdown, MenuProps, Tooltip } from 'antd';
+
+import { ThemePreference } from '@ui/features/theme/types';
+import { useThemeContext } from '@ui/features/theme/use-theme-context';
+
+import * as styles from './main-layout.module.less';
+
+const labels: Record<ThemePreference, string> = {
+  system: 'System',
+  light: 'Light',
+  dark: 'Dark'
+};
+
+export const ThemeToggle = () => {
+  const { preference, setPreference } = useThemeContext();
+
+  const items: MenuProps['items'] = [
+    {
+      key: 'system',
+      label: 'System',
+      icon: <FontAwesomeIcon icon={faDesktop} />
+    },
+    {
+      key: 'light',
+      label: 'Light',
+      icon: <FontAwesomeIcon icon={faSun} />
+    },
+    {
+      key: 'dark',
+      label: 'Dark',
+      icon: <FontAwesomeIcon icon={faMoon} />
+    }
+  ];
+
+  return (
+    <Dropdown
+      menu={{
+        items,
+        selectable: true,
+        selectedKeys: [preference],
+        onClick: ({ key }) => setPreference(key as ThemePreference)
+      }}
+      placement='top'
+      trigger={['click']}
+    >
+      <Tooltip title={`Theme: ${labels[preference]}`} placement='right'>
+        <Button
+          className={styles.themeButton}
+          type='text'
+          icon={<FontAwesomeIcon icon={faCircleHalfStroke} />}
+        />
+      </Tooltip>
+    </Dropdown>
+  );
+};
diff --git a/ui/src/features/project/list/project-item/project-item.module.less b/ui/src/features/project/list/project-item/project-item.module.less
index 05cb6edc80..f290c4b969 100644
--- a/ui/src/features/project/list/project-item/project-item.module.less
+++ b/ui/src/features/project/list/project-item/project-item.module.less
@@ -3,7 +3,7 @@
   border-radius: ~'@{borderRadiusLG}px';
   border: 1px solid @colorBorder;
   text-decoration: none !important;
-  background-color: @colorBgBase;
+  background-color: @colorBgContainer;
   transition: border-color .1s;
   color: inherit;
 
diff --git a/ui/src/features/project/list/project-list-filter.tsx b/ui/src/features/project/list/project-list-filter.tsx
index 99db816b8a..4fc4510f14 100644
--- a/ui/src/features/project/list/project-list-filter.tsx
+++ b/ui/src/features/project/list/project-list-filter.tsx
@@ -47,7 +47,8 @@ export const ProjectListFilter = ({
         placeholder='Search...'
         options={filteredProjects?.map((p) => ({ value: p.metadata?.name }))}
         onChange={setFilter}
-        className='w-full mr-2 bg-white'
+        className='w-full mr-2'
+        style={{ background: 'var(--app-bg-elevated)' }}
         value={filter}
         onKeyDown={handleKeyDown}
         onSelect={handleSelect}
diff --git a/ui/src/features/project/pipelines/freight/freight-timeline-filters.tsx b/ui/src/features/project/pipelines/freight/freight-timeline-filters.tsx
index 06080b6127..e62a668b48 100644
--- a/ui/src/features/project/pipelines/freight/freight-timeline-filters.tsx
+++ b/ui/src/features/project/pipelines/freight/freight-timeline-filters.tsx
@@ -3,7 +3,7 @@ import { faAnchor, faFilter, faTimes, IconDefinition } from '@fortawesome/free-s
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { Button, Checkbox, Select, SelectProps } from 'antd';
 import classNames from 'classnames';
-import { useMemo } from 'react';
+import { CSSProperties, useMemo } from 'react';
 
 import { FreightTimelineControllerContextType } from '@ui/features/project/pipelines/context/freight-timeline-controller-context';
 import { Freight } from '@ui/gen/api/v1alpha1/generated_pb';
@@ -16,6 +16,7 @@ type FreightTimelineFiltersProps = {
   collapsed: boolean;
   onCollapseToggle(): void;
   className?: string;
+  style?: CSSProperties;
   preferredFilter: FreightTimelineControllerContextType['preferredFilter'];
   onPreferredFilterChange(next: FreightTimelineControllerContextType['preferredFilter']): void;
   // all freights to cataloging
@@ -55,7 +56,7 @@ export const FreightTimelineFilters = (props: FreightTimelineFiltersProps) => {
   }, [props.freights]);
 
   return (
-    <div className={classNames(props.className)}>
+    <div className={classNames(props.className)} style={props.style}>
       <span className='text-xs flex items-center gap-2'>
         {!props.collapsed && (
           <div className='font-semibold flex items-center gap-2'>
diff --git a/ui/src/features/project/pipelines/freight/freight-timeline.tsx b/ui/src/features/project/pipelines/freight/freight-timeline.tsx
index 1766b367a8..cd87beae44 100644
--- a/ui/src/features/project/pipelines/freight/freight-timeline.tsx
+++ b/ui/src/features/project/pipelines/freight/freight-timeline.tsx
@@ -169,23 +169,28 @@ export const FreightTimeline = (props: { freights: Freight[]; project: string })
           <BaseHeader>
             <PromotionModeHeader
               loading={getPromotionEligibleFreightQuery.isFetching}
-              className='bg-white space-x-2'
+              className='space-x-2'
+              style={{ background: 'var(--app-bg-elevated)' }}
             />
           </BaseHeader>
         </div>
       )}
       <div
-        className={classNames('freightTimeline', 'bg-white py-2 flex gap-0 relative z-20')}
-        style={{ borderBottom: '2px solid rgba(0,0,0,.05)' }}
+        className={classNames('freightTimeline', 'py-2 flex gap-0 relative z-20')}
+        style={{
+          background: 'var(--app-bg-elevated)',
+          borderBottom: '2px solid var(--app-border-subtle)'
+        }}
       >
         <FreightTimelineFilters
-          className='bg-white px-3 z-10'
+          className='px-3 z-10'
           collapsed={filtersCollapsed}
           filteredFreights={filteredFreights}
           freights={props.freights}
           onCollapseToggle={() => setFilterCollapsed(!filtersCollapsed)}
           onPreferredFilterChange={freightTimelineControllerContext.setPreferredFilter}
           preferredFilter={freightTimelineControllerContext.preferredFilter}
+          style={{ background: 'var(--app-bg-elevated)' }}
         />
         <div
           className={classNames('w-full flex relative px-5', {
@@ -256,7 +261,8 @@ export const FreightTimeline = (props: { freights: Freight[]; project: string })
           </div>
 
           <div
-            className='absolute left-0 h-full bg-gray-100 px-1 flex items-center cursor-pointer rounded-sm hover:bg-gray-200'
+            className='absolute left-0 h-full px-1 flex items-center cursor-pointer rounded-sm'
+            style={{ background: 'var(--app-bg-subtle)' }}
             onClick={() => {
               scrollCarouselLeft();
             }}
@@ -265,7 +271,8 @@ export const FreightTimeline = (props: { freights: Freight[]; project: string })
           </div>
 
           <div
-            className='absolute right-0 h-full bg-gray-100 px-1 flex items-center cursor-pointer rounded-sm hover:bg-gray-200'
+            className='absolute right-0 h-full px-1 flex items-center cursor-pointer rounded-sm'
+            style={{ background: 'var(--app-bg-subtle)' }}
             onClick={() => {
               scrollCarouselRight();
             }}
diff --git a/ui/src/features/project/pipelines/freight/promotion-mode-header.tsx b/ui/src/features/project/pipelines/freight/promotion-mode-header.tsx
index bb86f8f919..6248fe0bd8 100644
--- a/ui/src/features/project/pipelines/freight/promotion-mode-header.tsx
+++ b/ui/src/features/project/pipelines/freight/promotion-mode-header.tsx
@@ -1,11 +1,16 @@
 import { faCircleNotch } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { Button, Typography } from 'antd';
+import { CSSProperties } from 'react';
 
 import { IAction, useActionContext } from '@ui/features/project/pipelines/context/action-context';
 import { useDictionaryContext } from '@ui/features/project/pipelines/context/dictionary-context';
 
-export const PromotionModeHeader = (props: { className?: string; loading?: boolean }) => {
+export const PromotionModeHeader = (props: {
+  className?: string;
+  loading?: boolean;
+  style?: CSSProperties;
+}) => {
   const actionContext = useActionContext();
   const dictionaryContext = useDictionaryContext();
 
@@ -15,7 +20,7 @@ export const PromotionModeHeader = (props: { className?: string; loading?: boole
 
   if (actionContext?.action?.type === IAction.MANUALLY_APPROVE) {
     return (
-      <div className={props.className}>
+      <div className={props.className} style={props.style}>
         <Typography.Text type='secondary'>
           Manually approve freight <b>{actionContext?.action?.freight?.alias}</b>
         </Typography.Text>
@@ -33,7 +38,7 @@ export const PromotionModeHeader = (props: { className?: string; loading?: boole
   }
 
   return (
-    <div className={props.className}>
+    <div className={props.className} style={props.style}>
       <Typography.Text type='secondary'>
         {props.loading && <FontAwesomeIcon icon={faCircleNotch} spin className='mr-2' />}
         Promote to <b>{promotingTo}</b>
diff --git a/ui/src/features/project/pipelines/graph/graph.tsx b/ui/src/features/project/pipelines/graph/graph.tsx
index 7fb16321c6..c5cc267f80 100644
--- a/ui/src/features/project/pipelines/graph/graph.tsx
+++ b/ui/src/features/project/pipelines/graph/graph.tsx
@@ -11,6 +11,7 @@ import {
 import { useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
 
 import { WarehouseExpanded } from '@ui/extend/types';
+import { useThemeContext } from '@ui/features/theme/use-theme-context';
 import { queryCache } from '@ui/features/utils/cache';
 import { Stage } from '@ui/gen/api/v1alpha1/generated_pb';
 
@@ -160,9 +161,13 @@ export const Graph = (props: GraphProps) => {
     });
   }, [filterContext?.preferredFilter?.hideSubscriptions]);
 
+  const { resolvedTheme } = useThemeContext();
+
   return (
     <GraphContext.Provider value={{ warehouseByName, stackedNodesParents, onStack, onUnstack }}>
       <ReactFlow
+        colorMode={resolvedTheme}
+        style={{ background: 'transparent' }}
         nodes={nodes}
         edges={graph.edges}
         nodeTypes={nodeTypes}
@@ -186,7 +191,11 @@ export const Graph = (props: GraphProps) => {
         </div>
         {filterContext?.preferredFilter?.showMinimap && (
           <MiniMap
-            style={{ background: 'white', border: '1px solid lightblue', borderRadius: '5px' }}
+            style={{
+              background: 'var(--app-bg-elevated)',
+              border: '1px solid var(--app-minimap-border)',
+              borderRadius: '5px'
+            }}
             pannable
           />
         )}
diff --git a/ui/src/features/project/pipelines/nodes/stacked-nodes.tsx b/ui/src/features/project/pipelines/nodes/stacked-nodes.tsx
index 75f3c4917c..3311c4ddbd 100644
--- a/ui/src/features/project/pipelines/nodes/stacked-nodes.tsx
+++ b/ui/src/features/project/pipelines/nodes/stacked-nodes.tsx
@@ -11,8 +11,14 @@ export const StackedNodeBody = (props: { id?: string; count?: number; onClick?:
     id={props.id}
     className={classNames(styles['stacked-node-size'], 'relative nodrag cursor-default')}
   >
-    <div className='absolute w-full h-full -top-1 -right-1 bg-white shadow-md rounded-md z-10' />
-    <div className='absolute w-full h-full -top-2 -right-2 bg-white shadow-md rounded-md' />
+    <div
+      className='absolute w-full h-full -top-1 -right-1 shadow-md rounded-md z-10'
+      style={{ background: 'var(--app-bg-elevated)' }}
+    />
+    <div
+      className='absolute w-full h-full -top-2 -right-2 shadow-md rounded-md'
+      style={{ background: 'var(--app-bg-elevated)' }}
+    />
     <Card className={classNames(styles['stacked-node-size'], 'relative z-20')}>
       <Button size='small' onClick={props.onClick}>
         <Typography.Text type='secondary'>
diff --git a/ui/src/features/theme/theme-context.ts b/ui/src/features/theme/theme-context.ts
new file mode 100644
index 0000000000..a13229c61b
--- /dev/null
+++ b/ui/src/features/theme/theme-context.ts
@@ -0,0 +1,11 @@
+import { createContext } from 'react';
+
+import { ResolvedTheme, ThemePreference } from '@ui/features/theme/types';
+
+type ThemeContextValue = {
+  preference: ThemePreference;
+  resolvedTheme: ResolvedTheme;
+  setPreference: (preference: ThemePreference) => void;
+};
+
+export const ThemeContext = createContext<ThemeContextValue | null>(null);
diff --git a/ui/src/features/theme/theme-provider.tsx b/ui/src/features/theme/theme-provider.tsx
new file mode 100644
index 0000000000..e45d26520e
--- /dev/null
+++ b/ui/src/features/theme/theme-provider.tsx
@@ -0,0 +1,56 @@
+import { PropsWithChildren, useEffect, useMemo, useState } from 'react';
+
+import { ThemeContext } from '@ui/features/theme/theme-context';
+import { ResolvedTheme, ThemePreference } from '@ui/features/theme/types';
+import { useLocalStorage } from '@ui/utils/use-local-storage';
+
+const themePreferenceStorageKey = 'theme-preference';
+
+const getSystemTheme = (): ResolvedTheme => {
+  if (typeof window === 'undefined' || !window.matchMedia) {
+    return 'light';
+  }
+
+  return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+};
+
+export const ThemeProvider = ({ children }: PropsWithChildren) => {
+  const [preference, setPreference] = useLocalStorage<ThemePreference>(
+    themePreferenceStorageKey,
+    'system'
+  );
+  const [systemTheme, setSystemTheme] = useState<ResolvedTheme>(getSystemTheme);
+
+  useEffect(() => {
+    if (typeof window === 'undefined' || !window.matchMedia) {
+      return;
+    }
+
+    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+    const onChange = (event: MediaQueryListEvent) => {
+      setSystemTheme(event.matches ? 'dark' : 'light');
+    };
+
+    setSystemTheme(mediaQuery.matches ? 'dark' : 'light');
+    mediaQuery.addEventListener('change', onChange);
+    return () => mediaQuery.removeEventListener('change', onChange);
+  }, []);
+
+  const resolvedTheme = preference === 'system' ? systemTheme : preference;
+
+  useEffect(() => {
+    document.documentElement.dataset.theme = resolvedTheme;
+    document.documentElement.style.colorScheme = resolvedTheme;
+  }, [resolvedTheme]);
+
+  const value = useMemo(
+    () => ({
+      preference,
+      resolvedTheme,
+      setPreference
+    }),
+    [preference, resolvedTheme, setPreference]
+  );
+
+  return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>;
+};
diff --git a/ui/src/features/theme/types.ts b/ui/src/features/theme/types.ts
new file mode 100644
index 0000000000..226ca3b1cd
--- /dev/null
+++ b/ui/src/features/theme/types.ts
@@ -0,0 +1,2 @@
+export type ThemePreference = 'system' | 'light' | 'dark';
+export type ResolvedTheme = 'light' | 'dark';
diff --git a/ui/src/features/theme/use-theme-context.ts b/ui/src/features/theme/use-theme-context.ts
new file mode 100644
index 0000000000..0db95f242c
--- /dev/null
+++ b/ui/src/features/theme/use-theme-context.ts
@@ -0,0 +1,13 @@
+import { useContext } from 'react';
+
+import { ThemeContext } from '@ui/features/theme/theme-context';
+
+export const useThemeContext = () => {
+  const context = useContext(ThemeContext);
+
+  if (!context) {
+    throw new Error('missing ThemeContext');
+  }
+
+  return context;
+};
diff --git a/ui/vite.config.mts b/ui/vite.config.mts
index 2a44c60321..e139b5dcba 100644
--- a/ui/vite.config.mts
+++ b/ui/vite.config.mts
@@ -28,7 +28,14 @@ export default defineConfig({
     preprocessorOptions: {
       less: {
         javascriptEnabled: true,
-        modifyVars: { ...mapToken, ...token }
+        modifyVars: Object.fromEntries(
+          Object.entries({ ...mapToken, ...token }).map(([k, v]) => [
+            k,
+            k.startsWith('color') || k.includes('Color')
+              ? `var(--ant-${k.replace(/([A-Z])/g, '-$1').toLowerCase()})`
+              : v
+          ])
+        )
       }
     }
   },