Skip to content

feat(ui): add dark mode via CSS design tokens #24

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
moosebay wants to merge 5 commits into
base: main
Choose a base branch
from
Open

feat(ui): add dark mode via CSS design tokens #24

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
f67ab30
feat(ui): add dark mode via CSS design tokens
moosebay Feb 8, 2026
c774dc3
fix(ui): auto-fix lint line-wrapping warning
moosebay Feb 8, 2026
5caddd7
style: fix prettier formatting
moosebay Feb 8, 2026
69bef17
fix(dark-mode): tune flow state colors, reduce glow, migrate remainin…
moosebay Feb 8, 2026
d6f8ff5
refactor(ui): replace 40+ ad-hoc design tokens with 18 shadcn-inspire…
moosebay Feb 9, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 10 additions & 0 deletions apps/desktop/src/renderer/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,16 @@
<head>
<meta charset="utf-8" />
<title>DevTools Studio</title>
<script>
(function () {
var t = localStorage.getItem('theme');
var dark = t === 'dark' || (t !== 'light' && matchMedia('(prefers-color-scheme: dark)').matches);
if (dark) {
document.documentElement.classList.add('dark');
document.documentElement.style.backgroundColor = '#0f172a';
}
})();
</script>
</head>
<body>
<div id="root"></div>
Expand Down
3 changes: 3 additions & 0 deletions apps/desktop/tsconfig.lib.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,9 @@
{
"path": "../../packages/worker-js"
},
{
"path": "../../packages/ui/tsconfig.lib.json"
},
{
"path": "../../packages/client/tsconfig.lib.json"
},
Expand Down
6 changes: 6 additions & 0 deletions packages/client/src/app/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,4 +12,10 @@ body,
height: 100%;
overflow: hidden;
user-select: none;
background-color: var(--color-surface);
color: var(--color-fg);
}

.dark .react-flow {
--xy-background-color: var(--color-surface);
}
4 changes: 2 additions & 2 deletions packages/client/src/features/delta/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -187,7 +187,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-muted-foreground`}
isDisabled={!deltaId || !hasDelta}
onPress={() =>
void collection.utils.update?.({
Expand All @@ -200,7 +200,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-popover px-2 py-1 text-xs text-popover-foreground`}>Reset delta</Tooltip>
</TooltipTrigger>
);
};
Expand Down
2 changes: 1 addition & 1 deletion packages/client/src/features/expression/code-mirror/extensions.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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-muted-foreground`} />
</Button>
</div>

Expand Down
16 changes: 10 additions & 6 deletions packages/client/src/features/expression/reference.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ import {
ReferenceService,
ReferenceTreeItem,
} from '@the-dev-tools/spec/buf/api/reference/v1/reference_pb';
import { useTheme } from '@the-dev-tools/ui';
import { tw } from '@the-dev-tools/ui/tailwind-literal';
import { TreeItem } from '@the-dev-tools/ui/tree';
import { useConnectSuspenseQuery } from '~/shared/api';
Expand Down Expand Up @@ -134,27 +135,27 @@ 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-foreground`}>{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-destructive`}>{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-accent px-2 py-0.5 text-xs font-medium tracking-tight text-muted-foreground`}
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-muted-foreground`}>{quantity}</span>}

{reference.kind === ReferenceKind.VALUE && (
<>
<span className={tw`font-mono text-xs leading-5 text-slate-800`}>:</span>
<span className={tw`font-mono text-xs leading-5 text-foreground`}>:</span>
<span className={tw`flex-1 font-mono text-xs leading-5 break-all text-blue-700`}>{reference.value}</span>
</>
)}
Expand All @@ -163,7 +164,7 @@ export const ReferenceTreeItemView = ({ id, parentKeys, reference }: ReferenceTr
};

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-border px-3 py-0.5 text-md text-foreground`,
variants: {
variant: {
'table-cell': tw`w-full rounded-none border-transparent px-5 py-0.5 -outline-offset-4`,
Expand Down Expand Up @@ -210,6 +211,8 @@ export const ReferenceField = ({

const reactRender = useReactRender();

const { resolvedTheme } = useTheme();

return (
<CodeMirror
basicSetup={false}
Expand All @@ -227,6 +230,7 @@ export const ReferenceField = ({
else if (refProp) refProp.current = _;
ref.current = _;
}}
theme={resolvedTheme}
{...props}
/>
);
Expand Down
61 changes: 38 additions & 23 deletions packages/client/src/features/file-system/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,7 @@ import {
import { FileCollectionSchema, FolderCollectionSchema } from '@the-dev-tools/spec/tanstack-db/v1/api/file_system';
import { FlowCollectionSchema } from '@the-dev-tools/spec/tanstack-db/v1/api/flow';
import { HttpCollectionSchema, HttpDeltaCollectionSchema } from '@the-dev-tools/spec/tanstack-db/v1/api/http';
import { useTheme } from '@the-dev-tools/ui';
import { Button } from '@the-dev-tools/ui/button';
import { FlowsIcon, FolderOpenedIcon } from '@the-dev-tools/ui/icons';
import { Menu, MenuItem, useContextMenuState } from '@the-dev-tools/ui/menu';
Expand Down Expand Up @@ -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-muted-foreground`} />
) : isExpanded ? (
<FolderOpenedIcon className={tw`size-4 text-slate-500`} />
<FolderOpenedIcon className={tw`size-4 text-muted-foreground`} />
) : (
<FiFolder className={tw`size-4 text-slate-500`} />
<FiFolder className={tw`size-4 text-muted-foreground`} />
)}

<Text className={twJoin(tw`flex-1 truncate`, isEditing && tw`opacity-0`)} ref={escapeRef}>
Expand All @@ -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-muted-foreground`} />
</Button>

<Menu {...menuProps}>
Expand Down Expand Up @@ -441,6 +442,7 @@ const HttpFile = ({ id }: FileItemProps) => {
const matchRoute = useMatchRoute();
const router = useRouter();
const navigate = useNavigate();
const { resolvedTheme } = useTheme();

const { workspaceId } = routes.dashboard.workspace.route.useLoaderData();

Expand Down Expand Up @@ -517,7 +519,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-muted-foreground`} />
</Button>

<Menu {...menuProps}>
Expand Down Expand Up @@ -573,18 +575,24 @@ 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-foreground`}
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-muted-foreground`} />
</Button>
</div>

<CodeMirror className={tw`flex-1`} height='100%' readOnly value={data} />
<CodeMirror
className={tw`flex-1`}
height='100%'
readOnly
theme={resolvedTheme}
value={data}
/>
</>
)}
</Dialog>,
Expand All @@ -610,7 +618,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-accent` : '',
id,
item: (_) => <FileItem id={fileCollection.utils.getKey(_)} />,
items: files,
Expand All @@ -624,6 +632,7 @@ const HttpFile = ({ id }: FileItemProps) => {
const HttpDeltaFile = ({ id }: FileItemProps) => {
const router = useRouter();
const matchRoute = useMatchRoute();
const { resolvedTheme } = useTheme();

const { workspaceId } = routes.dashboard.workspace.route.useLoaderData();

Expand Down Expand Up @@ -704,7 +713,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-muted-foreground`} />
</Button>

<Menu {...menuProps}>
Expand Down Expand Up @@ -733,18 +742,24 @@ 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-foreground`}
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-muted-foreground`} />
</Button>
</div>

<CodeMirror className={tw`flex-1`} height='100%' readOnly value={data} />
<CodeMirror
className={tw`flex-1`}
height='100%'
readOnly
theme={resolvedTheme}
value={data}
/>
</>
)}
</Dialog>,
Expand All @@ -767,7 +782,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-accent` : '',
id,
onContextMenu,
textValue: name ?? '',
Expand Down Expand Up @@ -820,7 +835,7 @@ const FlowFile = ({ id }: FileItemProps) => {

const content = (
<>
<FlowsIcon className={tw`size-4 text-slate-500`} />
<FlowsIcon className={tw`size-4 text-muted-foreground`} />

<Text className={twJoin(tw`flex-1 truncate`, isEditing && tw`opacity-0`)} ref={escapeRef}>
{name}
Expand All @@ -839,7 +854,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-muted-foreground`} />
</Button>

<Menu {...menuProps}>
Expand Down Expand Up @@ -870,7 +885,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-accent` : '',
id,
onContextMenu,
textValue: name,
Expand Down Expand Up @@ -920,10 +935,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-muted-foreground`} />),
Match.when(CredentialKind.ANTHROPIC, () => <RiAnthropicFill className={tw`size-4 text-muted-foreground`} />),
Match.when(CredentialKind.GEMINI, () => <RiGeminiFill className={tw`size-4 text-muted-foreground`} />),
Match.orElse(() => <TbGauge className={tw`size-4 text-muted-foreground`} />),
)}

<Text className={twJoin(tw`flex-1 truncate`, isEditing && tw`opacity-0`)} ref={escapeRef}>
Expand All @@ -943,7 +958,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-muted-foreground`} />
</Button>

<Menu {...menuProps}>
Expand All @@ -963,7 +978,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-accent` : '',
id,
onContextMenu,
textValue: name,
Expand Down
8 changes: 4 additions & 4 deletions packages/client/src/features/form-table/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,7 @@ export const useFormTableAddRow = <TData, TKey extends keyof TData & string>({
}}
variant='ghost'
>
<FiPlus className={tw`size-4 text-slate-500`} />
<FiPlus className={tw`size-4 text-muted-foreground`} />
{createLabel}
</Button>
),
Expand Down Expand Up @@ -170,16 +170,16 @@ 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-destructive`} 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-popover px-2 py-1 text-xs text-popover-foreground`}>Delete</Tooltip>
</TooltipTrigger>
);

export const ColumnActionDrag = () => (
<Button className={tw`p-1`} slot='drag' variant='ghost'>
<FiMove className={tw`size-3 text-slate-500`} />
<FiMove className={tw`size-3 text-muted-foreground`} />
</Button>
);

Expand Down
8 changes: 4 additions & 4 deletions packages/client/src/pages/credential/tab.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,10 +42,10 @@ 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-muted-foreground`} />),
Match.when(CredentialKind.ANTHROPIC, () => <RiAnthropicFill className={tw`size-4 shrink-0 text-muted-foreground`} />),
Match.when(CredentialKind.GEMINI, () => <RiGeminiFill className={tw`size-4 shrink-0 text-muted-foreground`} />),
Match.orElse(() => <TbGauge className={tw`size-4 shrink-0 text-muted-foreground`} />),
)}

<span className={tw`min-w-0 flex-1 truncate`}>{credential?.name}</span>
Expand Down
Loading
Loading