From 2370e19c93f095f78edc9081d63d6ca5b9def4bb Mon Sep 17 00:00:00 2001
From: Chayan Das <01chayandas@gmail.com>
Date: Sat, 7 Feb 2026 05:54:12 +0530
Subject: [PATCH] convert files page for dark mode

---
 public/locales/en/settings.json               |   2 +
 src/App.js                                    |  18 +-
 src/bundles/index.js                          |   4 +-
 src/bundles/theme.js                          |  96 ++++++
 src/bundles/theme.test.js                     |  31 ++
 .../analytics-toggle/AnalyticsToggle.js       |  10 +-
 src/components/box/Box.js                     |   2 +-
 src/components/card/card.tsx                  |   8 +-
 src/components/checkbox/Checkbox.css          |   4 +-
 .../experiments/ExperimentsPanel.js           |   3 +-
 src/components/ipns-manager/IpnsManager.js    |   2 +-
 src/components/modal/modal.tsx                |   9 +-
 .../pinning-manager/PinningManager.js         |   2 +-
 src/components/popover/Popover.js             |   6 +-
 src/components/progress-bar/ProgressBar.js    |   2 +-
 src/components/radio/radio.css                |   4 +-
 src/components/theme-toggle/ThemeToggle.js    |  78 +++++
 src/components/tooltip/Tooltip.tsx            |  11 +-
 src/components/tooltip/icon-tooltip.tsx       |   8 +-
 src/diagnostics/dht-provide/Operations.tsx    |   2 +-
 src/diagnostics/dht-provide/Schedule.tsx      |   4 +-
 src/diagnostics/dht-provide/Workers.tsx       |   6 +-
 src/diagnostics/diagnostics-content.tsx       |  16 +-
 .../logs-screen/golog-level-autocomplete.tsx  |  27 +-
 .../logs-screen/golog-level-section.tsx       |   8 +-
 src/diagnostics/logs-screen/log-viewer.css    |   2 +-
 src/files/breadcrumbs/Breadcrumbs.js          |  12 +-
 src/files/context-menu/ContextMenu.js         |  20 +-
 src/files/dropdown/Dropdown.js                |  15 +-
 src/files/file-icon/FileIcon.js               |  16 +-
 .../file-import-status/FileImportStatus.css   |  10 +-
 .../file-import-status/FileImportStatus.js    |  20 +-
 src/files/file-input/FileInput.js             |  12 +-
 src/files/file/File.js                        |  12 +-
 src/files/files-grid/files-grid.tsx           |   4 +-
 src/files/files-grid/grid-file.css            |  31 +-
 src/files/header/Header.js                    |  10 +-
 .../info-boxes/add-files-info/AddFilesInfo.js |   2 +-
 .../companion-info/CompanionInfo.js           |   2 +-
 src/files/pin-icon/PinIcon.js                 |  10 +-
 src/files/search-filter/SearchFilter.tsx      |   8 +-
 src/files/selected-actions/SelectedActions.js |  42 +--
 src/files/sort-dropdown/SortDropdown.js       |  30 +-
 src/icons/StrokeMonitor.tsx                   |  46 ++-
 src/icons/StrokeMoon.tsx                      |  11 +
 src/icons/StrokeSun.tsx                       |  19 ++
 src/index.css                                 |   1 +
 src/lib/chart-colors.js                       |  59 ++++
 src/lib/tours.js                              | 157 +++++----
 src/navigation/NavBar.css                     |  16 +-
 src/peers/AddConnection/AddConnection.js      |   2 +-
 src/peers/PeersPage.js                        |   2 +-
 src/peers/WorldMap/Map.js                     |   6 +-
 src/settings/SettingsPage.js                  |  11 +-
 src/status/CountryChart.js                    |   7 +-
 src/status/NetworkTraffic.js                  |  11 +-
 src/status/Speedometer.js                     |   9 +-
 src/status/StatusPage.js                      |   2 +-
 src/theme.css                                 | 301 ++++++++++++++++++
 59 files changed, 990 insertions(+), 291 deletions(-)
 create mode 100644 src/bundles/theme.js
 create mode 100644 src/bundles/theme.test.js
 create mode 100644 src/components/theme-toggle/ThemeToggle.js
 create mode 100644 src/icons/StrokeMoon.tsx
 create mode 100644 src/icons/StrokeSun.tsx
 create mode 100644 src/lib/chart-colors.js
 create mode 100644 src/theme.css

diff --git a/public/locales/en/settings.json b/public/locales/en/settings.json
index 98585c8e3..082ac04c2 100644
--- a/public/locales/en/settings.json
+++ b/public/locales/en/settings.json
@@ -13,6 +13,8 @@
     "removeAutoUpload": "Disable Auto Upload"
   },
   "language": "Language",
+  "theme": "Theme",
+  "themeDescription": "Choose between light, dark, or system theme (follows your operating system preference).",
   "analytics": "Analytics",
   "cliTutorMode": "CLI Tutor Mode",
   "config": "Kubo Config",
diff --git a/src/App.js b/src/App.js
index 46fc1c677..ae749eab6 100644
--- a/src/App.js
+++ b/src/App.js
@@ -17,6 +17,7 @@ import ComponentLoader from './loader/ComponentLoader.js'
 import Notify from './components/notify/Notify.js'
 import Connected from './components/connected/Connected.js'
 import TourHelper from './components/tour/TourHelper.js'
+import ThemeToggle from './components/theme-toggle/ThemeToggle.js'
 import FilesExploreForm from './files/explore-form/files-explore-form.tsx'
 
 export class App extends Component {
@@ -69,16 +70,17 @@ export class App extends Component {
         { canDrop && isOver && <div className='h-100 top-0 right-0 fixed appOverlay' style={{ background: 'rgba(99, 202, 210, 0.2)' }} /> }
         <div className='flex flex-row-reverse-l flex-column-reverse justify-end justify-start-l' style={{ minHeight: '100vh' }}>
           <div className='flex-auto-l'>
-            <div className='flex items-center ph3 ph4-l' style={{ WebkitAppRegion: 'drag', height: 75, background: '#F0F6FA', paddingTop: '20px', paddingBottom: '15px' }}>
+            <div className='flex items-center ph3 ph4-l' style={{ WebkitAppRegion: 'drag', height: 75, background: 'var(--theme-bg-tertiary)', paddingTop: '20px', paddingBottom: '15px' }}>
               <div className='joyride-app-explore' style={{ width: 560 }}>
                 <FilesExploreForm onBrowse={doFilesNavigateTo} />
               </div>
               <div className='dn flex-ns flex-auto items-center justify-end'>
                 {!url.startsWith('/diagnostics') && <TourHelper />}
                 <Connected className='joyride-app-status' />
+                <ThemeToggle className='ml2' />
               </div>
             </div>
-            <main className='bg-white pv3 pa3 pa4-l'>
+            <main className='pv3 pa3 pa4-l' style={{ background: 'var(--theme-bg-primary)' }}>
               { (ipfsReady || url === '/welcome' || url.startsWith('/settings'))
                 ? <Page />
                 : <ComponentLoader />
@@ -93,7 +95,17 @@ export class App extends Component {
         <ReactJoyride
           run={showTooltip}
           steps={appTour.getSteps({ t })}
-          styles={appTour.styles}
+          styles={{
+            tooltipContent: { padding: '0 20px 0 0' },
+            tooltipFooter: { display: 'none' },
+            options: {
+              width: '250px',
+              backgroundColor: getComputedStyle(document.documentElement).getPropertyValue('--theme-brand-aqua').trim() || '#69c4cd',
+              arrowColor: getComputedStyle(document.documentElement).getPropertyValue('--theme-brand-aqua').trim() || '#69c4cd',
+              textColor: '#fff',
+              zIndex: 999
+            }
+          }}
           callback={this.handleJoyrideCb}
           scrollToFirstStep
           disableOverlay
diff --git a/src/bundles/index.js b/src/bundles/index.js
index df5d6ad1d..1a1c809f8 100644
--- a/src/bundles/index.js
+++ b/src/bundles/index.js
@@ -23,6 +23,7 @@ import experimentsBundle from './experiments.js'
 import cliTutorModeBundle from './cli-tutor-mode.js'
 import gatewayBundle from './gateway.js'
 import ipnsBundle from './ipns.js'
+import themeBundle from './theme.js'
 import { contextBridge } from '../helpers/context-bridge'
 
 export default composeBundles(
@@ -60,5 +61,6 @@ export default composeBundles(
   repoStats,
   cliTutorModeBundle,
   createAnalyticsBundle({}),
-  ipnsBundle
+  ipnsBundle,
+  themeBundle
 )
diff --git a/src/bundles/theme.js b/src/bundles/theme.js
new file mode 100644
index 000000000..bbfb6f119
--- /dev/null
+++ b/src/bundles/theme.js
@@ -0,0 +1,96 @@
+import { createSelector } from 'redux-bundler'
+import { readSetting, writeSetting } from './local-storage.js'
+
+const THEME_KEY = 'ipfs-theme'
+const THEMES = {
+  LIGHT: 'light',
+  DARK: 'dark',
+  SYSTEM: 'system'
+}
+
+const getSystemTheme = () => {
+  if (typeof window === 'undefined') return THEMES.LIGHT
+  return window.matchMedia('(prefers-color-scheme: dark)').matches ? THEMES.DARK : THEMES.LIGHT
+}
+
+const getInitialTheme = () => {
+  const saved = readSetting(THEME_KEY)
+  if (saved && Object.values(THEMES).includes(saved)) {
+    return saved
+  }
+  // Default to dark theme instead of system
+  return THEMES.DARK
+}
+
+const applyTheme = (theme) => {
+  const effectiveTheme = theme === THEMES.SYSTEM ? getSystemTheme() : theme
+  document.documentElement.setAttribute('data-theme', effectiveTheme)
+  document.documentElement.classList.remove('theme-light', 'theme-dark')
+  document.documentElement.classList.add(`theme-${effectiveTheme}`)
+}
+
+const bundle = {
+  name: 'theme',
+
+  reducer: (state = getInitialTheme(), action) => {
+    if (action.type === 'THEME_SET') {
+      return action.payload
+    }
+    return state
+  },
+
+  selectTheme: state => state.theme,
+
+  selectEffectiveTheme: createSelector(
+    'selectTheme',
+    (theme) => {
+      return theme === THEMES.SYSTEM ? getSystemTheme() : theme
+    }
+  ),
+
+  doSetTheme: (theme) => ({ dispatch }) => {
+    if (!Object.values(THEMES).includes(theme)) {
+      console.error(`Invalid theme: ${theme}`)
+      return
+    }
+    writeSetting(THEME_KEY, theme)
+    applyTheme(theme)
+    dispatch({ type: 'THEME_SET', payload: theme })
+  },
+
+  doToggleTheme: () => ({ dispatch, store }) => {
+    const currentTheme = store.selectTheme()
+    const themes = [THEMES.LIGHT, THEMES.DARK, THEMES.SYSTEM]
+    const currentIndex = themes.indexOf(currentTheme)
+    const nextTheme = themes[(currentIndex + 1) % themes.length]
+    dispatch({ actionCreator: 'doSetTheme', args: [nextTheme] })
+  },
+
+  init: (store) => {
+    // Apply initial theme
+    const theme = store.selectTheme()
+    applyTheme(theme)
+
+    // Listen for system theme changes
+    if (typeof window !== 'undefined') {
+      const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)')
+      const handleChange = () => {
+        const currentTheme = store.selectTheme()
+        if (currentTheme === THEMES.SYSTEM) {
+          applyTheme(THEMES.SYSTEM)
+        }
+      }
+
+      // Modern browsers
+      if (mediaQuery.addEventListener) {
+        mediaQuery.addEventListener('change', handleChange)
+      } else {
+        // Fallback for older browsers
+        mediaQuery.addListener(handleChange)
+      }
+    }
+  }
+}
+
+export default bundle
+export { THEMES }
diff --git a/src/bundles/theme.test.js b/src/bundles/theme.test.js
new file mode 100644
index 000000000..43009a09f
--- /dev/null
+++ b/src/bundles/theme.test.js
@@ -0,0 +1,31 @@
+import themeBundle, { THEMES } from './theme.js'
+
+describe('theme bundle', () => {
+  it('should have correct name', () => {
+    expect(themeBundle.name).toBe('theme')
+  })
+
+  it('should export THEMES constants', () => {
+    expect(THEMES.LIGHT).toBe('light')
+    expect(THEMES.DARK).toBe('dark')
+    expect(THEMES.SYSTEM).toBe('system')
+  })
+
+  it('should have initial state', () => {
+    const state = themeBundle.reducer(undefined, {})
+    expect([THEMES.LIGHT, THEMES.DARK, THEMES.SYSTEM]).toContain(state)
+  })
+
+  it('should handle THEME_SET action', () => {
+    const state = themeBundle.reducer(THEMES.LIGHT, {
+      type: 'THEME_SET',
+      payload: THEMES.DARK
+    })
+    expect(state).toBe(THEMES.DARK)
+  })
+
+  it('should select theme from state', () => {
+    const state = { theme: THEMES.DARK }
+    expect(themeBundle.selectTheme(state)).toBe(THEMES.DARK)
+  })
+})
diff --git a/src/components/analytics-toggle/AnalyticsToggle.js b/src/components/analytics-toggle/AnalyticsToggle.js
index 22e5ec473..527a53381 100644
--- a/src/components/analytics-toggle/AnalyticsToggle.js
+++ b/src/components/analytics-toggle/AnalyticsToggle.js
@@ -6,7 +6,7 @@ import Details from '../details/Details.js'
 
 const ExampleRequest = ({ url, method = 'GET' }) => {
   return (
-    <pre className='overflow-x-scroll pa3 mr3 f6 ba b--black-10 br2 bg-snow-muted'>
+    <pre className='overflow-x-scroll pa3 mr3 f6 ba br2' style={{ borderColor: 'var(--theme-border-primary)', backgroundColor: 'var(--theme-bg-secondary)' }}>
       <code className='green'>{method}</code> {url}
     </pre>
   )
@@ -17,7 +17,7 @@ const QueryParams = ({ url }) => {
   const params = (new URL(url)).searchParams
   const entries = [...params]
   return (
-    <dl className='pa3 mr3 f7 overflow-x-scroll monospace nowrap ba b--black-10 br2 bg-snow-muted'>
+    <dl className='pa3 mr3 f7 overflow-x-scroll monospace nowrap ba br2' style={{ borderColor: 'var(--theme-border-primary)', backgroundColor: 'var(--theme-bg-secondary)' }}>
       {entries.map(([key, value]) => (
         <div key={`QueryParams-${key}`}>
           <dt className='dib green'>{key}:</dt>
@@ -32,9 +32,9 @@ const AnalyticType = ({ children, onChange, enabled, label, summary, exampleRequ
   // show hide state. update react.
   const [isOpen, setOpen] = useState(false)
   return (
-    <section className='bg-white bb b--black-10'>
+    <section className='bb b--black-10' style={{ background: 'var(--theme-bg-primary)' }}>
       <div className='flex items-center'>
-        <Checkbox className='pv3 pl3 pr1 bg-white flex-none' onChange={onChange} checked={enabled} label={
+        <Checkbox className='pv3 pl3 pr1 flex-none' style={{ background: 'var(--theme-bg-primary)' }} onChange={onChange} checked={enabled} label={
           <span className='fw5 f6'>{label}</span>
         } />
         <div className='truncate fw4 f6 flex-auto charcoal-muted'>&ndash; {summary}</div>
@@ -119,7 +119,7 @@ const AnalyticsToggle = ({ analyticsActionsToRecord, analyticsConsent, doToggleC
             <ul>
               {analyticsActionsToRecord.map(name => (
                 <li key={name} className='mb1'>
-                  <code className='f7 bg-snow-muted pa1 br2'>{name}</code>
+                  <code className='f7 pa1 br2' style={{ backgroundColor: 'var(--theme-bg-secondary)', color: 'var(--theme-text-primary)' }}>{name}</code>
                 </li>
               ))}
             </ul>
diff --git a/src/components/box/Box.js b/src/components/box/Box.js
index a7f81f0f0..d910efdd0 100644
--- a/src/components/box/Box.js
+++ b/src/components/box/Box.js
@@ -13,7 +13,7 @@ export const Box = ({
   children
 }) => {
   return (
-    <section className={className} style={{ background: '#fbfbfb', ...style }}>
+    <section className={className} style={{ background: 'var(--theme-bg-secondary)', ...style }}>
       <ErrorBoundary resetKeys={[globalThis.location?.pathname || '']}>
         {children}
       </ErrorBoundary>
diff --git a/src/components/card/card.tsx b/src/components/card/card.tsx
index 628c30221..7450e67c9 100644
--- a/src/components/card/card.tsx
+++ b/src/components/card/card.tsx
@@ -11,8 +11,8 @@ export const Card: React.FC<{
 }> = ({ className = '', style, children }) => {
   return (
     <Box
-      className={`ba b--black-10 br2 bg-white ${className}`}
-      style={{ padding: 0, ...style }}
+      className={`ba br2 bg-white ${className}`}
+      style={{ padding: 0, borderColor: 'var(--theme-border-primary)', ...style }}
     >
       {children}
     </Box>
@@ -27,7 +27,7 @@ export const CardHeader: React.FC<{
   children: React.ReactNode
 }> = ({ className = '', children }) => {
   return (
-    <div className={`pa3 bb b--black-10 ${className}`}>
+    <div className={`pa3 bb ${className}`} style={{ borderColor: 'var(--theme-border-primary)' }}>
       {children}
     </div>
   )
@@ -97,7 +97,7 @@ export const CardFooter: React.FC<{
   children: React.ReactNode
 }> = ({ className = '', children }) => {
   return (
-    <div className={`pa3 bt b--black-10 ${className}`}>
+    <div className={`pa3 bt ${className}`} style={{ borderColor: 'var(--theme-border-primary)' }}>
       {children}
     </div>
   )
diff --git a/src/components/checkbox/Checkbox.css b/src/components/checkbox/Checkbox.css
index 3dc37ebe9..80c2e12ea 100644
--- a/src/components/checkbox/Checkbox.css
+++ b/src/components/checkbox/Checkbox.css
@@ -1,5 +1,5 @@
 .Checkbox > span:first-of-type {
-  background-color: #DDE6EB;
+  background-color: var(--theme-bg-secondary);
 }
 
 .Checkbox > input {
@@ -16,5 +16,5 @@
 }
 
 .Checkbox input:focus + span {
-  outline: 1px solid #bbb;
+  outline: 1px solid var(--theme-border-primary);
 }
diff --git a/src/components/experiments/ExperimentsPanel.js b/src/components/experiments/ExperimentsPanel.js
index d95dd1506..2578d8066 100644
--- a/src/components/experiments/ExperimentsPanel.js
+++ b/src/components/experiments/ExperimentsPanel.js
@@ -18,7 +18,8 @@ const Experiments = ({ doExpToggleAction, experiments, t }) => {
             return (
               <div
                 key={key}
-                className='pa3 mr3 mb3 mw6 br3 bg-white dib f6 ba b1 b--light-gray'
+                className='pa3 mr3 mb3 mw6 br3 dib f6 ba b1 b--light-gray'
+                style={{ background: 'var(--theme-bg-primary)' }}
               >
                 <h3>{tkey('title', key)}</h3>
                 <p className='charcoal'>{tkey('description', key)}</p>
diff --git a/src/components/ipns-manager/IpnsManager.js b/src/components/ipns-manager/IpnsManager.js
index 25fee8baa..461987bcf 100644
--- a/src/components/ipns-manager/IpnsManager.js
+++ b/src/components/ipns-manager/IpnsManager.js
@@ -84,7 +84,7 @@ export const IpnsManager = ({ t, ipfsReady, doFetchIpnsKeys, doGenerateIpnsKey,
   return (
     <Fragment>
       <div className="mv4 pinningManager">
-        <div className='ph1 ph3-l flex items-center bg-white lh-copy charcoal f6 fw5'>
+        <div className='ph1 ph3-l flex items-center lh-copy charcoal f6 fw5' style={{ background: 'var(--theme-bg-primary)' }}>
           <AutoSizer disableHeight>
             {({ width }) => (
               <Table
diff --git a/src/components/modal/modal.tsx b/src/components/modal/modal.tsx
index f28150b48..d977b577f 100644
--- a/src/components/modal/modal.tsx
+++ b/src/components/modal/modal.tsx
@@ -32,7 +32,7 @@ export const ModalActions: React.FC<ModalActionsProps> = ({
 }) => (
   <div
     className={`flex justify-${justify} pa2 ${className}`}
-    style={{ backgroundColor: '#f4f6f8' }}
+    style={{ backgroundColor: 'var(--theme-bg-secondary)' }}
     {...props}
   >
     {children}
@@ -49,8 +49,8 @@ export const ModalBody: React.FC<ModalBodyProps> = ({
   <div className={`ph4 pv3 tc ${className}`} {...props}>
     {Icon && (
       <div
-        className='center bg-snow br-100 flex justify-center items-center'
-        style={{ width: '80px', height: '80px' }}
+        className='center br-100 flex justify-center items-center'
+        style={{ width: '80px', height: '80px', backgroundColor: 'var(--theme-bg-secondary)' }}
       >
         <Icon className='fill-gray w3' />
       </div>
@@ -83,7 +83,8 @@ export const Modal: React.FC<ModalProps> = ({
     >
       {onCancel && (
         <CancelIcon
-          className='absolute pointer w2 h2 top-0 right-0 fill-gray'
+          className='absolute pointer w2 h2 top-1 right-1'
+          style={{ fill: 'var(--theme-text-secondary)' }}
           onClick={onCancel}
         />
       )}
diff --git a/src/components/pinning-manager/PinningManager.js b/src/components/pinning-manager/PinningManager.js
index fb158707e..949726e58 100644
--- a/src/components/pinning-manager/PinningManager.js
+++ b/src/components/pinning-manager/PinningManager.js
@@ -50,7 +50,7 @@ export const PinningManager = ({ pinningServices, ipfsReady, arePinningServicesS
   return (
     <Fragment>
       <div className="mv4 pinningManager">
-        <div className='ph1 ph3-l flex items-center bg-white lh-copy charcoal f6 fw5'>
+        <div className='ph1 ph3-l flex items-center lh-copy charcoal f6 fw5' style={{ background: 'var(--theme-bg-primary)' }}>
           <AutoSizer disableHeight>
             {({ width }) => (
               <Table
diff --git a/src/components/popover/Popover.js b/src/components/popover/Popover.js
index 3480d00c6..ac435b547 100644
--- a/src/components/popover/Popover.js
+++ b/src/components/popover/Popover.js
@@ -5,8 +5,10 @@ import './Popover.css'
 
 const Popover = ({ show, children, top, right, bottom, left, align, handleMouseEnter, handleMouseLeave }) => {
   return (
-    <div className={ classNames('popover absolute bg-white shadow-3', align && `popover--align-${align}`) }
-      aria-hidden={ show ? 'false' : 'true' } style={{
+    <div className={ classNames('popover absolute shadow-3', align && `popover--align-${align}`) }
+      aria-hidden={ show ? 'false' : 'true' }
+      style={{
+        background: 'var(--theme-bg-modal)',
         ...(top && { top }),
         ...(right && { right }),
         ...(bottom && { bottom }),
diff --git a/src/components/progress-bar/ProgressBar.js b/src/components/progress-bar/ProgressBar.js
index 4af66158c..fb6006510 100644
--- a/src/components/progress-bar/ProgressBar.js
+++ b/src/components/progress-bar/ProgressBar.js
@@ -4,7 +4,7 @@ import './ProgressBar.css'
 
 const ProgressBar = ({ bg, br, className, style, width, height, progress, time, ...props }) => {
   return (
-    <div className={`ProgressBar sans-serif overflow-hidden ${br} dib ${className} ${width} ${height}`} style={{ background: '#DDE6EB', ...style }} {...props}>
+    <div className={`ProgressBar sans-serif overflow-hidden ${br} dib ${className} ${width} ${height}`} style={{ background: 'var(--theme-bg-secondary)', ...style }} {...props}>
       {time
         ? <div className={`${br} h-100 ${bg}`} style={{ animation: `progressBar ${time}s ease-in-out` }} />
         : <div className={`${br} h-100 ${bg}`} style={{ width: `${progress}%` }} />}
diff --git a/src/components/radio/radio.css b/src/components/radio/radio.css
index 7c7eac621..36ab1aa7a 100644
--- a/src/components/radio/radio.css
+++ b/src/components/radio/radio.css
@@ -1,5 +1,5 @@
 .Radio > span:first-of-type {
-  background-color: #DDE6EB;
+  background-color: var(--theme-bg-secondary);
 }
 
 .Radio > input {
@@ -16,5 +16,5 @@
 }
 
 .Radio input:focus + span {
-  outline: 1px solid #bbb;
+  outline: 1px solid var(--theme-border-primary);
 }
diff --git a/src/components/theme-toggle/ThemeToggle.js b/src/components/theme-toggle/ThemeToggle.js
new file mode 100644
index 000000000..d54d3aaf7
--- /dev/null
+++ b/src/components/theme-toggle/ThemeToggle.js
@@ -0,0 +1,78 @@
+import React from 'react'
+import { connect } from 'redux-bundler-react'
+import { THEMES } from '../../bundles/theme.js'
+import StrokeSun from '../../icons/StrokeSun'
+import StrokeMoon from '../../icons/StrokeMoon'
+import StrokeMonitor from '../../icons/StrokeMonitor'
+
+const ThemeToggle = ({ theme, doSetTheme, className = '' }) => {
+  const getIcon = () => {
+    const iconStyle = {
+      width: 24,
+      height: 24,
+      color: 'var(--theme-text-primary)',
+      stroke: 'var(--theme-text-primary)'
+    }
+
+    switch (theme) {
+      case THEMES.LIGHT:
+        return <StrokeSun style={iconStyle} />
+      case THEMES.DARK:
+        return <StrokeMoon style={iconStyle} />
+      case THEMES.SYSTEM:
+        return <StrokeMonitor style={iconStyle} />
+      default:
+        return <StrokeSun style={iconStyle} />
+    }
+  }
+
+  const getLabel = () => {
+    switch (theme) {
+      case THEMES.LIGHT:
+        return 'Light'
+      case THEMES.DARK:
+        return 'Dark'
+      case THEMES.SYSTEM:
+        return 'System'
+      default:
+        return 'Light'
+    }
+  }
+
+  const cycleTheme = () => {
+    const themes = [THEMES.LIGHT, THEMES.DARK, THEMES.SYSTEM]
+    const currentIndex = themes.indexOf(theme)
+    const nextTheme = themes[(currentIndex + 1) % themes.length]
+    doSetTheme(nextTheme)
+  }
+
+  return (
+    <button
+      onClick={cycleTheme}
+      className={`flex items-center pa2 br2 bn pointer ${className}`}
+      style={{
+        background: 'transparent',
+        transition: 'background-color 0.2s ease',
+        color: 'var(--theme-text-primary)'
+      }}
+      onMouseEnter={(e) => {
+        e.currentTarget.style.backgroundColor = 'var(--theme-bg-hover)'
+      }}
+      onMouseLeave={(e) => {
+        e.currentTarget.style.backgroundColor = 'transparent'
+      }}
+      title={`Theme: ${getLabel()} (click to change)`}
+      aria-label={`Current theme: ${getLabel()}. Click to cycle through themes.`}
+    >
+      <span className="flex items-center">
+        {getIcon()}
+      </span>
+    </button>
+  )
+}
+
+export default connect(
+  'selectTheme',
+  'doSetTheme',
+  ThemeToggle
+)
diff --git a/src/components/tooltip/Tooltip.tsx b/src/components/tooltip/Tooltip.tsx
index d7ea4b021..a16221131 100644
--- a/src/components/tooltip/Tooltip.tsx
+++ b/src/components/tooltip/Tooltip.tsx
@@ -62,9 +62,11 @@ const Tooltip: React.FC<TooltipProps> = ({ children, text, ...props }) => {
           left: '50%',
           transform: 'translate(-50%, 100%)',
           wordWrap: 'break-word',
-          width: '100%'
+          width: '100%',
+          backgroundColor: 'var(--theme-bg-modal)',
+          color: 'var(--theme-text-primary)'
         }}
-        className={`white z-max bg-navy-muted br2 pa1 f6 absolute ${tooltipDisplayClass}`}
+        className={`z-max br2 pa1 f6 absolute ${tooltipDisplayClass}`}
       >
         <span
           style={{
@@ -73,9 +75,10 @@ const Tooltip: React.FC<TooltipProps> = ({ children, text, ...props }) => {
             transform: 'translate(-50%, -50%) rotate(45deg)',
             borderRadius: '2px 0px 0px',
             left: '50%',
-            zIndex: -1
+            zIndex: -1,
+            backgroundColor: 'var(--theme-bg-modal)'
           }}
-          className='db bg-navy-muted absolute'
+          className='db absolute'
         />
         {text}
       </div>
diff --git a/src/components/tooltip/icon-tooltip.tsx b/src/components/tooltip/icon-tooltip.tsx
index 8bb93d83d..7aee228cf 100644
--- a/src/components/tooltip/icon-tooltip.tsx
+++ b/src/components/tooltip/icon-tooltip.tsx
@@ -29,7 +29,9 @@ const IconTooltip: React.FC<IconTooltipProps> = ({ children, text, position, for
       zIndex: 1000,
       wordWrap: 'break-word' as const,
       width: 'max-content' as const,
-      maxWidth: '200px'
+      maxWidth: '200px',
+      backgroundColor: 'var(--theme-bg-modal)',
+      color: 'var(--theme-text-primary)'
     }
 
     switch (position) {
@@ -126,9 +128,9 @@ const IconTooltip: React.FC<IconTooltipProps> = ({ children, text, position, for
       </div>
       <div
         style={tooltipStyles}
-        className={`white z-max bg-navy-muted br2 pv2 ph3 f6 lh-copy fw5 absolute sans-serif noselect ttn ${tooltipDisplayClass}`}
+        className={`z-max br2 pv2 ph3 f6 lh-copy fw5 absolute sans-serif noselect ttn ${tooltipDisplayClass}`}
       >
-        <div className='bg-navy-muted db bg-navy-muted absolute' style={arrowStyles} />
+        <div className='db absolute' style={{ ...arrowStyles, backgroundColor: 'var(--theme-bg-modal)' }} />
         {text}
       </div>
     </div>
diff --git a/src/diagnostics/dht-provide/Operations.tsx b/src/diagnostics/dht-provide/Operations.tsx
index 44a6e1b66..e2265f308 100644
--- a/src/diagnostics/dht-provide/Operations.tsx
+++ b/src/diagnostics/dht-provide/Operations.tsx
@@ -70,7 +70,7 @@ export const Operations: React.FC<Props> = ({ sweep }) => {
         )}
 
         {/* Cumulative stats */}
-        <div className='mt3 pt3 bt b--black-10'>
+        <div className='mt3 pt3 bt' style={{ borderColor: 'var(--theme-border-primary)' }}>
           <MetricRow
             label={t('dhtProvide.operations.totalCidsProvided')}
             value={formatCount(sweep.operations?.past?.keys_provided)}
diff --git a/src/diagnostics/dht-provide/Schedule.tsx b/src/diagnostics/dht-provide/Schedule.tsx
index 6f2116a8c..2ee762ed1 100644
--- a/src/diagnostics/dht-provide/Schedule.tsx
+++ b/src/diagnostics/dht-provide/Schedule.tsx
@@ -61,7 +61,7 @@ export const Schedule: React.FC<Props> = ({ sweep }) => {
           value={eta ?? PLACEHOLDER}
         />
 
-        <div className='mt3 pt3 bt b--black-10'>
+        <div className='mt3 pt3 bt' style={{ borderColor: 'var(--theme-border-primary)' }}>
           <MetricRow
             label={t('dhtProvide.schedule.cidsScheduled')}
             value={formatCount(sweep.schedule?.keys)}
@@ -88,7 +88,7 @@ export const Schedule: React.FC<Props> = ({ sweep }) => {
 
           <MetricRow
             label={t('dhtProvide.schedule.nextRegionPrefix')}
-            value={<code className='f6 pa1 br2 bg-snow'>{sweep.schedule?.next_reprovide_prefix || PLACEHOLDER}</code>}
+            value={<code className='f6 pa1 br2' style={{ backgroundColor: 'var(--theme-bg-secondary)', color: 'var(--theme-text-primary)' }}>{sweep.schedule?.next_reprovide_prefix || PLACEHOLDER}</code>}
           />
 
           <MetricRow
diff --git a/src/diagnostics/dht-provide/Workers.tsx b/src/diagnostics/dht-provide/Workers.tsx
index b2c051f9e..d4da21532 100644
--- a/src/diagnostics/dht-provide/Workers.tsx
+++ b/src/diagnostics/dht-provide/Workers.tsx
@@ -46,7 +46,7 @@ export const Workers: React.FC<Props> = ({ sweep }) => {
     dedicatedBurst > 0 ? activeBurst / availableBurst : 0
 
   const Bar: React.FC<{ value: number }> = ({ value }) => (
-    <div className='bg-black-10 br1 overflow-hidden w-100'>
+    <div className='br1 overflow-hidden w-100' style={{ backgroundColor: 'var(--theme-bg-secondary)' }}>
       <div
         className='bg-teal-muted o-60'
         style={{ width: `${Math.min(100, value * 100)}%`, height: 6 }}
@@ -74,7 +74,7 @@ export const Workers: React.FC<Props> = ({ sweep }) => {
           </div>
         </div>
 
-        <div className='mt3 pt3 bt b--black-10'>
+        <div className='mt3 pt3 bt' style={{ borderColor: 'var(--theme-border-secondary)' }}>
           <div className='mb3'>
             <MetricRow
               label={t('dhtProvide.workers.periodic')}
@@ -104,7 +104,7 @@ export const Workers: React.FC<Props> = ({ sweep }) => {
           )}
         </div>
 
-        <div className='mt3 pt3 bt b--black-10'>
+        <div className='mt3 pt3 bt' style={{ borderColor: 'var(--theme-border-secondary)' }}>
           <MetricRow
             label={t('dhtProvide.workers.maxConnsPerWorker')}
             value={connsPerWorker.toString()}
diff --git a/src/diagnostics/diagnostics-content.tsx b/src/diagnostics/diagnostics-content.tsx
index d62c31c86..e519c6bcb 100644
--- a/src/diagnostics/diagnostics-content.tsx
+++ b/src/diagnostics/diagnostics-content.tsx
@@ -35,23 +35,15 @@ interface TabButtonProps {
   label: string
   active: boolean
 }
-
 const TabButton = ({ tabKey, label, active }: TabButtonProps) => (
   <a
     key={tabKey}
     href={`#/diagnostics/${tabKey}`}
-    className={`pv2 ph3 mr2 br2 pointer fw5 no-underline transition-all ${
+    className={`pv2 ph3 mr2 br2 pointer fw5 no-underline transition-all diagnostics-tab ${
       active
-        ? 'bg-teal white'
-        : 'bg-transparent charcoal-muted hover-bg-gray-muted hover-charcoal'
+        ? 'diagnostics-tab-active'
+        : 'diagnostics-tab-inactive'
     }`}
-    style={{
-      transition: 'all 0.2s ease',
-      ...(active && {
-        backgroundColor: '#378085',
-        color: 'white'
-      })
-    }}
   >
     {label}
   </a>
@@ -116,7 +108,7 @@ const DiagnosticsContent: React.FC<DiagnosticsContentProps> = () => {
   return (
     <div>
       {/* Tab Navigation */}
-      <div className='mb4 pb2' style={{ borderBottom: '1px solid #e1e5eb' }}>
+      <div className='mb4 pb2' style={{ borderBottom: '1px solid var(--theme-border-secondary)' }}>
         <nav className='flex items-center'>
           <TabButton tabKey='logs' label={t('tabs.logs')} active={activeTab === 'logs'} />
           <TabButton tabKey='retrieval-check' label={t('tabs.retrieval-check')} active={activeTab === 'retrieval-check'} />
diff --git a/src/diagnostics/logs-screen/golog-level-autocomplete.tsx b/src/diagnostics/logs-screen/golog-level-autocomplete.tsx
index 54f0acabf..20c883520 100644
--- a/src/diagnostics/logs-screen/golog-level-autocomplete.tsx
+++ b/src/diagnostics/logs-screen/golog-level-autocomplete.tsx
@@ -388,23 +388,36 @@ export const GologLevelAutocomplete: React.FC<GologLevelAutocompleteProps> = ({
         onBlur={handleBlur}
         disabled={disabled}
         placeholder={placeholder}
-        className={`input-reset ba pa2 bg-light-gray f6 w-100 code ${errorMessage ? 'b--red-muted focus-outline-red' : 'b--black-20'}`}
+        className={`input-reset ba pa2 f6 w-100 code ${errorMessage ? 'b--red-muted focus-outline-red' : ''}`}
         style={{
           overflowX: 'auto',
-          whiteSpace: 'nowrap'
+          whiteSpace: 'nowrap',
+          background: 'var(--theme-bg-secondary)',
+          borderColor: errorMessage ? undefined : 'var(--theme-border-primary)',
+          color: 'var(--theme-text-primary)'
         }}
       />
 
       {isOpen && suggestions.length > 0 && (
         <div
           ref={dropdownRef}
-          className="absolute top-100 left-0 right-0 bg-white ba b--black-20 shadow-2 z-999 max-h5 overflow-auto"
-          style={{ maxHeight: '200px' }}
+          className="absolute top-100 left-0 right-0 ba shadow-2 z-999 max-h5 overflow-auto"
+          style={{
+            maxHeight: '200px',
+            background: 'var(--theme-bg-modal)',
+            borderColor: 'var(--theme-border-primary)'
+          }}
         >
           {suggestions.map((suggestion, index) => (
             <div
               key={`${suggestion.text}-${index}`}
-              className={`z-999 pa2 pointer hover-bg-light-gray ${index === selectedIndex ? 'bg-light-blue' : ''}`}
+              className={`z-999 pa2 pointer ${index === selectedIndex ? '' : ''}`}
+              style={{
+                backgroundColor: index === selectedIndex ? 'var(--theme-bg-tertiary)' : 'transparent',
+                transition: 'background-color 0.15s ease'
+              }}
+              onMouseEnter={(e) => { e.currentTarget.style.backgroundColor = 'var(--theme-bg-tertiary)' }}
+              onMouseLeave={(e) => { e.currentTarget.style.backgroundColor = index === selectedIndex ? 'var(--theme-bg-tertiary)' : 'transparent' }}
               onClick={() => handleSuggestionSelect(suggestion)}
               onKeyDown={(e) => {
                 if (e.key === 'Enter' || e.key === ' ') {
@@ -415,10 +428,10 @@ export const GologLevelAutocomplete: React.FC<GologLevelAutocompleteProps> = ({
               role="button"
               tabIndex={0}
             >
-              <span className="f6">
+              <span className="f6" style={{ color: 'var(--theme-text-primary)' }}>
                 {suggestion.text}
               </span>
-              <span className="ml2 f7 gray">
+              <span className="ml2 f7" style={{ color: 'var(--theme-text-secondary)' }}>
                 {suggestion.type === 'global' && t('logs.autocomplete.globalLevel')}
                 {suggestion.type === 'subsystem' && t('logs.autocomplete.subsystem')}
                 {suggestion.type === 'level' && t('logs.autocomplete.level')}
diff --git a/src/diagnostics/logs-screen/golog-level-section.tsx b/src/diagnostics/logs-screen/golog-level-section.tsx
index c3ffc4d4b..63a0d7cae 100644
--- a/src/diagnostics/logs-screen/golog-level-section.tsx
+++ b/src/diagnostics/logs-screen/golog-level-section.tsx
@@ -70,9 +70,9 @@ const GologLevelSection: React.FC = () => {
     return (
       <Box className='mb3 pa4-l pa2'>
         <div className='mb2'>
-          <h3 className='montserrat fw4 charcoal ma0 f5 mb2'>{t('logs.gologLevel.title')}</h3>
-          <p className='charcoal f6 mb3'>{t('logs.gologLevel.placeholder')}</p>
-          <div className='input-reset ba b--black-20 pa2 bg-light-gray f6 charcoal'>
+          <h3 className='montserrat fw4 ma0 f5 mb2' style={{ color: 'var(--theme-text-primary)' }}>{t('logs.gologLevel.title')}</h3>
+          <p className='f6 mb3' style={{ color: 'var(--theme-text-primary)' }}>{t('logs.gologLevel.placeholder')}</p>
+          <div className='input-reset ba pa2 f6' style={{ background: 'var(--theme-bg-secondary)', borderColor: 'var(--theme-border-primary)', color: 'var(--theme-text-primary)' }}>
             {t('logs.entries.loading')}...
           </div>
         </div>
@@ -95,7 +95,7 @@ const GologLevelSection: React.FC = () => {
             onChange={setValue}
             subsystems={subsystems}
             placeholder={t('logs.gologLevel.placeholder')}
-            className='w-100 lh-copy monospace f5 mb2 charcoal input-reset'
+            className='w-100 lh-copy monospace f5 mb2 input-reset'
             onSubmit={onSubmit}
             onValidityChange={setIsValid}
             onErrorChange={setErrorMessage}
diff --git a/src/diagnostics/logs-screen/log-viewer.css b/src/diagnostics/logs-screen/log-viewer.css
index fac521456..4b798a483 100644
--- a/src/diagnostics/logs-screen/log-viewer.css
+++ b/src/diagnostics/logs-screen/log-viewer.css
@@ -65,7 +65,7 @@
 /* full-row hover/focus */
 .logs > .row:hover,
 .logs > .row:focus-within{
-  background-color: var(--light-gray);
+  background-color: var(--theme-bg-tertiary);
 }
 
 .logs .lvl, .logs .sub { white-space: nowrap; }
diff --git a/src/files/breadcrumbs/Breadcrumbs.js b/src/files/breadcrumbs/Breadcrumbs.js
index 630ecd81b..3c09dc8b3 100644
--- a/src/files/breadcrumbs/Breadcrumbs.js
+++ b/src/files/breadcrumbs/Breadcrumbs.js
@@ -54,11 +54,15 @@ const DropableBreadcrumb = ({ index, link, immutable, onAddFiles, onMove, onClic
     <span className='dib pv1 pr1' ref={drop}>
       <button ref={buttonRef} title={link.realName}
         className={classNames('BreadcrumbsButton relative',
-          index !== 0 && 'navy',
+          index !== 0 && '',
           index === 0 && 'f7 pa1 br2 mr2',
-          index === 0 && (immutable ? 'bg-charcoal-muted white' : 'bg-navy white'),
+          index === 0 && (immutable ? 'white' : 'white'),
           immutable && (link.last || index === 0) && 'no-events',
           link.last && 'b', isOver && 'dragging')}
+        style={{
+          color: index !== 0 ? 'var(--theme-navbar-bg)' : 'white',
+          background: index === 0 ? (immutable ? 'var(--theme-text-secondary)' : 'var(--theme-navbar-bg)') : 'transparent'
+        }}
         onClick={() => onClick({ path: link.path })} onContextMenu={(ev) => index !== 0 && handleOnContextMenuHandle(ev)}>
         {link.name}
       </button>
@@ -87,13 +91,13 @@ const Breadcrumbs = ({ t, tReady, path, onClick, className, onContextMenuHandle,
   return (
     <nav aria-label={t('breadcrumbs')} className={classNames('Breadcrumbs flex items-center sans-serif overflow-hidden sticky top-0', className)} {...props}>
       <div className='nowrap overflow-hidden relative flex flex-wrap' ref={ anchors }>
-        <div className={`absolute left-0 top-0 h-100 w1 ${overflows ? '' : 'dn'}`} style={{ background: 'linear-gradient(to right, #ffffff 0%, transparent 100%)' }} />
+        <div className={`absolute left-0 top-0 h-100 w1 ${overflows ? '' : 'dn'}`} style={{ background: 'linear-gradient(to right, var(--theme-bg-primary) 0%, transparent 100%)' }} />
 
         { bread.map((link, index) => (
           <div key={`${index}link`}>
             <DropableBreadcrumb index={index} link={link} immutable={isImmutable}
               onAddFiles={onAddFiles} onMove={onMove} onClick={onClick} onContextMenuHandle={onContextMenuHandle} getPathInfo={doGetPathInfo} checkIfPinned={doCheckIfPinned} />
-            { index !== bread.length - 1 && <span className='dib pr1 pv1 mid-gray v-top'>/</span>}
+            { index !== bread.length - 1 && <span className='dib pr1 pv1 v-top' style={{ color: 'var(--theme-text-secondary)' }}>/</span>}
           </div>
         ))}
 
diff --git a/src/files/context-menu/ContextMenu.js b/src/files/context-menu/ContextMenu.js
index eafadab00..4fcf87881 100644
--- a/src/files/context-menu/ContextMenu.js
+++ b/src/files/context-menu/ContextMenu.js
@@ -62,7 +62,7 @@ class ContextMenu extends React.Component {
           onDismiss={this.props.handleClick}>
           { onShare &&
             <Option onClick={this.wrap('onShare')}>
-              <StrokeShare className='w2 mr2 fill-aqua' />
+              <StrokeShare className='w2 mr2' style={{ fill: 'var(--theme-brand-aqua)' }} />
               {t('actions.share')}
             </Option>
           }
@@ -73,59 +73,59 @@ class ContextMenu extends React.Component {
             }
           }}>
             <Option>
-              <StrokeCopy className='w2 mr2 fill-aqua' />
+              <StrokeCopy className='w2 mr2' style={{ fill: 'var(--theme-brand-aqua)' }} />
               {t('actions.copyHash')}
             </Option>
           </CopyToClipboard>
           { onInspect &&
             <Option onClick={this.wrap('onInspect')}>
-              <StrokeIpld className='w2 mr2 fill-aqua' />
+              <StrokeIpld className='w2 mr2' style={{ fill: 'var(--theme-brand-aqua)' }} />
               {t('app:actions.inspect')}
             </Option>
           }
           <Option onClick={this.wrap('onPinning')} isCliTutorModeEnabled={isCliTutorModeEnabled}
             onCliTutorMode={this.wrap('onCliTutorMode', cliCmdKeys.PIN_OBJECT)}>
-            <StrokePin className='w2 mr2 fill-aqua' />
+            <StrokePin className='w2 mr2' style={{ fill: 'var(--theme-brand-aqua)' }} />
             { t('app:actions.setPinning') }
           </Option>
           { !isUnknown && onDownload &&
             <Option onClick={this.wrap('onDownload')} isCliTutorModeEnabled={isCliTutorModeEnabled}
               onCliTutorMode={this.wrap('onCliTutorMode', cliCmdKeys.DOWNLOAD_OBJECT_COMMAND)}>
-              <StrokeDownload className='w2 mr2 fill-aqua' />
+              <StrokeDownload className='w2 mr2' style={{ fill: 'var(--theme-brand-aqua)' }} />
               {t('app:actions.download')}
             </Option>
           }
           { !isUnknown && onDownloadCar &&
             <Option onClick={this.wrap('onDownloadCar')} isCliTutorModeEnabled={isCliTutorModeEnabled}
               onCliTutorMode={this.wrap('onCliTutorMode', cliCmdKeys.DOWNLOAD_CAR_COMMAND)}>
-              <StrokeData className='w2 mr2 fill-aqua' />
+              <StrokeData className='w2 mr2' style={{ fill: 'var(--theme-brand-aqua)' }} />
               {t('app:actions.downloadCar')}
             </Option>
           }
           { !isUnknown && isMfs && onRename &&
             <Option onClick={this.wrap('onRename')} isCliTutorModeEnabled={isCliTutorModeEnabled}
               onCliTutorMode={this.wrap('onCliTutorMode', cliCmdKeys.RENAME_IPFS_OBJECT)}>
-              <StrokePencil className='w2 mr2 fill-aqua' />
+              <StrokePencil className='w2 mr2' style={{ fill: 'var(--theme-brand-aqua)' }} />
               {t('app:actions.rename')}
             </Option>
           }
           { !isUnknown && isMfs && onRemove &&
             <Option onClick={this.wrap('onRemove')} isCliTutorModeEnabled={isCliTutorModeEnabled}
               onCliTutorMode={this.wrap('onCliTutorMode', cliCmdKeys.REMOVE_FILE_FROM_IPFS)}>
-              <StrokeTrash className='w2 mr2 fill-aqua' />
+              <StrokeTrash className='w2 mr2' style={{ fill: 'var(--theme-brand-aqua)' }} />
               {t('app:actions.remove')}
             </Option>
           }
           { onPublish &&
             <Option onClick={this.wrap('onPublish')} isCliTutorModeEnabled={isCliTutorModeEnabled}
               onCliTutorMode={this.wrap('onCliTutorMode', cliCmdKeys.PUBLISH_WITH_IPNS)}>
-              <StrokeSpeaker className='w2 mr2 fill-aqua' />
+              <StrokeSpeaker className='w2 mr2' style={{ fill: 'var(--theme-brand-aqua)' }} />
               {t('actions.publishWithIpns')}
             </Option>
           }
           { onCheckRetrieval &&
             <Option onClick={this.wrap('onCheckRetrieval')}>
-              <StrokeLab className='w2 mr2 fill-aqua' />
+              <StrokeLab className='w2 mr2' style={{ fill: 'var(--theme-brand-aqua)' }} />
               {t('app:actions.checkRetrieval')}
             </Option>
           }
diff --git a/src/files/dropdown/Dropdown.js b/src/files/dropdown/Dropdown.js
index 6ebeb6aa9..c737e4561 100644
--- a/src/files/dropdown/Dropdown.js
+++ b/src/files/dropdown/Dropdown.js
@@ -4,15 +4,15 @@ import StrokeCode from '../../icons/StrokeCode.js'
 
 export const Option = ({ children, onClick, className = '', isCliTutorModeEnabled, onCliTutorMode, ...props }) => (
   isCliTutorModeEnabled
-    ? <div className='flex items-center justify-between'>
-      <button role='menuitem' className={`bg-animate hover-bg-near-white pa2 pointer flex items-center flex-grow-1 ${className}`} onClick={onClick} {...props}>
+    ? <div className='flex items-center justify-between' style={{ transition: 'background-color 0.15s ease' }} onMouseEnter={(e) => { e.currentTarget.style.backgroundColor = 'var(--theme-bg-tertiary)' }} onMouseLeave={(e) => { e.currentTarget.style.backgroundColor = 'transparent' }}>
+      <button role='menuitem' className={`pa2 pointer flex items-center flex-grow-1 ${className}`} onClick={onClick} {...props}>
         {children}
       </button>
-      <button {...props} className={`bg-animate hover-bg-near-white pa2 pointer flex items-center  ${className}`}>
-        <StrokeCode {...props} onClick={() => onCliTutorMode(true)} className='dib fill-link pointer' style={{ height: 38 }}/>
+      <button {...props} className={`pa2 pointer flex items-center ${className}`}>
+        <StrokeCode {...props} onClick={() => onCliTutorMode(true)} className='dib pointer' style={{ height: 38, fill: 'var(--theme-text-link)' }}/>
       </button>
     </div>
-    : <button role="menuitem" className={`bg-animate hover-bg-near-white pa2 pointer flex items-center ${className}`} onClick={onClick} {...props}>
+    : <button role="menuitem" className={`pa2 pointer flex items-center ${className}`} onClick={onClick} {...props} style={{ transition: 'background-color 0.15s ease' }} onMouseEnter={(e) => { e.currentTarget.style.backgroundColor = 'var(--theme-bg-tertiary)' }} onMouseLeave={(e) => { e.currentTarget.style.backgroundColor = 'transparent' }}>
       {children}
     </button>
 )
@@ -22,7 +22,8 @@ export const DropdownMenu = forwardRef((props, ref) => {
 
   return (
     <Menu
-      className='sans-serif br2 charcoal'
+      className='sans-serif br2'
+      background='var(--theme-bg-inverted)'
       boxShadow='rgba(105, 196, 205, 0.5) 0px 1px 10px 0px'
       width={width}
       arrowAlign='right'
@@ -31,7 +32,7 @@ export const DropdownMenu = forwardRef((props, ref) => {
       translateX={translateX}
       translateY={translateY}
       {...rest}>
-      <div className='flex flex-column' ref={ref} role="menu">
+      <div className='flex flex-column' ref={ref} role="menu" style={{ color: 'var(--theme-text-primary)' }}>
         {children}
       </div>
     </Menu>
diff --git a/src/files/file-icon/FileIcon.js b/src/files/file-icon/FileIcon.js
index ff6b72d96..3d710000e 100644
--- a/src/files/file-icon/FileIcon.js
+++ b/src/files/file-icon/FileIcon.js
@@ -16,25 +16,25 @@ import Cube from '../../icons/StrokeCube.js'
  */
 export default function FileIcon ({ name, type, style = { width: 36 }, cls = '' }) {
   if (type === 'directory') {
-    return <Folder className={`fill-aqua ${cls}`} style={style} />
+    return <Folder className={cls} style={{ ...style, fill: 'var(--theme-brand-aqua)' }} />
   }
 
   if (type === 'unknown') {
-    return <Cube className={`fill-aqua ${cls}`} style={style} />
+    return <Cube className={cls} style={{ ...style, fill: 'var(--theme-brand-aqua)' }} />
   }
 
   switch (typeFromExt(name)) {
     case 'audio':
-      return <DocMusic className={`fill-aqua ${cls}`} style={style} />
+      return <DocMusic className={cls} style={{ ...style, fill: 'var(--theme-brand-aqua)' }} />
     case 'calc':
-      return <DocCalc className={`fill-aqua ${cls}`} style={style} />
+      return <DocCalc className={cls} style={{ ...style, fill: 'var(--theme-brand-aqua)' }} />
     case 'video':
-      return <DocMovie className={`fill-aqua ${cls}`} style={style} />
+      return <DocMovie className={cls} style={{ ...style, fill: 'var(--theme-brand-aqua)' }} />
     case 'text':
-      return <DocText className={`fill-aqua ${cls}`} style={style} />
+      return <DocText className={cls} style={{ ...style, fill: 'var(--theme-brand-aqua)' }} />
     case 'image':
-      return <DocPicture className={`fill-aqua ${cls}`} style={style} />
+      return <DocPicture className={cls} style={{ ...style, fill: 'var(--theme-brand-aqua)' }} />
     default:
-      return <Doc className={`fill-aqua ${cls}`} style={style} />
+      return <Doc className={cls} style={{ ...style, fill: 'var(--theme-brand-aqua)' }} />
   }
 }
diff --git a/src/files/file-import-status/FileImportStatus.css b/src/files/file-import-status/FileImportStatus.css
index 6c7a5afa7..b5ce02538 100644
--- a/src/files/file-import-status/FileImportStatus.css
+++ b/src/files/file-import-status/FileImportStatus.css
@@ -57,15 +57,15 @@
 }
 
 .fileImportStatusError {
-    background: #fff5f5 !important;
-    border-color: #feb2b2 !important;
+    background: var(--theme-bg-importStatusError) !important;
+    border-color: var(--theme-border-importStatusError) !important;
 }
 
 .fileImportStatusError .fileImportStatusButton {
-    background: #fff5f5 !important;
-    color: #c53030 !important;
+    background: var(--theme-bg-importStatusError) !important;
+    color: var(--theme-text-importStatusError) !important;
 }
 
 .fileImportStatusIconError {
-    fill: #fc8181;
+    fill: var(--theme-text-importStatusError);
 }
\ No newline at end of file
diff --git a/src/files/file-import-status/FileImportStatus.js b/src/files/file-import-status/FileImportStatus.js
index 710ded45f..dd1c46097 100644
--- a/src/files/file-import-status/FileImportStatus.js
+++ b/src/files/file-import-status/FileImportStatus.js
@@ -16,10 +16,10 @@ import { ACTIONS } from '../../bundles/files/consts.js'
 
 const Import = (job, t) =>
   [...groupByPath(job?.message?.entries || new Map()).values()].map(item => (
-    <li className="flex w-100 bb b--light-gray items-center f6 charcoal" key={item.path}>
+    <li className="flex w-100 bb b--light-gray items-center f6" style={{ color: 'var(--theme-text-primary)' }} key={item.path}>
       {viewIcon(item)}
       <span className="fileImportStatusName truncate">{item.path}</span>
-      <span className='gray mh2'> |
+      <span className='mh2' style={{ color: 'var(--theme-text-secondary)' }}> |
         { item.entries && (<span> { t('filesImportStatus.count', { count: item.entries.length }) } | </span>) }
         <span className='ml2'>{ humanSize(item.size) }</span>
       </span>
@@ -36,13 +36,13 @@ const FailedImport = (job, t) => {
   const errorMessage = job.error?.message || t('filesImportStatus.unknownError', 'Unknown error')
 
   return (
-    <li className="flex flex-column w-100 bb b--light-gray f6 charcoal" key={job.id?.toString() || path}>
+    <li className="flex flex-column w-100 bb b--light-gray f6" style={{ color: 'var(--theme-text-primary)' }} key={job.id?.toString() || path}>
       <div className="flex items-center">
         <DocumentIcon className="fileImportStatusIcon fileImportStatusIconError pa1" />
         <span className="fileImportStatusName truncate">{path}</span>
-        <GlyphCancel className="dark-red w2 ph1 ml-auto" fill="currentColor"/>
+        <GlyphCancel className="dark-red w2 ph1 ml-auto" style={{ fill: 'var(--theme-text-importStatusError)' }}/>
       </div>
-      <div className="f7 dark-red mt1 truncate" style={{ marginLeft: '36px' }} title={errorMessage}>
+      <div className="f7 mt1 truncate" style={{ marginLeft: '36px', color: 'var(--theme-text-importStatusError)' }} title={errorMessage}>
         {errorMessage}
       </div>
     </li>
@@ -51,8 +51,8 @@ const FailedImport = (job, t) => {
 
 const viewIcon = (entry) =>
   entry.type === 'directory'
-    ? <FolderIcon className="fileImportStatusIcon fill-aqua pa1" />
-    : <DocumentIcon className="fileImportStatusIcon fill-aqua pa1" />
+    ? <FolderIcon className="fileImportStatusIcon pa1" style={{ fill: 'var(--theme-brand-aqua)' }} />
+    : <DocumentIcon className="fileImportStatusIcon pa1" style={{ fill: 'var(--theme-brand-aqua)' }} />
 
 const viewImportStatus = (job, progress) => {
   switch (job.status) {
@@ -154,15 +154,15 @@ export const FileImportStatus = ({ filesFinished, filesPending, filesErrors, doF
 
   return (
     <div className='fileImportStatus fixed bottom-1 w-100 flex justify-center' style={{ zIndex: 14, pointerEvents: 'none' }}>
-      <div className={`relative br1 dark-gray w-40 center ba b--light-gray bg-white ${containerClass}`} style={{ pointerEvents: 'auto' }}>
+      <div className={`relative br1 w-40 center ba ${containerClass}`} style={{ pointerEvents: 'auto', background: 'var(--theme-bg-modal)', borderColor: 'var(--theme-border-primary)', color: 'var(--theme-text-primary)' }}>
         <div
           tabIndex="0"
           onClick={() => setExpanded(!expanded)}
           onKeyPress={handleExpandByKeyboard}
           role="button"
-          className="fileImportStatusButton pv2 ph3 relative flex items-center no-select pointer charcoal w-100 justify-between"
+          className="fileImportStatusButton pv2 ph3 relative flex items-center no-select pointer w-100 justify-between"
           aria-expanded={expanded}
-          style={{ background: '#F0F6FA' }}
+          style={{ background: 'var(--theme-bg-tertiary)', color: 'var(--theme-text-primary)' }}
         >
           <span>
             { filesPending.length
diff --git a/src/files/file-input/FileInput.js b/src/files/file-input/FileInput.js
index 5f654740a..fe1106dce 100644
--- a/src/files/file-input/FileInput.js
+++ b/src/files/file-input/FileInput.js
@@ -85,31 +85,31 @@ class FileInput extends React.Component {
             onDismiss={this.toggleDropdown} >
             <Option onClick={this.onAddFile} id='add-file' onCliTutorMode={() => this.onCliTutorMode(cliCmdKeys.ADD_FILE)}
               isCliTutorModeEnabled={isCliTutorModeEnabled}>
-              <DocumentIcon className='fill-aqua w2 mr1' />
+              <DocumentIcon className='w2 mr1' style={{ fill: 'var(--theme-brand-aqua)' }} />
               {t('app:terms.file')}
             </Option>
             <Option onClick={this.onAddFolder} id='add-folder' onCliTutorMode={() => this.onCliTutorMode(cliCmdKeys.ADD_DIRECTORY)}
               isCliTutorModeEnabled={isCliTutorModeEnabled}>
-              <FolderIcon className='fill-aqua w2 mr1' />
+              <FolderIcon className='w2 mr1' style={{ fill: 'var(--theme-brand-aqua)' }} />
               {t('app:terms.folder')}
             </Option>
             <Option onClick={this.onNewFolder} id='add-new-folder' onCliTutorMode={() => this.onCliTutorMode(cliCmdKeys.CREATE_NEW_DIRECTORY)}
               isCliTutorModeEnabled={isCliTutorModeEnabled}>
-              <NewFolderIcon className='fill-aqua w2 h2 mr1' />
+              <NewFolderIcon className='w2 h2 mr1' style={{ fill: 'var(--theme-brand-aqua)' }} />
               {t('newFolder')}
             </Option>
             <Option onClick={this.onAddByPath} id='add-by-path' onCliTutorMode={() => this.onCliTutorMode(cliCmdKeys.FROM_IPFS)}
               isCliTutorModeEnabled={isCliTutorModeEnabled}>
-              <DecentralizationIcon className='fill-aqua w2 mr1' />
+              <DecentralizationIcon className='w2 mr1' style={{ fill: 'var(--theme-brand-aqua)' }} />
               {t('addByPath')}
             </Option>
             <Option onClick={this.onAddByCar} id='add-by-car' onCliTutorMode={() => this.onCliTutorMode(cliCmdKeys.FROM_CAR)}
               isCliTutorModeEnabled={isCliTutorModeEnabled}>
-              <DataIcon className='fill-aqua w2 mr1' />
+              <DataIcon className='w2 mr1' style={{ fill: 'var(--theme-brand-aqua)' }} />
               {t('addByCar')}
             </Option>
             <Option onClick={this.onBulkCidImport} id='bulk-cid-import'>
-              <DocumentIcon className='fill-aqua w2 mr1' />
+              <DocumentIcon className='w2 mr1' style={{ fill: 'var(--theme-brand-aqua)' }} />
               {t('bulkImport')}
             </Option>
           </DropdownMenu>
diff --git a/src/files/file/File.js b/src/files/file/File.js
index 0f1e28863..72e41aef5 100644
--- a/src/files/file/File.js
+++ b/src/files/file/File.js
@@ -82,7 +82,7 @@ const File = ({
   const styles = { height: 55, overflow: 'visible' }
 
   if (focused || (selected && !translucent) || coloured || (isOver && canDrop)) {
-    styles.backgroundColor = '#F0F6FA'
+    styles.backgroundColor = 'var(--theme-bg-tertiary)'
   } else if (translucent) {
     className += ' o-70'
   }
@@ -91,7 +91,7 @@ const File = ({
     styles.border = '1px dashed #9ad4db'
   } else {
     styles.border = '1px solid transparent'
-    styles.borderTop = '1px solid #eee'
+    styles.borderTop = '1px solid var(--theme-border-primary)'
   }
 
   size = humanSize(size, { round: 0 })
@@ -117,10 +117,10 @@ const File = ({
           </div>
           <div style={{ width: 'calc(100% - 3.25rem)' }}>
             <Tooltip text={name}>
-              <div className='f6 truncate charcoal'>{name}</div>
+              <div className='f6 truncate' style={{ color: 'var(--theme-text-primary)' }}>{name}</div>
             </Tooltip>
             <Tooltip text={hash}>
-              <div className='f7 mt1 gray truncate monospace'>{hash}</div>
+              <div className='f7 mt1 truncate monospace' style={{ color: 'var(--theme-text-secondary)' }}>{hash}</div>
             </Tooltip>
           </div>
         </button>
@@ -130,11 +130,11 @@ const File = ({
             <PinIcon isFailedPin={isFailedPin} isPendingPin={isPendingPin} isRemotePin={isRemotePin} pinned={pinned} />
           </button>
         </div>
-        <div className='size pl2 pr4 pv1 flex-none f6 dn db-l tr charcoal-muted w-10 mw4'>
+        <div className='size pl2 pr4 pv1 flex-none f6 dn db-l tr w-10 mw4' style={{ color: 'var(--theme-text-secondary)' }}>
           {size}
         </div>
         <button ref={dotsWrapper} className='ph2 db button-inside-focus file-context-menu' style={{ width: '2.5rem' }} onClick={handleCtxLeftClick} aria-label={ t('checkboxLabel', { name })} >
-          <GlyphDots className='fill-gray-muted pointer hover-fill-gray transition-all'/>
+          <GlyphDots className='pointer transition-all' style={{ fill: 'var(--theme-text-secondary)' }}/>
         </button>
       </div>
     </div>
diff --git a/src/files/files-grid/files-grid.tsx b/src/files/files-grid/files-grid.tsx
index 3172dd551..0fcbb8eb3 100644
--- a/src/files/files-grid/files-grid.tsx
+++ b/src/files/files-grid/files-grid.tsx
@@ -265,11 +265,11 @@ const FilesGrid = ({
           />
         ))}
         {filteredFiles.length === 0 && filter && (
-          <div className='pv3 b--light-gray files-grid-empty bt tc charcoal-muted f6 noselect'>{t('noFilesMatchFilter')}</div>
+          <div className='pv3 b--light-gray files-grid-empty bt tc f6 noselect' style={{ color: 'var(--theme-text-secondary)' }}>{t('noFilesMatchFilter')}</div>
         )}
         {filteredFiles.length === 0 && !filter && !filesPathInfo?.isRoot && (
           <Trans i18nKey='filesList.noFiles' t={t}>
-            <div className='pv3 b--light-gray files-grid-empty bt tc charcoal-muted f6 noselect'>No files in this directory. Click the "Import" button to add some.</div>
+            <div className='pv3 b--light-gray files-grid-empty bt tc f6 noselect' style={{ color: 'var(--theme-text-secondary)' }}>No files in this directory. Click the "Import" button to add some.</div>
           </Trans>
         )}
       </div>
diff --git a/src/files/files-grid/grid-file.css b/src/files/files-grid/grid-file.css
index 62373f2d3..8efe7c4a6 100644
--- a/src/files/files-grid/grid-file.css
+++ b/src/files/files-grid/grid-file.css
@@ -1,7 +1,7 @@
 .grid-file {
-  background: white;
+  background: var(--theme-bg-primary);
   border-radius: 8px;
-  border: 1px solid #eee;
+  border: 1px solid var(--theme-border-primary);
   overflow: hidden;
   cursor: pointer;
   transition: all 0.2s ease;
@@ -20,7 +20,7 @@
 }
 
 .grid-file.selected {
-  background-color: #F0F6FA;
+  background-color: var(--theme-bg-tertiary);
   border-color: #9ad4db;
   border-style: dashed;
 }
@@ -93,7 +93,7 @@
   z-index: 1;
   opacity: 0;
   transition: opacity 0.2s ease;
-  background: rgba(255, 255, 255, 0.9);
+  background: var(--theme-bg-primary);
   padding: 4px;
   border-radius: 4px;
 }
@@ -134,7 +134,7 @@
   position: relative;
   width: 100%;
   height: 140px;
-  background: #f5f5f5;
+  background: var(--theme-bg-secondary);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -153,7 +153,7 @@
   width: 100% !important;
   height: 100% !important;
   object-fit: cover !important;
-  background-color: #f5f5f5;
+  background-color: var(--theme-bg-secondary);
   opacity: 0.8;
   z-index: 0;
 }
@@ -167,7 +167,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  background-color: #f5f5f5;
+  background-color: var(--theme-bg-secondary);
   z-index: 0;
 }
 
@@ -175,8 +175,8 @@
   position: absolute;
   top: 8px;
   right: 8px;
-  background: rgba(255, 255, 255, 0.95);
-  border: 1px solid #eee;
+  background: var(--theme-bg-secondary);
+  border: 1px solid var(--theme-border-primary);
   border-radius: 4px;
   width: 32px;
   height: 32px;
@@ -192,8 +192,8 @@
 
 .grid-file-dots:hover,
 .grid-file-dots:focus {
-  background: white;
-  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
+  background: var(--theme-bg-tertiary);
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
   outline: none;
   border-color: #9ad4db;
 }
@@ -201,12 +201,12 @@
 .grid-file-dots svg {
   width: 16px;
   height: 16px;
-  fill: #7f8491;
+  fill: var(--theme-text-secondary);
 }
 
 .grid-file-dots:hover svg,
 .grid-file-dots:focus svg {
-  fill: #5a5f6d;
+  fill: var(--theme-text-primary);
 }
 
 .grid-file-info {
@@ -220,6 +220,7 @@
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+  color: var(--theme-text-primary);
 }
 
 .grid-file-details {
@@ -231,7 +232,7 @@
 
 .grid-file-size {
   font-size: 0.75rem;
-  color: #666;
+  color: var(--theme-text-secondary);
 }
 
 .grid-file-pin {
@@ -248,7 +249,7 @@
 
 .grid-file-hash {
   font-size: 0.75rem;
-  color: #666;
+  color: var(--theme-text-secondary);
   font-family: monospace;
   white-space: nowrap;
   overflow: hidden;
diff --git a/src/files/header/Header.js b/src/files/header/Header.js
index 70da40b65..5bb032a89 100644
--- a/src/files/header/Header.js
+++ b/src/files/header/Header.js
@@ -14,8 +14,8 @@ import '../PendingAnimation.css'
 
 const BarOption = ({ children, text, isLink = false, className = '', ...etc }) => (
   <div className={classNames(className, 'tc pa3', etc.onClick && 'pointer')} {...etc}>
-    <span className='nowrap db f4 charcoal'>{children}</span>
-    <span className={`nowrap db ttu f6 montserrat fw4 ${isLink ? 'link' : 'charcoal-muted'}`}>{text}</span>
+    <span className='nowrap db f4' style={{ color: 'var(--theme-text-primary)' }}>{children}</span>
+    <span className={`nowrap db ttu f6 montserrat fw4 ${isLink ? 'link' : ''}`} style={{ color: isLink ? 'var(--theme-text-link)' : 'var(--theme-text-secondary)' }}>{text}</span>
   </div>
 )
 
@@ -68,11 +68,11 @@ class Header extends React.Component {
         </div>
         { children }
         </div>
-        <div className='flex justify-between items-center bg-snow-muted joyride-files-add'>
+        <div className='flex justify-between items-center joyride-files-add' style={{ background: 'var(--theme-bg-tertiary)' }}>
           { pinsInQueue > 0 && <a href='#/pins' alt={t('pinningQueue')} title={t('pinningQueue')} className='ml3'>
             <GlyphPinCloud
-              style={{ width: '3rem' }}
-              className='fill-teal PendingAnimation' />
+              style={{ width: '3rem', fill: 'var(--theme-button-teal)' }}
+              className='PendingAnimation' />
           </a> }
 
           <BarOption title={t('currentLocationDescription')} text={hasUpperDirectory ? t('currentLocation') : t('currentLocationRoot')}>
diff --git a/src/files/info-boxes/add-files-info/AddFilesInfo.js b/src/files/info-boxes/add-files-info/AddFilesInfo.js
index 0dccd29ba..cf96ddda5 100644
--- a/src/files/info-boxes/add-files-info/AddFilesInfo.js
+++ b/src/files/info-boxes/add-files-info/AddFilesInfo.js
@@ -3,7 +3,7 @@ import { withTranslation, Trans } from 'react-i18next'
 import Box from '../../../components/box/Box.js'
 
 const AddFilesInfo = ({ t }) => (
-  <div className='mv4 tc navy f5' >
+  <div className='mv4 tc f5' style={{ color: 'var(--theme-navbar-bg)' }}>
     <Box style={{ background: 'rgba(105, 196, 205, 0.1)' }}>
       <Trans i18nKey='addFilesInfo' t={t}>
         <p className='ma0 noselect'>No files here yet! Add files to your local IPFS node by clicking the <strong>Import</strong> button above.</p>
diff --git a/src/files/info-boxes/companion-info/CompanionInfo.js b/src/files/info-boxes/companion-info/CompanionInfo.js
index 63cb4f3db..082f75cc1 100644
--- a/src/files/info-boxes/companion-info/CompanionInfo.js
+++ b/src/files/info-boxes/companion-info/CompanionInfo.js
@@ -3,7 +3,7 @@ import { withTranslation, Trans } from 'react-i18next'
 import Box from '../../../components/box/Box.js'
 
 const CompanionInfo = ({ t }) => (
-  <div className='mv4 tc navy f5' >
+  <div className='mv4 tc f5' style={{ color: 'var(--theme-navbar-bg)' }}>
     <Box style={{ background: 'rgba(105, 196, 205, 0.1)' }}>
       <Trans i18nKey='companionInfo' t={t}>
         <p className='ma0'>As you are using <strong>IPFS Companion</strong>, the files view is limited to files added while using the extension.</p>
diff --git a/src/files/pin-icon/PinIcon.js b/src/files/pin-icon/PinIcon.js
index 19655b271..b8f06fa4f 100644
--- a/src/files/pin-icon/PinIcon.js
+++ b/src/files/pin-icon/PinIcon.js
@@ -12,31 +12,31 @@ const PinningIcon = ({ t, isFailedPin, isPendingPin, isRemotePin, pinned }) => {
   if (isFailedPin) {
     return (
       <div className='br-100 o-70' title={t('pinningFailedClickToDismiss')} style={{ width: '2rem', height: '2rem' }}>
-        <GlyphPinCloud className='fill-red' />
+        <GlyphPinCloud style={{ fill: 'var(--theme-button-red)' }} />
       </div>
     )
   } else if (isPendingPin) {
     return (
       <div className='br-100 PendingAnimation' title={t('pinningRemotely')} style={{ width: '2rem', height: '2rem' }}>
-        <GlyphPinCloud className='fill-aqua' />
+        <GlyphPinCloud style={{ fill: 'var(--theme-brand-aqua)' }} />
       </div>
     )
   } else if (isRemotePin) {
     return (
       <div className='br-100 o-70' title={t('pinnedRemotely')} style={{ width: '2rem', height: '2rem' }}>
-        <GlyphPinCloud className='fill-aqua' />
+        <GlyphPinCloud style={{ fill: 'var(--theme-brand-aqua)' }} />
       </div>
     )
   } else if (pinned) {
     return (
       <div className='br-100 o-70' title={t('pinned')} style={{ width: '2rem', height: '2rem' }}>
-        <GlyphPin className='fill-aqua' />
+        <GlyphPin style={{ fill: 'var(--theme-brand-aqua)' }} />
       </div>
     )
   } else {
     return (
       <div className='br-100 hide-child' title={t('app:actions.setPinning')} style={{ width: '2rem', height: '2rem' }}>
-        <GlyphPin className='fill-gray-muted child' />
+        <GlyphPin className='child' style={{ fill: 'var(--theme-text-secondary)' }} />
       </div>
     )
   }
diff --git a/src/files/search-filter/SearchFilter.tsx b/src/files/search-filter/SearchFilter.tsx
index 365a84bd9..aec389a56 100644
--- a/src/files/search-filter/SearchFilter.tsx
+++ b/src/files/search-filter/SearchFilter.tsx
@@ -26,7 +26,7 @@ const SearchFilter = ({ initialValue = '', onFilterChange, filteredCount, totalC
   }, [onFilterChange])
 
   return (
-    <div className={classnames('flex items-center pa2 bg-snow-muted', className)}>
+    <div className={classnames('flex items-center pa2', className)} style={{ background: 'var(--theme-bg-tertiary)' }}>
       <div className='flex items-center relative flex-auto'>
         <input
           className='input-reset ba b--black-20 pa2 db w-100 br1'
@@ -38,8 +38,8 @@ const SearchFilter = ({ initialValue = '', onFilterChange, filteredCount, totalC
         />
         {filter && (
           <button
-            className='absolute bg-transparent bn pointer f5 gray flex items-center justify-center'
-            style={{ right: '0.5rem', top: 0, bottom: 0 }}
+            className='absolute bg-transparent bn pointer f5 flex items-center justify-center'
+            style={{ right: '0.5rem', top: 0, bottom: 0, color: 'var(--theme-text-secondary)' }}
             onClick={clearFilter}
             aria-label={t('clearSearch')}
             title={t('clearSearch')}
@@ -49,7 +49,7 @@ const SearchFilter = ({ initialValue = '', onFilterChange, filteredCount, totalC
         )}
       </div>
       {filter && (
-        <div className='ml2 f6 charcoal-muted nowrap'>
+        <div className='ml2 f6 nowrap' style={{ color: 'var(--theme-text-secondary)' }}>
           {filteredCount} / {totalCount}
         </div>
       )}
diff --git a/src/files/selected-actions/SelectedActions.js b/src/files/selected-actions/SelectedActions.js
index 57cf05960..b5b4b5b3c 100644
--- a/src/files/selected-actions/SelectedActions.js
+++ b/src/files/selected-actions/SelectedActions.js
@@ -14,13 +14,13 @@ import './SelectedActions.css'
 
 const styles = {
   bar: {
-    background: '#F0F6FA',
-    borderColor: '#CFE0E2',
-    color: '#59595A'
+    background: 'var(--theme-bg-tertiary)',
+    borderColor: 'var(--theme-border-selectedActions)',
+    color: 'var(--theme-text-darkGray)'
   },
   count: {
-    backgroundColor: '#69C4CD',
-    color: '#F9FAFB',
+    backgroundColor: 'var(--theme-button-selectedActionsCount)',
+    color: 'var(--theme-text-selectedActionsCount)',
     width: '38px',
     height: '38px'
   },
@@ -30,12 +30,12 @@ const styles = {
     transform: 'translate(-50%, -50%)'
   },
   size: {
-    color: '#A4BFCC'
+    color: 'var(--theme-text-selectedActionsSize)'
   }
 }
 
 const classes = {
-  svg: (v) => v ? 'w3 pointer hover-fill-navy-muted' : 'w3',
+  svg: (v) => v ? 'w3 pointer' : 'w3',
   action: (v) => v ? 'pointer' : 'disabled o-50'
 }
 
@@ -99,37 +99,37 @@ class SelectedActions extends React.Component {
             </div>
           </div>
           <div className='flex' role="menu" aria-label={t('menuOptions')} ref={ this.containerRef }>
-            <button role="menuitem" className='tc mh2' onClick={share}>
-              <StrokeShare className='w3 hover-fill-navy-muted' fill='#A4BFCC' aria-hidden="true"/>
+            <button role="menuitem" className='tc mh2' onClick={share} onMouseEnter={(e) => { const svg = e.currentTarget.querySelector('svg'); if (svg) svg.style.fill = 'var(--theme-text-primary)' }} onMouseLeave={(e) => { const svg = e.currentTarget.querySelector('svg'); if (svg) svg.style.fill = 'var(--theme-text-selectedActionsSize)' }}>
+              <StrokeShare className='w3' style={{ fill: 'var(--theme-text-selectedActionsSize)' }} aria-hidden="true"/>
               <p className='ma0 f6'>{t('actions.share')}</p>
             </button>
-            <button role="menuitem" className='tc mh2' onClick={download}>
-              <StrokeDownload className='w3 hover-fill-navy-muted' fill='#A4BFCC' aria-hidden="true"/>
+            <button role="menuitem" className='tc mh2' onClick={download} onMouseEnter={(e) => { const svg = e.currentTarget.querySelector('svg'); if (svg) svg.style.fill = 'var(--theme-text-primary)' }} onMouseLeave={(e) => { const svg = e.currentTarget.querySelector('svg'); if (svg) svg.style.fill = 'var(--theme-text-selectedActionsSize)' }}>
+              <StrokeDownload className='w3' style={{ fill: 'var(--theme-text-selectedActionsSize)' }} aria-hidden="true"/>
               <p className='ma0 f6'>{t('app:actions.download')}</p>
             </button>
-            <button role="menuitem" className={classNames('tc mh2', classes.action(isMfs))} onClick={isMfs ? remove : null}>
-              <StrokeTrash className={classes.svg(isMfs)} fill='#A4BFCC' aria-hidden="true"/>
+            <button role="menuitem" className={classNames('tc mh2', classes.action(isMfs))} onClick={isMfs ? remove : null} onMouseEnter={(e) => { const svg = e.currentTarget.querySelector('svg'); if (svg && isMfs) svg.style.fill = 'var(--theme-text-primary)' }} onMouseLeave={(e) => { const svg = e.currentTarget.querySelector('svg'); if (svg) svg.style.fill = 'var(--theme-text-selectedActionsSize)' }}>
+              <StrokeTrash className={classes.svg(isMfs)} style={{ fill: 'var(--theme-text-selectedActionsSize)' }} aria-hidden="true"/>
               <p className='ma0 f6'>{t('app:actions.remove')}</p>
             </button>
-            <button role="menuitem" className={classNames('tc mh2', classes.action(isSingle))} onClick={isSingle ? setPinning : null}>
-              <StrokePin className={classes.svg(isSingle)} fill='#A4BFCC' aria-hidden="true"/>
+            <button role="menuitem" className={classNames('tc mh2', classes.action(isSingle))} onClick={isSingle ? setPinning : null} onMouseEnter={(e) => { const svg = e.currentTarget.querySelector('svg'); if (svg && isSingle) svg.style.fill = 'var(--theme-text-primary)' }} onMouseLeave={(e) => { const svg = e.currentTarget.querySelector('svg'); if (svg) svg.style.fill = 'var(--theme-text-selectedActionsSize)' }}>
+              <StrokePin className={classes.svg(isSingle)} style={{ fill: 'var(--theme-text-selectedActionsSize)' }} aria-hidden="true"/>
               <p className='ma0 f6'>{t('app:actions.setPinning')}</p>
             </button>
-            <button role="menuitem" className={classNames('tc mh2', classes.action(isSingle))} onClick={isSingle ? inspect : null} {...singleFileTooltip}>
-              <StrokeIpld className={classes.svg(isSingle)} fill='#A4BFCC' aria-hidden="true"/>
+            <button role="menuitem" className={classNames('tc mh2', classes.action(isSingle))} onClick={isSingle ? inspect : null} {...singleFileTooltip} onMouseEnter={(e) => { const svg = e.currentTarget.querySelector('svg'); if (svg && isSingle) svg.style.fill = 'var(--theme-text-primary)' }} onMouseLeave={(e) => { const svg = e.currentTarget.querySelector('svg'); if (svg) svg.style.fill = 'var(--theme-text-selectedActionsSize)' }}>
+              <StrokeIpld className={classes.svg(isSingle)} style={{ fill: 'var(--theme-text-selectedActionsSize)' }} aria-hidden="true"/>
               <p className='ma0 f6'>{t('app:actions.inspect')}</p>
             </button>
-            <button role="menuitem" className={classNames('tc mh2', classes.action(isSingle && isMfs))} onClick={(isSingle && isMfs) ? rename : null} {...singleFileTooltip}>
-              <StrokePencil className={classes.svg(isSingle && isMfs)} fill='#A4BFCC' aria-hidden="true"/>
+            <button role="menuitem" className={classNames('tc mh2', classes.action(isSingle && isMfs))} onClick={(isSingle && isMfs) ? rename : null} {...singleFileTooltip} onMouseEnter={(e) => { const svg = e.currentTarget.querySelector('svg'); if (svg && isSingle && isMfs) svg.style.fill = 'var(--theme-text-primary)' }} onMouseLeave={(e) => { const svg = e.currentTarget.querySelector('svg'); if (svg) svg.style.fill = 'var(--theme-text-selectedActionsSize)' }}>
+              <StrokePencil className={classes.svg(isSingle && isMfs)} style={{ fill: 'var(--theme-text-selectedActionsSize)' }} aria-hidden="true"/>
               <p className='ma0 f6'>{t('app:actions.rename')}</p>
             </button>
           </div>
           <div>
-            <button onClick={unselect} className='flex items-center justify-end f6 charcoal'>
+            <button onClick={unselect} className='flex items-center justify-end f6' style={{ color: 'var(--theme-text-primary)' }}>
               {/* TODO: Should we go back to the files list when we tab out of here? */}
               <span className='mr2 dn db-l'>{t('app:actions.unselectAll')}</span>
               <span className='mr2 dn db-m'>{t('app:actions.clear')}</span>
-              <GlyphSmallCancel onClick={unselect} className='fill-charcoal w1 o-70' viewBox='37 40 27 27' />
+              <GlyphSmallCancel onClick={unselect} className='w1 o-70' style={{ fill: 'var(--theme-text-primary)' }} viewBox='37 40 27 27' />
             </button>
           </div>
         </div>
diff --git a/src/files/sort-dropdown/SortDropdown.js b/src/files/sort-dropdown/SortDropdown.js
index 7a56cfd91..87fc9c9b9 100644
--- a/src/files/sort-dropdown/SortDropdown.js
+++ b/src/files/sort-dropdown/SortDropdown.js
@@ -79,13 +79,19 @@ const SortDropdown = ({ currentSort, onSortChange, t }) => {
     <div className="relative" ref={dropdownRef}>
       <button
         ref={buttonRef}
-        className="flex items-center justify-between pa2 bg-white ba b--light-gray br2 pointer hover-bg-near-white"
-        style={{ minWidth: '140px' }}
+        className="flex items-center justify-between pa2 ba br2 pointer"
+        style={{
+          minWidth: '140px',
+          background: 'var(--theme-bg-primary)',
+          borderColor: 'var(--theme-border-primary)'
+        }}
         aria-label={t('sortFiles')}
         onClick={() => setIsOpen(!isOpen)}
+        onMouseEnter={(e) => { e.target.style.backgroundColor = 'var(--theme-bg-tertiary)' }}
+        onMouseLeave={(e) => { e.target.style.backgroundColor = 'var(--theme-bg-primary)' }}
       >
-        <span className="f6 charcoal truncate">{getCurrentLabel()}</span>
-        <span className="ml2 f6 gray">
+        <span className="f6 truncate" style={{ color: 'var(--theme-text-primary)' }}>{getCurrentLabel()}</span>
+        <span className="ml2 f6" style={{ color: 'var(--theme-text-secondary)' }}>
           {isOpen ? '▲' : '▼'}
         </span>
       </button>
@@ -93,7 +99,8 @@ const SortDropdown = ({ currentSort, onSortChange, t }) => {
       {isOpen && (
         <DropdownMenu
           open={isOpen}
-          className="sans-serif br2 charcoal"
+          className="sans-serif br2"
+          background="var(--theme-bg-inverted)"
           boxShadow="rgba(105, 196, 205, 0.5) 0px 1px 10px 0px"
           width={200}
           arrowAlign="left"
@@ -103,20 +110,23 @@ const SortDropdown = ({ currentSort, onSortChange, t }) => {
           translateY="5px"
           onDismiss={() => setIsOpen(false)}
         >
-          <div className="flex flex-column" role="menu">
-            {sortOptions.map((option, index) => (
+          <div className="flex flex-column" role="menu" style={{ color: 'var(--theme-text-primary)' }}>
+            {sortOptions.map((option) => (
               <button
                 key={`${option.value}-${option.asc}`}
                 role="menuitem"
-                className={`bg-animate hover-bg-near-white pa3 pointer flex items-center ${
+                className={`pa3 pointer flex items-center ${
                   currentSort.by === option.value &&
                   (option.value === sorts.BY_ORIGINAL || currentSort.asc === option.asc)
-                    ? 'bg-near-white fw5'
+                    ? 'fw5'
                     : ''
                 }`}
                 onClick={() => handleSortChange(option.value, option.asc)}
+                style={{ transition: 'background-color 0.15s ease' }}
+                onMouseEnter={(e) => { e.currentTarget.style.backgroundColor = 'var(--theme-bg-tertiary)' }}
+                onMouseLeave={(e) => { e.currentTarget.style.backgroundColor = 'transparent' }}
               >
-                <span className="f6 charcoal">{option.label}</span>
+                <span className="f6" style={{ color: 'var(--theme-text-primary)' }}>{option.label}</span>
               </button>
             ))}
           </div>
diff --git a/src/icons/StrokeMonitor.tsx b/src/icons/StrokeMonitor.tsx
index 51148adda..7f6e4721e 100644
--- a/src/icons/StrokeMonitor.tsx
+++ b/src/icons/StrokeMonitor.tsx
@@ -1,9 +1,41 @@
-import React from 'react'
-import type { SVGProps } from 'react'
-const SvgStrokeMonitor = (props: SVGProps<SVGSVGElement>) => (
+import * as React from 'react'
+
+function StrokeMonitor (props: React.SVGProps<SVGSVGElement>) {
+  return (
     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" {...props}>
-        <path d="M85.92 14.75h-67a6.51 6.51 0 0 0-6.5 6.5v43a6.51 6.51 0 0 0 6.5 6.5h21.24v4.62c0 1.56-1.84 2.88-4 2.88h-.21a3.5 3.5 0 0 0 0 7h33a3.5 3.5 0 0 0 0-7h-1.9c-2.11 0-3.89-1.33-3.89-2.91v-4.59h22.76a6.51 6.51 0 0 0 6.5-6.5v-43a6.51 6.51 0 0 0-6.5-6.5m-67 3h67a3.5 3.5 0 0 1 3.5 3.5v35h-74v-35a3.5 3.5 0 0 1 3.5-3.5m48.13 62.5h1.85a1.5 1.5 0 0 1 0 3h-33a1.5 1.5 0 0 1 0-3h.21c3.32 0 6-2.19 6-4.88v-4.62h19v4.59c.05 2.71 2.69 4.91 5.94 4.91m18.87-12.5h-67a3.5 3.5 0 0 1-3.5-3.5v-7h74v7a3.5 3.5 0 0 1-3.5 3.5" />
-        <path d="M86.54 23.73H18.29v29.63h68.25zm-1 28.63H19.29V24.73h66.25zm-33.12 6.89a3 3 0 1 0 3 3 3 3 0 0 0-3-3m0 5a2 2 0 1 1 2-2 2 2 0 0 1-2 2" />
+      {/* Monitor screen */}
+      <rect
+        x={15}
+        y={20}
+        width={70}
+        height={45}
+        rx={3}
+        fill="none"
+        stroke="currentColor"
+        strokeWidth={4}
+      />
+      {/* Monitor stand */}
+      <line
+        x1={50}
+        y1={65}
+        x2={50}
+        y2={75}
+        stroke="currentColor"
+        strokeWidth={4}
+        strokeLinecap="round"
+      />
+      {/* Monitor base */}
+      <line
+        x1={35}
+        y1={75}
+        x2={65}
+        y2={75}
+        stroke="currentColor"
+        strokeWidth={4}
+        strokeLinecap="round"
+      />
     </svg>
-)
-export default SvgStrokeMonitor
+  )
+}
+
+export default StrokeMonitor
diff --git a/src/icons/StrokeMoon.tsx b/src/icons/StrokeMoon.tsx
new file mode 100644
index 000000000..f07f5e1c7
--- /dev/null
+++ b/src/icons/StrokeMoon.tsx
@@ -0,0 +1,11 @@
+import * as React from 'react'
+
+function StrokeMoon (props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...props}>
+      <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
+    </svg>
+  )
+}
+
+export default StrokeMoon
diff --git a/src/icons/StrokeSun.tsx b/src/icons/StrokeSun.tsx
new file mode 100644
index 000000000..1185e6263
--- /dev/null
+++ b/src/icons/StrokeSun.tsx
@@ -0,0 +1,19 @@
+import * as React from 'react'
+
+function StrokeSun (props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...props}>
+      <circle cx="12" cy="12" r="5" />
+      <line x1="12" y1="1" x2="12" y2="3" />
+      <line x1="12" y1="21" x2="12" y2="23" />
+      <line x1="4.22" y1="4.22" x2="5.64" y2="5.64" />
+      <line x1="18.36" y1="18.36" x2="19.78" y2="19.78" />
+      <line x1="1" y1="12" x2="3" y2="12" />
+      <line x1="21" y1="12" x2="23" y2="12" />
+      <line x1="4.22" y1="19.78" x2="5.64" y2="18.36" />
+      <line x1="18.36" y1="5.64" x2="19.78" y2="4.22" />
+    </svg>
+  )
+}
+
+export default StrokeSun
diff --git a/src/index.css b/src/index.css
index 6d8b30b8c..04d361649 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,4 +1,5 @@
 @import './reset.css';
+@import './theme.css';
 @import "../node_modules/tachyons";
 /* They forgot to include word break: https://github.com/tachyons-css/tachyons/issues/563 */
 @import "../node_modules/tachyons/src/_word-break.css";
diff --git a/src/lib/chart-colors.js b/src/lib/chart-colors.js
new file mode 100644
index 000000000..d42ffab29
--- /dev/null
+++ b/src/lib/chart-colors.js
@@ -0,0 +1,59 @@
+/**
+ * Chart color utilities for theme-aware charts
+ */
+
+/**
+ * Get chart colors based on current theme
+ * @param {string} theme - 'light' or 'dark'
+ * @returns {object} Chart color configuration
+ */
+export const getChartColors = (theme = 'light') => {
+  const isDark = theme === 'dark'
+
+  return {
+    // Bandwidth chart gradients
+    bandwidthIn: {
+      start: isDark ? '#69c4cd' : '#70c5cd',
+      end: isDark ? '#439a9d' : '#c6f1f3'
+    },
+    bandwidthOut: {
+      start: isDark ? '#f9a13e' : '#f19237',
+      end: isDark ? '#fbd38d' : '#f9d1a6'
+    },
+    // Country chart colors
+    countries: isDark
+      ? ['#69c4cd', '#f9a13e', '#f36149', '#439a9d']
+      : ['#69c4cd', '#f39031', '#ea5037', '#3e9096'],
+    // Speedometer colors
+    speedometer: {
+      in: isDark ? '#69c4cd' : '#69c4cd',
+      out: isDark ? '#f9a13e' : '#f39021',
+      background: isDark ? '#1a4a5f' : '#DEDEDE' // Navy background for dark mode
+    },
+    // Map colors
+    map: {
+      dot: isDark ? '#9ad4db' : '#AAA', // Aqua-muted for better visibility on navy
+      stroke: isDark ? '#3d6b85' : '#DDD' // Lighter navy for borders
+    }
+  }
+}
+
+/**
+ * Create gradient for bandwidth chart
+ * @param {CanvasRenderingContext2D} ctx - Canvas context
+ * @param {number} width - Canvas width
+ * @param {number} height - Canvas height
+ * @param {string} theme - Current theme
+ * @returns {object} Gradient configuration
+ */
+export const createBandwidthGradients = (ctx, width, height, theme = 'light') => {
+  const colors = getChartColors(theme)
+  const gradientIn = ctx.createLinearGradient(width / 2, 0, width / 2, height)
+  gradientIn.addColorStop(0, colors.bandwidthIn.start)
+  gradientIn.addColorStop(1, colors.bandwidthIn.end)
+  const gradientOut = ctx.createLinearGradient(width / 2, 0, width / 2, height / 2)
+  gradientOut.addColorStop(0, colors.bandwidthOut.start)
+  gradientOut.addColorStop(1, colors.bandwidthOut.end)
+  return { gradientIn, gradientOut }
+}
+export default getChartColors
diff --git a/src/lib/tours.js b/src/lib/tours.js
index 76c8992f0..e63cd729b 100644
--- a/src/lib/tours.js
+++ b/src/lib/tours.js
@@ -1,37 +1,65 @@
 import React from 'react'
 
 /**
- * @type {import('react-joyride').CustomTour}
+ * Get CSS variable value from document
+ * @param {string} name - CSS variable name (e.g., '--theme-bg-modal')
+ * @returns {string} CSS variable value
  */
+export function cssVar (name) {
+  if (typeof document === 'undefined') return ''
+  return getComputedStyle(document.documentElement).getPropertyValue(name).trim()
+}
+
+/**
+ * Get evaluated styles for a tour
+ * This evaluates CSS variables at call time for React Joyride
+ * @param {string} width - Width of the tooltip (e.g., '500px')
+ * @returns {object} Evaluated styles object
+ */
+export const getEvaluatedTourStyles = (width = '500px') => ({
+  options: {
+    width,
+    backgroundColor: cssVar('--theme-bg-modal') || '#2d2d2d',
+    textColor: cssVar('--theme-text-primary') || '#ffffff',
+    arrowColor: cssVar('--theme-bg-modal') || '#2d2d2d',
+    primaryColor: cssVar('--theme-brand-aqua') || '#69c4cd',
+    overlayColor: 'rgba(0, 0, 0, 0.7)',
+    zIndex: 999
+  }
+})
+
 export const appTour = {
+  /**
+   * @param {{ t: any }} params
+   */
   getSteps: ({ t }) => [{
-    content: <div className='montserrat white'>
+    content: <div className='montserrat'>
       <p className='ma0 pa0 tl f6'>{t('tour.tooltip')}</p>
     </div>,
     placement: 'left',
     target: '.joyride-app-tour',
     disableBeacon: true
   }],
-  styles: {
+  getStyles: () => ({
     tooltipContent: { padding: '0 20px 0 0' },
     tooltipFooter: { display: 'none' },
     options: {
       width: '250px',
-      backgroundColor: 'rgba(105, 196, 205, 0.85)',
-      arrowColor: 'rgba(105, 196, 205, 0.85)',
+      backgroundColor: cssVar('--theme-brand-aqua') || '#69c4cd',
+      arrowColor: cssVar('--theme-brand-aqua') || '#69c4cd',
       textColor: '#fff',
       zIndex: 999
     }
-  }
+  })
 }
 
-/**
- * @type {import('react-joyride').CustomTour}
- */
 export const welcomeTour = {
+  /**
+   * @param {{ t: any }} params
+   */
   getSteps: ({ t }) => [
     {
-      content: <div className='montserrat charcoal'>
+      content: <div className='montserrat'>
         <h2 className='f3 fw4'>{t('tour.step1.title')}</h2>
         <p className='tl f6'>{t('tour.step1.paragraph1')}</p>
         <p className='tl f6'>{t('tour.step1.paragraph2')}</p>
@@ -41,23 +69,16 @@ export const welcomeTour = {
       target: 'body'
     }
   ],
-  styles: {
-    options: {
-      width: '500px',
-      primaryColor: '#378085',
-      textColor: '#34373f',
-      zIndex: 999
-    }
-  }
+  getStyles: () => getEvaluatedTourStyles('500px')
 }
 
-/**
- * @type {import('react-joyride').CustomTour}
- */
 export const statusTour = {
+  /**
+   * @param {{ t: any, Trans: any }} params
+   */
   getSteps: ({ t, Trans }) => [
     {
-      content: <div className='montserrat charcoal'>
+      content: <div className='montserrat'>
         <h2 className='f3 fw4'>{t('tour.step1.title')}</h2>
         <p className='tl f6'>{t('tour.step1.paragraph1')}</p>
         <p className='tl f6'>{t('tour.step1.paragraph2')}</p>
@@ -66,7 +87,7 @@ export const statusTour = {
       target: 'body'
     },
     {
-      content: <div className='montserrat charcoal'>
+      content: <div className='montserrat'>
         <h2 className='f3 fw4'>{t('tour.step2.title')}</h2>
         <p className='tl f6'>{t('tour.step2.paragraph1')}</p>
         <p className='tl f6'>{t('tour.step2.paragraph2')}</p>
@@ -75,7 +96,7 @@ export const statusTour = {
       target: '.joyride-app-status'
     },
     {
-      content: <div className='montserrat charcoal'>
+      content: <div className='montserrat'>
         <h2 className='f3 fw4'>{t('tour.step3.title')}</h2>
         <p className='tl f6'>{t('tour.step3.paragraph1')}</p>
         <Trans i18nKey='tour.step3.paragraph2' t={t}>
@@ -86,7 +107,7 @@ export const statusTour = {
       target: '.joyride-status-node'
     },
     {
-      content: <div className='montserrat charcoal'>
+      content: <div className='montserrat'>
         <h2 className='f3 fw4'>{t('tour.step4.title')}</h2>
         <p className='tl f6'>{t('tour.step4.paragraph1')}</p>
         <p className='tl f6'>{t('tour.step4.paragraph2')}</p>
@@ -95,7 +116,7 @@ export const statusTour = {
       target: '.joyride-status-charts'
     },
     {
-      content: <div className='montserrat charcoal'>
+      content: <div className='montserrat'>
         <h2 className='f3 fw4'>{t('tour.stepExplore.title')}</h2>
         <p className='tl f6'>{t('tour.stepExplore.paragraph')}</p>
       </div>,
@@ -104,23 +125,16 @@ export const statusTour = {
       target: '.joyride-app-explore'
     }
   ],
-  styles: {
-    options: {
-      width: '500px',
-      primaryColor: '#378085',
-      textColor: '#34373f',
-      zIndex: 999
-    }
-  }
+  getStyles: () => getEvaluatedTourStyles('500px')
 }
 
-/**
- * @type {import('react-joyride').CustomTour}
- */
 export const filesTour = {
+  /**
+   * @param {{ t: any, Trans: any }} params
+   */
   getSteps: ({ t, Trans }) => [
     {
-      content: <div className='montserrat charcoal'>
+      content: <div className='montserrat'>
         <h2 className='f3 fw4'>{t('tour.step1.title')}</h2>
         <Trans i18nKey='tour.step1.paragraph1' t={t}>
           <p className='tl f6'>
@@ -134,7 +148,7 @@ export const filesTour = {
       target: 'body'
     },
     {
-      content: <div className='montserrat charcoal'>
+      content: <div className='montserrat'>
         <h2 className='f3 fw4'>{t('tour.step2.title')}</h2>
         <p className='tl f6'>{t('tour.step2.paragraph1')}</p>
         <ul className='pl4'>
@@ -147,7 +161,7 @@ export const filesTour = {
       target: '.joyride-files-breadcrumbs'
     },
     {
-      content: <div className='montserrat charcoal'>
+      content: <div className='montserrat'>
         <h2 className='f3 fw4'>{t('tour.step3.title')}</h2>
         <p className='tl f6'>{t('tour.step3.paragraph1')}</p>
         <p className='tl f6'>{t('tour.step3.paragraph2')}</p>
@@ -162,7 +176,7 @@ export const filesTour = {
       target: '.joyride-files-add'
     },
     {
-      content: <div className='montserrat charcoal'>
+      content: <div className='montserrat'>
         <h2 className='f3 fw4'>{t('tour.step6.title')}</h2>
         <p className='tl f6'>{t('tour.step6.paragraph1')}</p>
         <p className='tl f6'>{t('tour.step6.paragraph2')}</p>
@@ -171,7 +185,7 @@ export const filesTour = {
       target: '.filegrid-view'
     },
     {
-      content: <div className='montserrat charcoal'>
+      content: <div className='montserrat'>
         <h2 className='f3 fw4'>{t('tour.step5.title')}</h2>
         <p className='tl f6'>{t('tour.step5.paragraph1')}</p>
         <p className='tl f6'>{t('tour.step5.paragraph2')}</p>
@@ -182,23 +196,16 @@ export const filesTour = {
       target: '.filelist-view'
     }
   ],
-  styles: {
-    options: {
-      width: '500px',
-      primaryColor: '#378085',
-      textColor: '#34373f',
-      zIndex: 999
-    }
-  }
+  getStyles: () => getEvaluatedTourStyles('500px')
 }
 
-/**
- * @type {import('react-joyride').CustomTour}
- */
 export const peersTour = {
+  /**
+   * @param {{ t: any }} params
+   */
   getSteps: ({ t }) => [
     {
-      content: <div className='montserrat charcoal'>
+      content: <div className='montserrat'>
         <h2 className='f3 fw4'>{t('tour.step1.title')}</h2>
         <p className='tl f6'>{t('tour.step1.paragraph1')}</p>
         <p className='tl f6'>{t('tour.step1.paragraph2')}</p>
@@ -207,7 +214,7 @@ export const peersTour = {
       target: 'body'
     },
     {
-      content: <div className='montserrat charcoal'>
+      content: <div className='montserrat'>
         <h2 className='f3 fw4'>{t('tour.step2.title')}</h2>
         <p className='tl f6'>{t('tour.step2.paragraph1')}</p>
       </div>,
@@ -215,7 +222,7 @@ export const peersTour = {
       target: '.joyride-peers-map'
     },
     {
-      content: <div className='montserrat charcoal'>
+      content: <div className='montserrat'>
         <h2 className='f3 fw4'>{t('tour.step3.title')}</h2>
         <p className='tl f6'>{t('tour.step3.paragraph1')}</p>
       </div>,
@@ -224,23 +231,16 @@ export const peersTour = {
       target: '.joyride-peers-table'
     }
   ],
-  styles: {
-    options: {
-      width: '500px',
-      primaryColor: '#378085',
-      textColor: '#34373f',
-      zIndex: 999
-    }
-  }
+  getStyles: () => getEvaluatedTourStyles('500px')
 }
 
-/**
- * @type {import('react-joyride').CustomTour}
- */
 export const settingsTour = {
+  /**
+   * @param {{ t: any, Trans: any }} params
+   */
   getSteps: ({ t, Trans }) => [
     {
-      content: <div className='montserrat charcoal'>
+      content: <div className='montserrat'>
         <h2 className='f3 fw4'>{t('tour.step1.title')}</h2>
         <p className='tl f6'>{t('tour.step1.paragraph1')}</p>
         <p className='tl f6'>{t('tour.step1.paragraph2')}</p>
@@ -249,7 +249,7 @@ export const settingsTour = {
       target: 'body'
     },
     {
-      content: <div className='montserrat charcoal'>
+      content: <div className='montserrat'>
         <h2 className='f3 fw4'>{t('tour.step2.title')}</h2>
         <p className='tl f6'>{t('tour.step2.paragraph1')}</p>
       </div>,
@@ -257,7 +257,7 @@ export const settingsTour = {
       target: '.joyride-settings-customapi'
     },
     {
-      content: <div className='montserrat charcoal'>
+      content: <div className='montserrat'>
         <h2 className='f3 fw4'>{t('tour.step3.title')}</h2>
         <Trans i18nKey='tour.step3.paragraph1' t={t}>
           <p className='tl f6'>If you have accounts with third-party remote pinning services, add them here so you can pin/unpin items to those services directly from the Files screen. You can learn more about third-party pinning services in the <a className='teal link' href='https://docs.ipfs.tech/how-to/work-with-pinning-services' rel='noopener noreferrer' target='_blank'>IPFS Docs</a>.
@@ -268,7 +268,7 @@ export const settingsTour = {
       target: '.joyride-settings-pinning'
     },
     {
-      content: <div className='montserrat charcoal'>
+      content: <div className='montserrat'>
         <h2 className='f3 fw4'>{t('tour.step4.title')}</h2>
         <Trans i18nKey='tour.step4.paragraph1' t={t}>
           <p className='tl f6'>You can change the language of the Web UI.
@@ -280,7 +280,7 @@ export const settingsTour = {
       target: '.joyride-settings-language'
     },
     {
-      content: <div className='montserrat charcoal'>
+      content: <div className='montserrat'>
         <h2 className='f3 fw4'>{t('tour.step5.title')}</h2>
         <p className='tl f6'>{t('tour.step5.paragraph1')}</p>
         <p className='tl f6'>{t('tour.step5.paragraph2')}</p>
@@ -289,7 +289,7 @@ export const settingsTour = {
       target: '.joyride-settings-analytics'
     },
     {
-      content: <div className='montserrat charcoal'>
+      content: <div className='montserrat'>
         <h2 className='f3 fw4'>{t('tour.step6.title')}</h2>
         <p className='tl f6'>{t('tour.step6.paragraph1')}</p>
       </div>,
@@ -297,7 +297,7 @@ export const settingsTour = {
       target: '.joyride-settings-tutormode'
     },
     {
-      content: <div className='montserrat charcoal'>
+      content: <div className='montserrat'>
         <h2 className='f3 fw4'>{t('tour.step7.title')}</h2>
         <p className='tl f6'>{t('tour.step7.paragraph1')}</p>
         <p className='tl f6'>{t('tour.step7.paragraph2')}</p>
@@ -307,12 +307,5 @@ export const settingsTour = {
       target: '.joyride-settings-config'
     }
   ],
-  styles: {
-    options: {
-      width: '500px',
-      primaryColor: '#378085',
-      textColor: '#34373f',
-      zIndex: 999
-    }
-  }
+  getStyles: () => getEvaluatedTourStyles('500px')
 }
diff --git a/src/navigation/NavBar.css b/src/navigation/NavBar.css
index 16a8ac974..966bfda27 100644
--- a/src/navigation/NavBar.css
+++ b/src/navigation/NavBar.css
@@ -1,5 +1,5 @@
 .navbar-item-active {
-  border-bottom: 5px solid rgba(201, 210, 215, 0.4);
+  border-bottom: 5px solid var(--theme-navbar-active-border);
 }
 
 .navbar-item-label {
@@ -26,7 +26,7 @@
     width: 9.25rem;
   }
   .navbar-item-active {
-    border-left: 5px solid rgba(201, 210, 215, 0.4);
+    border-left: 5px solid var(--theme-navbar-active-border);
     border-bottom: 0;
   }
 }
@@ -58,3 +58,15 @@
 .navbar-item:focus:not(:focus-visible) {
   background-color: transparent;
 }
+
+.navbar-logo-vert,
+.navbar-logo-horiz {
+  transition: filter 0.2s ease;
+}
+
+[data-theme="dark"] .navbar-logo-vert,
+[data-theme="dark"] .navbar-logo-horiz,
+.theme-dark .navbar-logo-vert,
+.theme-dark .navbar-logo-horiz {
+  filter: brightness(1.2) contrast(0.9);
+}
diff --git a/src/peers/AddConnection/AddConnection.js b/src/peers/AddConnection/AddConnection.js
index f0ba2cbbf..96f1ce232 100644
--- a/src/peers/AddConnection/AddConnection.js
+++ b/src/peers/AddConnection/AddConnection.js
@@ -107,7 +107,7 @@ class AddConnection extends React.Component {
     return (
       <div>
         <Button onClick={this.toggleModal} className='f6 ph3 tc' bg='bg-navy' color='white'>
-          <span style={{ color: '#8CDDE6' }}>+</span> {t('addConnection')}
+          <span style={{ color: 'var(--theme-brand-aquaMuted)' }}>+</span> {t('addConnection')}
         </Button>
 
         <Overlay show={open} onLeave={this.toggleModal}>
diff --git a/src/peers/PeersPage.js b/src/peers/PeersPage.js
index 4f2bcc266..4751c0b28 100644
--- a/src/peers/PeersPage.js
+++ b/src/peers/PeersPage.js
@@ -34,7 +34,7 @@ const PeersPage = ({ t, toursEnabled, handleJoyrideCallback }) => (
     <ReactJoyride
       run={toursEnabled}
       steps={peersTour.getSteps({ t })}
-      styles={peersTour.styles}
+      styles={peersTour.getStyles()}
       callback={handleJoyrideCallback}
       continuous
       scrollToFirstStep
diff --git a/src/peers/WorldMap/Map.js b/src/peers/WorldMap/Map.js
index 236ba69b3..841f58631 100644
--- a/src/peers/WorldMap/Map.js
+++ b/src/peers/WorldMap/Map.js
@@ -4,7 +4,7 @@ import ReactFauxDOM from 'react-faux-dom'
 import worldData from './world.json'
 
 // Earth! It's complicated, so try not to re-render so much
-const Map = ({ width, height, path }) => {
+const Map = ({ width, height, path, dotColor = '#AAA', strokeColor = '#DDD' }) => {
   // https://github.com/d3/d3-geo/blob/master/README.md#geoGraticule
   const graticule = d3.geoGraticule()
 
@@ -25,8 +25,8 @@ const Map = ({ width, height, path }) => {
     .attr('cx', 3)
     .attr('cy', 3)
     .attr('r', 1)
-    .attr('fill', '#AAA')
-    .attr('stroke', '#DDD')
+    .attr('fill', dotColor)
+    .attr('stroke', strokeColor)
 
   el.append('path')
     .datum(graticule)
diff --git a/src/settings/SettingsPage.js b/src/settings/SettingsPage.js
index d814c656b..bbe985280 100644
--- a/src/settings/SettingsPage.js
+++ b/src/settings/SettingsPage.js
@@ -12,6 +12,7 @@ import Tick from '../icons/GlyphSmallTick.js'
 import Box from '../components/box/Box.js'
 import Button from '../components/button/button.tsx'
 import LanguageSelector from '../components/language-selector/LanguageSelector.js'
+import ThemeToggle from '../components/theme-toggle/ThemeToggle.js'
 import PinningManager from '../components/pinning-manager/PinningManager.js'
 import IpnsManager from '../components/ipns-manager/IpnsManager.js'
 import AnalyticsToggle from '../components/analytics-toggle/AnalyticsToggle.js'
@@ -117,6 +118,14 @@ export const SettingsPage = ({
         <LanguageSelector t={t} />
       </div>
 
+      <div className='mt4'>
+        <Title>{t('theme')}</Title>
+        <p className='ma0 lh-copy charcoal f6 mb2'>
+          {t('themeDescription')}
+        </p>
+        <ThemeToggle />
+      </div>
+
     { showAnalyticsComponents
       ? <div className='mt4 joyride-settings-analytics'>
           <Title>{t('analytics')}</Title>
@@ -199,7 +208,7 @@ export const SettingsPage = ({
     <ReactJoyride
       run={toursEnabled}
       steps={settingsTour.getSteps({ t, Trans })}
-      styles={settingsTour.styles}
+      styles={settingsTour.getStyles()}
       callback={handleJoyrideCallback}
       continuous
       scrollToFirstStep
diff --git a/src/status/CountryChart.js b/src/status/CountryChart.js
index 9dc29850c..3a8b37b18 100644
--- a/src/status/CountryChart.js
+++ b/src/status/CountryChart.js
@@ -3,8 +3,9 @@ import { withTranslation } from 'react-i18next'
 import { Title } from './Commons.js'
 import { Pie } from 'react-chartjs-2'
 import { connect } from 'redux-bundler-react'
+import { getChartColors } from '../lib/chart-colors.js'
 
-const CountryChart = ({ t, peerLocations, className }) => {
+const CountryChart = ({ t, peerLocations, effectiveTheme, className }) => {
   const countryLabels = {}
   const countsByCountry = {}
 
@@ -33,9 +34,10 @@ const CountryChart = ({ t, peerLocations, className }) => {
     data = data.concat(100 - data.reduce((total, p) => total + p))
   }
 
+  const chartColors = getChartColors(effectiveTheme)
   const datasets = [{
     data,
-    backgroundColor: ['#69c4cd', '#f39031', '#ea5037', '#3e9096'],
+    backgroundColor: chartColors.countries,
     label: 'Peer Countries'
   }]
 
@@ -84,5 +86,6 @@ const CountryChart = ({ t, peerLocations, className }) => {
 
 export default connect(
   'selectPeerLocations',
+  'selectEffectiveTheme',
   withTranslation('status')(CountryChart)
 )
diff --git a/src/status/NetworkTraffic.js b/src/status/NetworkTraffic.js
index 0ac15d2f0..f543844ab 100644
--- a/src/status/NetworkTraffic.js
+++ b/src/status/NetworkTraffic.js
@@ -3,6 +3,7 @@ import { connect } from 'redux-bundler-react'
 import { withTranslation } from 'react-i18next'
 import Speedometer from './Speedometer.js'
 import { Title } from './Commons.js'
+import { getChartColors } from '../lib/chart-colors.js'
 
 class NetworkTraffic extends React.Component {
   state = {
@@ -33,8 +34,9 @@ class NetworkTraffic extends React.Component {
   }
 
   render () {
-    const { t } = this.props
+    const { t, effectiveTheme } = this.props
     const { downFilled, upFilled, commonTotal } = this.state
+    const chartColors = getChartColors(effectiveTheme)
 
     return (
       <div>
@@ -43,17 +45,19 @@ class NetworkTraffic extends React.Component {
           <div className='mh2 mv3 mt0-l'>
             <Speedometer
               title={t('app:terms.downSpeed')}
-              color='#69c4cd'
+              color={chartColors.speedometer.in}
               filled={downFilled}
               total={commonTotal}
+              effectiveTheme={effectiveTheme}
             />
           </div>
           <div className='mh2 mt3 mt0-l'>
             <Speedometer
               title={t('app:terms.upSpeed')}
-              color='#f39021'
+              color={chartColors.speedometer.out}
               filled={upFilled}
               total={commonTotal}
+              effectiveTheme={effectiveTheme}
             />
           </div>
         </div>
@@ -64,5 +68,6 @@ class NetworkTraffic extends React.Component {
 
 export default connect(
   'selectNodeBandwidth',
+  'selectEffectiveTheme',
   withTranslation('status')(NetworkTraffic)
 )
diff --git a/src/status/Speedometer.js b/src/status/Speedometer.js
index ff27b8c40..b49258bcd 100644
--- a/src/status/Speedometer.js
+++ b/src/status/Speedometer.js
@@ -1,11 +1,13 @@
 import React from 'react'
 import { Doughnut } from 'react-chartjs-2'
 import filesize from 'filesize'
+import { getChartColors } from '../lib/chart-colors.js'
 
 const rotation = (n) => (0.5 + (1 - n)) * Math.PI
 const circumference = (n) => n * 2 * Math.PI
 
-function Speedometer ({ total = 100, title, filled = 0, noSpeed = false, color = '#FF6384' }) {
+function Speedometer ({ total = 100, title, filled = 0, noSpeed = false, color = '#FF6384', effectiveTheme = 'light' }) {
+  const chartColors = getChartColors(effectiveTheme)
   const doughnut = {
     options: {
       legend: {
@@ -23,8 +25,8 @@ function Speedometer ({ total = 100, title, filled = 0, noSpeed = false, color =
       labels: ['Speed', 'Nothing'],
       datasets: [{
         data: [filled, filled > total ? 0 : total - filled],
-        backgroundColor: [color, '#DEDEDE'],
-        hoverBackgroundColor: [color, '#DEDEDE'],
+        backgroundColor: [color, chartColors.speedometer.background],
+        hoverBackgroundColor: [color, chartColors.speedometer.background],
         borderWidth: [0, 0]
       }]
     }
@@ -53,4 +55,5 @@ function Speedometer ({ total = 100, title, filled = 0, noSpeed = false, color =
     </div>
   )
 }
+
 export default Speedometer
diff --git a/src/status/StatusPage.js b/src/status/StatusPage.js
index 2dbe7b853..4e03038e8 100644
--- a/src/status/StatusPage.js
+++ b/src/status/StatusPage.js
@@ -81,7 +81,7 @@ const StatusPage = ({
         <ReactJoyride
           run={toursEnabled}
           steps={statusTour.getSteps({ t, Trans })}
-          styles={statusTour.styles}
+          styles={statusTour.getStyles()}
           callback={handleJoyrideCallback}
           continuous
           scrollToFirstStep
diff --git a/src/theme.css b/src/theme.css
new file mode 100644
index 000000000..29478a23b
--- /dev/null
+++ b/src/theme.css
@@ -0,0 +1,301 @@
+/* ===================================
+   Theme CSS Variables - Optimized
+   =================================== */
+
+:root {
+  /* BACKGROUNDS */
+  --theme-bg-primary: #ffffff;
+  --theme-bg-secondary: #fbfbfb;
+  --theme-bg-tertiary: #F0F6FA;
+  --theme-bg-inverted: #fff;
+  --theme-bg-hover: #E8E9ED;
+  --theme-bg-modal: #ffffff;
+  --theme-bg-overlay: rgba(0, 0, 0, 0.3);
+  --theme-bg-selected: #F0F6FA;
+  --theme-bg-selectedActions: #F0F6FA;
+  --theme-bg-importStatus: #F0F6FA;
+  --theme-bg-importStatusError: #fff5f5;
+  
+  /* TEXT */
+  --theme-text-primary: #34373f;
+  --theme-text-secondary: #7f8491;
+  --theme-text-muted: #b7bbc8;
+  --theme-text-link: #117eb3;
+  --theme-text-placeholder: #CAD3D8;
+  --theme-text-darkGray: #59595A;
+  --theme-text-selectedActionsCount: #F9FAFB;
+  --theme-text-selectedActionsSize: #A4BFCC;
+  --theme-text-importStatusError: #c53030;
+  
+  /* BRAND */
+  --theme-brand-aqua: #69c4cd;
+  
+  /* BORDERS */
+  --theme-border-primary: #d9dbe2;
+  --theme-border-black20: rgba(0, 0, 0, 0.2);
+  --theme-border-selectedActions: #083041;
+  --theme-border-importStatusError: #feb2b2;
+  
+  /* BUTTONS */
+  --theme-button-gray: #b7bbc8;
+  --theme-button-teal: #378085;
+  --theme-button-red: #ea5037;
+  --theme-button-charcoal: #34373f;
+  --theme-button-green: #0cb892;
+  --theme-button-selectedActionsCount: #69C4CD;
+  
+  /* NAVBAR */
+  --theme-navbar-bg: #0b3a53;
+  --theme-navbar-hover: #0d4461;
+  --theme-navbar-active-border: rgba(201, 210, 215, 0.4);
+  
+  /* SHADOWS */
+  --theme-shadow-card: 0px 3px 6px 0 rgba(205, 207, 214, 0.35);
+}
+
+/* Dark theme */
+[data-theme="dark"],
+.theme-dark {
+  /* BACKGROUNDS */
+  --theme-bg-primary: #0d0d0d;
+  --theme-bg-secondary: #141516;
+  --theme-bg-tertiary: #121212;
+  --theme-bg-inverted: #000000;
+
+
+  /* use for testing  */
+/*   
+  --theme-bg-primary: #c5c331;
+  --theme-bg-secondary: #e41717;
+  --theme-bg-tertiary: #39e02a;
+  --theme-bg-inverted: #000000;
+ */
+
+  --theme-bg-modal: #1a1a1a;
+  --theme-bg-overlay: rgba(0, 0, 0, 0.9);
+  --theme-bg-selected: #121212;
+  --theme-bg-selectedActions: #121212;
+  --theme-bg-importStatus: #121212;
+  --theme-bg-importStatusError: #2a1212;
+  
+  /* TEXT */
+  --theme-text-primary: #ffffff;
+  --theme-text-secondary: #9ad4db;
+  --theme-text-muted: #69c4cd;
+  --theme-text-link: #69c4cd;
+  --theme-text-placeholder: #7f8491;
+  --theme-text-darkGray: #d9dbe2;
+  --theme-text-selectedActionsCount: #ffffff;
+  --theme-text-selectedActionsSize: #9ad4db;
+  --theme-text-importStatusError: #fc8181;
+  
+  /* BRAND */
+  --theme-brand-aqua: #69c4cd;
+  
+  /* BORDERS */
+  --theme-border-primary: #1f3540;
+  --theme-border-black20: rgba(105, 196, 205, 0.2);
+  --theme-border-selectedActions: #1f5a60;
+  --theme-border-importStatusError: #6b1f1f;
+  
+  /* BUTTONS */
+  --theme-button-gray: #7f8491;
+  --theme-button-teal: #69c4cd;
+  --theme-button-red: #f36149;
+  --theme-button-charcoal: #ffffff;
+  --theme-button-green: #0aca9f;
+  --theme-button-selectedActionsCount: #69c4cd;
+  
+  /* NAVBAR */
+  --theme-navbar-bg: #2B7980;
+  --theme-navbar-hover: #358a92;
+  --theme-navbar-active-border: rgba(0, 0, 0, 0.3);
+  
+  /* SHADOWS */
+  --theme-shadow-card: 0px 3px 6px 0 rgba(0, 0, 0, 0.7);
+}
+
+/* Apply theme to body */
+body {
+  background-color: var(--theme-bg-primary);
+  color: var(--theme-text-primary);
+  transition: background-color 0.2s ease, color 0.2s ease;
+}
+
+/* ============================================
+   TACHYONS OVERRIDES
+   ============================================ */
+
+/* Backgrounds */
+.bg-white { background-color: var(--theme-bg-primary) !important; }
+.bg-near-white { background-color: var(--theme-bg-secondary) !important; }
+.bg-navy { background-color: var(--theme-navbar-bg) !important; }
+.bg-gray { background-color: var(--theme-button-gray) !important; }
+.bg-teal { background-color: var(--theme-button-teal) !important; }
+.bg-red { background-color: var(--theme-button-red) !important; }
+.bg-charcoal { background-color: var(--theme-button-charcoal) !important; }
+.bg-green { background-color: var(--theme-button-green) !important; }
+
+/* Hover states */
+.hover-bg-near-white:hover { background-color: var(--theme-bg-hover) !important; }
+.hover-bg-white:hover { background-color: var(--theme-bg-primary) !important; }
+
+/* Navbar specific */
+.bg-white-10 { background-color: var(--theme-navbar-hover) !important; }
+.hover-bg-white-10:hover { background-color: var(--theme-navbar-hover) !important; }
+
+.bg-white-70 { background-color: rgba(255, 255, 255, 0.7) !important; }
+[data-theme="dark"] .bg-white-70,
+.theme-dark .bg-white-70 { background-color: rgba(13, 13, 13, 0.95) !important; }
+
+.bg-white-80 { background-color: rgba(255, 255, 255, 0.8) !important; }
+[data-theme="dark"] .bg-white-80,
+.theme-dark .bg-white-80 { background-color: rgba(13, 13, 13, 0.98) !important; }
+
+/* Borders */
+.b--light-gray { border-color: var(--theme-border-primary) !important; }
+.b--black-20 { border-color: var(--theme-border-black20) !important; }
+.ba { border-color: var(--theme-border-primary); }
+
+/* Text colors */
+.link, .blue { color: var(--theme-text-link) !important; }
+
+/* Hover text colors */
+.hover-black:hover { color: var(--theme-text-primary) !important; }
+
+/* Dropdown menus - force background and text colors */
+div[class*="DropdownMenu"],
+div[class*="Dropdown__menu"],
+[class*="DropdownMenu"],
+[class*="Dropdown__menu"],
+.DropdownMenu,
+.Dropdown__menu {
+  background: var(--theme-bg-modal) !important;
+  color: var(--theme-text-primary) !important;
+  border-color: var(--theme-border-primary) !important;
+}
+
+div[class*="DropdownMenu"] > div,
+div[class*="Dropdown__menu"] > div {
+  background: var(--theme-bg-modal) !important;
+  color: var(--theme-text-primary) !important;
+}
+
+/* Dropdown buttons - reset background and add hover */
+div[class*="DropdownMenu"] button,
+div[class*="Dropdown__menu"] button,
+div[class*="DropdownMenu"] div button,
+div[class*="Dropdown__menu"] div button {
+  background: transparent !important;
+  transition: background-color 0.15s ease !important;
+}
+
+div[class*="DropdownMenu"] button:hover,
+div[class*="Dropdown__menu"] button:hover,
+div[class*="DropdownMenu"] div button:hover,
+div[class*="Dropdown__menu"] div button:hover {
+  background: var(--theme-bg-tertiary) !important;
+}
+
+/* Dropdown option divs that contain buttons */
+div[class*="DropdownMenu"] > div > div,
+div[class*="Dropdown__menu"] > div > div {
+  background: transparent !important;
+}
+
+div[class*="DropdownMenu"] > div > div:hover,
+div[class*="Dropdown__menu"] > div > div:hover {
+  background: var(--theme-bg-tertiary) !important;
+}
+
+/* Dropdown arrow */
+div[class*="arrow"],
+[class*="Dropdown__arrow"],
+div[class*="Arrow"],
+[class*="Dropdown__Arrow"] {
+  background: var(--theme-bg-modal) !important;
+  border-color: var(--theme-border-primary) !important;
+}
+
+/* ============================================
+   COMPONENT-SPECIFIC STYLES
+   ============================================ */
+
+/* Inputs */
+input:not([type="hidden"]), textarea, select {
+  background-color: var(--theme-bg-primary);
+  color: var(--theme-text-primary);
+  border-color: var(--theme-border-primary);
+}
+
+input:focus, textarea:focus, select:focus {
+  border-color: var(--theme-brand-aqua);
+  outline-color: var(--theme-brand-aqua);
+}
+
+::placeholder { color: var(--theme-text-placeholder); }
+
+/* Links */
+a { color: var(--theme-text-link); }
+a:hover { color: var(--theme-brand-aqua); }
+
+/* Code */
+code, pre {
+  background-color: var(--theme-bg-secondary);
+  color: var(--theme-text-primary);
+}
+
+/* Modals */
+.modal-overlay { background-color: var(--theme-bg-overlay); }
+
+/* Cards */
+.card {
+  background-color: var(--theme-bg-primary);
+  border-color: var(--theme-border-primary);
+}
+
+/* Tables */
+table { color: var(--theme-text-primary); }
+thead { background-color: var(--theme-bg-secondary); }
+tbody tr:hover { background-color: var(--theme-bg-hover); }
+
+/* Buttons */
+button.hoverable-button:hover { background: var(--theme-bg-hover); }
+button:not(.default):focus-visible {
+  outline: 1px solid var(--theme-border-primary);
+  outline-offset: -1px;
+}
+
+/* Scrollbars */
+::-webkit-scrollbar { width: 12px; height: 12px; }
+::-webkit-scrollbar-track { background: var(--theme-bg-secondary); }
+::-webkit-scrollbar-thumb { background: var(--theme-border-primary); border-radius: 6px; }
+::-webkit-scrollbar-thumb:hover { background: var(--theme-text-muted); }
+
+/* Transitions */
+.transition-opacity { transition: opacity 0.2s ease; }
+.hover-o-70:hover { opacity: 0.7; }
+.hover-o-50:hover { opacity: 0.5; }
+
+/* ============================================
+   DIAGNOSTICS TABS
+   ============================================ */
+
+.diagnostics-tab {
+  transition: all 0.2s ease;
+}
+
+.diagnostics-tab-active {
+  background-color: var(--theme-button-teal) !important;
+  color: white !important;
+}
+
+.diagnostics-tab-inactive {
+  background-color: transparent !important;
+  color: var(--theme-text-secondary) !important;
+}
+
+.diagnostics-tab-inactive:hover {
+  background-color: var(--theme-bg-tertiary) !important;
+  color: var(--theme-text-primary) !important;
+}