Dark mode header color

src/common/color/convert-color.ts

@@ -1,10 +1,4 @@
-const expand_hex = (hex: string): string => {
-  let result = "";
-  for (const val of hex) {
-    result += val + val;
-  }
-  return result;
-};
+import { expandHex } from "./hex"
 
 const rgb_hex = (component: number): string => {
   const hex = Math.round(Math.min(Math.max(component, 0), 255)).toString(16);
@@ -14,10 +8,7 @@ const rgb_hex = (component: number): string => {
 // Conversion between HEX and RGB
 
 export const hex2rgb = (hex: string): [number, number, number] => {
-  hex = hex.replace("#", "");
-  if (hex.length === 3 || hex.length === 4) {
-    hex = expand_hex(hex);
-  }
+  hex = expand_hex(hex);
 
   return [
     parseInt(hex.substring(0, 2), 16),

src/common/color/hex.ts

@@ -0,0 +1,23 @@
+export const expandHex = (hex: string): string => {
+  hex = hex.replace("#", "");
+  if (hex.length === 6) return hex;
+  let result = "";
+  for (const val of hex) {
+    result += val + val;
+  }
+  return result;
+};
+
+export const hexBlend = (color_1: string, color_2: string, blend = 50): string => {
+  let color = "";
+  color_1 = expand_hex(color_1);
+  color_2 = expand_hex(color_2);
+  for (let i = 0; i <= 5; i += 2) {
+    const c1 = parseInt(color_1.substr(i, 2), 16);
+    const c2 = parseInt(color_2.substr(i, 2), 16);
+    let hex = Math.floor(c2 + (c1 - c2) * (blend / 100)).toString(16);
+    while (hex.length < 2) hex = "0" + hex;
+    color += hex;
+  }
+  return `#${color}`;
+};

src/common/dom/apply_themes_on_element.ts

@@ -7,6 +7,7 @@ import {
   rgb2hex,
   rgb2lab,
 } from "../color/convert-color";
+import { hexBlend } from "../color/hex";
 import { labBrighten, labDarken } from "../color/lab";
 import { rgbContrast } from "../color/rgb";
 
@@ -37,6 +38,13 @@ export const applyThemesOnElement = (
     if (themeOptions.dark) {
       cacheKey = `${cacheKey}__dark`;
       themeRules = darkStyles;
+      if (themeOptions.primaryColor) {
+        themeRules["app-header-background-color"] = blend(
+          themeOptions.primaryColor,
+          "#111111",
+          15
+        );
+      }
     }
     if (themeOptions.primaryColor) {
       cacheKey = `${cacheKey}__primary_${themeOptions.primaryColor}`;

src/resources/styles.ts

@@ -8,7 +8,7 @@ export const darkStyles = {
   "secondary-text-color": "#9b9b9b",
   "disabled-text-color": "#6f6f6f",
   "app-header-text-color": "#e1e1e1",
-  "app-header-background-color": "#1c1c1c",
+  "app-header-background-color": "#0e2733",
   "switch-unchecked-button-color": "#999999",
   "switch-unchecked-track-color": "#9b9b9b",
   "divider-color": "rgba(225, 225, 225, .12)",