improve light/dark mode colors for better contrast

src/kiri/consts.js

@@ -9,14 +9,14 @@ const COLOR = {
     wireframe_opacity: 0.25,
     selected: [ 0xbbff00, 0xbbee00, 0xbbdd00, 0xbb9900 ],
     deselected: [ 0xffff00, 0xffdd00, 0xffbb00, 0xff9900 ],
-    slicing: 0xffaaaa,
-    preview_opacity: 0.0,
     model_opacity: 1.0,
+    preview_opacity: 0.0,
+    slicing: 0xffaaaa,
     slicing_opacity: 0.5,
     sliced_opacity: 0.0,
-    cam_preview: 0x0055bb,
+    cam_preview: 0x888888,
-    cam_preview_opacity: 0.25,
+    cam_preview_opacity: 0.2,
-    cam_sliced_opacity: 0.25
+    cam_sliced_opacity: 0.2
 };
 
 const LISTS = {

src/kiri/render.js

@@ -9,6 +9,7 @@ gapp.register("kiri.render", [], (root, exports) => {
 
 const { base, kiri } = root;
 const { config, util, newPolygon } = base;
+const hsV = 0.9;
 
 exports({
     path,
@@ -16,14 +17,24 @@ exports({
     rate_to_color
 });
 
+function is_cam() {
+    return root.worker.print.settings.mode === 'CAM';
+}
+
 function is_dark() {
     return root.worker.print.settings.controller.dark ? true : false;
 };
 
 function rate_to_color(rate, max) {
-    return is_dark() ?
+    if (is_cam()) {
-        darkColorFunction(rate/max, 1, 0.85) :
+        return is_dark() ?
-        currentColorFunction(rate/max, 1, 0.85);
+            darkColorFunctionCAM(rate/max, 1, hsV) :
+            lightColorFunctionCAM(rate/max, 1, hsV);
+    } else {
+        return is_dark() ?
+            darkColorFunction(rate/max, 1, hsV) :
+            lightColorFunction(rate/max, 1, hsV);
+    }
 };
 
 function path(levels, update, opts = {}) {
@@ -253,13 +264,18 @@ function path(levels, update, opts = {}) {
 }
 
 const colorFunctions = {
-    default: hsv2rgb.bind({ seg: 4, fn: color4d }),
     simple: hsv2rgb.bind({ seg: 3, fn: color4 }),
-    dark: hsv2rgb.bind({ seg: 4, fn: color4d })
+    light: hsv2rgb.bind({ seg: 4, fn: color4light }),
+    light2: hsv2rgb.bind({ seg: 4, fn: color4light2 }),
+    light_cam: hsv2rgb.bind({ seg: 2, fn: color4light }),
+    dark: hsv2rgb.bind({ seg: 4, fn: color4dark }),
+    dark_cam: hsv2rgb.bind({ seg: 2, fn: color4dark })
 };
 
-let currentColorFunction = colorFunctions.default;
+let lightColorFunction = colorFunctions.light2;
 let darkColorFunction = colorFunctions.dark;
+let lightColorFunctionCAM = colorFunctions.light_cam;
+let darkColorFunctionCAM = colorFunctions.dark_cam;
 
 // hsv values all = 0 to 1
 function hsv2rgb(h, s, v) {
@@ -308,7 +324,69 @@ function color5(rgb, inc, seg) {
     }
 }
 
-function color4d(rgb, inc, seg) {
+function color4light(rgb, inc, seg) {
+    const dec = 1 - inc;
+    switch (seg) {
+        case 0:
+            rgb.r = 0.8;
+            rgb.g = inc * 0.75;
+            rgb.b = 0;
+            break;
+        case 1:
+            rgb.r = dec * 0.8;
+            rgb.g = 0.75;
+            rgb.b = 0;
+            break;
+        case 2:
+            rgb.r = 0;
+            rgb.g = dec * 0.75;
+            rgb.b = inc;
+            break;
+        case 3:
+            rgb.r = inc * 0.75;
+            rgb.g = 0;
+            rgb.b = 1;
+            break;
+        case 4:
+            rgb.r = 0.85;
+            rgb.g = 0;
+            rgb.b = 1;
+            break;
+    }
+}
+
+function color4light2(rgb, inc, seg) {
+    const dec = 1 - inc;
+    switch (seg) {
+        case 0:
+            rgb.r = 0.9;
+            rgb.g = inc * 0.9;
+            rgb.b = 0;
+            break;
+        case 1:
+            rgb.r = dec * 0.9;
+            rgb.g = 0.8;
+            rgb.b = 0;
+            break;
+        case 2:
+            rgb.r = 0;
+            rgb.g = dec * 0.8;
+            rgb.b = inc;
+            break;
+        case 3:
+            rgb.r = inc * 0.9;
+            rgb.g = 0;
+            rgb.b = 1;
+            break;
+        case 4:
+            rgb.r = 0.9;
+            rgb.g = 0;
+            rgb.b = 1;
+            break;
+    }
+}
+
+function color4dark(rgb, inc, seg) {
     const dec = 1 - inc;
     switch (seg) {
         case 0:
@@ -323,23 +401,22 @@ function color4d(rgb, inc, seg) {
             break;
         case 2:
             rgb.r = 0;
-            rgb.g = dec;
+            rgb.g = dec * 0.85 + 0.25;
             rgb.b = inc;
             break;
         case 3:
             rgb.r = inc * 0.85;
-            rgb.g = 0;
+            rgb.g = 0.25;
             rgb.b = 1;
             break;
         case 4:
             rgb.r = 0.85;
-            rgb.g = 0;
+            rgb.g = 0.25;
             rgb.b = 1;
             break;
     }
 }
 
-
 function color4(rgb, inc, seg) {
     const dec = 1 - inc;
     switch (seg) {

web/kiri/index.css

@@ -1598,6 +1598,9 @@ th, tr, td, label {
     bottom: 3px;
     background-color: transparent;
 }
+.dark #speedbar label {
+    color: black;
+}
 #speedbar label {
     flex-grow: 1;
     text-align: center;