feat: use media queries

src/charts/chart_flow.ts

@@ -12,22 +12,21 @@ export function helper(srcPath: string, dstPath: string) {
 			gapHeight: 40,
 		});
 
-		let steps: { color: string, text: string, highlight: boolean, end?: boolean }[] = [
-			{ color: 'hsla(  0, 100%, 50%, 0.5)', text: 'Data', highlight: false, end: true },
-			{ color: 'hsla( 10, 100%, 50%, 1.0)', text: 'Generator', highlight: true },
-			{ color: 'hsla( 30, 100%, 50%, 0.5)', text: '.versatiles', highlight: false },
-			{ color: 'hsla( 50, 100%, 50%, 1.0)', text: 'Server', highlight: true },
-			{ color: 'hsla( 80, 100%, 50%, 0.5)', text: 'HTTP', highlight: false },
-			{ color: 'hsla(120, 100%, 50%, 1.0)', text: 'Network', highlight: true },
-			{ color: 'hsla(150, 100%, 50%, 0.5)', text: 'HTTPS', highlight: false },
-			{ color: 'hsla(200, 100%, 50%, 1.0)', text: 'Frontend', highlight: true },
-			{ color: 'hsla(230, 100%, 50%, 0.5)', text: 'User', highlight: false, end: true },
+		let steps: { hue: number, opacity: number, text: string, highlight: boolean, end?: boolean }[] = [
+			{ hue: 0, opacity: 0.5, text: 'Data', highlight: false, end: true },
+			{ hue: 10, opacity: 1.0, text: 'Generator', highlight: true },
+			{ hue: 30, opacity: 0.5, text: '.versatiles', highlight: false },
+			{ hue: 50, opacity: 1.0, text: 'Server', highlight: true },
+			{ hue: 80, opacity: 0.5, text: 'HTTP', highlight: false },
+			{ hue: 120, opacity: 1.0, text: 'Network', highlight: true },
+			{ hue: 150, opacity: 0.5, text: 'HTTPS', highlight: false },
+			{ hue: 200, opacity: 1.0, text: 'Frontend', highlight: true },
+			{ hue: 230, opacity: 0.5, text: 'User', highlight: false, end: true },
 		];
 
 		let f = c.addFlow();
 		if (typeof index === 'number') steps = [steps[index]]
-		steps.forEach(s => f.add(s.text, s.color, s.highlight, s.end));
-		console.log(c.asSVG(2));
+		steps.forEach(s => f.add(s.text, s.hue, s.opacity, s.highlight, s.end));
 
 		return c.asImg(2);
 	}

src/charts/lib/canvas.ts

@@ -6,7 +6,7 @@ export type RectType = [number, number, number, number];
 export type PointType = [number, number];
 
 type Style = Partial<CSSStyleDeclaration>;
-type MultiColor = string | [string, string];
+export type MultiColor = string | [string, string];
 interface MultiStyle {
 	fontFamily?: string;
 	fontSize?: string;
@@ -164,7 +164,9 @@ export class Canvas {
 		svg.insertAdjacentHTML('afterbegin', [
 			'<style>',
 			this.styles.light.asText(),
+			'@media (prefers-color-scheme: dark) {',
 			this.styles.dark.asText(),
+			'}',
 			'</style>'
 		].join('\n'));
 		svg.append(root.node);

src/charts/lib/chart.ts

@@ -1,5 +1,5 @@
 
-import { Canvas, Group, RectType } from './canvas.ts';
+import { Canvas, Group, MultiColor, RectType } from './canvas.ts';
 import Color from 'color';
 
 const fontFamily = 'sans-serif';
@@ -55,8 +55,10 @@ export class Chart {
 
 		this.y0 += this.boxHeight;
 
-		const add = (text: string, colorString: string, highlight: boolean = false, end: boolean = false) => {
-			const color = Color(colorString).rgb();
+		const add = (text: string, hue: number, alpha: number, highlight: boolean = false, end: boolean = false) => {
+			const colorLight = Color([hue, 100, 40, alpha], 'hsl').toString();
+			const colorDark = Color([hue, 100, 60, alpha], 'hsl').toString();
+			const color: MultiColor = [colorLight, colorDark];
 
 			let width = end
 				? this.colStart - this.colWidth / 4 - this.boxHeight / 4
@@ -66,14 +68,14 @@ export class Chart {
 
 			this.layers.fill.drawFlowBox(rect, {
 				fillOpacity: '0.4',
-				fill: [color.string(), color.string()],
+				fill: color,
 			});
 
 			if (highlight) {
 				this.layers.line.drawFlowBox(rect, {
 					fill: 'none',
 					strokeWidth: '2px',
-					stroke: [color.string(), color.string()],
+					stroke: color,
 				});
 			}
 
@@ -83,7 +85,7 @@ export class Chart {
 				fontFamily,
 				fontSize: '16px',
 				stroke: 'none',
-				fill: [color.string(), color.string()],
+				fill: color,
 			});
 
 			x0 += width;