@funnest/charts-ui 0.6.2 → 0.6.4

package/dist/i18n.d.ts

@@ -31,6 +31,7 @@ export declare const STRINGS: {
         removeAll: string;
         collapseDrawbar: string;
         chartSettings: string;
+        settingsTheme: string;
         settingsCandles: string;
         settingsDisplay: string;
         settingsGrid: string;
@@ -161,6 +162,7 @@ export declare const STRINGS: {
         removeAll: string;
         collapseDrawbar: string;
         chartSettings: string;
+        settingsTheme: string;
         settingsCandles: string;
         settingsDisplay: string;
         settingsGrid: string;

package/dist/index.js

@@ -454,6 +454,7 @@ var STRINGS = {
     removeAll: "\uADF8\uB9AC\uAE30 \uBAA8\uB450 \uC0AD\uC81C",
     collapseDrawbar: "\uADF8\uB9AC\uAE30 \uB3C4\uAD6C \uC811\uAE30",
     chartSettings: "\uCC28\uD2B8 \uC124\uC815",
+    settingsTheme: "\uD14C\uB9C8",
     settingsCandles: "\uCE94\uB4E4",
     settingsDisplay: "\uD45C\uC2DC",
     settingsGrid: "\uACA9\uC790",
@@ -586,6 +587,7 @@ var STRINGS = {
     removeAll: "Remove all drawings",
     collapseDrawbar: "Hide drawing tools",
     chartSettings: "Chart settings",
+    settingsTheme: "Theme",
     settingsCandles: "Candles",
     settingsDisplay: "Display",
     settingsGrid: "Grid",
@@ -1048,7 +1050,7 @@ import {
 } from "@funnest/charts";
 
 // src/components/settings-dialog.tsx
-import { DEFAULT_CHART_SETTINGS } from "@funnest/charts";
+import { CHART_THEMES, DEFAULT_CHART_SETTINGS, matchChartTheme } from "@funnest/charts";
 function toHex(color) {
   const ctx = document.createElement("canvas").getContext("2d");
   if (!ctx) return "#000000";
@@ -1088,12 +1090,42 @@ function SettingsDialog({ ctx }) {
   const close = () => ctx.store.set({ dialog: null });
   const set = (patch) => ctx.chart.setSettings(patch);
   const themeColor = (name) => toHex(getComputedStyle(ctx.root).getPropertyValue(name).trim());
+  const currentTheme = matchChartTheme(settings);
   return /* @__PURE__ */ a3("div", { class: "fnc-backdrop", onPointerDown: (e3) => e3.target === e3.currentTarget && close(), children: /* @__PURE__ */ a3("div", { class: "fnc-dialog", role: "dialog", "aria-modal": "true", "aria-label": t3.chartSettings, onKeyDown: (e3) => e3.key === "Escape" && close(), children: [
     /* @__PURE__ */ a3("div", { class: "fnc-dialog-head", children: [
       /* @__PURE__ */ a3("b", { children: t3.chartSettings }),
       /* @__PURE__ */ a3("button", { class: "fnc-btn", "aria-label": t3.close, onClick: close, children: /* @__PURE__ */ a3(CloseIcon, {}) })
     ] }),
     /* @__PURE__ */ a3("form", { class: "fnc-form", onSubmit: (e3) => (e3.preventDefault(), close()), children: [
+      /* @__PURE__ */ a3("div", { class: "fnc-section", children: t3.settingsTheme }),
+      /* @__PURE__ */ a3("div", { class: "fnc-themes", role: "radiogroup", "aria-label": t3.settingsTheme, children: CHART_THEMES.map((theme) => {
+        const c3 = theme.colors;
+        const bg = c3.background ?? themeColor("--fnc-bg");
+        const grid = c3.gridColor ?? themeColor("--fnc-border");
+        const up = c3.upColor ?? themeColor("--fnc-up");
+        const down = c3.downColor ?? themeColor("--fnc-down");
+        return /* @__PURE__ */ a3(
+          "button",
+          {
+            type: "button",
+            role: "radio",
+            class: "fnc-theme",
+            "aria-checked": currentTheme?.id === theme.id,
+            onClick: () => set({ ...c3 }),
+            children: [
+              /* @__PURE__ */ a3("svg", { class: "fnc-theme-swatch", viewBox: "0 0 56 36", "aria-hidden": "true", children: [
+                /* @__PURE__ */ a3("rect", { x: "0.5", y: "0.5", width: "55", height: "35", rx: "5", fill: bg, stroke: grid }),
+                /* @__PURE__ */ a3("path", { d: "M4 12h48M4 24h48", stroke: grid }),
+                /* @__PURE__ */ a3("path", { d: "M21 6v24", stroke: up, "stroke-width": "1.5" }),
+                /* @__PURE__ */ a3("rect", { x: "17", y: "11", width: "8", height: "13", rx: "1", fill: up }),
+                /* @__PURE__ */ a3("path", { d: "M35 8v22", stroke: down, "stroke-width": "1.5" }),
+                /* @__PURE__ */ a3("rect", { x: "31", y: "13", width: "8", height: "11", rx: "1", fill: down })
+              ] }),
+              /* @__PURE__ */ a3("span", { children: theme.name[locale === "en" ? "en" : "ko"] })
+            ]
+          }
+        );
+      }) }),
       /* @__PURE__ */ a3("div", { class: "fnc-section", children: t3.settingsCandles }),
       ["upColor", "downColor"].map((key) => /* @__PURE__ */ a3("label", { class: "fnc-row", children: [
         /* @__PURE__ */ a3("span", { class: "fnc-row-label fnc-row-label-wide", children: key === "upColor" ? t3.settingUpColor : t3.settingDownColor }),
@@ -3453,6 +3485,23 @@ var CSS = (
 .fnc-seg button[aria-checked='true'] { background: var(--fnc-bg); color: var(--fnc-text); font-weight: 700; box-shadow: 0 1px 3px rgb(0 0 0 / 0.12); }
 .fnc-seg-sm button { min-width: 36px; height: 26px; padding: 0 6px; font-size: 12px; }
 
+/* \u2500\u2500 Chart themes (settings dialog) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+.fnc-themes { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 6px; padding: 2px 0 6px; }
+.fnc-theme {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+  padding: 6px 4px;
+  border: 1px solid transparent;
+  border-radius: var(--fnc-radius);
+  font-size: 12px;
+  color: var(--fnc-text-2);
+}
+.fnc-theme:hover { background: var(--fnc-surface); }
+.fnc-theme[aria-checked='true'] { border-color: var(--fnc-text-2); color: var(--fnc-text); font-weight: 700; }
+.fnc-theme-swatch { width: 56px; height: 36px; display: block; }
+
 /* \u2500\u2500 Compare legend rows \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
 .fnc-cmp { display: flex; align-items: center; gap: 6px; min-height: 22px; font-size: 12px; color: var(--fnc-text-2); pointer-events: auto; }
 .fnc-cmp-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
@@ -3795,6 +3844,26 @@ function createPane(shell, config) {
     displayTimezone: config.displayTimezone
   });
   chart.setChartType(config.chartType);
+  const canvasVars = (s3) => {
+    const muted = s3.textColor && /^#[0-9a-f]{6}$/i.test(s3.textColor) ? `${s3.textColor}99` : null;
+    const vars = [
+      ["--fnc-bg", s3.background],
+      ["--fnc-text", s3.textColor],
+      ["--fnc-text-2", muted],
+      ["--fnc-border", s3.gridColor],
+      ["--fnc-surface", s3.gridColor],
+      // Legend values and other up/down text match the candles.
+      ["--fnc-up", s3.upColor],
+      ["--fnc-down", s3.downColor]
+    ];
+    for (const [name, value] of vars) {
+      if (value) stage.style.setProperty(name, value);
+      else stage.style.removeProperty(name);
+    }
+    chart.refreshTheme();
+  };
+  canvasVars(chart.settings);
+  chart.on("settingsChange", canvasVars);
   const store = new Store({
     locale: config.chartOptions.locale ?? "ko",
     symbol: null,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@funnest/charts-ui",
-  "version": "0.6.2",
+  "version": "0.6.4",
   "description": "Pro trading UI (toolbar, drawing tools, sheets) for Funnest Charts. Framework-agnostic.",
   "keywords": [
     "chart",
@@ -42,7 +42,7 @@
     "NOTICE"
   ],
   "dependencies": {
-    "@funnest/charts": "0.6.2"
+    "@funnest/charts": "0.6.4"
   },
   "devDependencies": {
     "preact": "^11.2.0"