hyperprop-charting-library 0.1.140 → 0.1.142

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,107 @@ var compileScriptIndicator = (definition) => {
   return plugin;
 };
 
+// src/themes.ts
+var CHART_THEMES = {
+  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"
+  },
+  light: {
+    name: "light",
+    background: "#ffffff",
+    upColor: "#22ab94",
+    downColor: "#f23645",
+    lineColor: "#2563eb",
+    gridColor: "#e0e3eb",
+    gridOpacity: 0.9,
+    axisTextColor: "#1f2430",
+    axisLineColor: "#c8ccd6",
+    crosshairColor: "#6b7280",
+    crosshairLabelBackground: "#2a2e39",
+    crosshairLabelText: "#ffffff",
+    crosshairLabelBorder: "#6b7280",
+    watermarkColor: "rgba(19,23,34,0.06)",
+    indicatorTextColor: "#4b5563",
+    labelTextColor: "#ffffff",
+    labelBackground: "#f1f3f8"
+  },
+  brand: {
+    name: "brand",
+    background: "#0b1220",
+    upColor: "#22ab94",
+    downColor: "#f23645",
+    lineColor: "#253cff",
+    gridColor: "#1b2740",
+    gridOpacity: 0.6,
+    axisTextColor: "#c3cee8",
+    axisLineColor: "#34405c",
+    crosshairColor: "#6e85ff",
+    crosshairLabelBackground: "#253cff",
+    crosshairLabelText: "#ffffff",
+    crosshairLabelBorder: "#6e85ff",
+    watermarkColor: "rgba(37,60,255,0.08)",
+    indicatorTextColor: "#a9b8dc",
+    labelTextColor: "#ffffff",
+    labelBackground: "#101a2e"
+  },
+  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"
+  },
+  "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.midnight : theme;
+
 // src/options.ts
 var DEFAULT_GRID_OPTIONS = {
   color: "#2b2f38",
@@ -3097,6 +3200,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 +9713,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 +9758,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 +10310,8 @@ function createChart(element, options = {}) {
     getMagnetMode,
     setPriceScale,
     getPriceScale,
+    setTheme,
+    getTheme,
     setCompareSeries,
     addCompareSeries,
     removeCompareSeries,
@@ -10195,6 +10342,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 = "midnight" | "light" | "brand" | "dark" | "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.
+ *
+ * `midnight` is the long-standing default and `light` is its counterpart on a
+ * white surface — same candle colors, so switching surfaces doesn't change how
+ * you read the tape. `brand` tints everything toward Hyperprop blue, `dark` is
+ * a neutral near-black for embedders who want no tint at all, and
+ * `high-contrast` trades subtlety 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,107 @@ var compileScriptIndicator = (definition) => {
   return plugin;
 };
 
+// src/themes.ts
+var CHART_THEMES = {
+  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"
+  },
+  light: {
+    name: "light",
+    background: "#ffffff",
+    upColor: "#22ab94",
+    downColor: "#f23645",
+    lineColor: "#2563eb",
+    gridColor: "#e0e3eb",
+    gridOpacity: 0.9,
+    axisTextColor: "#1f2430",
+    axisLineColor: "#c8ccd6",
+    crosshairColor: "#6b7280",
+    crosshairLabelBackground: "#2a2e39",
+    crosshairLabelText: "#ffffff",
+    crosshairLabelBorder: "#6b7280",
+    watermarkColor: "rgba(19,23,34,0.06)",
+    indicatorTextColor: "#4b5563",
+    labelTextColor: "#ffffff",
+    labelBackground: "#f1f3f8"
+  },
+  brand: {
+    name: "brand",
+    background: "#0b1220",
+    upColor: "#22ab94",
+    downColor: "#f23645",
+    lineColor: "#253cff",
+    gridColor: "#1b2740",
+    gridOpacity: 0.6,
+    axisTextColor: "#c3cee8",
+    axisLineColor: "#34405c",
+    crosshairColor: "#6e85ff",
+    crosshairLabelBackground: "#253cff",
+    crosshairLabelText: "#ffffff",
+    crosshairLabelBorder: "#6e85ff",
+    watermarkColor: "rgba(37,60,255,0.08)",
+    indicatorTextColor: "#a9b8dc",
+    labelTextColor: "#ffffff",
+    labelBackground: "#101a2e"
+  },
+  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"
+  },
+  "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.midnight : theme;
+
 // src/options.ts
 var DEFAULT_GRID_OPTIONS = {
   color: "#2b2f38",
@@ -3065,6 +3166,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 +9679,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 +9724,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 +10276,8 @@ function createChart(element, options = {}) {
     getMagnetMode,
     setPriceScale,
     getPriceScale,
+    setTheme,
+    getTheme,
     setCompareSeries,
     addCompareSeries,
     removeCompareSeries,
@@ -10162,6 +10307,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,107 @@ var compileScriptIndicator = (definition) => {
   return plugin;
 };
 
+// src/themes.ts
+var CHART_THEMES = {
+  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"
+  },
+  light: {
+    name: "light",
+    background: "#ffffff",
+    upColor: "#22ab94",
+    downColor: "#f23645",
+    lineColor: "#2563eb",
+    gridColor: "#e0e3eb",
+    gridOpacity: 0.9,
+    axisTextColor: "#1f2430",
+    axisLineColor: "#c8ccd6",
+    crosshairColor: "#6b7280",
+    crosshairLabelBackground: "#2a2e39",
+    crosshairLabelText: "#ffffff",
+    crosshairLabelBorder: "#6b7280",
+    watermarkColor: "rgba(19,23,34,0.06)",
+    indicatorTextColor: "#4b5563",
+    labelTextColor: "#ffffff",
+    labelBackground: "#f1f3f8"
+  },
+  brand: {
+    name: "brand",
+    background: "#0b1220",
+    upColor: "#22ab94",
+    downColor: "#f23645",
+    lineColor: "#253cff",
+    gridColor: "#1b2740",
+    gridOpacity: 0.6,
+    axisTextColor: "#c3cee8",
+    axisLineColor: "#34405c",
+    crosshairColor: "#6e85ff",
+    crosshairLabelBackground: "#253cff",
+    crosshairLabelText: "#ffffff",
+    crosshairLabelBorder: "#6e85ff",
+    watermarkColor: "rgba(37,60,255,0.08)",
+    indicatorTextColor: "#a9b8dc",
+    labelTextColor: "#ffffff",
+    labelBackground: "#101a2e"
+  },
+  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"
+  },
+  "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.midnight : theme;
+
 // src/options.ts
 var DEFAULT_GRID_OPTIONS = {
   color: "#2b2f38",
@@ -3097,6 +3200,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 +9713,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 +9758,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 +10310,8 @@ function createChart(element, options = {}) {
     getMagnetMode,
     setPriceScale,
     getPriceScale,
+    setTheme,
+    getTheme,
     setCompareSeries,
     addCompareSeries,
     removeCompareSeries,
@@ -10195,6 +10342,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 = "midnight" | "light" | "brand" | "dark" | "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.
+ *
+ * `midnight` is the long-standing default and `light` is its counterpart on a
+ * white surface — same candle colors, so switching surfaces doesn't change how
+ * you read the tape. `brand` tints everything toward Hyperprop blue, `dark` is
+ * a neutral near-black for embedders who want no tint at all, and
+ * `high-contrast` trades subtlety 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 = "midnight" | "light" | "brand" | "dark" | "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.
+ *
+ * `midnight` is the long-standing default and `light` is its counterpart on a
+ * white surface — same candle colors, so switching surfaces doesn't change how
+ * you read the tape. `brand` tints everything toward Hyperprop blue, `dark` is
+ * a neutral near-black for embedders who want no tint at all, and
+ * `high-contrast` trades subtlety 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,107 @@ var compileScriptIndicator = (definition) => {
   return plugin;
 };
 
+// src/themes.ts
+var CHART_THEMES = {
+  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"
+  },
+  light: {
+    name: "light",
+    background: "#ffffff",
+    upColor: "#22ab94",
+    downColor: "#f23645",
+    lineColor: "#2563eb",
+    gridColor: "#e0e3eb",
+    gridOpacity: 0.9,
+    axisTextColor: "#1f2430",
+    axisLineColor: "#c8ccd6",
+    crosshairColor: "#6b7280",
+    crosshairLabelBackground: "#2a2e39",
+    crosshairLabelText: "#ffffff",
+    crosshairLabelBorder: "#6b7280",
+    watermarkColor: "rgba(19,23,34,0.06)",
+    indicatorTextColor: "#4b5563",
+    labelTextColor: "#ffffff",
+    labelBackground: "#f1f3f8"
+  },
+  brand: {
+    name: "brand",
+    background: "#0b1220",
+    upColor: "#22ab94",
+    downColor: "#f23645",
+    lineColor: "#253cff",
+    gridColor: "#1b2740",
+    gridOpacity: 0.6,
+    axisTextColor: "#c3cee8",
+    axisLineColor: "#34405c",
+    crosshairColor: "#6e85ff",
+    crosshairLabelBackground: "#253cff",
+    crosshairLabelText: "#ffffff",
+    crosshairLabelBorder: "#6e85ff",
+    watermarkColor: "rgba(37,60,255,0.08)",
+    indicatorTextColor: "#a9b8dc",
+    labelTextColor: "#ffffff",
+    labelBackground: "#101a2e"
+  },
+  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"
+  },
+  "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.midnight : theme;
+
 // src/options.ts
 var DEFAULT_GRID_OPTIONS = {
   color: "#2b2f38",
@@ -3065,6 +3166,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 +9679,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 +9724,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 +10276,8 @@ function createChart(element, options = {}) {
     getMagnetMode,
     setPriceScale,
     getPriceScale,
+    setTheme,
+    getTheme,
     setCompareSeries,
     addCompareSeries,
     removeCompareSeries,
@@ -10162,6 +10307,8 @@ function createChart(element, options = {}) {
   };
 }
 export {
+  CHART_THEMES,
+  CHART_THEME_NAMES,
   FIB_DEFAULT_PALETTE,
   POSITION_DEFAULT_COLORS,
   SCRIPT_SOURCE_INPUT_VALUES,

package/docs/API.md

@@ -568,6 +568,7 @@ an up measurement, red for down.
 - `cancelDrawing(): boolean` — abort an in-progress multi-click drawing (between the first click and the final point, e.g. a half-drawn trendline/ray/fib). Returns `true` if a draft was cancelled. Wire it to Escape.
 - Hold **Shift** while drawing or dragging an endpoint of a `trendline`/`ray`/`arrow` to constrain it to the nearest 0/45/90° angle (e.g. a perfectly horizontal line).
 - `setMagnetMode(mode): void` / `getMagnetMode()` — magnet/snap for all drawing tools. `"none"` off, `"weak"` snaps to a candle's OHLC only when the cursor is near a value, `"strong"` always snaps to the nearest OHLC of the bar under the cursor. Holding Cmd/Ctrl while drawing/dragging forces strong snapping regardless of the mode.
+- `setTheme(theme: ChartThemeName | ChartTheme): void` / `getTheme(): string | null` — apply a whole palette at once; see "Themes" below
 - `setDatafeed(datafeed: ChartDatafeed | null): Promise<void>` — attach a pull-based data source with lazy history; see "Datafeed" below
 - `onLongPress(handler: ((event: ChartLongPressEvent) => void) | null): void` — touch press-and-hold inspection
 - `setCompareSeries(series: CompareSeriesOptions[]): void` / `addCompareSeries(series)` / `removeCompareSeries(id)` / `getCompareSeries()` — overlay other instruments on the main pane; see "Compare overlays" below
@@ -613,6 +614,39 @@ link.click();
 
 ---
 
+## Themes
+
+A theme is the chart's whole palette as one object, so hosts stop setting a
+dozen colors individually and re-pushing them on every light/dark toggle.
+
+```ts
+import { CHART_THEMES, createChart } from "hyperprop-charting-library";
+
+chart.setTheme("light");                       // built-in preset
+chart.setTheme({ ...CHART_THEMES.dark, upColor: "#00c853" });  // tweak one
+chart.getTheme();                              // "light" | null when hand-set
+```
+
+Five presets ship in `CHART_THEMES`:
+
+| Preset | Surface | Candles | For |
+| --- | --- | --- | --- |
+| `midnight` | `#171717` | `#22ab94` / `#f23645` | the default dark look |
+| `light` | `#ffffff` | `#22ab94` / `#f23645` | same candles on a white surface |
+| `brand` | `#0b1220` | `#22ab94` / `#f23645` | Hyperprop blue accents (`#253cff`) |
+| `dark` | `#0f0f0f` | `#089981` / `#f23645` | neutral near-black, no tint |
+| `high-contrast` | `#000000` | `#00e5a0` / `#ff4d5e` | projectors, low vision |
+
+`setTheme` covers background, candles, the line/area series, grid (color and
+opacity), both axes, the crosshair and its labels, the watermark, and
+indicator legend text. It deliberately does **not** touch order-line colors or
+drawing defaults — those are trading state, not chrome, so switching looks
+never changes what your orders look like mid-session.
+
+`getTheme()` returns the active preset name, or `null` once any themed color
+is set by hand. Unrelated `updateOptions` calls (label toggles, sizing, ticker
+line) don't clear it, so it stays a reliable "am I on a preset" signal.
+
 ## Datafeed (optional, pull-based)
 
 By default the host pushes bars in with `setData`/`upsertBar`. Attach a

package/package.json

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