@funnest/charts 0.6.3 → 0.6.4

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 export { Chart, createChart, fallbackResolution } from './chart';
-export { DEFAULT_CHART_SETTINGS, parseChartState } from './settings';
-export type { ChartSettings, ChartState } from './settings';
+export { CHART_THEMES, DEFAULT_CHART_SETTINGS, matchChartTheme, parseChartState } from './settings';
+export type { ChartSettings, ChartState, ChartThemeColors, ChartThemePreset } from './settings';
 export type { ChartContextMenu, ChartEvents, ChartLayout, ChartOptions, ChartPaneLayout, CompareInfo, IndicatorLegendItem, ReplayStatus } from './chart';
 export type { PriceScaleMode } from './model/price-scale';
 export type { CrosshairInfo, PaneId } from './render/renderer';

package/dist/index.js

@@ -1793,6 +1793,41 @@ function snapToOhlc(bar, y, priceToY) {
 }
 
 // src/settings.ts
+var FOLLOW = { upColor: null, downColor: null, background: null, gridColor: null, textColor: null };
+var CHART_THEMES = [
+  { id: "default", name: { ko: "\uAE30\uBCF8", en: "Default" }, colors: FOLLOW },
+  { id: "global", name: { ko: "\uCD08\uB85D\xB7\uBE68\uAC15", en: "Green \xB7 Red" }, colors: { ...FOLLOW, upColor: "#26A69A", downColor: "#EF5350" } },
+  {
+    id: "midnight",
+    name: { ko: "\uBBF8\uB4DC\uB098\uC787", en: "Midnight" },
+    colors: { upColor: "#2EBD85", downColor: "#F6465D", background: "#0E1117", gridColor: "#1A1F29", textColor: "#C9D1D9" }
+  },
+  {
+    id: "navy",
+    name: { ko: "\uB525 \uB124\uC774\uBE44", en: "Deep navy" },
+    colors: { upColor: "#FF5A5F", downColor: "#4C8DFF", background: "#0F1A2E", gridColor: "#1B2A44", textColor: "#C8D3E6" }
+  },
+  {
+    id: "mono",
+    name: { ko: "\uBAA8\uB178", en: "Mono" },
+    colors: { upColor: "#E4E4E7", downColor: "#6B6B75", background: "#121214", gridColor: "#1F1F23", textColor: "#D4D4D8" }
+  },
+  {
+    id: "paper",
+    name: { ko: "\uD398\uC774\uD37C", en: "Paper" },
+    colors: { upColor: "#F04452", downColor: "#3182F6", background: "#FFFFFF", gridColor: "#F0F2F5", textColor: "#333D4B" }
+  },
+  {
+    id: "sepia",
+    name: { ko: "\uC138\uD53C\uC544", en: "Sepia" },
+    colors: { upColor: "#C2410C", downColor: "#2F6690", background: "#F6F0E4", gridColor: "#E9DFCB", textColor: "#4A3F33" }
+  }
+];
+function matchChartTheme(settings) {
+  const keys = Object.keys(FOLLOW);
+  const same = (a, b) => (a ?? "").toLowerCase() === (b ?? "").toLowerCase();
+  return CHART_THEMES.find((t) => keys.every((k) => same(t.colors[k], settings[k])));
+}
 var DEFAULT_CHART_SETTINGS = {
   highLowMarkers: true,
   lastPriceLine: true,
@@ -1803,7 +1838,10 @@ var DEFAULT_CHART_SETTINGS = {
   priceScale: "normal",
   countdown: true,
   upColor: null,
-  downColor: null
+  downColor: null,
+  background: null,
+  gridColor: null,
+  textColor: null
 };
 var CHART_TYPES = ["candles", "line", "area"];
 function parseChartState(input) {
@@ -4008,14 +4046,16 @@ var Chart = class {
   }
   resolvePalette() {
     const t = this.theme;
+    const s = this.settingsValue;
     const c = (v) => this.colors.color(v);
+    const muted = s.textColor && /^#[0-9a-f]{6}$/i.test(s.textColor) ? `${s.textColor}99` : null;
     return {
-      background: c(t.background),
-      text: c(t.text),
-      textSecondary: c(t.textSecondary),
-      grid: c(t.grid),
-      border: c(t.border),
-      crosshair: c(t.crosshair),
+      background: c(s.background ?? t.background),
+      text: c(s.textColor ?? t.text),
+      textSecondary: c(muted ?? t.textSecondary),
+      grid: c(s.gridColor ?? t.grid),
+      border: c(s.gridColor ?? t.border),
+      crosshair: c(muted ?? t.crosshair),
       up: c(this.settingsValue.upColor ?? t.up),
       down: c(this.settingsValue.downColor ?? t.down),
       accent: c(t.accent)
@@ -4514,6 +4554,7 @@ function combineDatafeeds(feeds) {
 }
 export {
   BUILTIN_DRAWINGS,
+  CHART_THEMES,
   Chart,
   DEFAULT_CHART_SETTINGS,
   FIB_LEVELS,
@@ -4539,6 +4580,7 @@ export {
   lightTheme,
   maLines,
   macd,
+  matchChartTheme,
   monitorLatency,
   parseChartState,
   priceSource,

package/dist/settings.d.ts

@@ -22,7 +22,28 @@ export interface ChartSettings {
     /** Up/down candle colors; null follows the theme. */
     upColor: string | null;
     downColor: string | null;
+    /** Chart canvas colors (a theme from CHART_THEMES or your own); null follows the theme. `textColor` must be #rrggbb. */
+    background: string | null;
+    gridColor: string | null;
+    textColor: string | null;
 }
+/** The settings a chart theme sets. */
+export type ChartThemeColors = Pick<ChartSettings, 'upColor' | 'downColor' | 'background' | 'gridColor' | 'textColor'>;
+export interface ChartThemePreset {
+    id: string;
+    name: {
+        ko: string;
+        en: string;
+    };
+    colors: ChartThemeColors;
+}
+/**
+ * Ready-made chart themes for the settings dialog. Applying one sets the five color settings;
+ * 'default' clears them so the chart follows the page theme again.
+ */
+export declare const CHART_THEMES: readonly ChartThemePreset[];
+/** The preset whose colors `settings` match, if any. */
+export declare function matchChartTheme(settings: ChartSettings): ChartThemePreset | undefined;
 export declare const DEFAULT_CHART_SETTINGS: ChartSettings;
 /**
  * Everything needed to restore a chart layout: symbol, interval, chart type, settings,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@funnest/charts",
-  "version": "0.6.3",
+  "version": "0.6.4",
   "description": "Canvas charting engine for financial charts",
   "keywords": [
     "chart",