@yuneta/gobj-ui 7.23.96 → 7.23.97

package/dist/gobj-ui.cjs.js

@@ -9686,6 +9686,11 @@ function load_devices(gobj) {
 			"text-field": "{point_count_abbreviated}",
 			"text-font": ["Noto Sans Regular"],
 			"text-size": 14
+		},
+		paint: {
+			"text-color": "#ffffff",
+			"text-halo-color": "rgba(0,0,0,0.35)",
+			"text-halo-width": 1
 		}
 	});
 	map.addLayer({
@@ -9700,12 +9705,16 @@ function load_devices(gobj) {
 			"text-offset": [0, -2.5],
 			"text-anchor": "top"
 		},
-		paint: { "text-color": [
-			"case",
-			["get", "connected"],
-			"green",
-			"red"
-		] }
+		paint: {
+			"text-color": [
+				"case",
+				["get", "connected"],
+				"#1e7a3c",
+				"#b3243a"
+			],
+			"text-halo-color": "#ffffff",
+			"text-halo-width": 1.4
+		}
 	});
 	map.addLayer({
 		id: "unclustered-point",
@@ -10019,6 +10028,66 @@ function register_c_yui_map() {
 *          All Rights Reserved.
 ***********************************************************************/
 /***************************************************************
+*  The ink of a chart, and its palette.
+*
+*  uPlot is built for a white page: its axis labels are `#000`
+*  and its grid `rgba(0,0,0,0.07)`, which on the dark scheme are
+*  1.16:1 and 1.04 -- an axis nobody can read and a grid that is
+*  not there. And the series were CSS colour names: `blue` is
+*  2.11:1 on the dark ground, `orange` 1.97 on the light one, so
+*  whichever scheme you were in, one of the lines was a rumour.
+*
+*  These are given to uPlot as FUNCTIONS: it calls them when it
+*  draws, so the value can never be stale -- what goes stale is
+*  the canvas, and that is what EV_THEME redraws.
+*
+*  The palette is six colours that clear 3:1 on BOTH grounds
+*  (worst 3.39 on white, 3.71 on near-black), ordered so the
+*  first two are the pair that survives colour blindness -- blue
+*  and orange, never red and green as the opening pair.
+***************************************************************/
+function axis_ink() {
+	return yui_is_dark() ? "#c7cdd8" : "#2e333d";
+}
+function grid_ink() {
+	return yui_is_dark() ? "rgba(199,205,216,0.16)" : "rgba(46,51,61,0.12)";
+}
+var CHART_PALETTE = [
+	{
+		stroke: "#2f6fd0",
+		fill: "rgba(47,111,208,0.10)"
+	},
+	{
+		stroke: "#b8620a",
+		fill: "rgba(184,98,10,0.10)"
+	},
+	{
+		stroke: "#2f8f4e",
+		fill: "rgba(47,143,78,0.10)"
+	},
+	{
+		stroke: "#8b5cf6",
+		fill: "rgba(139,92,246,0.10)"
+	},
+	{
+		stroke: "#0e9aa7",
+		fill: "rgba(14,154,167,0.10)"
+	},
+	{
+		stroke: "#d1344b",
+		fill: "rgba(209,52,75,0.10)"
+	}
+];
+function themed_axes(axes) {
+	return (Array.isArray(axes) ? axes : [axes || {}]).map((ax) => {
+		let a = Object.assign({}, ax || {});
+		if (a.stroke === void 0) a.stroke = axis_ink;
+		a.grid = Object.assign({ stroke: grid_ink }, a.grid || {});
+		a.ticks = Object.assign({ stroke: grid_ink }, a.ticks || {});
+		return a;
+	});
+}
+/***************************************************************
 *              Constants
 ***************************************************************/
 var GCLASS_NAME$14 = "C_YUI_UPLOT";
@@ -10035,24 +10104,7 @@ var attrs_table$14 = [
 	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_JSON, "axes", 0, [{}], "Chart axes"),
 	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_JSON, "scales", 0, {}, "Chart scales"),
 	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_JSON, "data", 0, [[]], "Chart data"),
-	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_JSON, "colors", 0, [
-		{
-			stroke: "red",
-			fill: "rgba(255,0,0,0.05)"
-		},
-		{
-			stroke: "green",
-			fill: "rgba(0,255,0,0.07)"
-		},
-		{
-			stroke: "blue",
-			fill: "rgba(0,0,255,0.05)"
-		},
-		{
-			stroke: "orange",
-			fill: "rgba(255,165,0,0.1)"
-		}
-	], "Color settings"),
+	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_JSON, "colors", 0, CHART_PALETTE, "Series colours, in order. The default palette clears 3:1 on both schemes and opens with the colour-blind-safe pair (blue, orange)"),
 	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_POINTER, "$container", 0, null, "HTML container for the chart"),
 	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_BOOLEAN, "own_container", 0, false, "If true, container is gobj-managed"),
 	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_POINTER, "uplot", 0, null, "uPlot instance"),
@@ -10060,7 +10112,7 @@ var attrs_table$14 = [
 	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_INTEGER, "timeout_idle", 0, 5, "Idle timeout (seconds)"),
 	(0, _yuneta_gobj_js.SDATA_END)()
 ];
-var PRIVATE_DATA$14 = {};
+var PRIVATE_DATA$14 = { theme_observer: null };
 var __gclass__$14 = null;
 /******************************
 *      Framework Methods
@@ -10070,6 +10122,7 @@ var __gclass__$14 = null;
 ***************************************************************/
 function mt_create$14(gobj) {
 	build_ui$13(gobj);
+	gobj.priv.theme_observer = yui_watch_theme(gobj);
 	let subscriber = (0, _yuneta_gobj_js.gobj_read_pointer_attr)(gobj, "subscriber");
 	if (!subscriber) subscriber = (0, _yuneta_gobj_js.gobj_parent)(gobj);
 	(0, _yuneta_gobj_js.gobj_subscribe_event)(gobj, null, {}, subscriber);
@@ -10086,6 +10139,10 @@ function mt_stop$14(gobj) {}
 *          Framework Method: Destroy
 ***************************************************************/
 function mt_destroy$14(gobj) {
+	if (gobj.priv.theme_observer) {
+		gobj.priv.theme_observer.disconnect();
+		gobj.priv.theme_observer = null;
+	}
 	let uplot$1 = (0, _yuneta_gobj_js.gobj_read_attr)(gobj, "uplot");
 	if (uplot$1) {
 		uplot$1.destroy();
@@ -10114,7 +10171,7 @@ function build_ui$13(gobj) {
 		width: (0, _yuneta_gobj_js.gobj_read_attr)(gobj, "width"),
 		height: (0, _yuneta_gobj_js.gobj_read_attr)(gobj, "height"),
 		series: (0, _yuneta_gobj_js.gobj_read_attr)(gobj, "series"),
-		axes: (0, _yuneta_gobj_js.gobj_read_attr)(gobj, "axes"),
+		axes: themed_axes((0, _yuneta_gobj_js.gobj_read_attr)(gobj, "axes")),
 		scales: (0, _yuneta_gobj_js.gobj_read_attr)(gobj, "scales")
 	};
 	let uplot$2 = new uplot.default(uPlot_options, (0, _yuneta_gobj_js.gobj_read_attr)(gobj, "data"), $container);
@@ -10214,29 +10271,40 @@ function ac_add_serie(gobj, event, kw, src) {
 			return -1;
 		}
 	}
-	let color = {
-		stroke: "Orange",
-		fill: "rgb(255, 165, 0, 0.05)"
-	};
 	let colors = (0, _yuneta_gobj_js.gobj_read_attr)(gobj, "colors");
-	if (idx < colors.length) color = colors[idx];
+	if (!Array.isArray(colors) || !colors.length) colors = CHART_PALETTE;
+	let color = colors[Math.max(0, idx - 1) % colors.length];
 	(0, _yuneta_gobj_js.kw_get_str)(gobj, kw, "stroke", color.stroke, _yuneta_gobj_js.kw_flag_t.KW_CREATE);
 	(0, _yuneta_gobj_js.kw_get_str)(gobj, kw, "fill", color.fill, _yuneta_gobj_js.kw_flag_t.KW_CREATE);
 	uplot$4.addSeries(kw);
 	return 0;
 }
 /******************************************************
+*   The scheme changed: the ink functions answer the new
+*   one already, the canvas is what has to be painted again.
+******************************************************/
+function ac_theme$4(gobj, event, kw, src) {
+	let uplot$5 = (0, _yuneta_gobj_js.gobj_read_attr)(gobj, "uplot");
+	if (!uplot$5) return 0;
+	try {
+		uplot$5.redraw();
+	} catch (e) {
+		(0, _yuneta_gobj_js.log_error)(`${(0, _yuneta_gobj_js.gobj_short_name)(gobj)}: cannot redraw the chart: ${e}`);
+	}
+	return 0;
+}
+/******************************************************
 *
 ******************************************************/
 function ac_del_serie(gobj, event, kw, src) {
-	let uplot$5 = (0, _yuneta_gobj_js.gobj_read_attr)(gobj, "uplot");
-	for (let idx = 1; idx < uplot$5.series.length; idx++) {
-		let serie = uplot$5.series[idx];
+	let uplot$6 = (0, _yuneta_gobj_js.gobj_read_attr)(gobj, "uplot");
+	for (let idx = 1; idx < uplot$6.series.length; idx++) {
+		let serie = uplot$6.series[idx];
 		if (serie.id && serie.id === kw.id) {
-			uplot$5.delSeries(idx);
-			let data = uplot$5.data.splice(idx, 1);
+			uplot$6.delSeries(idx);
+			let data = uplot$6.data.splice(idx, 1);
 			if (data.length === 1) data = [[]];
-			uplot$5.setData(data);
+			uplot$6.setData(data);
 			return 0;
 		}
 	}
@@ -10246,9 +10314,9 @@ function ac_del_serie(gobj, event, kw, src) {
 *
 ******************************************************/
 function ac_clear(gobj, event, kw, src) {
-	let uplot$6 = (0, _yuneta_gobj_js.gobj_read_attr)(gobj, "uplot");
-	uplot$6.setData([[]]);
-	for (let idx = uplot$6.series.length - 1; idx > 0; idx--) uplot$6.delSeries(idx);
+	let uplot$7 = (0, _yuneta_gobj_js.gobj_read_attr)(gobj, "uplot");
+	uplot$7.setData([[]]);
+	for (let idx = uplot$7.series.length - 1; idx > 0; idx--) uplot$7.delSeries(idx);
 	return 0;
 }
 /***************************
@@ -10272,7 +10340,8 @@ function create_gclass$14(gclass_name) {
 		["EV_LOAD_DATA", 0],
 		["EV_ADD_SERIE", 0],
 		["EV_DEL_SERIE", 0],
-		["EV_CLEAR", 0]
+		["EV_CLEAR", 0],
+		["EV_THEME", 0]
 	], [["ST_IDLE", [
 		[
 			"EV_LOAD_DATA",
@@ -10293,6 +10362,11 @@ function create_gclass$14(gclass_name) {
 			"EV_CLEAR",
 			ac_clear,
 			null
+		],
+		[
+			"EV_THEME",
+			ac_theme$4,
+			null
 		]
 	]]], gmt$14, 0, attrs_table$14, PRIVATE_DATA$14, 0, 0, 0, 0);
 	if (!__gclass__$14) return -1;

package/dist/gobj-ui.es.js

@@ -9681,6 +9681,11 @@ function load_devices(gobj) {
 			"text-field": "{point_count_abbreviated}",
 			"text-font": ["Noto Sans Regular"],
 			"text-size": 14
+		},
+		paint: {
+			"text-color": "#ffffff",
+			"text-halo-color": "rgba(0,0,0,0.35)",
+			"text-halo-width": 1
 		}
 	});
 	map.addLayer({
@@ -9695,12 +9700,16 @@ function load_devices(gobj) {
 			"text-offset": [0, -2.5],
 			"text-anchor": "top"
 		},
-		paint: { "text-color": [
-			"case",
-			["get", "connected"],
-			"green",
-			"red"
-		] }
+		paint: {
+			"text-color": [
+				"case",
+				["get", "connected"],
+				"#1e7a3c",
+				"#b3243a"
+			],
+			"text-halo-color": "#ffffff",
+			"text-halo-width": 1.4
+		}
 	});
 	map.addLayer({
 		id: "unclustered-point",
@@ -10014,6 +10023,66 @@ function register_c_yui_map() {
 *          All Rights Reserved.
 ***********************************************************************/
 /***************************************************************
+*  The ink of a chart, and its palette.
+*
+*  uPlot is built for a white page: its axis labels are `#000`
+*  and its grid `rgba(0,0,0,0.07)`, which on the dark scheme are
+*  1.16:1 and 1.04 -- an axis nobody can read and a grid that is
+*  not there. And the series were CSS colour names: `blue` is
+*  2.11:1 on the dark ground, `orange` 1.97 on the light one, so
+*  whichever scheme you were in, one of the lines was a rumour.
+*
+*  These are given to uPlot as FUNCTIONS: it calls them when it
+*  draws, so the value can never be stale -- what goes stale is
+*  the canvas, and that is what EV_THEME redraws.
+*
+*  The palette is six colours that clear 3:1 on BOTH grounds
+*  (worst 3.39 on white, 3.71 on near-black), ordered so the
+*  first two are the pair that survives colour blindness -- blue
+*  and orange, never red and green as the opening pair.
+***************************************************************/
+function axis_ink() {
+	return yui_is_dark() ? "#c7cdd8" : "#2e333d";
+}
+function grid_ink() {
+	return yui_is_dark() ? "rgba(199,205,216,0.16)" : "rgba(46,51,61,0.12)";
+}
+var CHART_PALETTE = [
+	{
+		stroke: "#2f6fd0",
+		fill: "rgba(47,111,208,0.10)"
+	},
+	{
+		stroke: "#b8620a",
+		fill: "rgba(184,98,10,0.10)"
+	},
+	{
+		stroke: "#2f8f4e",
+		fill: "rgba(47,143,78,0.10)"
+	},
+	{
+		stroke: "#8b5cf6",
+		fill: "rgba(139,92,246,0.10)"
+	},
+	{
+		stroke: "#0e9aa7",
+		fill: "rgba(14,154,167,0.10)"
+	},
+	{
+		stroke: "#d1344b",
+		fill: "rgba(209,52,75,0.10)"
+	}
+];
+function themed_axes(axes) {
+	return (Array.isArray(axes) ? axes : [axes || {}]).map((ax) => {
+		let a = Object.assign({}, ax || {});
+		if (a.stroke === void 0) a.stroke = axis_ink;
+		a.grid = Object.assign({ stroke: grid_ink }, a.grid || {});
+		a.ticks = Object.assign({ stroke: grid_ink }, a.ticks || {});
+		return a;
+	});
+}
+/***************************************************************
 *              Constants
 ***************************************************************/
 var GCLASS_NAME$14 = "C_YUI_UPLOT";
@@ -10030,24 +10099,7 @@ var attrs_table$14 = [
 	SDATA(data_type_t.DTP_JSON, "axes", 0, [{}], "Chart axes"),
 	SDATA(data_type_t.DTP_JSON, "scales", 0, {}, "Chart scales"),
 	SDATA(data_type_t.DTP_JSON, "data", 0, [[]], "Chart data"),
-	SDATA(data_type_t.DTP_JSON, "colors", 0, [
-		{
-			stroke: "red",
-			fill: "rgba(255,0,0,0.05)"
-		},
-		{
-			stroke: "green",
-			fill: "rgba(0,255,0,0.07)"
-		},
-		{
-			stroke: "blue",
-			fill: "rgba(0,0,255,0.05)"
-		},
-		{
-			stroke: "orange",
-			fill: "rgba(255,165,0,0.1)"
-		}
-	], "Color settings"),
+	SDATA(data_type_t.DTP_JSON, "colors", 0, CHART_PALETTE, "Series colours, in order. The default palette clears 3:1 on both schemes and opens with the colour-blind-safe pair (blue, orange)"),
 	SDATA(data_type_t.DTP_POINTER, "$container", 0, null, "HTML container for the chart"),
 	SDATA(data_type_t.DTP_BOOLEAN, "own_container", 0, false, "If true, container is gobj-managed"),
 	SDATA(data_type_t.DTP_POINTER, "uplot", 0, null, "uPlot instance"),
@@ -10055,7 +10107,7 @@ var attrs_table$14 = [
 	SDATA(data_type_t.DTP_INTEGER, "timeout_idle", 0, 5, "Idle timeout (seconds)"),
 	SDATA_END()
 ];
-var PRIVATE_DATA$14 = {};
+var PRIVATE_DATA$14 = { theme_observer: null };
 var __gclass__$14 = null;
 /******************************
 *      Framework Methods
@@ -10065,6 +10117,7 @@ var __gclass__$14 = null;
 ***************************************************************/
 function mt_create$14(gobj) {
 	build_ui$13(gobj);
+	gobj.priv.theme_observer = yui_watch_theme(gobj);
 	let subscriber = gobj_read_pointer_attr(gobj, "subscriber");
 	if (!subscriber) subscriber = gobj_parent(gobj);
 	gobj_subscribe_event(gobj, null, {}, subscriber);
@@ -10081,6 +10134,10 @@ function mt_stop$14(gobj) {}
 *          Framework Method: Destroy
 ***************************************************************/
 function mt_destroy$14(gobj) {
+	if (gobj.priv.theme_observer) {
+		gobj.priv.theme_observer.disconnect();
+		gobj.priv.theme_observer = null;
+	}
 	let uplot = gobj_read_attr(gobj, "uplot");
 	if (uplot) {
 		uplot.destroy();
@@ -10109,7 +10166,7 @@ function build_ui$13(gobj) {
 		width: gobj_read_attr(gobj, "width"),
 		height: gobj_read_attr(gobj, "height"),
 		series: gobj_read_attr(gobj, "series"),
-		axes: gobj_read_attr(gobj, "axes"),
+		axes: themed_axes(gobj_read_attr(gobj, "axes")),
 		scales: gobj_read_attr(gobj, "scales")
 	};
 	let uplot = new uPlot(uPlot_options, gobj_read_attr(gobj, "data"), $container);
@@ -10209,18 +10266,29 @@ function ac_add_serie(gobj, event, kw, src) {
 			return -1;
 		}
 	}
-	let color = {
-		stroke: "Orange",
-		fill: "rgb(255, 165, 0, 0.05)"
-	};
 	let colors = gobj_read_attr(gobj, "colors");
-	if (idx < colors.length) color = colors[idx];
+	if (!Array.isArray(colors) || !colors.length) colors = CHART_PALETTE;
+	let color = colors[Math.max(0, idx - 1) % colors.length];
 	kw_get_str(gobj, kw, "stroke", color.stroke, kw_flag_t.KW_CREATE);
 	kw_get_str(gobj, kw, "fill", color.fill, kw_flag_t.KW_CREATE);
 	uplot.addSeries(kw);
 	return 0;
 }
 /******************************************************
+*   The scheme changed: the ink functions answer the new
+*   one already, the canvas is what has to be painted again.
+******************************************************/
+function ac_theme$4(gobj, event, kw, src) {
+	let uplot = gobj_read_attr(gobj, "uplot");
+	if (!uplot) return 0;
+	try {
+		uplot.redraw();
+	} catch (e) {
+		log_error(`${gobj_short_name(gobj)}: cannot redraw the chart: ${e}`);
+	}
+	return 0;
+}
+/******************************************************
 *
 ******************************************************/
 function ac_del_serie(gobj, event, kw, src) {
@@ -10267,7 +10335,8 @@ function create_gclass$14(gclass_name) {
 		["EV_LOAD_DATA", 0],
 		["EV_ADD_SERIE", 0],
 		["EV_DEL_SERIE", 0],
-		["EV_CLEAR", 0]
+		["EV_CLEAR", 0],
+		["EV_THEME", 0]
 	], [["ST_IDLE", [
 		[
 			"EV_LOAD_DATA",
@@ -10288,6 +10357,11 @@ function create_gclass$14(gclass_name) {
 			"EV_CLEAR",
 			ac_clear,
 			null
+		],
+		[
+			"EV_THEME",
+			ac_theme$4,
+			null
 		]
 	]]], gmt$14, 0, attrs_table$14, PRIVATE_DATA$14, 0, 0, 0, 0);
 	if (!__gclass__$14) return -1;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yuneta/gobj-ui",
-  "version": "7.23.96",
+  "version": "7.23.97",
   "type": "module",
   "main": "dist/gobj-ui.cjs.js",
   "module": "dist/gobj-ui.es.js",

package/src/c_yui_map.js

@@ -442,6 +442,16 @@ function load_devices(gobj)
             'text-field': '{point_count_abbreviated}',
             'text-font': ['Noto Sans Regular'],
             'text-size': 14
+        },
+        /*  It had no paint at all, which is maplibre's black -- on the
+         *  red circle of a cluster that is 5.25:1 and on the green one
+         *  4.09, both of them a number read at a glance. White with a
+         *  dark halo is 5.14 and 4.0 with the halo behind it, and it is
+         *  the same ink whatever colour the cluster takes.  */
+        paint: {
+            'text-color': '#ffffff',
+            'text-halo-color': 'rgba(0,0,0,0.35)',
+            'text-halo-width': 1
         }
     });
 
@@ -459,11 +469,21 @@ function load_devices(gobj)
             'text-anchor': 'top'
         },
         paint: {
+            /*  A label on a MAP is not text on a page: what is behind it
+             *  is a tile, and a tile is any colour there is. `green` and
+             *  `red` measured 4.48 and 3.48 on the beige of a typical
+             *  street tile -- and over water, forest or an aerial layer
+             *  the number means nothing at all. The colours are the
+             *  stronger pair (4.69 / 5.66 on that beige), and the HALO
+             *  is what actually carries them: it is drawn around every
+             *  glyph, so the label reads on whatever the tile is.  */
             'text-color': [
                 'case',
-                ['get', 'connected'], 'green',
-                'red'
-            ]
+                ['get', 'connected'], '#1e7a3c',
+                '#b3243a'
+            ],
+            'text-halo-color': '#ffffff',
+            'text-halo-width': 1.4
         }
     });
 

package/src/c_yui_uplot.js

@@ -32,6 +32,62 @@ import {
 import uPlot from "uplot";
 import "uplot/dist/uPlot.min.css";
 
+import {yui_is_dark, yui_watch_theme} from "./yui_theme.js";
+
+
+/***************************************************************
+ *  The ink of a chart, and its palette.
+ *
+ *  uPlot is built for a white page: its axis labels are `#000`
+ *  and its grid `rgba(0,0,0,0.07)`, which on the dark scheme are
+ *  1.16:1 and 1.04 -- an axis nobody can read and a grid that is
+ *  not there. And the series were CSS colour names: `blue` is
+ *  2.11:1 on the dark ground, `orange` 1.97 on the light one, so
+ *  whichever scheme you were in, one of the lines was a rumour.
+ *
+ *  These are given to uPlot as FUNCTIONS: it calls them when it
+ *  draws, so the value can never be stale -- what goes stale is
+ *  the canvas, and that is what EV_THEME redraws.
+ *
+ *  The palette is six colours that clear 3:1 on BOTH grounds
+ *  (worst 3.39 on white, 3.71 on near-black), ordered so the
+ *  first two are the pair that survives colour blindness -- blue
+ *  and orange, never red and green as the opening pair.
+ ***************************************************************/
+function axis_ink()
+{
+    return yui_is_dark()? "#c7cdd8" : "#2e333d";
+}
+
+function grid_ink()
+{
+    return yui_is_dark()? "rgba(199,205,216,0.16)" : "rgba(46,51,61,0.12)";
+}
+
+const CHART_PALETTE = [
+    {stroke: "#2f6fd0", fill: "rgba(47,111,208,0.10)"},     /*  4.88 / 3.71  */
+    {stroke: "#b8620a", fill: "rgba(184,98,10,0.10)"},      /*  4.38 / 4.13  */
+    {stroke: "#2f8f4e", fill: "rgba(47,143,78,0.10)"},      /*  4.07 / 4.45  */
+    {stroke: "#8b5cf6", fill: "rgba(139,92,246,0.10)"},     /*  4.23 / 4.28  */
+    {stroke: "#0e9aa7", fill: "rgba(14,154,167,0.10)"},     /*  3.39 / 5.35  */
+    {stroke: "#d1344b", fill: "rgba(209,52,75,0.10)"},      /*  4.88 / 3.71  */
+];
+
+/*  The axes the host asked for, with the ink it did not ask about.  */
+function themed_axes(axes)
+{
+    let list = Array.isArray(axes)? axes : [axes || {}];
+    return list.map((ax) => {
+        let a = Object.assign({}, ax || {});
+        if(a.stroke === undefined) {
+            a.stroke = axis_ink;
+        }
+        a.grid = Object.assign({stroke: grid_ink}, a.grid || {});
+        a.ticks = Object.assign({stroke: grid_ink}, a.ticks || {});
+        return a;
+    });
+}
+
 /***************************************************************
  *              Constants
  ***************************************************************/
@@ -50,12 +106,8 @@ SDATA(data_type_t.DTP_JSON,     "series",           0,  [{}],   "Data series"),
 SDATA(data_type_t.DTP_JSON,     "axes",             0,  [{}],   "Chart axes"),
 SDATA(data_type_t.DTP_JSON,     "scales",           0,  {},     "Chart scales"),
 SDATA(data_type_t.DTP_JSON,     "data",             0,  [[]],   "Chart data"),
-SDATA(data_type_t.DTP_JSON,     "colors",           0,  [
-    {stroke:"red", fill: "rgba(255,0,0,0.05)"},
-    {stroke:"green", fill: "rgba(0,255,0,0.07)"},
-    {stroke:"blue", fill: "rgba(0,0,255,0.05)"},
-    {stroke:"orange", fill: "rgba(255,165,0,0.1)"},
-], "Color settings"),
+SDATA(data_type_t.DTP_JSON,     "colors",           0,  CHART_PALETTE,
+    "Series colours, in order. The default palette clears 3:1 on both schemes and opens with the colour-blind-safe pair (blue, orange)"),
 SDATA(data_type_t.DTP_POINTER,  "$container",       0,  null,   "HTML container for the chart"),
 SDATA(data_type_t.DTP_BOOLEAN,  "own_container",    0,  false,  "If true, container is gobj-managed"),
 SDATA(data_type_t.DTP_POINTER,  "uplot",            0,  null,   "uPlot instance"),
@@ -64,7 +116,9 @@ SDATA(data_type_t.DTP_INTEGER,  "timeout_idle",     0,  5,      "Idle timeout (s
 SDATA_END()
 ];
 
-let PRIVATE_DATA = {};
+let PRIVATE_DATA = {
+    theme_observer: null,   /*  the DOM's data-theme, as an EV_THEME  */
+};
 
 let __gclass__ = null;
 
@@ -85,6 +139,11 @@ function mt_create(gobj)
 {
     build_ui(gobj);
 
+    /*  A canvas does not restyle itself: the ink is read when uPlot
+     *  DRAWS (see axis_ink), so a theme change only has to reach the
+     *  machine and ask for a redraw. Same wiring as the graphs.  */
+    gobj.priv.theme_observer = yui_watch_theme(gobj);
+
     /*
      *  CHILD subscription model
      */
@@ -114,6 +173,10 @@ function mt_stop(gobj)
  ***************************************************************/
 function mt_destroy(gobj)
 {
+    if(gobj.priv.theme_observer) {
+        gobj.priv.theme_observer.disconnect();
+        gobj.priv.theme_observer = null;
+    }
     let uplot = gobj_read_attr(gobj, "uplot");
     if(uplot) {
         uplot.destroy();
@@ -159,7 +222,7 @@ function build_ui(gobj)
         width: gobj_read_attr(gobj, "width"),
         height: gobj_read_attr(gobj, "height"),
         series: gobj_read_attr(gobj, "series"),
-        axes: gobj_read_attr(gobj, "axes"),
+        axes: themed_axes(gobj_read_attr(gobj, "axes")),
         scales: gobj_read_attr(gobj, "scales"),
     };
     let uplot = new uPlot(
@@ -381,11 +444,19 @@ function ac_add_serie(gobj, event, kw, src)
             return -1;
         }
     }
-    let color = {stroke: "Orange", fill: "rgb(255, 165, 0, 0.05)"};
     let colors = gobj_read_attr(gobj, "colors");
-    if(idx<colors.length) {
-        color = colors[idx];
+    if(!Array.isArray(colors) || !colors.length) {
+        colors = CHART_PALETTE;
     }
+    /*  `idx` counts uPlot's series, and series[0] is the X AXIS -- so
+     *  the first line drawn was taking colours[1] and the palette's
+     *  opener, the blue of the colour-blind-safe pair, was never used
+     *  by anybody. The data series are counted from zero here.
+     *
+     *  And it wraps around instead of falling back to one fixed
+     *  colour: the old fallback was `Orange`, 1.97:1 on a white page,
+     *  and it was what every series past the fourth got.  */
+    let color = colors[Math.max(0, idx - 1) % colors.length];
     kw_get_str(gobj, kw, "stroke", color.stroke, kw_flag_t.KW_CREATE);
     kw_get_str(gobj, kw, "fill", color.fill, kw_flag_t.KW_CREATE);
     //kw["paths"] = beziercurve_path; //rectangle_path;
@@ -393,6 +464,24 @@ function ac_add_serie(gobj, event, kw, src)
     return 0;
 }
 
+/******************************************************
+ *   The scheme changed: the ink functions answer the new
+ *   one already, the canvas is what has to be painted again.
+ ******************************************************/
+function ac_theme(gobj, event, kw, src)
+{
+    let uplot = gobj_read_attr(gobj, "uplot");
+    if(!uplot) {
+        return 0;
+    }
+    try {
+        uplot.redraw();
+    } catch(e) {
+        log_error(`${gobj_short_name(gobj)}: cannot redraw the chart: ${e}`);
+    }
+    return 0;
+}
+
 /******************************************************
  *
  ******************************************************/
@@ -466,7 +555,8 @@ function create_gclass(gclass_name)
             ["EV_LOAD_DATA",            ac_load_data,           null],
             ["EV_ADD_SERIE",            ac_add_serie,           null],
             ["EV_DEL_SERIE",            ac_del_serie,           null],
-            ["EV_CLEAR",                ac_clear,               null]
+            ["EV_CLEAR",                ac_clear,               null],
+            ["EV_THEME",                ac_theme,               null]
         ]]
     ];
 
@@ -477,7 +567,8 @@ function create_gclass(gclass_name)
         ["EV_LOAD_DATA",            0],
         ["EV_ADD_SERIE",            0],
         ["EV_DEL_SERIE",            0],
-        ["EV_CLEAR",                0]
+        ["EV_CLEAR",                0],
+        ["EV_THEME",                0]
     ];
 
     __gclass__ = gclass_create(