Implement theme provider and toggle

Tomaszal · Tomaszal · commit 73c1cb756591 · 2026-02-13T06:17:09.000Z
diff --git a/.nx/version-plans/version-plan-1770963411683.md b/.nx/version-plans/version-plan-1770963411683.md
@@ -0,0 +1,5 @@
+---
+desktop: minor
+---
+
+Add dark mode
diff --git a/apps/desktop/src/main/index.ts b/apps/desktop/src/main/index.ts
@@ -2,7 +2,7 @@ import { Command, FetchHttpClient, Path, Url } from '@effect/platform';
 import * as NodeContext from '@effect/platform-node/NodeContext';
 import * as NodeRuntime from '@effect/platform-node/NodeRuntime';
 import { Config, Console, Effect, pipe, Runtime, String } from 'effect';
-import { app, BrowserWindow, dialog, Dialog, globalShortcut, ipcMain, protocol, shell } from 'electron';
+import { app, BrowserWindow, dialog, Dialog, globalShortcut, ipcMain, nativeTheme, protocol, shell } from 'electron';
 import { autoUpdater } from 'electron-updater';
 import os from 'node:os';
 import { Agent } from 'undici';
@@ -31,6 +31,7 @@ const createWindow = Effect.gen(function* () {
 
   // Create the browser window.
   const mainWindow = new BrowserWindow({
+    backgroundColor: nativeTheme.shouldUseDarkColors ? '#18181b' : 'white',
     height: 600,
     icon,
     title: 'DevTools Studio',
diff --git a/apps/desktop/src/renderer/main.tsx b/apps/desktop/src/renderer/main.tsx
@@ -9,10 +9,13 @@ import { Button } from '@the-dev-tools/ui/button';
 import { Logo } from '@the-dev-tools/ui/illustrations';
 import { ProgressBar } from '@the-dev-tools/ui/progress-bar';
 import { tw } from '@the-dev-tools/ui/tailwind-literal';
+import { setTheme } from '@the-dev-tools/ui/theme';
 import packageJson from '../../package.json';
 
 import './styles.css';
 
+setTheme();
+
 pipe(configProviderFromMetaEnv({ VERSION: packageJson.version }), Layer.setConfigProvider, addGlobalLayer);
 
 const updateCheckAtom = runtimeAtom.atom(
diff --git a/packages/client/src/shared/ui/dashboard.tsx b/packages/client/src/shared/ui/dashboard.tsx
@@ -1,9 +1,11 @@
 import { Outlet, useRouter } from '@tanstack/react-router';
 import { Suspense } from 'react';
-import { ButtonAsRouteLink } from '@the-dev-tools/ui/button';
+import { FiMoon, FiSun } from 'react-icons/fi';
+import { Button, ButtonAsRouteLink } from '@the-dev-tools/ui/button';
 import { Logo } from '@the-dev-tools/ui/illustrations';
 import { Spinner } from '@the-dev-tools/ui/spinner';
 import { tw } from '@the-dev-tools/ui/tailwind-literal';
+import { useTheme } from '@the-dev-tools/ui/theme';
 import { routes } from '../routes';
 
 interface DashboardLayoutProps {
@@ -14,6 +16,8 @@ interface DashboardLayoutProps {
 export const DashboardLayout = ({ children, navbar }: DashboardLayoutProps) => {
   const router = useRouter();
 
+  const { theme, toggleTheme } = useTheme();
+
   return (
     <div className={tw`flex h-full flex-col`}>
       <div
@@ -34,6 +38,13 @@ export const DashboardLayout = ({ children, navbar }: DashboardLayoutProps) => {
 
         {navbar}
 
+        <Button className={tw`p-1 text-xl`} onPress={() => void toggleTheme()} variant='ghost dark'>
+          {theme === 'light' && <FiSun />}
+          {theme === 'dark' && <FiMoon />}
+        </Button>
+
+        <div className={tw`-ml-1.5 h-5 w-px bg-on-inverse-lower`} />
+
         <a href='https://github.com/the-dev-tools/dev-tools' rel='noreferrer' target='_blank'>
           <img alt='GitHub Repo stars' src='https://img.shields.io/github/stars/the-dev-tools/dev-tools' />
         </a>
diff --git a/packages/ui/src/provider.tsx b/packages/ui/src/provider.tsx
@@ -1,6 +1,7 @@
 import { Option } from 'effect';
 import { ReactNode } from 'react';
 import * as RAC from 'react-aria-components';
+import { ThemeProvider } from './theme';
 import { ToastQueue, ToastQueueContext } from './toast';
 
 export interface UiProviderProps {
@@ -11,5 +12,6 @@ export interface UiProviderProps {
 export const UiProvider = ({ children, toastQueue }: UiProviderProps) => {
   let _ = <RAC.RouterProvider navigate={() => undefined}>{children}</RAC.RouterProvider>;
   _ = <ToastQueueContext.Provider value={Option.fromNullable(toastQueue)}>{_}</ToastQueueContext.Provider>;
+  _ = <ThemeProvider>{_}</ThemeProvider>;
   return _;
 };
diff --git a/packages/ui/src/theme.tsx b/packages/ui/src/theme.tsx
@@ -0,0 +1,39 @@
+import { Option, pipe } from 'effect';
+import { createContext, PropsWithChildren, use, useState } from 'react';
+
+type Theme = 'dark' | 'light';
+
+const getStoreTheme = () => localStorage.getItem('theme') as Theme | undefined;
+const getSystemTheme = () => (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
+
+export const setTheme = (theme?: Theme) => {
+  const systemTheme = getSystemTheme();
+  const storeTheme = theme ?? getStoreTheme() ?? systemTheme;
+
+  if (storeTheme === systemTheme) localStorage.removeItem('theme');
+  else localStorage.setItem('theme', storeTheme);
+
+  if (storeTheme === 'dark') document.documentElement.classList.add('dark');
+  else document.documentElement.classList.remove('dark');
+};
+
+interface ThemeContext {
+  theme: Theme;
+  toggleTheme: () => void;
+}
+
+const ThemeContext = createContext(Option.none<ThemeContext>());
+
+export const useTheme = () => pipe(use(ThemeContext), Option.getOrThrow);
+
+export const ThemeProvider = ({ children }: PropsWithChildren) => {
+  const [theme, setThemeState] = useState(getStoreTheme() ?? getSystemTheme());
+
+  const toggleTheme = () => {
+    const nextTheme = theme === 'dark' ? 'light' : 'dark';
+    setTheme(nextTheme);
+    setThemeState(nextTheme);
+  };
+
+  return <ThemeContext.Provider value={Option.some({ theme, toggleTheme })}>{children}</ThemeContext.Provider>;
+};

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +desktop: minor
 +---
++
 +Add dark mode