the-dev-tools · Tomaszal · Feb 13, 2026 · Feb 13, 2026 · Feb 13, 2026 · Feb 13, 2026
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/.vscode/settings.json b/.vscode/settings.json
@@ -5,7 +5,7 @@
   "nix.enableLanguageServer": true,
   "nix.serverPath": "nixd",
   "nix.serverSettings": { "nixd": { "formatting": { "command": ["alejandra"] } } },
-  "tailwindCSS.experimental.configFile": "packages/ui/src/styles.css",
+  "tailwindCSS.experimental.configFile": "packages/ui/src/styles/index.css",
   "tailwindCSS.classAttributes": [" "],
   "tailwindCSS.classFunctions": ["tw"],
   "tailwindCSS.lint.cssConflict": "ignore",

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(
@@ -63,7 +66,7 @@ const UpdateAvailable = ({ children }: UpdateAvailableProps) => {
       </div>
 
       {/* eslint-disable-next-line better-tailwindcss/no-unregistered-classes */}
-      <div className={tw`prose flex-1 overflow-auto`}>
+      <div className={tw`prose dark:prose-invert flex-1 overflow-auto`}>
         <Markdown>{children}</Markdown>
       </div>
 

diff --git a/packages/client/src/features/delta/index.tsx b/packages/client/src/features/delta/index.tsx
@@ -185,7 +185,7 @@ export const DeltaResetButton = <Schema extends ApiCollectionSchema, Key extends
   return (
     <TooltipTrigger delay={750}>
       <Button
-        className={tw`shrink-0 p-1 text-slate-500`}
+        className={tw`shrink-0 p-1 text-on-neutral-low`}
         isDisabled={!deltaId || !hasDelta}
         onPress={() =>
           void collection.utils.update?.({
@@ -198,7 +198,7 @@ export const DeltaResetButton = <Schema extends ApiCollectionSchema, Key extends
       >
         <RedoIcon />
       </Button>
-      <Tooltip className={tw`rounded-md bg-slate-800 px-2 py-1 text-xs text-white`}>Reset delta</Tooltip>
+      <Tooltip className={tw`rounded-md bg-inverse px-2 py-1 text-xs text-on-inverse`}>Reset delta</Tooltip>
     </TooltipTrigger>
   );
 };

diff --git a/packages/client/src/features/expression/code-mirror/extensions.tsx b/packages/client/src/features/expression/code-mirror/extensions.tsx
@@ -89,7 +89,7 @@ const CompletionInfo = ({ completion, context, path }: CompletionInfoProps) => {
           }}
           variant='ghost'
         >
-          <LuClipboardCopy className={tw`size-4 text-slate-500`} />
+          <LuClipboardCopy className={tw`size-4 text-on-neutral-low`} />
         </Button>
       </div>
 

diff --git a/packages/client/src/features/expression/reference.tsx b/packages/client/src/features/expression/reference.tsx
@@ -18,6 +18,7 @@ import {
   ReferenceTreeItem,
 } from '@the-dev-tools/spec/buf/api/reference/v1/reference_pb';
 import { tw } from '@the-dev-tools/ui/tailwind-literal';
+import { useTheme } from '@the-dev-tools/ui/theme';
 import { TreeItem } from '@the-dev-tools/ui/tree';
 import { useConnectSuspenseQuery } from '~/shared/api';
 import { useReactRender } from '~/shared/lib';
@@ -134,36 +135,38 @@ export const ReferenceTreeItemView = ({ id, parentKeys, reference }: ReferenceTr
       textValue={keyText ?? kindIndexTag ?? ''}
     >
       {key.kind === ReferenceKeyKind.GROUP && (
-        <span className={tw`text-xs leading-5 font-semibold tracking-tight text-slate-800`}>{key.group}</span>
+        <span className={tw`text-xs leading-5 font-semibold tracking-tight text-on-neutral`}>{key.group}</span>
       )}
 
       {key.kind === ReferenceKeyKind.KEY && (
-        <span className={tw`font-mono text-xs leading-5 text-red-700`}>{key.key}</span>
+        <span className={tw`font-mono text-xs leading-5 text-danger`}>{key.key}</span>
       )}
 
       {tags.map((tag, index) => (
         <span
-          className={tw`rounded-sm bg-slate-200 px-2 py-0.5 text-xs font-medium tracking-tight text-slate-500`}
+          className={tw`rounded-sm bg-neutral px-2 py-0.5 text-xs font-medium tracking-tight text-on-neutral-low`}
           key={index}
         >
           {tag}
         </span>
       ))}
 
-      {quantity && <span className={tw`text-xs leading-5 font-medium tracking-tight text-slate-500`}>{quantity}</span>}
+      {quantity && (
+        <span className={tw`text-xs leading-5 font-medium tracking-tight text-on-neutral-low`}>{quantity}</span>
+      )}
 
       {reference.kind === ReferenceKind.VALUE && (
         <>
-          <span className={tw`font-mono text-xs leading-5 text-slate-800`}>:</span>
-          <span className={tw`flex-1 font-mono text-xs leading-5 break-all text-blue-700`}>{reference.value}</span>
+          <span className={tw`font-mono text-xs leading-5 text-on-neutral`}>:</span>
+          <span className={tw`flex-1 font-mono text-xs leading-5 break-all text-info`}>{reference.value}</span>
         </>
       )}
     </TreeItem>
   );
 };
 
 const fieldStyles = tv({
-  base: tw`min-w-0 rounded-md border border-slate-200 px-3 py-0.5 text-md text-slate-800`,
+  base: tw`min-w-0 rounded-md border border-neutral px-3 py-0.5 text-md text-on-neutral`,
   variants: {
     variant: {
       'table-cell': tw`w-full rounded-none border-transparent px-5 py-0.5 -outline-offset-4`,
@@ -192,6 +195,8 @@ export const ReferenceField = ({
   const props = Struct.omit(forwardedProps, ...fieldStyles.variantKeys);
   const variantProps = Struct.pick(forwardedProps, ...fieldStyles.variantKeys);
 
+  const { theme } = useTheme();
+
   const transport = useTransport();
   const client = createClient(ReferenceService, transport);
 
@@ -227,6 +232,7 @@ export const ReferenceField = ({
         else if (refProp) refProp.current = _;
         ref.current = _;
       }}
+      theme={theme}
       {...props}
     />
   );

diff --git a/packages/client/src/features/file-system/index.tsx b/packages/client/src/features/file-system/index.tsx
@@ -47,6 +47,7 @@ import { Modal, useProgrammaticModal } from '@the-dev-tools/ui/modal';
 import { DropIndicatorHorizontal } from '@the-dev-tools/ui/reorder';
 import { tw } from '@the-dev-tools/ui/tailwind-literal';
 import { TextInputField, useEditableTextState } from '@the-dev-tools/ui/text-field';
+import { useTheme } from '@the-dev-tools/ui/theme';
 import { TreeItem, TreeItemProps, TreeItemRouteLink } from '@the-dev-tools/ui/tree';
 import { saveFile, useEscapePortal } from '@the-dev-tools/ui/utils';
 import { useDeltaState } from '~/features/delta';
@@ -386,11 +387,11 @@ const FolderFile = ({ id }: FileItemProps) => {
       {({ isExpanded }) => (
         <>
           {name === 'Credentials' ? (
-            <TbGauge className={tw`size-4 text-slate-500`} />
+            <TbGauge className={tw`size-4 text-on-neutral-low`} />
           ) : isExpanded ? (
-            <FolderOpenedIcon className={tw`size-4 text-slate-500`} />
+            <FolderOpenedIcon className={tw`size-4 text-on-neutral-low`} />
           ) : (
-            <FiFolder className={tw`size-4 text-slate-500`} />
+            <FiFolder className={tw`size-4 text-on-neutral-low`} />
           )}
 
           <Text className={twJoin(tw`flex-1 truncate`, isEditing && tw`opacity-0`)} ref={escapeRef}>
@@ -410,7 +411,7 @@ const FolderFile = ({ id }: FileItemProps) => {
           {showControls && (
             <MenuTrigger {...menuTriggerProps}>
               <Button className={tw`p-0.5`} variant='ghost'>
-                <FiMoreHorizontal className={tw`size-4 text-slate-500`} />
+                <FiMoreHorizontal className={tw`size-4 text-on-neutral-low`} />
               </Button>
 
               <Menu {...menuProps}>
@@ -442,6 +443,8 @@ const HttpFile = ({ id }: FileItemProps) => {
   const router = useRouter();
   const navigate = useNavigate();
 
+  const { theme } = useTheme();
+
   const { workspaceId } = routes.dashboard.workspace.route.useLoaderData();
 
   const fileCollection = useApiCollection(FileCollectionSchema);
@@ -517,7 +520,7 @@ const HttpFile = ({ id }: FileItemProps) => {
       {showControls && (
         <MenuTrigger {...menuTriggerProps}>
           <Button className={tw`p-0.5`} variant='ghost'>
-            <FiMoreHorizontal className={tw`size-4 text-slate-500`} />
+            <FiMoreHorizontal className={tw`size-4 text-on-neutral-low`} />
           </Button>
 
           <Menu {...menuProps}>
@@ -573,18 +576,18 @@ const HttpFile = ({ id }: FileItemProps) => {
                           <>
                             <div className={tw`flex items-center justify-between`}>
                               <Heading
-                                className={tw`text-xl leading-6 font-semibold tracking-tighter text-slate-800`}
+                                className={tw`text-xl leading-6 font-semibold tracking-tighter text-on-neutral`}
                                 slot='title'
                               >
                                 cURL export
                               </Heading>
 
                               <Button className={tw`p-1`} onPress={() => void close()} variant='ghost'>
-                                <FiX className={tw`size-5 text-slate-500`} />
+                                <FiX className={tw`size-5 text-on-neutral-low`} />
                               </Button>
                             </div>
 
-                            <CodeMirror className={tw`flex-1`} height='100%' readOnly value={data} />
+                            <CodeMirror className={tw`flex-1`} height='100%' readOnly theme={theme} value={data} />
                           </>
                         )}
                       </Dialog>,
@@ -610,7 +613,7 @@ const HttpFile = ({ id }: FileItemProps) => {
 
   const props = {
     children: content,
-    className: toNavigate && matchRoute(route) !== false ? tw`bg-slate-200` : '',
+    className: toNavigate && matchRoute(route) !== false ? tw`bg-neutral` : '',
     id,
     item: (_) => <FileItem id={fileCollection.utils.getKey(_)} />,
     items: files,
@@ -625,6 +628,8 @@ const HttpDeltaFile = ({ id }: FileItemProps) => {
   const router = useRouter();
   const matchRoute = useMatchRoute();
 
+  const { theme } = useTheme();
+
   const { workspaceId } = routes.dashboard.workspace.route.useLoaderData();
 
   const fileCollection = useApiCollection(FileCollectionSchema);
@@ -704,7 +709,7 @@ const HttpDeltaFile = ({ id }: FileItemProps) => {
       {showControls && (
         <MenuTrigger {...menuTriggerProps}>
           <Button className={tw`p-0.5`} variant='ghost'>
-            <FiMoreHorizontal className={tw`size-4 text-slate-500`} />
+            <FiMoreHorizontal className={tw`size-4 text-on-neutral-low`} />
           </Button>
 
           <Menu {...menuProps}>
@@ -733,18 +738,18 @@ const HttpDeltaFile = ({ id }: FileItemProps) => {
                           <>
                             <div className={tw`flex items-center justify-between`}>
                               <Heading
-                                className={tw`text-xl leading-6 font-semibold tracking-tighter text-slate-800`}
+                                className={tw`text-xl leading-6 font-semibold tracking-tighter text-on-neutral`}
                                 slot='title'
                               >
                                 cURL export
                               </Heading>
 
                               <Button className={tw`p-1`} onPress={() => void close()} variant='ghost'>
-                                <FiX className={tw`size-5 text-slate-500`} />
+                                <FiX className={tw`size-5 text-on-neutral-low`} />
                               </Button>
                             </div>
 
-                            <CodeMirror className={tw`flex-1`} height='100%' readOnly value={data} />
+                            <CodeMirror className={tw`flex-1`} height='100%' readOnly theme={theme} value={data} />
                           </>
                         )}
                       </Dialog>,
@@ -767,7 +772,7 @@ const HttpDeltaFile = ({ id }: FileItemProps) => {
 
   const props = {
     children: content,
-    className: toNavigate && matchRoute(route) !== false ? tw`bg-slate-200` : '',
+    className: toNavigate && matchRoute(route) !== false ? tw`bg-neutral` : '',
     id,
     onContextMenu,
     textValue: name ?? '',
@@ -820,7 +825,7 @@ const FlowFile = ({ id }: FileItemProps) => {
 
   const content = (
     <>
-      <FlowsIcon className={tw`size-4 text-slate-500`} />
+      <FlowsIcon className={tw`size-4 text-on-neutral-low`} />
 
       <Text className={twJoin(tw`flex-1 truncate`, isEditing && tw`opacity-0`)} ref={escapeRef}>
         {name}
@@ -839,7 +844,7 @@ const FlowFile = ({ id }: FileItemProps) => {
       {showControls && (
         <MenuTrigger {...menuTriggerProps}>
           <Button className={tw`p-0.5`} variant='ghost'>
-            <FiMoreHorizontal className={tw`size-4 text-slate-500`} />
+            <FiMoreHorizontal className={tw`size-4 text-on-neutral-low`} />
           </Button>
 
           <Menu {...menuProps}>
@@ -870,7 +875,7 @@ const FlowFile = ({ id }: FileItemProps) => {
 
   const props = {
     children: content,
-    className: toNavigate && matchRoute(route) !== false ? tw`bg-slate-200` : '',
+    className: toNavigate && matchRoute(route) !== false ? tw`bg-neutral` : '',
     id,
     onContextMenu,
     textValue: name,
@@ -920,10 +925,10 @@ const CredentialFile = ({ id }: FileItemProps) => {
     <>
       {pipe(
         Match.value(kind),
-        Match.when(CredentialKind.OPEN_AI, () => <RiOpenaiFill className={tw`size-4 text-slate-500`} />),
-        Match.when(CredentialKind.ANTHROPIC, () => <RiAnthropicFill className={tw`size-4 text-slate-500`} />),
-        Match.when(CredentialKind.GEMINI, () => <RiGeminiFill className={tw`size-4 text-slate-500`} />),
-        Match.orElse(() => <TbGauge className={tw`size-4 text-slate-500`} />),
+        Match.when(CredentialKind.OPEN_AI, () => <RiOpenaiFill className={tw`size-4 text-on-neutral-low`} />),
+        Match.when(CredentialKind.ANTHROPIC, () => <RiAnthropicFill className={tw`size-4 text-on-neutral-low`} />),
+        Match.when(CredentialKind.GEMINI, () => <RiGeminiFill className={tw`size-4 text-on-neutral-low`} />),
+        Match.orElse(() => <TbGauge className={tw`size-4 text-on-neutral-low`} />),
       )}
 
       <Text className={twJoin(tw`flex-1 truncate`, isEditing && tw`opacity-0`)} ref={escapeRef}>
@@ -943,7 +948,7 @@ const CredentialFile = ({ id }: FileItemProps) => {
       {showControls && (
         <MenuTrigger {...menuTriggerProps}>
           <Button className={tw`p-0.5`} variant='ghost'>
-            <FiMoreHorizontal className={tw`size-4 text-slate-500`} />
+            <FiMoreHorizontal className={tw`size-4 text-on-neutral-low`} />
           </Button>
 
           <Menu {...menuProps}>
@@ -963,7 +968,7 @@ const CredentialFile = ({ id }: FileItemProps) => {
 
   const props = {
     children: content,
-    className: toNavigate && matchRoute(route) !== false ? tw`bg-slate-200` : '',
+    className: toNavigate && matchRoute(route) !== false ? tw`bg-neutral` : '',
     id,
     onContextMenu,
     textValue: name,

diff --git a/packages/client/src/features/form-table/index.tsx b/packages/client/src/features/form-table/index.tsx
@@ -9,9 +9,9 @@ interface ColumnActionDeleteProps {
 
 export const ColumnActionDelete = ({ onDelete }: ColumnActionDeleteProps) => (
   <TooltipTrigger delay={750}>
-    <Button className={tw`p-1 text-red-700`} onPress={onDelete} variant='ghost'>
+    <Button className={tw`p-1 text-danger`} onPress={onDelete} variant='ghost'>
       <LuTrash2 />
     </Button>
-    <Tooltip className={tw`rounded-md bg-slate-800 px-2 py-1 text-xs text-white`}>Delete</Tooltip>
+    <Tooltip className={tw`rounded-md bg-inverse px-2 py-1 text-xs text-on-inverse`}>Delete</Tooltip>
   </TooltipTrigger>
 );
diff --git a/packages/client/src/pages/credential/tab.tsx b/packages/client/src/pages/credential/tab.tsx
@@ -42,10 +42,12 @@ export const CredentialTab = ({ credentialId }: CredentialTabProps) => {
     <>
       {pipe(
         Match.value(credential?.kind),
-        Match.when(CredentialKind.OPEN_AI, () => <RiOpenaiFill className={tw`size-4 shrink-0 text-slate-500`} />),
-        Match.when(CredentialKind.ANTHROPIC, () => <RiAnthropicFill className={tw`size-4 shrink-0 text-slate-500`} />),
-        Match.when(CredentialKind.GEMINI, () => <RiGeminiFill className={tw`size-4 shrink-0 text-slate-500`} />),
-        Match.orElse(() => <TbGauge className={tw`size-4 shrink-0 text-slate-500`} />),
+        Match.when(CredentialKind.OPEN_AI, () => <RiOpenaiFill className={tw`size-4 shrink-0 text-on-neutral-low`} />),
+        Match.when(CredentialKind.ANTHROPIC, () => (
+          <RiAnthropicFill className={tw`size-4 shrink-0 text-on-neutral-low`} />
+        )),
+        Match.when(CredentialKind.GEMINI, () => <RiGeminiFill className={tw`size-4 shrink-0 text-on-neutral-low`} />),
+        Match.orElse(() => <TbGauge className={tw`size-4 shrink-0 text-on-neutral-low`} />),
       )}
 
       <span className={tw`min-w-0 flex-1 truncate`}>{credential?.name}</span>