dsh-theme-studio 0.1.0 → 0.2.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog
 
+## 0.2.0
+
+- 4 new presets: Gruvbox, Solarized, Tokyo Night, Catppuccin.
+- Dark-mode aware presets via `darkTokens`; the panel watches `body[data-ds-dark-theme]`.
+- Separate dark-mode accent color.
+- Contrast guard: a dark accent below the WCAG luminance floor is lightened in
+  steps, and the panel reports that it was adjusted.
+- Animation toggle (disables UI transitions).
+- Theme import/export as JSON, with validation; accepts both the envelope and a
+  bare preferences object, and reports a real error for non-theme input.
+- Unified token resolution: switching a preset off now clears the properties it
+  had set instead of leaving them behind.
+- 26 tests across theme data and color/IO logic.
+
 ## 0.1.0
 
 - Initial release.

package/README.md

@@ -4,13 +4,17 @@ A [dsh](https://github.com/deepseek-ai/deepseek-harness) plugin that lets you cu
 
 ## Features
 
-- **6 pre-built presets**: Ocean, Forest, Sunset, Monochrome, Nord, Dracula
-- **Custom accent color** picker with hex input
+- **10 pre-built presets**: Ocean, Forest, Sunset, Monochrome, Nord, Dracula, Gruvbox, Solarized, Tokyo Night, Catppuccin
+- **Dark-mode aware presets** — presets that ship a `darkTokens` palette switch automatically when dsh enters dark mode (watched via `MutationObserver` on `body[data-ds-dark-theme]`)
+- **Custom accent color** picker with hex input, plus a **separate dark-mode accent**
+- **Contrast guard** — a dark-mode accent that would be illegible on a dark surface is lightened in steps until it clears a WCAG luminance floor, and the panel says so rather than silently changing your pick
 - **Density** control: Compact / Comfortable / Spacious
 - **Border radius** control: Sharp / Rounded / Soft
 - **Font family** selection: System / Monospace / Serif
+- **Animation toggle** — turn off UI transitions for a snappier, low-motion interface
 - **Custom CSS** textarea for advanced `--property: value;` overrides
-- **Live preview** with badges, cards, and buttons
+- **Import / export** — copy a theme to the clipboard as JSON, or paste / upload one back
+- **Live preview** with badges, cards, and buttons, labelled with the current light/dark mode
 - **Instant apply** — changes take effect immediately via CSS custom properties
 - **Persistent** — preferences saved in `localStorage`, no server round-trips
 

package/lib/io.d.ts

@@ -0,0 +1,48 @@
+/**
+ * Theme import/export and color utilities for dsh-theme-studio.
+ *
+ * Kept free of DOM access so the logic is testable outside a browser.
+ *
+ * @module io
+ */
+import type { ThemePreferences } from './types.js';
+/** The wire format for exported themes. */
+export interface ExportedTheme {
+    $schema: 'dsh-theme-studio/v1';
+    name?: string;
+    preferences: ThemePreferences;
+    exportedAt: string;
+}
+/** Serialize preferences into a portable JSON string. */
+export declare function exportTheme(prefs: ThemePreferences, name?: string): string;
+/**
+ * Parse a theme JSON document.
+ *
+ * Every field is validated and falls back to the default rather than throwing,
+ * so a partially-hand-edited file still applies what it can. The only hard
+ * failure is input that is not a JSON object at all — that returns `null` so
+ * the caller can report a real import error instead of silently applying defaults.
+ */
+export declare function parseTheme(raw: string): ThemePreferences | null;
+/** Parse `#rgb` or `#rrggbb` into RGB components; `null` when unparseable. */
+export declare function hexToRgb(hex: string): [number, number, number] | null;
+/** WCAG relative luminance, 0 (black) → 1 (white). */
+export declare function luminance(hex: string): number;
+/** Convert RGB components back into a `#rrggbb` string. */
+export declare function rgbToHex(r: number, g: number, b: number): string;
+/** Blend a color toward white by `amount` (0–1). */
+export declare function lighten(hex: string, amount: number): string;
+/** Blend a color toward black by `amount` (0–1). */
+export declare function darken(hex: string, amount: number): string;
+/**
+ * Ensure an accent color stays legible on a dark background.
+ *
+ * A mid-tone accent that reads well on white can sit too close to a dark
+ * surface. Rather than silently swapping the user's color, we lighten it in
+ * steps until it clears a luminance floor and report whether we changed it, so
+ * the panel can say so instead of the user wondering why their pick looks off.
+ */
+export declare function ensureDarkContrast(hex: string): {
+    color: string;
+    adjusted: boolean;
+};

package/lib/io.js

@@ -0,0 +1,146 @@
+/**
+ * Theme import/export and color utilities for dsh-theme-studio.
+ *
+ * Kept free of DOM access so the logic is testable outside a browser.
+ *
+ * @module io
+ */
+import { DEFAULT_PREFERENCES } from './types.js';
+/** Serialize preferences into a portable JSON string. */
+export function exportTheme(prefs, name) {
+    const payload = {
+        $schema: 'dsh-theme-studio/v1',
+        preferences: prefs,
+        exportedAt: new Date().toISOString(),
+    };
+    if (name !== undefined)
+        payload.name = name;
+    return JSON.stringify(payload, null, 2);
+}
+const DENSITIES = new Set(['compact', 'comfortable', 'spacious']);
+const RADII = new Set(['sharp', 'rounded', 'soft']);
+const FONTS = new Set(['system', 'mono', 'serif']);
+function asColor(value) {
+    if (typeof value !== 'string')
+        return null;
+    const trimmed = value.trim();
+    if (trimmed === '')
+        return null;
+    return /^#[0-9a-fA-F]{3,8}$/.test(trimmed) ? trimmed : null;
+}
+/**
+ * Parse a theme JSON document.
+ *
+ * Every field is validated and falls back to the default rather than throwing,
+ * so a partially-hand-edited file still applies what it can. The only hard
+ * failure is input that is not a JSON object at all — that returns `null` so
+ * the caller can report a real import error instead of silently applying defaults.
+ */
+export function parseTheme(raw) {
+    let parsed;
+    try {
+        parsed = JSON.parse(raw);
+    }
+    catch {
+        return null;
+    }
+    if (parsed === null || typeof parsed !== 'object' || Array.isArray(parsed))
+        return null;
+    const doc = parsed;
+    // Accept both the envelope and a bare preferences object.
+    const source = (doc['preferences'] !== null && typeof doc['preferences'] === 'object' && !Array.isArray(doc['preferences']))
+        ? doc['preferences']
+        : doc;
+    const result = { ...DEFAULT_PREFERENCES };
+    if (typeof source['preset'] === 'string' || source['preset'] === null) {
+        result.preset = source['preset'];
+    }
+    result.accentColor = asColor(source['accentColor']);
+    result.darkAccentColor = asColor(source['darkAccentColor']);
+    if (typeof source['density'] === 'string' && DENSITIES.has(source['density'])) {
+        result.density = source['density'];
+    }
+    if (typeof source['radius'] === 'string' && RADII.has(source['radius'])) {
+        result.radius = source['radius'];
+    }
+    if (typeof source['fontFamily'] === 'string' && FONTS.has(source['fontFamily'])) {
+        result.fontFamily = source['fontFamily'];
+    }
+    if (typeof source['animations'] === 'boolean')
+        result.animations = source['animations'];
+    if (typeof source['customCss'] === 'string')
+        result.customCss = source['customCss'];
+    return result;
+}
+/** Parse `#rgb` or `#rrggbb` into RGB components; `null` when unparseable. */
+export function hexToRgb(hex) {
+    const value = hex.trim().replace(/^#/, '');
+    if (value.length === 3) {
+        const [r, g, b] = value.split('');
+        return [parseInt(r + r, 16), parseInt(g + g, 16), parseInt(b + b, 16)];
+    }
+    if (value.length === 6) {
+        return [
+            parseInt(value.slice(0, 2), 16),
+            parseInt(value.slice(2, 4), 16),
+            parseInt(value.slice(4, 6), 16),
+        ];
+    }
+    return null;
+}
+/** WCAG relative luminance, 0 (black) → 1 (white). */
+export function luminance(hex) {
+    const rgb = hexToRgb(hex);
+    if (rgb === null)
+        return 0;
+    const [r, g, b] = rgb.map((c) => {
+        const s = c / 255;
+        return s <= 0.03928 ? s / 12.92 : ((s + 0.055) / 1.055) ** 2.4;
+    });
+    return 0.2126 * r + 0.7152 * g + 0.0722 * b;
+}
+/** Convert RGB components back into a `#rrggbb` string. */
+export function rgbToHex(r, g, b) {
+    const clamp = (n) => Math.max(0, Math.min(255, Math.round(n)));
+    return '#' + [r, g, b].map((n) => clamp(n).toString(16).padStart(2, '0')).join('');
+}
+/** Blend a color toward white by `amount` (0–1). */
+export function lighten(hex, amount) {
+    const rgb = hexToRgb(hex);
+    if (rgb === null)
+        return hex;
+    const [r, g, b] = rgb;
+    return rgbToHex(r + (255 - r) * amount, g + (255 - g) * amount, b + (255 - b) * amount);
+}
+/** Blend a color toward black by `amount` (0–1). */
+export function darken(hex, amount) {
+    const rgb = hexToRgb(hex);
+    if (rgb === null)
+        return hex;
+    const [r, g, b] = rgb;
+    return rgbToHex(r * (1 - amount), g * (1 - amount), b * (1 - amount));
+}
+/**
+ * Ensure an accent color stays legible on a dark background.
+ *
+ * A mid-tone accent that reads well on white can sit too close to a dark
+ * surface. Rather than silently swapping the user's color, we lighten it in
+ * steps until it clears a luminance floor and report whether we changed it, so
+ * the panel can say so instead of the user wondering why their pick looks off.
+ */
+export function ensureDarkContrast(hex) {
+    const MIN_LUMINANCE = 0.18;
+    // An unparseable value can't be measured, so it can't be corrected either —
+    // returning it unadjusted keeps the panel from claiming it fixed something.
+    if (hexToRgb(hex) === null)
+        return { color: hex, adjusted: false };
+    if (luminance(hex) >= MIN_LUMINANCE)
+        return { color: hex, adjusted: false };
+    let current = hex;
+    for (let i = 0; i < 10; i += 1) {
+        current = lighten(current, 0.12);
+        if (luminance(current) >= MIN_LUMINANCE)
+            return { color: current, adjusted: true };
+    }
+    return { color: current, adjusted: true };
+}

package/lib/theme-studio.web.js

@@ -10,6 +10,9 @@ var zh = {
   accentSection: "\u5F3A\u8C03\u8272",
   accentHint: "\u81EA\u5B9A\u4E49\u754C\u9762\u5F3A\u8C03\u8272\uFF0C\u8986\u76D6\u9884\u8BBE\u4E2D\u7684\u5F3A\u8C03\u8272",
   accentPlaceholder: "#4B8BBE",
+  darkAccentSection: "\u6697\u8272\u6A21\u5F0F\u5F3A\u8C03\u8272",
+  darkAccentHint: "\u6697\u8272\u6A21\u5F0F\u4E0B\u4F7F\u7528\u7684\u5F3A\u8C03\u8272\uFF0C\u7559\u7A7A\u5219\u6CBF\u7528\u4E0A\u9762\u7684\u989C\u8272",
+  preserveContrast: "\u5DF2\u81EA\u52A8\u63D0\u4EAE\u4EE5\u4FDD\u8BC1\u6697\u8272\u4E0B\u53EF\u8BFB",
   densitySection: "\u5BC6\u5EA6",
   densityCompact: "\u7D27\u51D1",
   densityComfortable: "\u8212\u9002",
@@ -25,6 +28,20 @@ var zh = {
   customCssSection: "\u81EA\u5B9A\u4E49 CSS",
   customCssHint: "\u76F4\u63A5\u8986\u76D6 CSS \u81EA\u5B9A\u4E49\u5C5E\u6027\uFF0C\u6BCF\u884C\u4E00\u4E2A `--property: value;`",
   customCssPlaceholder: "--accent: #ff0000;\n--border: 1px solid red;",
+  behaviorSection: "\u884C\u4E3A",
+  animations: "\u754C\u9762\u52A8\u753B",
+  animationsHint: "\u5173\u95ED\u53EF\u51CF\u5C11\u52A8\u753B\u5E72\u6270\uFF0C\u63D0\u5347\u54CD\u5E94\u901F\u5EA6",
+  ioSection: "\u5BFC\u5165 / \u5BFC\u51FA",
+  export: "\u5BFC\u51FA\u4E3B\u9898",
+  import: "\u5BFC\u5165\u4E3B\u9898",
+  importHint: "\u7C98\u8D34\u5BFC\u51FA\u7684 JSON\uFF0C\u6216\u4E0A\u4F20 .json \u6587\u4EF6",
+  importPlaceholder: '{"preset":"nord","accentColor":"#5e81ac",...}',
+  importFile: "\u9009\u62E9\u6587\u4EF6",
+  importSuccess: "\u4E3B\u9898\u5DF2\u5BFC\u5165",
+  importFailed: "\u5BFC\u5165\u5931\u8D25\uFF1A\u4E0D\u662F\u6709\u6548\u7684\u4E3B\u9898 JSON",
+  exportSuccess: "\u4E3B\u9898\u5DF2\u590D\u5236\u5230\u526A\u8D34\u677F",
+  exportFailed: "\u590D\u5236\u5931\u8D25\uFF0C\u8BF7\u624B\u52A8\u590D\u5236",
+  copy: "\u590D\u5236",
   preview: "\u9884\u89C8",
   apply: "\u5E94\u7528",
   reset: "\u91CD\u7F6E\u4E3A\u9ED8\u8BA4",
@@ -46,6 +63,9 @@ var en = {
   accentSection: "Accent Color",
   accentHint: "Custom accent color, overrides the preset",
   accentPlaceholder: "#4B8BBE",
+  darkAccentSection: "Dark Mode Accent",
+  darkAccentHint: "Accent used in dark mode; leave empty to reuse the color above",
+  preserveContrast: "Lightened automatically for dark-mode readability",
   densitySection: "Density",
   densityCompact: "Compact",
   densityComfortable: "Comfortable",
@@ -61,6 +81,20 @@ var en = {
   customCssSection: "Custom CSS",
   customCssHint: "Override CSS custom properties directly, one `--property: value;` per line",
   customCssPlaceholder: "--accent: #ff0000;\n--border: 1px solid red;",
+  behaviorSection: "Behavior",
+  animations: "UI Animations",
+  animationsHint: "Turn off to reduce motion and speed up interaction",
+  ioSection: "Import / Export",
+  export: "Export Theme",
+  import: "Import Theme",
+  importHint: "Paste exported JSON, or upload a .json file",
+  importPlaceholder: '{"preset":"nord","accentColor":"#5e81ac",...}',
+  importFile: "Choose File",
+  importSuccess: "Theme imported",
+  importFailed: "Import failed: not a valid theme JSON",
+  exportSuccess: "Theme copied to clipboard",
+  exportFailed: "Copy failed, please copy manually",
+  copy: "Copy",
   preview: "Preview",
   apply: "Apply",
   reset: "Reset to Default",
@@ -74,15 +108,17 @@ var en = {
 };
 
 // src/client/view.tsx
-import { useCallback as useCallback2, useEffect as useEffect2, useState as useState2 } from "react";
+import { useCallback as useCallback2, useEffect as useEffect2, useRef, useState as useState2 } from "react";
 
 // src/types.ts
 var DEFAULT_PREFERENCES = {
   preset: null,
   accentColor: null,
+  darkAccentColor: null,
   density: "comfortable",
   radius: "rounded",
   fontFamily: "system",
+  animations: true,
   customCss: ""
 };
 var STORAGE_KEY = "dsh-theme-studio";
@@ -159,6 +195,81 @@ var PRESETS = [
       "--dsw-alias-state-business-primary": "#bd93f9",
       "--dsw-alias-state-business-secondary": "#3a3a5c",
       "--dsw-alias-interactive-bg-hover": "rgba(189,147,249,0.12)"
+    },
+    darkTokens: {
+      "--dsw-alias-state-business-secondary": "#44475a",
+      "--dsw-alias-interactive-bg-hover": "rgba(189,147,249,0.18)"
+    }
+  },
+  {
+    id: "gruvbox",
+    name: "Gruvbox",
+    description: "Retro groove with warm earthy tones",
+    tokens: {
+      "--accent": "#d65d0e",
+      "--accent-hover": "#cc241d",
+      "--dsw-alias-state-business-primary": "#d65d0e",
+      "--dsw-alias-state-business-secondary": "#fabd2f",
+      "--dsw-alias-interactive-bg-hover": "rgba(214,93,14,0.08)"
+    },
+    darkTokens: {
+      "--accent": "#fe8019",
+      "--accent-hover": "#fabd2f",
+      "--dsw-alias-state-business-primary": "#fe8019",
+      "--dsw-alias-state-business-secondary": "#3c3836"
+    }
+  },
+  {
+    id: "solarized",
+    name: "Solarized",
+    description: "Ethan Schoonover's precision palette",
+    tokens: {
+      "--accent": "#268bd2",
+      "--accent-hover": "#1e6fa8",
+      "--dsw-alias-state-business-primary": "#268bd2",
+      "--dsw-alias-state-business-secondary": "#eee8d5",
+      "--dsw-alias-interactive-bg-hover": "rgba(38,139,210,0.08)"
+    },
+    darkTokens: {
+      "--accent": "#839496",
+      "--accent-hover": "#93a1a1",
+      "--dsw-alias-state-business-primary": "#268bd2",
+      "--dsw-alias-state-business-secondary": "#073642"
+    }
+  },
+  {
+    id: "tokyo-night",
+    name: "Tokyo Night",
+    description: "Inspired by the lights of downtown Tokyo at night",
+    tokens: {
+      "--accent": "#7aa2f7",
+      "--accent-hover": "#6183f0",
+      "--dsw-alias-state-business-primary": "#7aa2f7",
+      "--dsw-alias-state-business-secondary": "#bb9af7",
+      "--dsw-alias-interactive-bg-hover": "rgba(122,162,247,0.08)"
+    },
+    darkTokens: {
+      "--dsw-alias-state-business-secondary": "#1a1b26",
+      "--dsw-alias-interactive-bg-hover": "rgba(122,162,247,0.15)"
+    }
+  },
+  {
+    id: "catppuccin",
+    name: "Catppuccin",
+    description: "Soothing pastel theme for high contrast",
+    tokens: {
+      "--accent": "#89b4fa",
+      "--accent-hover": "#74a8fc",
+      "--dsw-alias-state-business-primary": "#89b4fa",
+      "--dsw-alias-state-business-secondary": "#f5e0dc",
+      "--dsw-alias-interactive-bg-hover": "rgba(137,180,250,0.08)"
+    },
+    darkTokens: {
+      "--accent": "#cba6f7",
+      "--accent-hover": "#b48bef",
+      "--dsw-alias-state-business-primary": "#cba6f7",
+      "--dsw-alias-state-business-secondary": "#313244",
+      "--dsw-alias-interactive-bg-hover": "rgba(203,166,247,0.12)"
     }
   }
 ];
@@ -198,10 +309,116 @@ var FONT_TOKENS = {
   mono: { "--dsh-font-family": "'JetBrains Mono', 'Fira Code', monospace" },
   serif: { "--dsh-font-family": "'Georgia', 'Times New Roman', serif" }
 };
+var ANIMATION_ON_TOKENS = {
+  "--dsh-transition-fast": "0.15s ease",
+  "--dsh-transition-normal": "0.25s ease"
+};
+var ANIMATION_OFF_TOKENS = {
+  "--dsh-transition-fast": "0s",
+  "--dsh-transition-normal": "0s"
+};
 function getPreset(id) {
   return PRESETS.find((p) => p.id === id);
 }
 
+// src/io.ts
+function exportTheme(prefs, name) {
+  const payload = {
+    $schema: "dsh-theme-studio/v1",
+    preferences: prefs,
+    exportedAt: (/* @__PURE__ */ new Date()).toISOString()
+  };
+  if (name !== void 0) payload.name = name;
+  return JSON.stringify(payload, null, 2);
+}
+var DENSITIES = /* @__PURE__ */ new Set(["compact", "comfortable", "spacious"]);
+var RADII = /* @__PURE__ */ new Set(["sharp", "rounded", "soft"]);
+var FONTS = /* @__PURE__ */ new Set(["system", "mono", "serif"]);
+function asColor(value) {
+  if (typeof value !== "string") return null;
+  const trimmed = value.trim();
+  if (trimmed === "") return null;
+  return /^#[0-9a-fA-F]{3,8}$/.test(trimmed) ? trimmed : null;
+}
+function parseTheme(raw) {
+  let parsed;
+  try {
+    parsed = JSON.parse(raw);
+  } catch {
+    return null;
+  }
+  if (parsed === null || typeof parsed !== "object" || Array.isArray(parsed)) return null;
+  const doc = parsed;
+  const source = doc["preferences"] !== null && typeof doc["preferences"] === "object" && !Array.isArray(doc["preferences"]) ? doc["preferences"] : doc;
+  const result = { ...DEFAULT_PREFERENCES };
+  if (typeof source["preset"] === "string" || source["preset"] === null) {
+    result.preset = source["preset"];
+  }
+  result.accentColor = asColor(source["accentColor"]);
+  result.darkAccentColor = asColor(source["darkAccentColor"]);
+  if (typeof source["density"] === "string" && DENSITIES.has(source["density"])) {
+    result.density = source["density"];
+  }
+  if (typeof source["radius"] === "string" && RADII.has(source["radius"])) {
+    result.radius = source["radius"];
+  }
+  if (typeof source["fontFamily"] === "string" && FONTS.has(source["fontFamily"])) {
+    result.fontFamily = source["fontFamily"];
+  }
+  if (typeof source["animations"] === "boolean") result.animations = source["animations"];
+  if (typeof source["customCss"] === "string") result.customCss = source["customCss"];
+  return result;
+}
+function hexToRgb(hex) {
+  const value = hex.trim().replace(/^#/, "");
+  if (value.length === 3) {
+    const [r, g, b] = value.split("");
+    return [parseInt(r + r, 16), parseInt(g + g, 16), parseInt(b + b, 16)];
+  }
+  if (value.length === 6) {
+    return [
+      parseInt(value.slice(0, 2), 16),
+      parseInt(value.slice(2, 4), 16),
+      parseInt(value.slice(4, 6), 16)
+    ];
+  }
+  return null;
+}
+function luminance(hex) {
+  const rgb = hexToRgb(hex);
+  if (rgb === null) return 0;
+  const [r, g, b] = rgb.map((c) => {
+    const s = c / 255;
+    return s <= 0.03928 ? s / 12.92 : ((s + 0.055) / 1.055) ** 2.4;
+  });
+  return 0.2126 * r + 0.7152 * g + 0.0722 * b;
+}
+function rgbToHex(r, g, b) {
+  const clamp = (n) => Math.max(0, Math.min(255, Math.round(n)));
+  return "#" + [r, g, b].map((n) => clamp(n).toString(16).padStart(2, "0")).join("");
+}
+function lighten(hex, amount) {
+  const rgb = hexToRgb(hex);
+  if (rgb === null) return hex;
+  const [r, g, b] = rgb;
+  return rgbToHex(
+    r + (255 - r) * amount,
+    g + (255 - g) * amount,
+    b + (255 - b) * amount
+  );
+}
+function ensureDarkContrast(hex) {
+  const MIN_LUMINANCE = 0.18;
+  if (hexToRgb(hex) === null) return { color: hex, adjusted: false };
+  if (luminance(hex) >= MIN_LUMINANCE) return { color: hex, adjusted: false };
+  let current = hex;
+  for (let i = 0; i < 10; i += 1) {
+    current = lighten(current, 0.12);
+    if (luminance(current) >= MIN_LUMINANCE) return { color: current, adjusted: true };
+  }
+  return { color: current, adjusted: true };
+}
+
 // src/client/ui.tsx
 import {
   createContext,
@@ -655,6 +872,21 @@ function Field({
 
 // src/client/view.tsx
 import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var MANAGED_PROPERTIES = [
+  "--accent",
+  "--accent-hover",
+  "--dsh-content-font-size",
+  "--dsh-spacing-unit",
+  "--dsh-radius-small",
+  "--dsh-radius-medium",
+  "--dsh-radius-large",
+  "--dsh-font-family",
+  "--dsh-transition-fast",
+  "--dsh-transition-normal",
+  "--dsw-alias-state-business-primary",
+  "--dsw-alias-state-business-secondary",
+  "--dsw-alias-interactive-bg-hover"
+];
 function loadPreferences() {
   if (typeof localStorage === "undefined") return { ...DEFAULT_PREFERENCES };
   try {
@@ -669,59 +901,71 @@ function savePreferences(prefs) {
   if (typeof localStorage === "undefined") return;
   localStorage.setItem(STORAGE_KEY, JSON.stringify(prefs));
 }
-function applyTheme(prefs) {
-  if (typeof document === "undefined") return;
-  const root = document.documentElement;
-  const allTokens = {};
-  if (prefs.preset !== null) {
-    const preset = getPreset(prefs.preset);
-    if (preset !== void 0) Object.assign(allTokens, preset.tokens);
-  }
-  if (prefs.accentColor !== null && prefs.accentColor.trim() !== "") {
-    allTokens["--accent"] = prefs.accentColor;
+function isDarkMode() {
+  if (typeof document === "undefined") return false;
+  return document.body.hasAttribute("data-ds-dark-theme");
+}
+function observeDarkMode(onChange) {
+  if (typeof document === "undefined" || typeof MutationObserver === "undefined") {
+    return () => {
+    };
   }
-  Object.assign(allTokens, DENSITY_TOKENS[prefs.density] ?? {});
-  Object.assign(allTokens, RADIUS_TOKENS[prefs.radius] ?? {});
-  Object.assign(allTokens, FONT_TOKENS[prefs.fontFamily] ?? {});
-  for (const [prop, value] of Object.entries(allTokens)) {
-    root.style.setProperty(prop, value);
+  const observer = new MutationObserver(() => onChange(isDarkMode()));
+  observer.observe(document.body, { attributes: true, attributeFilter: ["data-ds-dark-theme"] });
+  return () => observer.disconnect();
+}
+function resolveTokens(prefs, dark) {
+  const tokens = {};
+  let contrastAdjusted = false;
+  const preset = prefs.preset !== null ? getPreset(prefs.preset) : void 0;
+  if (preset !== void 0) {
+    Object.assign(tokens, preset.tokens);
+    if (dark && preset.darkTokens !== void 0) Object.assign(tokens, preset.darkTokens);
   }
-  if (prefs.customCss.trim() !== "") {
-    for (const line of prefs.customCss.split("\n")) {
-      const match = line.match(/^\s*(--[\w-]+)\s*:\s*(.+?)\s*;?\s*$/);
-      if (match !== null) {
-        root.style.setProperty(match[1], match[2]);
-      }
+  const chosenAccent = dark ? prefs.darkAccentColor ?? prefs.accentColor : prefs.accentColor;
+  if (chosenAccent !== null && chosenAccent.trim() !== "") {
+    let accent = chosenAccent;
+    if (dark) {
+      const guarded = ensureDarkContrast(accent);
+      accent = guarded.color;
+      contrastAdjusted = guarded.adjusted;
     }
+    tokens["--accent"] = accent;
   }
+  Object.assign(tokens, DENSITY_TOKENS[prefs.density] ?? {});
+  Object.assign(tokens, RADIUS_TOKENS[prefs.radius] ?? {});
+  Object.assign(tokens, FONT_TOKENS[prefs.fontFamily] ?? {});
+  Object.assign(tokens, prefs.animations ? ANIMATION_ON_TOKENS : ANIMATION_OFF_TOKENS);
+  return { tokens, contrastAdjusted };
+}
+function parseCustomCss(css) {
+  const out = {};
+  for (const line of css.split("\n")) {
+    const match = line.match(/^\s*(--[\w-]+)\s*:\s*(.+?)\s*;?\s*$/);
+    if (match !== null) out[match[1]] = match[2];
+  }
+  return out;
+}
+function applyTheme(prefs, dark = isDarkMode()) {
+  if (typeof document === "undefined") return false;
+  const root = document.documentElement;
+  const { tokens, contrastAdjusted } = resolveTokens(prefs, dark);
+  const custom = parseCustomCss(prefs.customCss);
+  const merged = { ...tokens, ...custom };
+  for (const prop of MANAGED_PROPERTIES) {
+    if (!(prop in merged)) root.style.removeProperty(prop);
+  }
+  for (const [prop, value] of Object.entries(merged)) root.style.setProperty(prop, value);
+  return contrastAdjusted;
 }
 function clearTheme() {
   if (typeof document === "undefined") return;
   const root = document.documentElement;
-  const known = /* @__PURE__ */ new Set([
-    "--accent",
-    "--accent-hover",
-    "--dsh-content-font-size",
-    "--dsh-spacing-unit",
-    "--dsh-radius-small",
-    "--dsh-radius-medium",
-    "--dsh-radius-large",
-    "--dsh-font-family",
-    "--dsw-alias-state-business-primary",
-    "--dsw-alias-state-business-secondary",
-    "--dsw-alias-interactive-bg-hover"
-  ]);
-  for (const prop of known) root.style.removeProperty(prop);
-  const prefs = loadPreferences();
-  if (prefs.customCss.trim() !== "") {
-    for (const line of prefs.customCss.split("\n")) {
-      const match = line.match(/^\s*(--[\w-]+)\s*:/);
-      if (match !== null) root.style.removeProperty(match[1]);
-    }
-  }
+  for (const prop of MANAGED_PROPERTIES) root.style.removeProperty(prop);
 }
 function PresetCard({ preset, selected, onClick }) {
   const accent = preset.tokens["--accent"] ?? "#4B8BBE";
+  const secondary = preset.tokens["--dsw-alias-state-business-secondary"] ?? "#e5e5e5";
   return /* @__PURE__ */ jsxs2(
     "div",
     {
@@ -735,12 +979,16 @@ function PresetCard({ preset, selected, onClick }) {
         transition: "all 0.15s ease"
       },
       children: [
-        /* @__PURE__ */ jsxs2("div", { style: { display: "flex", alignItems: "center", gap: 8, marginBottom: 4 }, children: [
-          /* @__PURE__ */ jsx2("div", { style: { width: 16, height: 16, borderRadius: "50%", background: accent, border: "1px solid rgba(128,128,128,0.2)" } }),
+        /* @__PURE__ */ jsxs2("div", { style: { display: "flex", alignItems: "center", gap: 8, marginBottom: 6 }, children: [
+          /* @__PURE__ */ jsxs2("div", { style: { display: "flex", gap: 3 }, children: [
+            /* @__PURE__ */ jsx2("div", { style: { width: 14, height: 14, borderRadius: "50%", background: accent, border: "1px solid rgba(128,128,128,0.2)" } }),
+            /* @__PURE__ */ jsx2("div", { style: { width: 14, height: 14, borderRadius: "50%", background: secondary, border: "1px solid rgba(128,128,128,0.2)" } })
+          ] }),
           /* @__PURE__ */ jsx2("strong", { style: { fontSize: 13 }, children: preset.name }),
-          selected && /* @__PURE__ */ jsx2(Badge, { color: "info", children: "\u2713" })
+          preset.darkTokens !== void 0 && /* @__PURE__ */ jsx2(Badge, { color: "info", children: "\u25D0" }),
+          selected && /* @__PURE__ */ jsx2(Badge, { color: "success", children: "\u2713" })
         ] }),
-        /* @__PURE__ */ jsx2("div", { style: { fontSize: 11, opacity: 0.6 }, children: preset.description })
+        /* @__PURE__ */ jsx2("div", { style: { fontSize: 11, opacity: 0.6, lineHeight: 1.4 }, children: preset.description })
       ]
     }
   );
@@ -767,55 +1015,174 @@ function Segmented({ value, options, onChange }) {
     opt.value
   )) });
 }
-function PreviewArea({ t }) {
-  return /* @__PURE__ */ jsx2(Card, { title: t("preview"), icon: "\u{1F441}", children: /* @__PURE__ */ jsxs2("div", { style: { display: "flex", flexDirection: "column", gap: 10 }, children: [
-    /* @__PURE__ */ jsxs2("div", { style: { display: "flex", gap: 8, alignItems: "center" }, children: [
-      /* @__PURE__ */ jsx2(Badge, { color: "info", children: "Info" }),
-      /* @__PURE__ */ jsx2(Badge, { color: "success", children: "Success" }),
-      /* @__PURE__ */ jsx2(Badge, { color: "warning", children: "Warning" }),
-      /* @__PURE__ */ jsx2(Badge, { color: "error", children: "Error" })
-    ] }),
-    /* @__PURE__ */ jsxs2(Card, { children: [
-      /* @__PURE__ */ jsx2("div", { style: { fontSize: 13, marginBottom: 8 }, children: t("text") }),
-      /* @__PURE__ */ jsxs2("div", { style: { display: "flex", gap: 8 }, children: [
-        /* @__PURE__ */ jsx2(Button, { variant: "primary", size: "sm", children: t("button") }),
-        /* @__PURE__ */ jsx2(Button, { variant: "secondary", size: "sm", children: "Secondary" }),
-        /* @__PURE__ */ jsx2(Button, { variant: "danger", size: "sm", children: "Danger" })
+function ColorRow({ value, onChange, placeholder }) {
+  return /* @__PURE__ */ jsxs2("div", { style: { display: "flex", gap: 10, alignItems: "center" }, children: [
+    /* @__PURE__ */ jsx2(
+      "input",
+      {
+        type: "color",
+        value: value ?? "#4B8BBE",
+        onChange: (e) => onChange(e.target.value),
+        style: { width: 40, height: 40, cursor: "pointer", borderRadius: 8, border: "1px solid var(--border, rgba(128,128,128,0.2))" }
+      }
+    ),
+    /* @__PURE__ */ jsx2(
+      Input,
+      {
+        value: value ?? "",
+        onChange: (e) => onChange(e.target.value.trim() === "" ? null : e.target.value),
+        placeholder,
+        style: { maxWidth: 200 }
+      }
+    ),
+    value !== null && /* @__PURE__ */ jsx2(Button, { variant: "ghost", size: "sm", onClick: () => onChange(null), children: "\u2715" })
+  ] });
+}
+function PreviewArea({ t, dark }) {
+  return /* @__PURE__ */ jsx2(
+    Card,
+    {
+      title: t("preview"),
+      icon: "\u{1F441}",
+      actions: /* @__PURE__ */ jsx2(Badge, { color: dark ? "info" : "warning", children: dark ? "\u{1F319} dark" : "\u2600 light" }),
+      children: /* @__PURE__ */ jsxs2("div", { style: { display: "flex", flexDirection: "column", gap: 10 }, children: [
+        /* @__PURE__ */ jsxs2("div", { style: { display: "flex", gap: 8, alignItems: "center" }, children: [
+          /* @__PURE__ */ jsx2(Badge, { color: "info", children: "Info" }),
+          /* @__PURE__ */ jsx2(Badge, { color: "success", children: "Success" }),
+          /* @__PURE__ */ jsx2(Badge, { color: "warning", children: "Warning" }),
+          /* @__PURE__ */ jsx2(Badge, { color: "error", children: "Error" })
+        ] }),
+        /* @__PURE__ */ jsxs2(Card, { children: [
+          /* @__PURE__ */ jsx2("div", { style: { fontSize: 13, marginBottom: 8 }, children: t("text") }),
+          /* @__PURE__ */ jsxs2("div", { style: { display: "flex", gap: 8 }, children: [
+            /* @__PURE__ */ jsx2(Button, { variant: "primary", size: "sm", children: t("button") }),
+            /* @__PURE__ */ jsx2(Button, { variant: "secondary", size: "sm", children: "Secondary" }),
+            /* @__PURE__ */ jsx2(Button, { variant: "danger", size: "sm", children: "Danger" })
+          ] })
+        ] })
       ] })
-    ] })
-  ] }) });
+    }
+  );
 }
 function ThemePanelInner({ t }) {
   const toast = useToast();
   const [prefs, setPrefs] = useState2(loadPreferences);
+  const [dark, setDark] = useState2(isDarkMode);
+  const [contrastAdjusted, setContrastAdjusted] = useState2(false);
   const [confirmReset, setConfirmReset] = useState2(false);
+  const [importText, setImportText] = useState2("");
+  const [importOpen, setImportOpen] = useState2(false);
+  const fileInput = useRef(null);
   useEffect2(() => {
-    applyTheme(prefs);
+    setContrastAdjusted(applyTheme(prefs, dark));
     savePreferences(prefs);
-  }, [prefs]);
+  }, [prefs, dark]);
+  useEffect2(() => observeDarkMode(setDark), []);
   const update = useCallback2((key, value) => {
     setPrefs((p) => ({ ...p, [key]: value }));
   }, []);
   const handleReset = useCallback2(() => {
     clearTheme();
     setPrefs({ ...DEFAULT_PREFERENCES });
+    setConfirmReset(false);
     toast("success", t("resetted"));
   }, [t, toast]);
-  return /* @__PURE__ */ jsxs2("div", { style: { display: "flex", flexDirection: "column", gap: 16, maxWidth: 820 }, children: [
-    /* @__PURE__ */ jsxs2("header", { style: { display: "flex", alignItems: "center", gap: 12 }, children: [
+  const handleExport = useCallback2(() => {
+    const json = exportTheme(prefs);
+    const clipboard = typeof navigator !== "undefined" ? navigator.clipboard : void 0;
+    if (clipboard === void 0) {
+      setImportText(json);
+      setImportOpen(true);
+      toast("warning", t("exportFailed"));
+      return;
+    }
+    clipboard.writeText(json).then(
+      () => toast("success", t("exportSuccess")),
+      () => {
+        setImportText(json);
+        setImportOpen(true);
+        toast("warning", t("exportFailed"));
+      }
+    );
+  }, [prefs, t, toast]);
+  const runImport = useCallback2((raw) => {
+    const parsed = parseTheme(raw);
+    if (parsed === null) {
+      toast("error", t("importFailed"));
+      return;
+    }
+    setPrefs(parsed);
+    setImportOpen(false);
+    setImportText("");
+    toast("success", t("importSuccess"));
+  }, [t, toast]);
+  const handleFile = useCallback2((file) => {
+    if (file === void 0) return;
+    file.text().then(runImport, () => toast("error", t("importFailed")));
+  }, [runImport, t, toast]);
+  return /* @__PURE__ */ jsxs2("div", { style: { display: "flex", flexDirection: "column", gap: 16, maxWidth: 860 }, children: [
+    /* @__PURE__ */ jsxs2("header", { style: { display: "flex", alignItems: "center", gap: 12, flexWrap: "wrap" }, children: [
       /* @__PURE__ */ jsxs2("strong", { style: { fontSize: 15 }, children: [
         "\u{1F3A8} ",
         t("title")
       ] }),
       /* @__PURE__ */ jsx2("span", { style: { fontSize: 12, opacity: 0.6 }, children: t("subtitle") }),
       /* @__PURE__ */ jsx2("span", { style: { flex: 1 } }),
+      /* @__PURE__ */ jsxs2(Button, { variant: "secondary", size: "sm", onClick: handleExport, children: [
+        "\u2934 ",
+        t("export")
+      ] }),
+      /* @__PURE__ */ jsxs2(Button, { variant: "secondary", size: "sm", onClick: () => setImportOpen((v) => !v), children: [
+        "\u2935 ",
+        t("import")
+      ] }),
       /* @__PURE__ */ jsxs2(Button, { variant: "danger", size: "sm", onClick: () => setConfirmReset(true), children: [
         "\u21BA ",
         t("reset")
       ] })
     ] }),
+    importOpen && /* @__PURE__ */ jsxs2(Card, { title: t("import"), icon: "\u2935", children: [
+      /* @__PURE__ */ jsx2(Field, { label: t("import"), hint: t("importHint"), children: /* @__PURE__ */ jsx2(
+        Textarea,
+        {
+          value: importText,
+          onChange: (e) => setImportText(e.target.value),
+          placeholder: t("importPlaceholder"),
+          rows: 5
+        }
+      ) }),
+      /* @__PURE__ */ jsxs2("div", { style: { display: "flex", gap: 8, marginTop: 8 }, children: [
+        /* @__PURE__ */ jsx2(
+          Button,
+          {
+            variant: "primary",
+            size: "sm",
+            onClick: () => runImport(importText),
+            disabled: importText.trim() === "",
+            children: t("import")
+          }
+        ),
+        /* @__PURE__ */ jsxs2(Button, { variant: "secondary", size: "sm", onClick: () => fileInput.current?.click(), children: [
+          "\u{1F4C4} ",
+          t("importFile")
+        ] }),
+        /* @__PURE__ */ jsx2(
+          "input",
+          {
+            ref: fileInput,
+            type: "file",
+            accept: "application/json,.json",
+            style: { display: "none" },
+            onChange: (e) => {
+              handleFile(e.target.files?.[0]);
+              e.target.value = "";
+            }
+          }
+        )
+      ] })
+    ] }),
     /* @__PURE__ */ jsx2(SectionTitle, { icon: "\u{1F3AD}", children: t("presetSection") }),
-    /* @__PURE__ */ jsxs2("div", { style: { display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(180px, 1fr))", gap: 10 }, children: [
+    /* @__PURE__ */ jsxs2("div", { style: { display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(190px, 1fr))", gap: 10 }, children: [
       /* @__PURE__ */ jsx2(
         PresetCard,
         {
@@ -836,28 +1203,28 @@ function ThemePanelInner({ t }) {
     ] }),
     /* @__PURE__ */ jsx2(SectionTitle, { icon: "\u{1F308}", children: t("accentSection") }),
     /* @__PURE__ */ jsxs2(Card, { children: [
-      /* @__PURE__ */ jsxs2("div", { style: { display: "flex", gap: 10, alignItems: "center" }, children: [
-        /* @__PURE__ */ jsx2(
-          "input",
-          {
-            type: "color",
-            value: prefs.accentColor ?? "#4B8BBE",
-            onChange: (e) => update("accentColor", e.target.value),
-            style: { width: 40, height: 40, cursor: "pointer", borderRadius: 8, border: "1px solid var(--border, rgba(128,128,128,0.2))" }
-          }
-        ),
-        /* @__PURE__ */ jsx2(
-          Input,
-          {
-            value: prefs.accentColor ?? "",
-            onChange: (e) => update("accentColor", e.target.value || null),
-            placeholder: t("accentPlaceholder"),
-            style: { maxWidth: 200 }
-          }
-        ),
-        prefs.accentColor !== null && /* @__PURE__ */ jsx2(Button, { variant: "ghost", size: "sm", onClick: () => update("accentColor", null), children: "\u2715" })
-      ] }),
-      /* @__PURE__ */ jsx2("div", { style: { fontSize: 11, opacity: 0.5, marginTop: 6 }, children: t("accentHint") })
+      /* @__PURE__ */ jsx2(
+        ColorRow,
+        {
+          value: prefs.accentColor,
+          onChange: (v) => update("accentColor", v),
+          placeholder: t("accentPlaceholder")
+        }
+      ),
+      /* @__PURE__ */ jsx2("div", { style: { fontSize: 11, opacity: 0.5, marginTop: 6 }, children: t("accentHint") }),
+      /* @__PURE__ */ jsx2("div", { style: { height: 14 } }),
+      /* @__PURE__ */ jsx2(Field, { label: t("darkAccentSection"), hint: t("darkAccentHint"), children: /* @__PURE__ */ jsx2(
+        ColorRow,
+        {
+          value: prefs.darkAccentColor,
+          onChange: (v) => update("darkAccentColor", v),
+          placeholder: t("accentPlaceholder")
+        }
+      ) }),
+      contrastAdjusted && /* @__PURE__ */ jsx2("div", { style: { marginTop: 8 }, children: /* @__PURE__ */ jsxs2(Badge, { color: "warning", children: [
+        "\u26A0 ",
+        t("preserveContrast")
+      ] }) })
     ] }),
     /* @__PURE__ */ jsx2(SectionTitle, { icon: "\u{1F4D0}", children: t("densitySection") }),
     /* @__PURE__ */ jsx2(
@@ -898,6 +1265,23 @@ function ThemePanelInner({ t }) {
         ]
       }
     ),
+    /* @__PURE__ */ jsx2(SectionTitle, { icon: "\u2699", children: t("behaviorSection") }),
+    /* @__PURE__ */ jsxs2(Card, { children: [
+      /* @__PURE__ */ jsxs2("div", { style: { display: "flex", alignItems: "center", gap: 10 }, children: [
+        /* @__PURE__ */ jsx2(
+          "input",
+          {
+            id: "theme-animations",
+            type: "checkbox",
+            checked: prefs.animations,
+            onChange: (e) => update("animations", e.target.checked),
+            style: { width: 16, height: 16, cursor: "pointer" }
+          }
+        ),
+        /* @__PURE__ */ jsx2("label", { htmlFor: "theme-animations", style: { fontSize: 13, cursor: "pointer" }, children: t("animations") })
+      ] }),
+      /* @__PURE__ */ jsx2("div", { style: { fontSize: 11, opacity: 0.5, marginTop: 6, marginLeft: 26 }, children: t("animationsHint") })
+    ] }),
     /* @__PURE__ */ jsx2(SectionTitle, { icon: "\u270F\uFE0F", children: t("customCssSection") }),
     /* @__PURE__ */ jsx2(Card, { children: /* @__PURE__ */ jsx2(Field, { label: t("customCssSection"), hint: t("customCssHint"), children: /* @__PURE__ */ jsx2(
       Textarea,
@@ -908,7 +1292,7 @@ function ThemePanelInner({ t }) {
         rows: 4
       }
     ) }) }),
-    /* @__PURE__ */ jsx2(PreviewArea, { t }),
+    /* @__PURE__ */ jsx2(PreviewArea, { t, dark }),
     confirmReset && /* @__PURE__ */ jsx2(
       ConfirmDialog,
       {

package/lib/themes.d.ts

@@ -15,5 +15,8 @@ export declare const DENSITY_TOKENS: Record<string, Record<string, string>>;
 export declare const RADIUS_TOKENS: Record<string, Record<string, string>>;
 /** Font family → CSS custom property overrides */
 export declare const FONT_TOKENS: Record<string, Record<string, string>>;
+/** Animation → CSS custom property overrides */
+export declare const ANIMATION_ON_TOKENS: Record<string, string>;
+export declare const ANIMATION_OFF_TOKENS: Record<string, string>;
 /** Look up a preset by id. */
 export declare function getPreset(id: string): ThemePreset | undefined;

package/lib/themes.js

@@ -79,6 +79,81 @@ export const PRESETS = [
             '--dsw-alias-state-business-secondary': '#3a3a5c',
             '--dsw-alias-interactive-bg-hover': 'rgba(189,147,249,0.12)',
         },
+        darkTokens: {
+            '--dsw-alias-state-business-secondary': '#44475a',
+            '--dsw-alias-interactive-bg-hover': 'rgba(189,147,249,0.18)',
+        },
+    },
+    {
+        id: 'gruvbox',
+        name: 'Gruvbox',
+        description: 'Retro groove with warm earthy tones',
+        tokens: {
+            '--accent': '#d65d0e',
+            '--accent-hover': '#cc241d',
+            '--dsw-alias-state-business-primary': '#d65d0e',
+            '--dsw-alias-state-business-secondary': '#fabd2f',
+            '--dsw-alias-interactive-bg-hover': 'rgba(214,93,14,0.08)',
+        },
+        darkTokens: {
+            '--accent': '#fe8019',
+            '--accent-hover': '#fabd2f',
+            '--dsw-alias-state-business-primary': '#fe8019',
+            '--dsw-alias-state-business-secondary': '#3c3836',
+        },
+    },
+    {
+        id: 'solarized',
+        name: 'Solarized',
+        description: 'Ethan Schoonover\'s precision palette',
+        tokens: {
+            '--accent': '#268bd2',
+            '--accent-hover': '#1e6fa8',
+            '--dsw-alias-state-business-primary': '#268bd2',
+            '--dsw-alias-state-business-secondary': '#eee8d5',
+            '--dsw-alias-interactive-bg-hover': 'rgba(38,139,210,0.08)',
+        },
+        darkTokens: {
+            '--accent': '#839496',
+            '--accent-hover': '#93a1a1',
+            '--dsw-alias-state-business-primary': '#268bd2',
+            '--dsw-alias-state-business-secondary': '#073642',
+        },
+    },
+    {
+        id: 'tokyo-night',
+        name: 'Tokyo Night',
+        description: 'Inspired by the lights of downtown Tokyo at night',
+        tokens: {
+            '--accent': '#7aa2f7',
+            '--accent-hover': '#6183f0',
+            '--dsw-alias-state-business-primary': '#7aa2f7',
+            '--dsw-alias-state-business-secondary': '#bb9af7',
+            '--dsw-alias-interactive-bg-hover': 'rgba(122,162,247,0.08)',
+        },
+        darkTokens: {
+            '--dsw-alias-state-business-secondary': '#1a1b26',
+            '--dsw-alias-interactive-bg-hover': 'rgba(122,162,247,0.15)',
+        },
+    },
+    {
+        id: 'catppuccin',
+        name: 'Catppuccin',
+        description: 'Soothing pastel theme for high contrast',
+        tokens: {
+            '--accent': '#89b4fa',
+            '--accent-hover': '#74a8fc',
+            '--dsw-alias-state-business-primary': '#89b4fa',
+            '--dsw-alias-state-business-secondary': '#f5e0dc',
+            '--dsw-alias-interactive-bg-hover': 'rgba(137,180,250,0.08)',
+        },
+        darkTokens: {
+            '--accent': '#cba6f7',
+            '--accent-hover': '#b48bef',
+            '--dsw-alias-state-business-primary': '#cba6f7',
+            '--dsw-alias-state-business-secondary': '#313244',
+            '--dsw-alias-interactive-bg-hover': 'rgba(203,166,247,0.12)',
+        },
     },
 ];
 /** Density → CSS custom property overrides */
@@ -120,6 +195,15 @@ export const FONT_TOKENS = {
     mono: { '--dsh-font-family': "'JetBrains Mono', 'Fira Code', monospace" },
     serif: { '--dsh-font-family': "'Georgia', 'Times New Roman', serif" },
 };
+/** Animation → CSS custom property overrides */
+export const ANIMATION_ON_TOKENS = {
+    '--dsh-transition-fast': '0.15s ease',
+    '--dsh-transition-normal': '0.25s ease',
+};
+export const ANIMATION_OFF_TOKENS = {
+    '--dsh-transition-fast': '0s',
+    '--dsh-transition-normal': '0s',
+};
 /** Look up a preset by id. */
 export function getPreset(id) {
     return PRESETS.find((p) => p.id === id);

package/lib/types.d.ts

@@ -10,6 +10,8 @@ export interface ThemePreset {
     description: string;
     /** CSS custom property → value, applied to document.documentElement.style */
     tokens: Record<string, string>;
+    /** Tokens only applied when dsh is in dark mode (body[data-ds-dark-theme]) */
+    darkTokens?: Record<string, string>;
 }
 /** User-selectable density preference. */
 export type Density = 'compact' | 'comfortable' | 'spacious';
@@ -21,9 +23,12 @@ export type FontFamily = 'system' | 'mono' | 'serif';
 export interface ThemePreferences {
     preset: string | null;
     accentColor: string | null;
+    /** Separate accent color for dark mode; null = use accentColor */
+    darkAccentColor: string | null;
     density: Density;
     radius: Radius;
     fontFamily: FontFamily;
+    animations: boolean;
     customCss: string;
 }
 /** Default preferences — nothing overridden, dsh's built-in theme wins. */

package/lib/types.js

@@ -7,9 +7,11 @@
 export const DEFAULT_PREFERENCES = {
     preset: null,
     accentColor: null,
+    darkAccentColor: null,
     density: 'comfortable',
     radius: 'rounded',
     fontFamily: 'system',
+    animations: true,
     customCss: '',
 };
 /** localStorage key for persisting preferences. */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-theme-studio",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Customize the dsh UI theme: pick presets, set accent colors, adjust density, border radius, and font family, or write custom CSS variable overrides.",
   "type": "module",
   "main": "lib/index.js",