Skip to content

feat(theme): unlock light/dark with animated theme toggler #323

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

Draft
zjy365 wants to merge 3 commits into
base: main
Choose a base branch
from
Draft

feat(theme): unlock light/dark with animated theme toggler #323

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
0c80019
feat(theme): unlock light/dark with animated theme toggler (#139)
zjy365 Sep 2, 2026
f163515
feat(theme): light-mode adaptation for DB Access / DataBrowser (#140)
zjy365 Sep 2, 2026
f69011c
feat(theme): light-mode adaptation for Billing (#141)
zjy365 Sep 2, 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
2 changes: 1 addition & 1 deletion apps/ui/src/features/billing/billing-app-cost-drawer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -349,7 +349,7 @@ export function BillingAppCostDrawer({
key={`day-${tableRow.day}`}
>
<TableCell
className="bg-white/8 font-normal text-foreground"
className="bg-muted font-normal text-foreground dark:bg-white/8"
colSpan={COLUMN_COUNT}
>
<span className="sticky left-4 inline-block">
Expand Down
6 changes: 3 additions & 3 deletions apps/ui/src/features/billing/billing-cost-charts.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -178,7 +178,7 @@ function LineLegendContent({
<circle
cx="8"
cy="5"
fill="var(--color-canvas-surface)"
fill="var(--main-action-surface-bg)"
r="3"
stroke={item.color}
strokeWidth="2"
Expand Down Expand Up @@ -257,7 +257,7 @@ function ChartBody({
isLoading: boolean;
}) {
if (isLoading) {
return <Skeleton className="h-72 w-full bg-white/8" />;
return <Skeleton className="h-72 w-full bg-muted dark:bg-white/8" />;
}
if (error != null) {
return (
Expand Down Expand Up @@ -349,7 +349,7 @@ export function BillingCostCharts({
{daily.series.map((series) => (
<Line
activeDot={{
fill: "var(--color-canvas-surface)",
fill: "var(--main-action-surface-bg)",
r: 3,
stroke: `var(--color-${series.dataKey})`,
strokeWidth: 2,
Expand Down
2 changes: 1 addition & 1 deletion apps/ui/src/features/billing/billing-cost-tree.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -203,7 +203,7 @@ function CostScopeCard({
<span
className={cn(
"font-bold tabular-nums",
selected ? "text-blue-400" : "text-foreground"
selected ? "text-blue-600 dark:text-blue-400" : "text-foreground"
)}
>
{formatBillingAmount(cost, currency)}
Expand Down
2 changes: 1 addition & 1 deletion apps/ui/src/features/billing/billing-costs-surface.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -624,7 +624,7 @@ export function BillingCostsSurface({
>
<div className="font-semibold">
<span>{bannerTitle}: </span>
<span className="text-blue-400 tabular-nums">
<span className="text-blue-600 tabular-nums dark:text-blue-400">
{isLoading
? "…"
: formatBillingAmount(bannerCostMicroUnits, currency)}
Expand Down
15 changes: 6 additions & 9 deletions apps/ui/src/features/billing/billing-plan-checkout-dialog.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -246,7 +246,7 @@ function paymentStatusCopy(status: PaymentWaitStatus): PaymentStatusCopy {
icon: (
<LoaderCircle
aria-hidden
className="size-10 animate-spin text-blue-400 motion-reduce:[animation-duration:3s]"
className="size-10 animate-spin text-blue-600 dark:text-blue-400 motion-reduce:[animation-duration:3s]"
strokeWidth={1.5}
/>
),
Expand Down Expand Up @@ -411,7 +411,7 @@ function DowngradeStage({
return (
<>
<AppDialog.Header>
<AppDialog.Icon className="text-blue-400">
<AppDialog.Icon className="text-blue-600 dark:text-blue-400">
<CircleCheckBig aria-hidden strokeWidth={1.75} />
</AppDialog.Icon>
<AppDialog.Title>Downgrade to {plan.name}</AppDialog.Title>
Expand Down Expand Up @@ -454,7 +454,7 @@ function DowngradeStage({
<p className="text-muted-foreground text-sm">
You are now in the process of changing your subscription, and the
change will{" "}
<span className="font-medium text-blue-400">
<span className="font-medium text-blue-600 dark:text-blue-400">
{"take effect on the following month's subscription date."}
</span>
</p>
Expand Down Expand Up @@ -569,7 +569,7 @@ function PromotionCodeField({
if (!open) {
return (
<AppButton
className="h-auto self-start p-0 text-blue-400 hover:text-blue-400"
className="h-auto self-start p-0 text-blue-600 hover:text-blue-600 dark:text-blue-400 dark:hover:text-blue-400"
disabled={disabled}
onClick={() => setOpen(true)}
variant="link"
Expand Down Expand Up @@ -782,10 +782,7 @@ function QuoteStage({
strokeWidth={1.75}
/>
</TooltipTrigger>
<TooltipContent
className="dark"
positionerClassName="z-[52]"
>
<TooltipContent positionerClassName="z-[52]">
Prorated charge for the remainder of the current billing
cycle.
</TooltipContent>
Expand Down Expand Up @@ -814,7 +811,7 @@ function QuoteStage({
)}
{card != null && onManageCard != null ? (
<AppButton
className="h-auto self-start p-0 text-blue-400 hover:text-blue-400"
className="h-auto self-start p-0 text-blue-600 hover:text-blue-600 dark:text-blue-400 dark:hover:text-blue-400"
onClick={onManageCard}
variant="link"
>
Expand Down
4 changes: 2 additions & 2 deletions apps/ui/src/features/billing/billing-plan-surface.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -841,7 +841,7 @@ export function BillingBalanceValue({
</p>
{giftMicroUnits > 0 ? (
<Badge
className="self-center bg-blue-400/10 text-blue-400 tabular-nums"
className="self-center bg-blue-600/10 text-blue-600 tabular-nums dark:bg-blue-400/10 dark:text-blue-400"
variant="secondary"
>
Gift {formatBillingAmount(giftMicroUnits, currency)}
Expand Down Expand Up @@ -1221,7 +1221,7 @@ export function BillingPlanSurface({
<div className="flex items-center gap-2" key={resource.label}>
<CircleCheck
aria-hidden
className="size-4 shrink-0 text-blue-400"
className="size-4 shrink-0 text-blue-600 dark:text-blue-400"
strokeWidth={1.75}
/>
<span className="text-muted-foreground text-sm">
Expand Down
4 changes: 2 additions & 2 deletions apps/ui/src/features/billing/billing-pricing.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -228,7 +228,7 @@ export function BillingPriceTable({
) : (
sections.map((section) => (
<Fragment key={section.title}>
<TableRow className="bg-white/5 hover:bg-white/5">
<TableRow className="bg-muted hover:bg-muted dark:bg-white/5 dark:hover:bg-white/5">
<TableCell className="h-12 font-medium" colSpan={3}>
{section.title}
</TableCell>
Expand Down Expand Up @@ -439,7 +439,7 @@ function CalculatorRow({

function CalculatorSectionBar({ title }: { title: string }) {
return (
<h3 className="border-border border-y bg-white/5 px-5 py-3.5 font-medium text-foreground text-sm">
<h3 className="border-border border-y bg-muted px-5 py-3.5 font-medium text-foreground text-sm dark:bg-white/5">
{title}
</h3>
);
Expand Down
4 changes: 2 additions & 2 deletions apps/ui/src/features/billing/billing-tab-shell.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -83,7 +83,7 @@ export function BillingNavigationFrame({
<div className="flex min-w-0 items-center gap-2">
<ReceiptText
aria-hidden
className="size-4 shrink-0 text-blue-400"
className="size-4 shrink-0 text-blue-600 dark:text-blue-400"
strokeWidth={2}
/>
<h1 className="truncate font-semibold text-foreground text-lg leading-none">
Expand All @@ -108,7 +108,7 @@ export function BillingNavigationFrame({
className={cn(
"flex h-9 shrink-0 items-center gap-2 whitespace-nowrap rounded-md p-2 font-medium text-primary text-sm leading-none transition-colors focus-visible:outline focus-visible:outline-2 focus-visible:outline-ring/70",
active
? "bg-input text-foreground [&_svg]:text-blue-400"
? "bg-input text-foreground [&_svg]:text-blue-600 dark:[&_svg]:text-blue-400"
: "hover:bg-input/30 hover:text-foreground"
)}
href={tab.href}
Expand Down
4 changes: 2 additions & 2 deletions apps/ui/src/features/billing/billing-usage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,7 @@ function UsageProgress({ value }: { value: number }) {
aria-valuemax={100}
aria-valuemin={0}
aria-valuenow={value}
className="h-1 w-full max-w-40 overflow-hidden rounded-full bg-white/8"
className="h-1 w-full max-w-40 overflow-hidden rounded-full bg-muted dark:bg-white/8"
role="progressbar"
>
<div
Expand Down Expand Up @@ -129,7 +129,7 @@ export function BillingUsageSurface({
aria-label={
index === 0 ? "Loading workspace usage" : undefined
}
className="h-4 w-full bg-white/8"
className="h-4 w-full bg-muted dark:bg-white/8"
/>
</TableCell>
</TableRow>
Expand Down
2 changes: 1 addition & 1 deletion apps/ui/src/features/db-browser/DataBrowserPane.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ export function DataBrowserPane({
refreshProjectCanvas={refreshProjectCanvas}
selectedDatabaseData={selectedDatabaseData}
>
<div className="dark flex h-full min-h-0 w-full overflow-hidden text-foreground">
<div className="flex h-full min-h-0 w-full overflow-hidden text-foreground">
<DataBrowserPaneBody />
</div>
</DataBrowserRuntimeProvider>
Expand Down
8 changes: 5 additions & 3 deletions apps/ui/src/features/db-browser/backups/BackupServiceSurface.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -295,7 +295,7 @@ function BackupRowsList({
const canDelete = backup.deletable && !isDeleting;
return (
<article
className="flex min-h-[74px] flex-row items-center justify-between gap-3 rounded-md bg-white/[0.04] px-4 py-3 transition-colors hover:bg-white/[0.06]"
className="flex min-h-[74px] flex-row items-center justify-between gap-3 rounded-md bg-muted px-4 py-3 transition-colors hover:bg-muted/80 dark:bg-white/[0.04] dark:hover:bg-white/[0.06]"
data-qa-module="database"
data-qa-object="backup-row"
data-qa-resource-id={backup.name}
Expand Down Expand Up @@ -748,9 +748,11 @@ function DeleteBackupModal({
{"and any restored DB Services remain unchanged."}
</AppDialog.Description>
<AppDialog.Field>
<p className="select-text text-sm/5 text-zinc-400">
<p className="select-text text-muted-foreground text-sm/5 dark:text-zinc-400">
{"Type "}
<span className="font-mono text-zinc-100">{backup.name}</span>
<span className="font-mono text-foreground dark:text-zinc-100">
{backup.name}
</span>
{" to confirm."}
</p>
<AppDialog.Input
Expand Down
4 changes: 2 additions & 2 deletions apps/ui/src/features/db-browser/components/database/shared/SingleObjectExportModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,8 +71,8 @@ export function SingleObjectExportModal({
className={cn(
"inline-flex h-9 items-center justify-start gap-2 rounded-lg border border-border px-3 font-medium text-sm/5 outline-none transition-colors",
format === option
? "bg-white/10 text-zinc-50"
: "bg-white/[0.045] text-zinc-300 hover:bg-white/10 hover:text-zinc-50"
? "bg-input text-foreground dark:bg-white/10 dark:text-zinc-50"
: "text-muted-foreground hover:bg-input/60 dark:bg-white/[0.045] dark:text-zinc-300 dark:hover:bg-white/10 dark:hover:text-zinc-50"
)}
disabled={isExporting}
key={option}
Expand Down
2 changes: 1 addition & 1 deletion apps/ui/src/features/db-browser/components/database/sql/TableView/TableView.DataGrid.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -201,7 +201,7 @@ export function TableViewDataGrid({
key={row.rowKey}
>
<td
className="sticky left-0 z-30 border-border border-r border-b bg-[#0C1120] px-2 py-2 text-center font-normal text-sm"
className="sticky left-0 z-30 border-border border-r border-b bg-db-access-row-selector-surface px-2 py-2 text-center font-normal text-sm"
data-qa-module="sql"
data-qa-object="table-row"
data-qa-resource-id={row.rowKey}
Expand Down
5 changes: 2 additions & 3 deletions apps/ui/src/features/project-canvas/actions/canvas-action-surface.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,8 @@ const CENTERED_NAME_RE =
/<p class="[^"]*text-center[^"]*" title="orders-db">orders-db<\/p>/;
const DB_ACCESS_TITLE_RE =
/<h2 class="[^"]*" title="DB Access">DB Access<\/h2>/;
const ACTION_SURFACE_BACKGROUND_RE = /bg-neutral-950/;
// The surface background is theme-paired (light sheet / dark canvas navy)
// via --main-action-surface-bg, so no literal bg-neutral-950 remains.
const MAIN_ACTION_SURFACE_BACKGROUND_RE = /main-action-surface-background/;
const MAIN_ACTION_BODY_BACKGROUND_RE = /main-action-surface-body-background/;
const DB_ACCESS_RE = /text-foreground/;
Expand Down Expand Up @@ -76,7 +77,6 @@ test("main action surface renders shared chrome and empty body slot", () => {
assert.match(html, DB_ACCESS_TITLE_RE);
assert.doesNotMatch(html, ENGINE_SUBTITLE_RE);
assert.match(html, CLOSE_LABEL_RE);
assert.match(html, ACTION_SURFACE_BACKGROUND_RE);
assert.match(html, MAIN_ACTION_SURFACE_BACKGROUND_RE);
assert.match(html, MAIN_ACTION_BODY_BACKGROUND_RE);
assert.match(html, DB_ACCESS_RE);
Expand All @@ -101,7 +101,6 @@ test("main action surface frame renders custom surface content", () => {
assert.match(html, CUSTOM_TITLE_RE);
assert.match(html, CUSTOM_SUBTITLE_RE);
assert.match(html, CUSTOM_BODY_RE);
assert.match(html, ACTION_SURFACE_BACKGROUND_RE);
assert.match(html, MAIN_ACTION_SURFACE_BACKGROUND_RE);
assert.match(html, MAIN_ACTION_BODY_BACKGROUND_RE);
});
Expand Down
4 changes: 2 additions & 2 deletions apps/ui/src/features/project-canvas/actions/canvas-action-surface.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,7 @@ export function MainActionSurfaceFrame({
return (
<section
aria-label={label}
className="dark main-action-surface-background absolute inset-0 z-30 flex min-h-0 min-w-0 flex-col overflow-hidden bg-neutral-950 text-foreground"
className="main-action-surface-background absolute inset-0 z-30 flex min-h-0 min-w-0 flex-col overflow-hidden text-foreground"
data-slot="main-action-surface"
>
<header
Expand All @@ -73,7 +73,7 @@ export function MainActionSurfaceFrame({
>
<div className="flex min-w-0 items-center gap-2">
{icon == null ? null : (
<span className="flex size-4 shrink-0 items-center justify-center text-blue-400">
<span className="flex size-4 shrink-0 items-center justify-center text-blue-600 dark:text-blue-400">
{icon}
</span>
)}
Expand Down
16 changes: 8 additions & 8 deletions apps/ui/src/features/shell/app-sidebar-account.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -141,7 +141,7 @@ function AppSidebarQuotaBar({ percent }: { percent: number | null }) {
<span
className={cn(
"block h-full rounded-full",
tone == null ? "bg-blue-400" : USAGE_BAR_CLASS[tone]
tone == null ? "bg-blue-600 dark:bg-blue-400" : USAGE_BAR_CLASS[tone]
)}
style={{ width: `${percent ?? 0}%` }}
/>
Expand Down Expand Up @@ -469,7 +469,7 @@ function AppSidebarAccountMenuRow({
rel={rel}
target={target}
>
<span className="flex w-6 shrink-0 items-center justify-center text-neutral-50 transition-colors group-hover/menurow:text-blue-400">
<span className="flex w-6 shrink-0 items-center justify-center text-foreground transition-colors group-hover/menurow:text-blue-600 dark:group-hover/menurow:text-blue-400">
{icon}
</span>
<span className="min-w-0 flex-1 truncate">{label}</span>
Expand Down Expand Up @@ -554,8 +554,8 @@ function AppSidebarUsageAccordion({
>
<span
className={cn(
"flex w-6 shrink-0 items-center justify-center transition-colors group-hover/menurow:text-blue-400",
open ? "text-blue-400" : "text-neutral-50"
"flex w-6 shrink-0 items-center justify-center transition-colors group-hover/menurow:text-blue-600 dark:group-hover/menurow:text-blue-400",
open ? "text-blue-600 dark:text-blue-400" : "text-foreground"
)}
>
<Gauge aria-hidden className="size-4" strokeWidth={1.8} />
Expand Down Expand Up @@ -694,7 +694,7 @@ function AppSidebarAccountMenuView({
{userId === "" ? null : (
<button
aria-label="Copy user ID"
className="flex cursor-pointer items-center gap-1 text-muted-foreground text-xs tabular-nums transition-colors hover:text-neutral-50"
className="flex cursor-pointer items-center gap-1 text-muted-foreground text-xs tabular-nums transition-colors hover:text-foreground"
onClick={onCopyId}
type="button"
>
Expand All @@ -720,7 +720,7 @@ function AppSidebarAccountMenuView({
usageSection={usageSection}
/>
<Link
className="flex h-9 items-center justify-center gap-1.5 rounded-md bg-input/40 font-medium text-neutral-50 text-sm transition-colors hover:bg-input/60"
className="flex h-9 items-center justify-center gap-1.5 rounded-md bg-input/40 font-medium text-foreground text-sm transition-colors hover:bg-input/60"
href="/billing?mode=upgrade"
onClick={recordBillingReturnRoute}
>
Expand Down Expand Up @@ -899,7 +899,7 @@ export function AppSidebarAccount() {
: "opacity-0 duration-200 ease-out"
)}
>
<span className="block truncate font-medium text-neutral-50 text-sm/4">
<span className="block truncate font-medium text-foreground text-sm/4">
{displayName}
</span>
{secondLine == null ? null : (
Expand Down Expand Up @@ -931,7 +931,7 @@ export function AppSidebarAccount() {
<PopoverContent
align={expanded ? "start" : "end"}
anchor={expanded ? undefined : iconSlotRef}
className="w-58 gap-0 rounded-lg border border-border bg-input/30 p-3 text-brand-primary-foreground shadow-none ring-0 backdrop-blur-xl"
className="w-58 gap-0 rounded-lg border border-border bg-input/30 p-3 text-foreground shadow-none ring-0 backdrop-blur-xl dark:text-brand-primary-foreground"
side={expanded ? "top" : "right"}
sideOffset={6}
>
Expand Down
Loading
Loading