hyperprop-charting-library 0.1.140 → 0.1.141

package/dist/hyperprop-charting-library.cjs

@@ -20,6 +20,8 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
+  CHART_THEMES: () => CHART_THEMES,
+  CHART_THEME_NAMES: () => CHART_THEME_NAMES,
   FIB_DEFAULT_PALETTE: () => FIB_DEFAULT_PALETTE,
   POSITION_DEFAULT_COLORS: () => POSITION_DEFAULT_COLORS,
   SCRIPT_SOURCE_INPUT_VALUES: () => SCRIPT_SOURCE_INPUT_VALUES,
@@ -2655,6 +2657,88 @@ var compileScriptIndicator = (definition) => {
   return plugin;
 };
 
+// src/themes.ts
+var CHART_THEMES = {
+  dark: {
+    name: "dark",
+    background: "#0f0f0f",
+    upColor: "#089981",
+    downColor: "#f23645",
+    lineColor: "#2962ff",
+    gridColor: "#3c3c3c",
+    gridOpacity: 0.5,
+    axisTextColor: "#dbdbdb",
+    axisLineColor: "#424242",
+    crosshairColor: "#9598a1",
+    crosshairLabelBackground: "#3c3c3c",
+    crosshairLabelText: "#dbdbdb",
+    crosshairLabelBorder: "#5d5d5d",
+    watermarkColor: "rgba(219,219,219,0.06)",
+    indicatorTextColor: "#b2b5be",
+    labelTextColor: "#ffffff",
+    labelBackground: "#1a1a1a"
+  },
+  light: {
+    name: "light",
+    background: "#ffffff",
+    upColor: "#089981",
+    downColor: "#f23645",
+    lineColor: "#2962ff",
+    gridColor: "#d5d5d5",
+    gridOpacity: 0.9,
+    axisTextColor: "#0f0f0f",
+    axisLineColor: "#c3c3c3",
+    crosshairColor: "#787b86",
+    crosshairLabelBackground: "#4b4b4b",
+    crosshairLabelText: "#ffffff",
+    crosshairLabelBorder: "#878787",
+    watermarkColor: "rgba(15,15,15,0.06)",
+    indicatorTextColor: "#4b4b4b",
+    labelTextColor: "#ffffff",
+    labelBackground: "#f0f3fa"
+  },
+  midnight: {
+    name: "midnight",
+    background: "#171717",
+    upColor: "#22ab94",
+    downColor: "#f23645",
+    lineColor: "#2563eb",
+    gridColor: "#2b2f38",
+    gridOpacity: 0.38,
+    axisTextColor: "#dbe4f0",
+    axisLineColor: "#5f646d",
+    crosshairColor: "#94a3b8",
+    crosshairLabelBackground: "#6b6f76",
+    crosshairLabelText: "#e2e8f0",
+    crosshairLabelBorder: "#e2e8f0",
+    watermarkColor: "rgba(226,232,240,0.05)",
+    indicatorTextColor: "#cbd5e1",
+    labelTextColor: "#dbeafe",
+    labelBackground: "#0b1220"
+  },
+  "high-contrast": {
+    name: "high-contrast",
+    background: "#000000",
+    upColor: "#00e5a0",
+    downColor: "#ff4d5e",
+    lineColor: "#4d9fff",
+    gridColor: "#5a5a5a",
+    gridOpacity: 0.7,
+    axisTextColor: "#ffffff",
+    axisLineColor: "#8a8a8a",
+    crosshairColor: "#ffffff",
+    crosshairLabelBackground: "#ffffff",
+    crosshairLabelText: "#000000",
+    crosshairLabelBorder: "#ffffff",
+    watermarkColor: "rgba(255,255,255,0.08)",
+    indicatorTextColor: "#ffffff",
+    labelTextColor: "#000000",
+    labelBackground: "#1a1a1a"
+  }
+};
+var CHART_THEME_NAMES = Object.keys(CHART_THEMES);
+var resolveTheme = (theme) => typeof theme === "string" ? CHART_THEMES[theme] ?? CHART_THEMES.dark : theme;
+
 // src/options.ts
 var DEFAULT_GRID_OPTIONS = {
   color: "#2b2f38",
@@ -3097,6 +3181,7 @@ function createChart(element, options = {}) {
   let keyboardShortcutHandler = null;
   let lastSelectionSignature = null;
   let magnetMode = "none";
+  let activeThemeName = null;
   let priceScaleMode = "linear";
   let priceScaleInverted = false;
   const PRICE_SCALE_LOG_FLOOR = 1e-9;
@@ -9609,6 +9694,23 @@ function createChart(element, options = {}) {
     window.addEventListener("blur", onWindowBlurMagnet);
   }
   const updateOptions = (nextOptions) => {
+    const THEMED_OPTION_KEYS = [
+      "backgroundColor",
+      "upColor",
+      "downColor",
+      "lineColor",
+      "gridColor",
+      "axisColor",
+      "grid",
+      "axis",
+      "xAxis",
+      "yAxis",
+      "crosshair",
+      "watermark"
+    ];
+    if (THEMED_OPTION_KEYS.some((key) => nextOptions[key] !== void 0) || nextOptions.labels?.indicatorTextColor !== void 0) {
+      activeThemeName = null;
+    }
     const wasTickerSmoothingEnabled = mergedOptions.tickerLine?.smoothing ?? false;
     const previousWidth = width;
     const previousHeight = height;
@@ -9637,6 +9739,30 @@ function createChart(element, options = {}) {
     }
     scheduleDraw();
   };
+  const setTheme = (theme) => {
+    const resolved = resolveTheme(theme);
+    updateOptions({
+      backgroundColor: resolved.background,
+      upColor: resolved.upColor,
+      downColor: resolved.downColor,
+      lineColor: resolved.lineColor,
+      gridColor: resolved.gridColor,
+      grid: { color: resolved.gridColor, opacity: resolved.gridOpacity },
+      axis: { textColor: resolved.axisTextColor, lineColor: resolved.axisLineColor },
+      xAxis: { textColor: resolved.axisTextColor, lineColor: resolved.axisLineColor },
+      yAxis: { textColor: resolved.axisTextColor, lineColor: resolved.axisLineColor },
+      crosshair: {
+        color: resolved.crosshairColor,
+        labelBackgroundColor: resolved.crosshairLabelBackground,
+        labelTextColor: resolved.crosshairLabelText,
+        labelBorderColor: resolved.crosshairLabelBorder
+      },
+      watermark: { color: resolved.watermarkColor },
+      labels: { indicatorTextColor: resolved.indicatorTextColor }
+    });
+    activeThemeName = resolved.name;
+  };
+  const getTheme = () => activeThemeName;
   const setChartType = (type) => {
     if (mergedOptions.chartType === type) {
       return;
@@ -10165,6 +10291,8 @@ function createChart(element, options = {}) {
     getMagnetMode,
     setPriceScale,
     getPriceScale,
+    setTheme,
+    getTheme,
     setCompareSeries,
     addCompareSeries,
     removeCompareSeries,
@@ -10195,6 +10323,8 @@ function createChart(element, options = {}) {
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  CHART_THEMES,
+  CHART_THEME_NAMES,
   FIB_DEFAULT_PALETTE,
   POSITION_DEFAULT_COLORS,
   SCRIPT_SOURCE_INPUT_VALUES,

package/dist/hyperprop-charting-library.d.ts

@@ -607,6 +607,35 @@ interface CompareSeriesOptions {
     /** Let this series widen the price scale. Default true. */
     includeInAutoScale?: boolean;
 }
+/**
+ * A complete chart palette. Hosts otherwise configure a dozen colors one by
+ * one and re-push them on every light/dark toggle; a theme is that same set as
+ * one object, so `setTheme` is a single call.
+ */
+interface ChartTheme {
+    name: string;
+    background: string;
+    upColor: string;
+    downColor: string;
+    /** Line/area/baseline series color. */
+    lineColor: string;
+    gridColor: string;
+    gridOpacity: number;
+    axisTextColor: string;
+    axisLineColor: string;
+    crosshairColor: string;
+    crosshairLabelBackground: string;
+    crosshairLabelText: string;
+    crosshairLabelBorder: string;
+    watermarkColor: string;
+    /** Indicator names/values drawn inside the plot and pane legends. */
+    indicatorTextColor: string;
+    /** Text drawn on colored order/preview pills. */
+    labelTextColor: string;
+    /** Background for preview labels and pills. */
+    labelBackground: string;
+}
+type ChartThemeName = "dark" | "light" | "midnight" | "high-contrast";
 /** Touch ergonomics. Fingers are blunter than a mouse cursor. */
 interface TouchOptions {
     /**
@@ -818,6 +847,15 @@ interface ChartInstance {
      */
     setPriceScale: (options: Partial<PriceScaleOptions>) => void;
     getPriceScale: () => PriceScaleOptions;
+    /**
+     * Apply a whole palette at once — a built-in preset name or your own
+     * `ChartTheme`. Replaces the per-color `updateOptions` juggling hosts do on
+     * every light/dark toggle. Anything the theme doesn't cover (order-line
+     * colors, drawing defaults) is left alone.
+     */
+    setTheme: (theme: ChartThemeName | ChartTheme) => void;
+    /** Name of the last applied theme, or null if colors were set by hand. */
+    getTheme: () => string | null;
     /**
      * Overlay other instruments on the main pane for comparison. Series are
      * aligned to the main series by timestamp (last known value carries forward
@@ -1025,6 +1063,19 @@ declare const validateScriptSource: (source: string) => string | null;
  */
 declare const compileScriptIndicator: (definition: ScriptIndicatorDefinition) => IndicatorPlugin;
 
+/**
+ * Built-in palettes.
+ *
+ * `dark` and `light` mirror TradingView's own chart colors (sampled from their
+ * rendered canvas), which is what most traders' eyes are calibrated to: the
+ * candle colors stay the same across both and only the surface changes.
+ * `midnight` is Hyperprop's long-standing default, kept as a named preset so
+ * existing setups have something to go back to. `high-contrast` trades
+ * prettiness for legibility on projectors and for low-vision users.
+ */
+declare const CHART_THEMES: Record<ChartThemeName, ChartTheme>;
+declare const CHART_THEME_NAMES: ChartThemeName[];
+
 declare function createChart(element: HTMLElement, options?: ChartOptions): ChartInstance;
 
-export { type AccessibilityOptions, type AxisOptions, type BuiltInIndicatorInfo, type ChartClickEvent, type ChartContextMenuEvent, type ChartContextMenuRegion, type ChartDatafeed, type ChartInstance, type ChartKeyboardAction, type ChartKeyboardShortcutEvent, type ChartLongPressEvent, type ChartOptions, type ChartSavedState, type ChartType, type CompareSeriesOptions, type CrosshairMoveEvent, type CrosshairOptions, type CrosshairPriceActionEvent, type DashPatternOptions, type DatafeedBarsRequest, type DatafeedOptions, type DownsamplingOptions, type DrawingBounds, type DrawingDefaults, type DrawingHoverEvent, type DrawingObjectOptions, type DrawingPoint, type DrawingSelectEvent, type DrawingSelectionChangeEvent, type DrawingToolType, FIB_DEFAULT_PALETTE, type GridOptions, type IndicatorInstanceOptions, type IndicatorPane, type IndicatorPaneActionEvent, type IndicatorPaneAxisOptions, type IndicatorPaneGuideLine, type IndicatorPaneHeightChangeEvent, type IndicatorPaneRenderInfo, type IndicatorPaneValue, type IndicatorPaneValueLabel, type IndicatorPlugin, type IndicatorRenderContext, type KeyboardOptions, type LabelsOptions, type OhlcDataPoint, type OrderActionButton, type OrderActionEvent, type OrderLineOptions, POSITION_DEFAULT_COLORS, type PriceLineOptions, type PriceScaleMode, type PriceScaleOptions, SCRIPT_SOURCE_INPUT_VALUES, type ScriptComputeResult, type ScriptIndicatorDefinition, type ScriptIndicatorInputDef, type ScriptInputHelper, type ScriptInputOptions, type ScriptPlotSpec, type TickerLineOptions, type TouchOptions, type TradeMarkerOptions, type ViewportState, type WatermarkOptions, compileScriptIndicator, createChart, extractScriptInputs, validateScriptSource };
+export { type AccessibilityOptions, type AxisOptions, type BuiltInIndicatorInfo, CHART_THEMES, CHART_THEME_NAMES, type ChartClickEvent, type ChartContextMenuEvent, type ChartContextMenuRegion, type ChartDatafeed, type ChartInstance, type ChartKeyboardAction, type ChartKeyboardShortcutEvent, type ChartLongPressEvent, type ChartOptions, type ChartSavedState, type ChartTheme, type ChartThemeName, type ChartType, type CompareSeriesOptions, type CrosshairMoveEvent, type CrosshairOptions, type CrosshairPriceActionEvent, type DashPatternOptions, type DatafeedBarsRequest, type DatafeedOptions, type DownsamplingOptions, type DrawingBounds, type DrawingDefaults, type DrawingHoverEvent, type DrawingObjectOptions, type DrawingPoint, type DrawingSelectEvent, type DrawingSelectionChangeEvent, type DrawingToolType, FIB_DEFAULT_PALETTE, type GridOptions, type IndicatorInstanceOptions, type IndicatorPane, type IndicatorPaneActionEvent, type IndicatorPaneAxisOptions, type IndicatorPaneGuideLine, type IndicatorPaneHeightChangeEvent, type IndicatorPaneRenderInfo, type IndicatorPaneValue, type IndicatorPaneValueLabel, type IndicatorPlugin, type IndicatorRenderContext, type KeyboardOptions, type LabelsOptions, type OhlcDataPoint, type OrderActionButton, type OrderActionEvent, type OrderLineOptions, POSITION_DEFAULT_COLORS, type PriceLineOptions, type PriceScaleMode, type PriceScaleOptions, SCRIPT_SOURCE_INPUT_VALUES, type ScriptComputeResult, type ScriptIndicatorDefinition, type ScriptIndicatorInputDef, type ScriptInputHelper, type ScriptInputOptions, type ScriptPlotSpec, type TickerLineOptions, type TouchOptions, type TradeMarkerOptions, type ViewportState, type WatermarkOptions, compileScriptIndicator, createChart, extractScriptInputs, validateScriptSource };

package/dist/hyperprop-charting-library.js

@@ -2623,6 +2623,88 @@ var compileScriptIndicator = (definition) => {
   return plugin;
 };
 
+// src/themes.ts
+var CHART_THEMES = {
+  dark: {
+    name: "dark",
+    background: "#0f0f0f",
+    upColor: "#089981",
+    downColor: "#f23645",
+    lineColor: "#2962ff",
+    gridColor: "#3c3c3c",
+    gridOpacity: 0.5,
+    axisTextColor: "#dbdbdb",
+    axisLineColor: "#424242",
+    crosshairColor: "#9598a1",
+    crosshairLabelBackground: "#3c3c3c",
+    crosshairLabelText: "#dbdbdb",
+    crosshairLabelBorder: "#5d5d5d",
+    watermarkColor: "rgba(219,219,219,0.06)",
+    indicatorTextColor: "#b2b5be",
+    labelTextColor: "#ffffff",
+    labelBackground: "#1a1a1a"
+  },
+  light: {
+    name: "light",
+    background: "#ffffff",
+    upColor: "#089981",
+    downColor: "#f23645",
+    lineColor: "#2962ff",
+    gridColor: "#d5d5d5",
+    gridOpacity: 0.9,
+    axisTextColor: "#0f0f0f",
+    axisLineColor: "#c3c3c3",
+    crosshairColor: "#787b86",
+    crosshairLabelBackground: "#4b4b4b",
+    crosshairLabelText: "#ffffff",
+    crosshairLabelBorder: "#878787",
+    watermarkColor: "rgba(15,15,15,0.06)",
+    indicatorTextColor: "#4b4b4b",
+    labelTextColor: "#ffffff",
+    labelBackground: "#f0f3fa"
+  },
+  midnight: {
+    name: "midnight",
+    background: "#171717",
+    upColor: "#22ab94",
+    downColor: "#f23645",
+    lineColor: "#2563eb",
+    gridColor: "#2b2f38",
+    gridOpacity: 0.38,
+    axisTextColor: "#dbe4f0",
+    axisLineColor: "#5f646d",
+    crosshairColor: "#94a3b8",
+    crosshairLabelBackground: "#6b6f76",
+    crosshairLabelText: "#e2e8f0",
+    crosshairLabelBorder: "#e2e8f0",
+    watermarkColor: "rgba(226,232,240,0.05)",
+    indicatorTextColor: "#cbd5e1",
+    labelTextColor: "#dbeafe",
+    labelBackground: "#0b1220"
+  },
+  "high-contrast": {
+    name: "high-contrast",
+    background: "#000000",
+    upColor: "#00e5a0",
+    downColor: "#ff4d5e",
+    lineColor: "#4d9fff",
+    gridColor: "#5a5a5a",
+    gridOpacity: 0.7,
+    axisTextColor: "#ffffff",
+    axisLineColor: "#8a8a8a",
+    crosshairColor: "#ffffff",
+    crosshairLabelBackground: "#ffffff",
+    crosshairLabelText: "#000000",
+    crosshairLabelBorder: "#ffffff",
+    watermarkColor: "rgba(255,255,255,0.08)",
+    indicatorTextColor: "#ffffff",
+    labelTextColor: "#000000",
+    labelBackground: "#1a1a1a"
+  }
+};
+var CHART_THEME_NAMES = Object.keys(CHART_THEMES);
+var resolveTheme = (theme) => typeof theme === "string" ? CHART_THEMES[theme] ?? CHART_THEMES.dark : theme;
+
 // src/options.ts
 var DEFAULT_GRID_OPTIONS = {
   color: "#2b2f38",
@@ -3065,6 +3147,7 @@ function createChart(element, options = {}) {
   let keyboardShortcutHandler = null;
   let lastSelectionSignature = null;
   let magnetMode = "none";
+  let activeThemeName = null;
   let priceScaleMode = "linear";
   let priceScaleInverted = false;
   const PRICE_SCALE_LOG_FLOOR = 1e-9;
@@ -9577,6 +9660,23 @@ function createChart(element, options = {}) {
     window.addEventListener("blur", onWindowBlurMagnet);
   }
   const updateOptions = (nextOptions) => {
+    const THEMED_OPTION_KEYS = [
+      "backgroundColor",
+      "upColor",
+      "downColor",
+      "lineColor",
+      "gridColor",
+      "axisColor",
+      "grid",
+      "axis",
+      "xAxis",
+      "yAxis",
+      "crosshair",
+      "watermark"
+    ];
+    if (THEMED_OPTION_KEYS.some((key) => nextOptions[key] !== void 0) || nextOptions.labels?.indicatorTextColor !== void 0) {
+      activeThemeName = null;
+    }
     const wasTickerSmoothingEnabled = mergedOptions.tickerLine?.smoothing ?? false;
     const previousWidth = width;
     const previousHeight = height;
@@ -9605,6 +9705,30 @@ function createChart(element, options = {}) {
     }
     scheduleDraw();
   };
+  const setTheme = (theme) => {
+    const resolved = resolveTheme(theme);
+    updateOptions({
+      backgroundColor: resolved.background,
+      upColor: resolved.upColor,
+      downColor: resolved.downColor,
+      lineColor: resolved.lineColor,
+      gridColor: resolved.gridColor,
+      grid: { color: resolved.gridColor, opacity: resolved.gridOpacity },
+      axis: { textColor: resolved.axisTextColor, lineColor: resolved.axisLineColor },
+      xAxis: { textColor: resolved.axisTextColor, lineColor: resolved.axisLineColor },
+      yAxis: { textColor: resolved.axisTextColor, lineColor: resolved.axisLineColor },
+      crosshair: {
+        color: resolved.crosshairColor,
+        labelBackgroundColor: resolved.crosshairLabelBackground,
+        labelTextColor: resolved.crosshairLabelText,
+        labelBorderColor: resolved.crosshairLabelBorder
+      },
+      watermark: { color: resolved.watermarkColor },
+      labels: { indicatorTextColor: resolved.indicatorTextColor }
+    });
+    activeThemeName = resolved.name;
+  };
+  const getTheme = () => activeThemeName;
   const setChartType = (type) => {
     if (mergedOptions.chartType === type) {
       return;
@@ -10133,6 +10257,8 @@ function createChart(element, options = {}) {
     getMagnetMode,
     setPriceScale,
     getPriceScale,
+    setTheme,
+    getTheme,
     setCompareSeries,
     addCompareSeries,
     removeCompareSeries,
@@ -10162,6 +10288,8 @@ function createChart(element, options = {}) {
   };
 }
 export {
+  CHART_THEMES,
+  CHART_THEME_NAMES,
   FIB_DEFAULT_PALETTE,
   POSITION_DEFAULT_COLORS,
   SCRIPT_SOURCE_INPUT_VALUES,

package/dist/index.cjs

@@ -20,6 +20,8 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
+  CHART_THEMES: () => CHART_THEMES,
+  CHART_THEME_NAMES: () => CHART_THEME_NAMES,
   FIB_DEFAULT_PALETTE: () => FIB_DEFAULT_PALETTE,
   POSITION_DEFAULT_COLORS: () => POSITION_DEFAULT_COLORS,
   SCRIPT_SOURCE_INPUT_VALUES: () => SCRIPT_SOURCE_INPUT_VALUES,
@@ -2655,6 +2657,88 @@ var compileScriptIndicator = (definition) => {
   return plugin;
 };
 
+// src/themes.ts
+var CHART_THEMES = {
+  dark: {
+    name: "dark",
+    background: "#0f0f0f",
+    upColor: "#089981",
+    downColor: "#f23645",
+    lineColor: "#2962ff",
+    gridColor: "#3c3c3c",
+    gridOpacity: 0.5,
+    axisTextColor: "#dbdbdb",
+    axisLineColor: "#424242",
+    crosshairColor: "#9598a1",
+    crosshairLabelBackground: "#3c3c3c",
+    crosshairLabelText: "#dbdbdb",
+    crosshairLabelBorder: "#5d5d5d",
+    watermarkColor: "rgba(219,219,219,0.06)",
+    indicatorTextColor: "#b2b5be",
+    labelTextColor: "#ffffff",
+    labelBackground: "#1a1a1a"
+  },
+  light: {
+    name: "light",
+    background: "#ffffff",
+    upColor: "#089981",
+    downColor: "#f23645",
+    lineColor: "#2962ff",
+    gridColor: "#d5d5d5",
+    gridOpacity: 0.9,
+    axisTextColor: "#0f0f0f",
+    axisLineColor: "#c3c3c3",
+    crosshairColor: "#787b86",
+    crosshairLabelBackground: "#4b4b4b",
+    crosshairLabelText: "#ffffff",
+    crosshairLabelBorder: "#878787",
+    watermarkColor: "rgba(15,15,15,0.06)",
+    indicatorTextColor: "#4b4b4b",
+    labelTextColor: "#ffffff",
+    labelBackground: "#f0f3fa"
+  },
+  midnight: {
+    name: "midnight",
+    background: "#171717",
+    upColor: "#22ab94",
+    downColor: "#f23645",
+    lineColor: "#2563eb",
+    gridColor: "#2b2f38",
+    gridOpacity: 0.38,
+    axisTextColor: "#dbe4f0",
+    axisLineColor: "#5f646d",
+    crosshairColor: "#94a3b8",
+    crosshairLabelBackground: "#6b6f76",
+    crosshairLabelText: "#e2e8f0",
+    crosshairLabelBorder: "#e2e8f0",
+    watermarkColor: "rgba(226,232,240,0.05)",
+    indicatorTextColor: "#cbd5e1",
+    labelTextColor: "#dbeafe",
+    labelBackground: "#0b1220"
+  },
+  "high-contrast": {
+    name: "high-contrast",
+    background: "#000000",
+    upColor: "#00e5a0",
+    downColor: "#ff4d5e",
+    lineColor: "#4d9fff",
+    gridColor: "#5a5a5a",
+    gridOpacity: 0.7,
+    axisTextColor: "#ffffff",
+    axisLineColor: "#8a8a8a",
+    crosshairColor: "#ffffff",
+    crosshairLabelBackground: "#ffffff",
+    crosshairLabelText: "#000000",
+    crosshairLabelBorder: "#ffffff",
+    watermarkColor: "rgba(255,255,255,0.08)",
+    indicatorTextColor: "#ffffff",
+    labelTextColor: "#000000",
+    labelBackground: "#1a1a1a"
+  }
+};
+var CHART_THEME_NAMES = Object.keys(CHART_THEMES);
+var resolveTheme = (theme) => typeof theme === "string" ? CHART_THEMES[theme] ?? CHART_THEMES.dark : theme;
+
 // src/options.ts
 var DEFAULT_GRID_OPTIONS = {
   color: "#2b2f38",
@@ -3097,6 +3181,7 @@ function createChart(element, options = {}) {
   let keyboardShortcutHandler = null;
   let lastSelectionSignature = null;
   let magnetMode = "none";
+  let activeThemeName = null;
   let priceScaleMode = "linear";
   let priceScaleInverted = false;
   const PRICE_SCALE_LOG_FLOOR = 1e-9;
@@ -9609,6 +9694,23 @@ function createChart(element, options = {}) {
     window.addEventListener("blur", onWindowBlurMagnet);
   }
   const updateOptions = (nextOptions) => {
+    const THEMED_OPTION_KEYS = [
+      "backgroundColor",
+      "upColor",
+      "downColor",
+      "lineColor",
+      "gridColor",
+      "axisColor",
+      "grid",
+      "axis",
+      "xAxis",
+      "yAxis",
+      "crosshair",
+      "watermark"
+    ];
+    if (THEMED_OPTION_KEYS.some((key) => nextOptions[key] !== void 0) || nextOptions.labels?.indicatorTextColor !== void 0) {
+      activeThemeName = null;
+    }
     const wasTickerSmoothingEnabled = mergedOptions.tickerLine?.smoothing ?? false;
     const previousWidth = width;
     const previousHeight = height;
@@ -9637,6 +9739,30 @@ function createChart(element, options = {}) {
     }
     scheduleDraw();
   };
+  const setTheme = (theme) => {
+    const resolved = resolveTheme(theme);
+    updateOptions({
+      backgroundColor: resolved.background,
+      upColor: resolved.upColor,
+      downColor: resolved.downColor,
+      lineColor: resolved.lineColor,
+      gridColor: resolved.gridColor,
+      grid: { color: resolved.gridColor, opacity: resolved.gridOpacity },
+      axis: { textColor: resolved.axisTextColor, lineColor: resolved.axisLineColor },
+      xAxis: { textColor: resolved.axisTextColor, lineColor: resolved.axisLineColor },
+      yAxis: { textColor: resolved.axisTextColor, lineColor: resolved.axisLineColor },
+      crosshair: {
+        color: resolved.crosshairColor,
+        labelBackgroundColor: resolved.crosshairLabelBackground,
+        labelTextColor: resolved.crosshairLabelText,
+        labelBorderColor: resolved.crosshairLabelBorder
+      },
+      watermark: { color: resolved.watermarkColor },
+      labels: { indicatorTextColor: resolved.indicatorTextColor }
+    });
+    activeThemeName = resolved.name;
+  };
+  const getTheme = () => activeThemeName;
   const setChartType = (type) => {
     if (mergedOptions.chartType === type) {
       return;
@@ -10165,6 +10291,8 @@ function createChart(element, options = {}) {
     getMagnetMode,
     setPriceScale,
     getPriceScale,
+    setTheme,
+    getTheme,
     setCompareSeries,
     addCompareSeries,
     removeCompareSeries,
@@ -10195,6 +10323,8 @@ function createChart(element, options = {}) {
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  CHART_THEMES,
+  CHART_THEME_NAMES,
   FIB_DEFAULT_PALETTE,
   POSITION_DEFAULT_COLORS,
   SCRIPT_SOURCE_INPUT_VALUES,

package/dist/index.d.cts

@@ -607,6 +607,35 @@ interface CompareSeriesOptions {
     /** Let this series widen the price scale. Default true. */
     includeInAutoScale?: boolean;
 }
+/**
+ * A complete chart palette. Hosts otherwise configure a dozen colors one by
+ * one and re-push them on every light/dark toggle; a theme is that same set as
+ * one object, so `setTheme` is a single call.
+ */
+interface ChartTheme {
+    name: string;
+    background: string;
+    upColor: string;
+    downColor: string;
+    /** Line/area/baseline series color. */
+    lineColor: string;
+    gridColor: string;
+    gridOpacity: number;
+    axisTextColor: string;
+    axisLineColor: string;
+    crosshairColor: string;
+    crosshairLabelBackground: string;
+    crosshairLabelText: string;
+    crosshairLabelBorder: string;
+    watermarkColor: string;
+    /** Indicator names/values drawn inside the plot and pane legends. */
+    indicatorTextColor: string;
+    /** Text drawn on colored order/preview pills. */
+    labelTextColor: string;
+    /** Background for preview labels and pills. */
+    labelBackground: string;
+}
+type ChartThemeName = "dark" | "light" | "midnight" | "high-contrast";
 /** Touch ergonomics. Fingers are blunter than a mouse cursor. */
 interface TouchOptions {
     /**
@@ -818,6 +847,15 @@ interface ChartInstance {
      */
     setPriceScale: (options: Partial<PriceScaleOptions>) => void;
     getPriceScale: () => PriceScaleOptions;
+    /**
+     * Apply a whole palette at once — a built-in preset name or your own
+     * `ChartTheme`. Replaces the per-color `updateOptions` juggling hosts do on
+     * every light/dark toggle. Anything the theme doesn't cover (order-line
+     * colors, drawing defaults) is left alone.
+     */
+    setTheme: (theme: ChartThemeName | ChartTheme) => void;
+    /** Name of the last applied theme, or null if colors were set by hand. */
+    getTheme: () => string | null;
     /**
      * Overlay other instruments on the main pane for comparison. Series are
      * aligned to the main series by timestamp (last known value carries forward
@@ -1025,6 +1063,19 @@ declare const validateScriptSource: (source: string) => string | null;
  */
 declare const compileScriptIndicator: (definition: ScriptIndicatorDefinition) => IndicatorPlugin;
 
+/**
+ * Built-in palettes.
+ *
+ * `dark` and `light` mirror TradingView's own chart colors (sampled from their
+ * rendered canvas), which is what most traders' eyes are calibrated to: the
+ * candle colors stay the same across both and only the surface changes.
+ * `midnight` is Hyperprop's long-standing default, kept as a named preset so
+ * existing setups have something to go back to. `high-contrast` trades
+ * prettiness for legibility on projectors and for low-vision users.
+ */
+declare const CHART_THEMES: Record<ChartThemeName, ChartTheme>;
+declare const CHART_THEME_NAMES: ChartThemeName[];
+
 declare function createChart(element: HTMLElement, options?: ChartOptions): ChartInstance;
 
-export { type AccessibilityOptions, type AxisOptions, type BuiltInIndicatorInfo, type ChartClickEvent, type ChartContextMenuEvent, type ChartContextMenuRegion, type ChartDatafeed, type ChartInstance, type ChartKeyboardAction, type ChartKeyboardShortcutEvent, type ChartLongPressEvent, type ChartOptions, type ChartSavedState, type ChartType, type CompareSeriesOptions, type CrosshairMoveEvent, type CrosshairOptions, type CrosshairPriceActionEvent, type DashPatternOptions, type DatafeedBarsRequest, type DatafeedOptions, type DownsamplingOptions, type DrawingBounds, type DrawingDefaults, type DrawingHoverEvent, type DrawingObjectOptions, type DrawingPoint, type DrawingSelectEvent, type DrawingSelectionChangeEvent, type DrawingToolType, FIB_DEFAULT_PALETTE, type GridOptions, type IndicatorInstanceOptions, type IndicatorPane, type IndicatorPaneActionEvent, type IndicatorPaneAxisOptions, type IndicatorPaneGuideLine, type IndicatorPaneHeightChangeEvent, type IndicatorPaneRenderInfo, type IndicatorPaneValue, type IndicatorPaneValueLabel, type IndicatorPlugin, type IndicatorRenderContext, type KeyboardOptions, type LabelsOptions, type OhlcDataPoint, type OrderActionButton, type OrderActionEvent, type OrderLineOptions, POSITION_DEFAULT_COLORS, type PriceLineOptions, type PriceScaleMode, type PriceScaleOptions, SCRIPT_SOURCE_INPUT_VALUES, type ScriptComputeResult, type ScriptIndicatorDefinition, type ScriptIndicatorInputDef, type ScriptInputHelper, type ScriptInputOptions, type ScriptPlotSpec, type TickerLineOptions, type TouchOptions, type TradeMarkerOptions, type ViewportState, type WatermarkOptions, compileScriptIndicator, createChart, extractScriptInputs, validateScriptSource };
+export { type AccessibilityOptions, type AxisOptions, type BuiltInIndicatorInfo, CHART_THEMES, CHART_THEME_NAMES, type ChartClickEvent, type ChartContextMenuEvent, type ChartContextMenuRegion, type ChartDatafeed, type ChartInstance, type ChartKeyboardAction, type ChartKeyboardShortcutEvent, type ChartLongPressEvent, type ChartOptions, type ChartSavedState, type ChartTheme, type ChartThemeName, type ChartType, type CompareSeriesOptions, type CrosshairMoveEvent, type CrosshairOptions, type CrosshairPriceActionEvent, type DashPatternOptions, type DatafeedBarsRequest, type DatafeedOptions, type DownsamplingOptions, type DrawingBounds, type DrawingDefaults, type DrawingHoverEvent, type DrawingObjectOptions, type DrawingPoint, type DrawingSelectEvent, type DrawingSelectionChangeEvent, type DrawingToolType, FIB_DEFAULT_PALETTE, type GridOptions, type IndicatorInstanceOptions, type IndicatorPane, type IndicatorPaneActionEvent, type IndicatorPaneAxisOptions, type IndicatorPaneGuideLine, type IndicatorPaneHeightChangeEvent, type IndicatorPaneRenderInfo, type IndicatorPaneValue, type IndicatorPaneValueLabel, type IndicatorPlugin, type IndicatorRenderContext, type KeyboardOptions, type LabelsOptions, type OhlcDataPoint, type OrderActionButton, type OrderActionEvent, type OrderLineOptions, POSITION_DEFAULT_COLORS, type PriceLineOptions, type PriceScaleMode, type PriceScaleOptions, SCRIPT_SOURCE_INPUT_VALUES, type ScriptComputeResult, type ScriptIndicatorDefinition, type ScriptIndicatorInputDef, type ScriptInputHelper, type ScriptInputOptions, type ScriptPlotSpec, type TickerLineOptions, type TouchOptions, type TradeMarkerOptions, type ViewportState, type WatermarkOptions, compileScriptIndicator, createChart, extractScriptInputs, validateScriptSource };

package/dist/index.d.ts

@@ -607,6 +607,35 @@ interface CompareSeriesOptions {
     /** Let this series widen the price scale. Default true. */
     includeInAutoScale?: boolean;
 }
+/**
+ * A complete chart palette. Hosts otherwise configure a dozen colors one by
+ * one and re-push them on every light/dark toggle; a theme is that same set as
+ * one object, so `setTheme` is a single call.
+ */
+interface ChartTheme {
+    name: string;
+    background: string;
+    upColor: string;
+    downColor: string;
+    /** Line/area/baseline series color. */
+    lineColor: string;
+    gridColor: string;
+    gridOpacity: number;
+    axisTextColor: string;
+    axisLineColor: string;
+    crosshairColor: string;
+    crosshairLabelBackground: string;
+    crosshairLabelText: string;
+    crosshairLabelBorder: string;
+    watermarkColor: string;
+    /** Indicator names/values drawn inside the plot and pane legends. */
+    indicatorTextColor: string;
+    /** Text drawn on colored order/preview pills. */
+    labelTextColor: string;
+    /** Background for preview labels and pills. */
+    labelBackground: string;
+}
+type ChartThemeName = "dark" | "light" | "midnight" | "high-contrast";
 /** Touch ergonomics. Fingers are blunter than a mouse cursor. */
 interface TouchOptions {
     /**
@@ -818,6 +847,15 @@ interface ChartInstance {
      */
     setPriceScale: (options: Partial<PriceScaleOptions>) => void;
     getPriceScale: () => PriceScaleOptions;
+    /**
+     * Apply a whole palette at once — a built-in preset name or your own
+     * `ChartTheme`. Replaces the per-color `updateOptions` juggling hosts do on
+     * every light/dark toggle. Anything the theme doesn't cover (order-line
+     * colors, drawing defaults) is left alone.
+     */
+    setTheme: (theme: ChartThemeName | ChartTheme) => void;
+    /** Name of the last applied theme, or null if colors were set by hand. */
+    getTheme: () => string | null;
     /**
      * Overlay other instruments on the main pane for comparison. Series are
      * aligned to the main series by timestamp (last known value carries forward
@@ -1025,6 +1063,19 @@ declare const validateScriptSource: (source: string) => string | null;
  */
 declare const compileScriptIndicator: (definition: ScriptIndicatorDefinition) => IndicatorPlugin;
 
+/**
+ * Built-in palettes.
+ *
+ * `dark` and `light` mirror TradingView's own chart colors (sampled from their
+ * rendered canvas), which is what most traders' eyes are calibrated to: the
+ * candle colors stay the same across both and only the surface changes.
+ * `midnight` is Hyperprop's long-standing default, kept as a named preset so
+ * existing setups have something to go back to. `high-contrast` trades
+ * prettiness for legibility on projectors and for low-vision users.
+ */
+declare const CHART_THEMES: Record<ChartThemeName, ChartTheme>;
+declare const CHART_THEME_NAMES: ChartThemeName[];
+
 declare function createChart(element: HTMLElement, options?: ChartOptions): ChartInstance;
 
-export { type AccessibilityOptions, type AxisOptions, type BuiltInIndicatorInfo, type ChartClickEvent, type ChartContextMenuEvent, type ChartContextMenuRegion, type ChartDatafeed, type ChartInstance, type ChartKeyboardAction, type ChartKeyboardShortcutEvent, type ChartLongPressEvent, type ChartOptions, type ChartSavedState, type ChartType, type CompareSeriesOptions, type CrosshairMoveEvent, type CrosshairOptions, type CrosshairPriceActionEvent, type DashPatternOptions, type DatafeedBarsRequest, type DatafeedOptions, type DownsamplingOptions, type DrawingBounds, type DrawingDefaults, type DrawingHoverEvent, type DrawingObjectOptions, type DrawingPoint, type DrawingSelectEvent, type DrawingSelectionChangeEvent, type DrawingToolType, FIB_DEFAULT_PALETTE, type GridOptions, type IndicatorInstanceOptions, type IndicatorPane, type IndicatorPaneActionEvent, type IndicatorPaneAxisOptions, type IndicatorPaneGuideLine, type IndicatorPaneHeightChangeEvent, type IndicatorPaneRenderInfo, type IndicatorPaneValue, type IndicatorPaneValueLabel, type IndicatorPlugin, type IndicatorRenderContext, type KeyboardOptions, type LabelsOptions, type OhlcDataPoint, type OrderActionButton, type OrderActionEvent, type OrderLineOptions, POSITION_DEFAULT_COLORS, type PriceLineOptions, type PriceScaleMode, type PriceScaleOptions, SCRIPT_SOURCE_INPUT_VALUES, type ScriptComputeResult, type ScriptIndicatorDefinition, type ScriptIndicatorInputDef, type ScriptInputHelper, type ScriptInputOptions, type ScriptPlotSpec, type TickerLineOptions, type TouchOptions, type TradeMarkerOptions, type ViewportState, type WatermarkOptions, compileScriptIndicator, createChart, extractScriptInputs, validateScriptSource };
+export { type AccessibilityOptions, type AxisOptions, type BuiltInIndicatorInfo, CHART_THEMES, CHART_THEME_NAMES, type ChartClickEvent, type ChartContextMenuEvent, type ChartContextMenuRegion, type ChartDatafeed, type ChartInstance, type ChartKeyboardAction, type ChartKeyboardShortcutEvent, type ChartLongPressEvent, type ChartOptions, type ChartSavedState, type ChartTheme, type ChartThemeName, type ChartType, type CompareSeriesOptions, type CrosshairMoveEvent, type CrosshairOptions, type CrosshairPriceActionEvent, type DashPatternOptions, type DatafeedBarsRequest, type DatafeedOptions, type DownsamplingOptions, type DrawingBounds, type DrawingDefaults, type DrawingHoverEvent, type DrawingObjectOptions, type DrawingPoint, type DrawingSelectEvent, type DrawingSelectionChangeEvent, type DrawingToolType, FIB_DEFAULT_PALETTE, type GridOptions, type IndicatorInstanceOptions, type IndicatorPane, type IndicatorPaneActionEvent, type IndicatorPaneAxisOptions, type IndicatorPaneGuideLine, type IndicatorPaneHeightChangeEvent, type IndicatorPaneRenderInfo, type IndicatorPaneValue, type IndicatorPaneValueLabel, type IndicatorPlugin, type IndicatorRenderContext, type KeyboardOptions, type LabelsOptions, type OhlcDataPoint, type OrderActionButton, type OrderActionEvent, type OrderLineOptions, POSITION_DEFAULT_COLORS, type PriceLineOptions, type PriceScaleMode, type PriceScaleOptions, SCRIPT_SOURCE_INPUT_VALUES, type ScriptComputeResult, type ScriptIndicatorDefinition, type ScriptIndicatorInputDef, type ScriptInputHelper, type ScriptInputOptions, type ScriptPlotSpec, type TickerLineOptions, type TouchOptions, type TradeMarkerOptions, type ViewportState, type WatermarkOptions, compileScriptIndicator, createChart, extractScriptInputs, validateScriptSource };

package/dist/index.js

@@ -2623,6 +2623,88 @@ var compileScriptIndicator = (definition) => {
   return plugin;
 };
 
+// src/themes.ts
+var CHART_THEMES = {
+  dark: {
+    name: "dark",
+    background: "#0f0f0f",
+    upColor: "#089981",
+    downColor: "#f23645",
+    lineColor: "#2962ff",
+    gridColor: "#3c3c3c",
+    gridOpacity: 0.5,
+    axisTextColor: "#dbdbdb",
+    axisLineColor: "#424242",
+    crosshairColor: "#9598a1",
+    crosshairLabelBackground: "#3c3c3c",
+    crosshairLabelText: "#dbdbdb",
+    crosshairLabelBorder: "#5d5d5d",
+    watermarkColor: "rgba(219,219,219,0.06)",
+    indicatorTextColor: "#b2b5be",
+    labelTextColor: "#ffffff",
+    labelBackground: "#1a1a1a"
+  },
+  light: {
+    name: "light",
+    background: "#ffffff",
+    upColor: "#089981",
+    downColor: "#f23645",
+    lineColor: "#2962ff",
+    gridColor: "#d5d5d5",
+    gridOpacity: 0.9,
+    axisTextColor: "#0f0f0f",
+    axisLineColor: "#c3c3c3",
+    crosshairColor: "#787b86",
+    crosshairLabelBackground: "#4b4b4b",
+    crosshairLabelText: "#ffffff",
+    crosshairLabelBorder: "#878787",
+    watermarkColor: "rgba(15,15,15,0.06)",
+    indicatorTextColor: "#4b4b4b",
+    labelTextColor: "#ffffff",
+    labelBackground: "#f0f3fa"
+  },
+  midnight: {
+    name: "midnight",
+    background: "#171717",
+    upColor: "#22ab94",
+    downColor: "#f23645",
+    lineColor: "#2563eb",
+    gridColor: "#2b2f38",
+    gridOpacity: 0.38,
+    axisTextColor: "#dbe4f0",
+    axisLineColor: "#5f646d",
+    crosshairColor: "#94a3b8",
+    crosshairLabelBackground: "#6b6f76",
+    crosshairLabelText: "#e2e8f0",
+    crosshairLabelBorder: "#e2e8f0",
+    watermarkColor: "rgba(226,232,240,0.05)",
+    indicatorTextColor: "#cbd5e1",
+    labelTextColor: "#dbeafe",
+    labelBackground: "#0b1220"
+  },
+  "high-contrast": {
+    name: "high-contrast",
+    background: "#000000",
+    upColor: "#00e5a0",
+    downColor: "#ff4d5e",
+    lineColor: "#4d9fff",
+    gridColor: "#5a5a5a",
+    gridOpacity: 0.7,
+    axisTextColor: "#ffffff",
+    axisLineColor: "#8a8a8a",
+    crosshairColor: "#ffffff",
+    crosshairLabelBackground: "#ffffff",
+    crosshairLabelText: "#000000",
+    crosshairLabelBorder: "#ffffff",
+    watermarkColor: "rgba(255,255,255,0.08)",
+    indicatorTextColor: "#ffffff",
+    labelTextColor: "#000000",
+    labelBackground: "#1a1a1a"
+  }
+};
+var CHART_THEME_NAMES = Object.keys(CHART_THEMES);
+var resolveTheme = (theme) => typeof theme === "string" ? CHART_THEMES[theme] ?? CHART_THEMES.dark : theme;
+
 // src/options.ts
 var DEFAULT_GRID_OPTIONS = {
   color: "#2b2f38",
@@ -3065,6 +3147,7 @@ function createChart(element, options = {}) {
   let keyboardShortcutHandler = null;
   let lastSelectionSignature = null;
   let magnetMode = "none";
+  let activeThemeName = null;
   let priceScaleMode = "linear";
   let priceScaleInverted = false;
   const PRICE_SCALE_LOG_FLOOR = 1e-9;
@@ -9577,6 +9660,23 @@ function createChart(element, options = {}) {
     window.addEventListener("blur", onWindowBlurMagnet);
   }
   const updateOptions = (nextOptions) => {
+    const THEMED_OPTION_KEYS = [
+      "backgroundColor",
+      "upColor",
+      "downColor",
+      "lineColor",
+      "gridColor",
+      "axisColor",
+      "grid",
+      "axis",
+      "xAxis",
+      "yAxis",
+      "crosshair",
+      "watermark"
+    ];
+    if (THEMED_OPTION_KEYS.some((key) => nextOptions[key] !== void 0) || nextOptions.labels?.indicatorTextColor !== void 0) {
+      activeThemeName = null;
+    }
     const wasTickerSmoothingEnabled = mergedOptions.tickerLine?.smoothing ?? false;
     const previousWidth = width;
     const previousHeight = height;
@@ -9605,6 +9705,30 @@ function createChart(element, options = {}) {
     }
     scheduleDraw();
   };
+  const setTheme = (theme) => {
+    const resolved = resolveTheme(theme);
+    updateOptions({
+      backgroundColor: resolved.background,
+      upColor: resolved.upColor,
+      downColor: resolved.downColor,
+      lineColor: resolved.lineColor,
+      gridColor: resolved.gridColor,
+      grid: { color: resolved.gridColor, opacity: resolved.gridOpacity },
+      axis: { textColor: resolved.axisTextColor, lineColor: resolved.axisLineColor },
+      xAxis: { textColor: resolved.axisTextColor, lineColor: resolved.axisLineColor },
+      yAxis: { textColor: resolved.axisTextColor, lineColor: resolved.axisLineColor },
+      crosshair: {
+        color: resolved.crosshairColor,
+        labelBackgroundColor: resolved.crosshairLabelBackground,
+        labelTextColor: resolved.crosshairLabelText,
+        labelBorderColor: resolved.crosshairLabelBorder
+      },
+      watermark: { color: resolved.watermarkColor },
+      labels: { indicatorTextColor: resolved.indicatorTextColor }
+    });
+    activeThemeName = resolved.name;
+  };
+  const getTheme = () => activeThemeName;
   const setChartType = (type) => {
     if (mergedOptions.chartType === type) {
       return;
@@ -10133,6 +10257,8 @@ function createChart(element, options = {}) {
     getMagnetMode,
     setPriceScale,
     getPriceScale,
+    setTheme,
+    getTheme,
     setCompareSeries,
     addCompareSeries,
     removeCompareSeries,
@@ -10162,6 +10288,8 @@ function createChart(element, options = {}) {
   };
 }
 export {
+  CHART_THEMES,
+  CHART_THEME_NAMES,
   FIB_DEFAULT_PALETTE,
   POSITION_DEFAULT_COLORS,
   SCRIPT_SOURCE_INPUT_VALUES,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hyperprop-charting-library",
-  "version": "0.1.140",
+  "version": "0.1.141",
   "description": "Lightweight TypeScript charting core",
   "type": "module",
   "main": "./dist/hyperprop-charting-library.cjs",