hyperprop-charting-library 0.1.141 → 0.1.142

package/dist/hyperprop-charting-library.cjs

@@ -2659,44 +2659,6 @@ var compileScriptIndicator = (definition) => {
 
 // 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",
@@ -2716,6 +2678,63 @@ var CHART_THEMES = {
     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",
@@ -2737,7 +2756,7 @@ var CHART_THEMES = {
   }
 };
 var CHART_THEME_NAMES = Object.keys(CHART_THEMES);
-var resolveTheme = (theme) => typeof theme === "string" ? CHART_THEMES[theme] ?? CHART_THEMES.dark : theme;
+var resolveTheme = (theme) => typeof theme === "string" ? CHART_THEMES[theme] ?? CHART_THEMES.midnight : theme;
 
 // src/options.ts
 var DEFAULT_GRID_OPTIONS = {

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

@@ -635,7 +635,7 @@ interface ChartTheme {
     /** Background for preview labels and pills. */
     labelBackground: string;
 }
-type ChartThemeName = "dark" | "light" | "midnight" | "high-contrast";
+type ChartThemeName = "midnight" | "light" | "brand" | "dark" | "high-contrast";
 /** Touch ergonomics. Fingers are blunter than a mouse cursor. */
 interface TouchOptions {
     /**
@@ -1066,12 +1066,12 @@ declare const compileScriptIndicator: (definition: ScriptIndicatorDefinition) =>
 /**
  * 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.
+ * `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[];

package/dist/hyperprop-charting-library.js

@@ -2625,44 +2625,6 @@ var compileScriptIndicator = (definition) => {
 
 // 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",
@@ -2682,6 +2644,63 @@ var CHART_THEMES = {
     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",
@@ -2703,7 +2722,7 @@ var CHART_THEMES = {
   }
 };
 var CHART_THEME_NAMES = Object.keys(CHART_THEMES);
-var resolveTheme = (theme) => typeof theme === "string" ? CHART_THEMES[theme] ?? CHART_THEMES.dark : theme;
+var resolveTheme = (theme) => typeof theme === "string" ? CHART_THEMES[theme] ?? CHART_THEMES.midnight : theme;
 
 // src/options.ts
 var DEFAULT_GRID_OPTIONS = {

package/dist/index.cjs

@@ -2659,44 +2659,6 @@ var compileScriptIndicator = (definition) => {
 
 // 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",
@@ -2716,6 +2678,63 @@ var CHART_THEMES = {
     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",
@@ -2737,7 +2756,7 @@ var CHART_THEMES = {
   }
 };
 var CHART_THEME_NAMES = Object.keys(CHART_THEMES);
-var resolveTheme = (theme) => typeof theme === "string" ? CHART_THEMES[theme] ?? CHART_THEMES.dark : theme;
+var resolveTheme = (theme) => typeof theme === "string" ? CHART_THEMES[theme] ?? CHART_THEMES.midnight : theme;
 
 // src/options.ts
 var DEFAULT_GRID_OPTIONS = {

package/dist/index.d.cts

@@ -635,7 +635,7 @@ interface ChartTheme {
     /** Background for preview labels and pills. */
     labelBackground: string;
 }
-type ChartThemeName = "dark" | "light" | "midnight" | "high-contrast";
+type ChartThemeName = "midnight" | "light" | "brand" | "dark" | "high-contrast";
 /** Touch ergonomics. Fingers are blunter than a mouse cursor. */
 interface TouchOptions {
     /**
@@ -1066,12 +1066,12 @@ declare const compileScriptIndicator: (definition: ScriptIndicatorDefinition) =>
 /**
  * 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.
+ * `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[];

package/dist/index.d.ts

@@ -635,7 +635,7 @@ interface ChartTheme {
     /** Background for preview labels and pills. */
     labelBackground: string;
 }
-type ChartThemeName = "dark" | "light" | "midnight" | "high-contrast";
+type ChartThemeName = "midnight" | "light" | "brand" | "dark" | "high-contrast";
 /** Touch ergonomics. Fingers are blunter than a mouse cursor. */
 interface TouchOptions {
     /**
@@ -1066,12 +1066,12 @@ declare const compileScriptIndicator: (definition: ScriptIndicatorDefinition) =>
 /**
  * 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.
+ * `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[];

package/dist/index.js

@@ -2625,44 +2625,6 @@ var compileScriptIndicator = (definition) => {
 
 // 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",
@@ -2682,6 +2644,63 @@ var CHART_THEMES = {
     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",
@@ -2703,7 +2722,7 @@ var CHART_THEMES = {
   }
 };
 var CHART_THEME_NAMES = Object.keys(CHART_THEMES);
-var resolveTheme = (theme) => typeof theme === "string" ? CHART_THEMES[theme] ?? CHART_THEMES.dark : theme;
+var resolveTheme = (theme) => typeof theme === "string" ? CHART_THEMES[theme] ?? CHART_THEMES.midnight : theme;
 
 // src/options.ts
 var DEFAULT_GRID_OPTIONS = {

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.141",
+  "version": "0.1.142",
   "description": "Lightweight TypeScript charting core",
   "type": "module",
   "main": "./dist/hyperprop-charting-library.cjs",