u8array · u8array · May 7, 2026 · May 7, 2026 · May 7, 2026 · May 7, 2026
diff --git a/index.html b/index.html
@@ -8,6 +8,22 @@
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@700&family=IBM+Plex+Mono:wght@400;500&family=IBM+Plex+Sans:wght@400;500;600&display=swap" rel="stylesheet" />
+    <script>
+      // Set data-theme before first paint so the user's persisted preference
+      // applies before React mounts. Without this, a light-theme user sees
+      // a brief dark flash while the bridge effect in AppShell catches up.
+      (function () {
+        try {
+          var raw = localStorage.getItem('zpl-designer-session');
+          var parsed = raw ? JSON.parse(raw) : null;
+          var stored = parsed && parsed.state && parsed.state.theme;
+          var theme = stored === 'light' || stored === 'dark'
+            ? stored
+            : window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+          document.documentElement.setAttribute('data-theme', theme);
+        } catch (e) { /* fall through to dark default in CSS */ }
+      })();
+    </script>
   </head>
   <body>
     <div id="root"></div>

diff --git a/src/components/AppShell.tsx b/src/components/AppShell.tsx
@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import { DndContext, PointerSensor, useSensor, useSensors } from "@dnd-kit/core";
 import { ObjectPalette } from "./Palette/ObjectPalette";
 import { LabelCanvas } from "./Canvas/LabelCanvas";
@@ -27,6 +27,8 @@ import {
   PaperAirplaneIcon,
   GlobeAltIcon,
   XMarkIcon,
+  SunIcon,
+  MoonIcon,
 } from "@heroicons/react/16/solid";
 import { useLabelStore, useHistory } from "../store/labelStore";
 import { localeNames } from "../locales";
@@ -46,6 +48,14 @@ export function AppShell() {
   const addPage = useLabelStore((s) => s.addPage);
   const locale = useLabelStore((s) => s.locale);
   const setLocale = useLabelStore((s) => s.setLocale);
+  const theme = useLabelStore((s) => s.theme);
+  const setTheme = useLabelStore((s) => s.setTheme);
+
+  // Bridge the theme preference to <html data-theme> so the CSS variables in
+  // index.css pick it up.
+  useEffect(() => {
+    document.documentElement.setAttribute('data-theme', theme);
+  }, [theme]);
   const { undo, redo, pastStates, futureStates } = useHistory();
   const canvasSettings = useLabelStore((s) => s.canvasSettings);
   const setCanvasSettings = useLabelStore((s) => s.setCanvasSettings);
@@ -116,6 +126,19 @@ export function AppShell() {
 
           <div className="w-px h-4 bg-border mx-1" />
 
+          <button
+            onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
+            title={theme === "dark" ? t.app.themeLight : t.app.themeDark}
+            aria-label={t.app.themeToggle}
+            className="p-1.5 rounded text-muted hover:text-text hover:bg-surface-2 transition-colors"
+          >
+            {theme === "dark" ? (
+              <SunIcon className="w-3.5 h-3.5" />
+            ) : (
+              <MoonIcon className="w-3.5 h-3.5" />
+            )}
+          </button>
+
           <DropdownMenu
             label={<GlobeAltIcon className="w-3.5 h-3.5" />}
             maxHeight="260px"

diff --git a/src/index.css b/src/index.css
@@ -15,18 +15,20 @@
   --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
 }
 
-@media (prefers-color-scheme: light) {
-  :root {
-    --color-bg:        #f4f4f8;
-    --color-surface:   #ffffff;
-    --color-surface-2: #ececf3;
-    --color-border:    #dcdce8;
-    --color-border-2:  #c8c8d8;
-    --color-text:      #1a1a2e;
-    --color-muted:     #8080a8;
-    --color-accent:    #d97706;
-    --color-accent-dim:#fef3c7;
-  }
+/* Light palette: applied via `data-theme="light"`. The store seeds the
+   initial theme from prefers-color-scheme on first load and persists the
+   user's explicit choice afterwards, so an OS media-query fallback would
+   only fight with the cached preference. */
+:root[data-theme="light"] {
+  --color-bg:        #f4f4f8;
+  --color-surface:   #ffffff;
+  --color-surface-2: #ececf3;
+  --color-border:    #dcdce8;
+  --color-border-2:  #c8c8d8;
+  --color-text:      #1a1a2e;
+  --color-muted:     #8080a8;
+  --color-accent:    #d97706;
+  --color-accent-dim:#fef3c7;
 }
 
 *, *::before, *::after {

diff --git a/src/lib/useColorScheme.ts b/src/lib/useColorScheme.ts
@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useLabelStore } from '../store/labelStore';
 
 export interface CanvasColors {
   canvasBg: string;
@@ -40,16 +40,6 @@ export const LIGHT_COLORS: CanvasColors = {
 };
 
 export function useColorScheme(): CanvasColors {
-  const [isDark, setIsDark] = useState(
-    () => window.matchMedia('(prefers-color-scheme: dark)').matches,
-  );
-
-  useEffect(() => {
-    const mql = window.matchMedia('(prefers-color-scheme: dark)');
-    const handler = (e: MediaQueryListEvent) => setIsDark(e.matches);
-    mql.addEventListener('change', handler);
-    return () => mql.removeEventListener('change', handler);
-  }, []);
-
-  return isDark ? DARK_COLORS : LIGHT_COLORS;
+  const theme = useLabelStore((s) => s.theme);
+  return theme === 'dark' ? DARK_COLORS : LIGHT_COLORS;
 }
diff --git a/src/locales/ar.ts b/src/locales/ar.ts
@@ -104,6 +104,9 @@ const ar = {
     propertiesTab: 'الخصائص',
     layersTab: 'الطبقات',
     fontsTab: 'الخطوط',
+    themeToggle: 'تبديل المظهر',
+    themeLight: 'مظهر فاتح',
+    themeDark: 'مظهر داكن',
   },
 
   output: {

diff --git a/src/locales/bg.ts b/src/locales/bg.ts
@@ -104,6 +104,9 @@ const bg = {
     propertiesTab: 'Свойства',
     layersTab: 'Слоеве',
     fontsTab: 'Шрифтове',
+    themeToggle: 'Превключване на темата',
+    themeLight: 'Светла тема',
+    themeDark: 'Тъмна тема',
   },
 
   output: {

diff --git a/src/locales/cs.ts b/src/locales/cs.ts
@@ -104,6 +104,9 @@ const cs = {
     propertiesTab: 'Vlastnosti',
     layersTab: 'Vrstvy',
     fontsTab: 'Písma',
+    themeToggle: 'Přepnout motiv',
+    themeLight: 'Světlý motiv',
+    themeDark: 'Tmavý motiv',
   },
 
   output: {

diff --git a/src/locales/da.ts b/src/locales/da.ts
@@ -104,6 +104,9 @@ const da = {
     propertiesTab: 'Egenskaber',
     layersTab: 'Lag',
     fontsTab: 'Skrifttyper',
+    themeToggle: 'Skift tema',
+    themeLight: 'Lyst tema',
+    themeDark: 'Mørkt tema',
   },
 
   output: {

diff --git a/src/locales/de.ts b/src/locales/de.ts
@@ -104,6 +104,9 @@ const de = {
     propertiesTab: 'Eigenschaften',
     layersTab: 'Ebenen',
     fontsTab: 'Schriften',
+    themeToggle: 'Design wechseln',
+    themeLight: 'Helles Design',
+    themeDark: 'Dunkles Design',
   },
 
   zebraPrint: {

diff --git a/src/locales/el.ts b/src/locales/el.ts
@@ -104,6 +104,9 @@ const el = {
     propertiesTab: 'Ιδιότητες',
     layersTab: 'Επίπεδα',
     fontsTab: 'Γραμματοσειρές',
+    themeToggle: 'Εναλλαγή θέματος',
+    themeLight: 'Ανοιχτό θέμα',
+    themeDark: 'Σκοτεινό θέμα',
   },
 
   output: {

diff --git a/src/locales/en.ts b/src/locales/en.ts
@@ -104,6 +104,9 @@ const en = {
     propertiesTab: 'Properties',
     layersTab: 'Layers',
     fontsTab: 'Fonts',
+    themeToggle: 'Toggle theme',
+    themeLight: 'Light theme',
+    themeDark: 'Dark theme',
   },
 
   zebraPrint: {

diff --git a/src/locales/es.ts b/src/locales/es.ts
@@ -104,6 +104,9 @@ const es = {
     propertiesTab: 'Propiedades',
     layersTab: 'Capas',
     fontsTab: 'Fuentes',
+    themeToggle: 'Cambiar tema',
+    themeLight: 'Tema claro',
+    themeDark: 'Tema oscuro',
   },
 
   output: {

diff --git a/src/locales/et.ts b/src/locales/et.ts
@@ -104,6 +104,9 @@ const et = {
     propertiesTab: 'Omadused',
     layersTab: 'Kihid',
     fontsTab: 'Fondid',
+    themeToggle: 'Vaheta teemat',
+    themeLight: 'Hele teema',
+    themeDark: 'Tume teema',
   },
 
   output: {

diff --git a/src/locales/fa.ts b/src/locales/fa.ts
@@ -104,6 +104,9 @@ const fa = {
     propertiesTab: 'ویژگی‌ها',
     layersTab: 'لایه‌ها',
     fontsTab: 'فونت‌ها',
+    themeToggle: 'تغییر تم',
+    themeLight: 'تم روشن',
+    themeDark: 'تم تیره',
   },
 
   output: {

diff --git a/src/locales/fi.ts b/src/locales/fi.ts
@@ -104,6 +104,9 @@ const fi = {
     propertiesTab: 'Ominaisuudet',
     layersTab: 'Tasot',
     fontsTab: 'Fontit',
+    themeToggle: 'Vaihda teema',
+    themeLight: 'Vaalea teema',
+    themeDark: 'Tumma teema',
   },
 
   output: {

diff --git a/src/locales/fr.ts b/src/locales/fr.ts
@@ -104,6 +104,9 @@ const fr = {
     propertiesTab: 'Propriétés',
     layersTab: 'Calques',
     fontsTab: 'Polices',
+    themeToggle: 'Changer de thème',
+    themeLight: 'Thème clair',
+    themeDark: 'Thème sombre',
   },
 
   output: {

diff --git a/src/locales/he.ts b/src/locales/he.ts
@@ -104,6 +104,9 @@ const he = {
     propertiesTab: 'מאפיינים',
     layersTab: 'שכבות',
     fontsTab: 'גופנים',
+    themeToggle: 'החלפת ערכת נושא',
+    themeLight: 'ערכת נושא בהירה',
+    themeDark: 'ערכת נושא כהה',
   },
 
   output: {

diff --git a/src/locales/hr.ts b/src/locales/hr.ts
@@ -104,6 +104,9 @@ const hr = {
     propertiesTab: 'Svojstva',
     layersTab: 'Slojevi',
     fontsTab: 'Fontovi',
+    themeToggle: 'Promijeni temu',
+    themeLight: 'Svijetla tema',
+    themeDark: 'Tamna tema',
   },
 
   output: {

diff --git a/src/locales/hu.ts b/src/locales/hu.ts
@@ -104,6 +104,9 @@ const hu = {
     propertiesTab: 'Tulajdonságok',
     layersTab: 'Rétegek',
     fontsTab: 'Betűtípusok',
+    themeToggle: 'Téma váltása',
+    themeLight: 'Világos téma',
+    themeDark: 'Sötét téma',
   },
 
   output: {

diff --git a/src/locales/it.ts b/src/locales/it.ts
@@ -104,6 +104,9 @@ const it = {
     propertiesTab: 'Proprietà',
     layersTab: 'Livelli',
     fontsTab: 'Caratteri',
+    themeToggle: 'Cambia tema',
+    themeLight: 'Tema chiaro',
+    themeDark: 'Tema scuro',
   },
 
   output: {

diff --git a/src/locales/ja.ts b/src/locales/ja.ts
@@ -104,6 +104,9 @@ const ja = {
     propertiesTab: 'プロパティ',
     layersTab: 'レイヤー',
     fontsTab: 'フォント',
+    themeToggle: 'テーマを切り替える',
+    themeLight: 'ライトテーマ',
+    themeDark: 'ダークテーマ',
   },
 
   output: {

diff --git a/src/locales/ko.ts b/src/locales/ko.ts
@@ -104,6 +104,9 @@ const ko = {
     propertiesTab: '속성',
     layersTab: '레이어',
     fontsTab: '글꼴',
+    themeToggle: '테마 전환',
+    themeLight: '라이트 테마',
+    themeDark: '다크 테마',
   },
 
   output: {

diff --git a/src/locales/lt.ts b/src/locales/lt.ts
@@ -104,6 +104,9 @@ const lt = {
     propertiesTab: 'Savybės',
     layersTab: 'Sluoksniai',
     fontsTab: 'Šriftai',
+    themeToggle: 'Perjungti temą',
+    themeLight: 'Šviesi tema',
+    themeDark: 'Tamsi tema',
   },
 
   output: {

diff --git a/src/locales/lv.ts b/src/locales/lv.ts
@@ -104,6 +104,9 @@ const lv = {
     propertiesTab: 'Īpašības',
     layersTab: 'Slāņi',
     fontsTab: 'Fonti',
+    themeToggle: 'Pārslēgt motīvu',
+    themeLight: 'Gaišais motīvs',
+    themeDark: 'Tumšais motīvs',
   },
 
   output: {

diff --git a/src/locales/nl.ts b/src/locales/nl.ts
@@ -104,6 +104,9 @@ const nl = {
     propertiesTab: 'Eigenschappen',
     layersTab: 'Lagen',
     fontsTab: 'Lettertypen',
+    themeToggle: 'Thema wisselen',
+    themeLight: 'Licht thema',
+    themeDark: 'Donker thema',
   },
 
   output: {

diff --git a/src/locales/no.ts b/src/locales/no.ts
@@ -104,6 +104,9 @@ const no = {
     propertiesTab: 'Egenskaper',
     layersTab: 'Lag',
     fontsTab: 'Skrifter',
+    themeToggle: 'Bytt tema',
+    themeLight: 'Lyst tema',
+    themeDark: 'Mørkt tema',
   },
 
   output: {

diff --git a/src/locales/pl.ts b/src/locales/pl.ts
@@ -104,6 +104,9 @@ const pl = {
     propertiesTab: 'Właściwości',
     layersTab: 'Warstwy',
     fontsTab: 'Czcionki',
+    themeToggle: 'Przełącz motyw',
+    themeLight: 'Jasny motyw',
+    themeDark: 'Ciemny motyw',
   },
 
   output: {

diff --git a/src/locales/pt.ts b/src/locales/pt.ts
@@ -104,6 +104,9 @@ const pt = {
     propertiesTab: 'Propriedades',
     layersTab: 'Camadas',
     fontsTab: 'Fontes',
+    themeToggle: 'Alternar tema',
+    themeLight: 'Tema claro',
+    themeDark: 'Tema escuro',
   },
 
   output: {

diff --git a/src/locales/ro.ts b/src/locales/ro.ts
@@ -104,6 +104,9 @@ const ro = {
     propertiesTab: 'Proprietăți',
     layersTab: 'Straturi',
     fontsTab: 'Fonturi',
+    themeToggle: 'Comutare temă',
+    themeLight: 'Temă luminoasă',
+    themeDark: 'Temă întunecată',
   },
 
   output: {

diff --git a/src/locales/sk.ts b/src/locales/sk.ts
@@ -104,6 +104,9 @@ const sk = {
     propertiesTab: 'Vlastnosti',
     layersTab: 'Vrstvy',
     fontsTab: 'Písma',
+    themeToggle: 'Prepnúť motív',
+    themeLight: 'Svetlý motív',
+    themeDark: 'Tmavý motív',
   },
 
   output: {