feat(frontend): use theme color based on color scheme

paulrobertlloyd · paulrobertlloyd · commit c66b7a39cf0a · 2024-04-14T20:46:57.000+01:00
diff --git a/packages/frontend/layouts/default.njk b/packages/frontend/layouts/default.njk
@@ -54,6 +54,8 @@
   <link rel="manifest" href="{{ application.url }}/app.webmanifest">
 
   <meta name="supported-color-schemes" content="light dark">
+  <meta name="theme-color" content="{{ themeColor(application.themeColor) }}" media="(prefers-color-scheme: light)">
+  <meta name="theme-color" content="{{ themeColor(application.themeColor, "dark") }}" media="(prefers-color-scheme: dark)">
 </head>
 
 <body class="{{ appClasses }}">
diff --git a/packages/frontend/lib/globals/index.js b/packages/frontend/lib/globals/index.js
@@ -5,4 +5,4 @@ export { fieldData } from "./field-data.js";
 export { icon } from "./icon.js";
 export { itemId } from "./item-id.js";
 export { summaryRows } from "./summary-rows.js";
-export { themeCustomProperties } from "./theme.js";
+export { backgroundColor, themeColor, themeCustomProperties } from "./theme.js";
diff --git a/packages/frontend/lib/globals/theme.js b/packages/frontend/lib/globals/theme.js
@@ -38,6 +38,39 @@ export const _getValidatedColor = ({
   return newColor;
 };
 
+/**
+ * Return background color
+ * @param {string} string - Color (as hexadecimal)
+ * @param {string} colorScheme - Color scheme
+ * @returns {string} CSS color value (HSL)
+ */
+export const backgroundColor = (string, colorScheme = "light") => {
+  const primary = new Color(string).hsl().round();
+
+  return new Color({
+    h: primary.hue(),
+    s: 5,
+    l: colorScheme === "light" ? 99 : 10,
+  })
+    .hsl()
+    .toString();
+};
+
+/**
+ * Return theme color
+ * @param {string} string - Color (as hexadecimal)
+ * @param {string} colorScheme - Color scheme
+ * @returns {string} CSS color value (HSL)
+ */
+export const themeColor = (string, colorScheme = "light") => {
+  const primary = new Color(string).hsl().round();
+  const h = primary.hue();
+  const s = 5;
+  const l = colorScheme === "light" ? 95 : 20;
+
+  return new Color({ h, s, l }).hsl().toString();
+};
+
 /**
  * Return theme color as CSS custom properties
  * @param {string} string - Color (as hexadecimal)
@@ -49,8 +82,8 @@ export const themeCustomProperties = (string) => {
   const primarySaturation = 5;
 
   // Calculate neutral lightest and darkest hues used in custom properties
-  const neutral99 = new Color({ h: primaryHue, s: primarySaturation, l: 99 });
-  const neutral10 = new Color({ h: primaryHue, s: primarySaturation, l: 10 });
+  const neutral99 = new Color(backgroundColor(string));
+  const neutral10 = new Color(backgroundColor(string, "dark"));
 
   // Generate a darker variant of primary colour
   const primaryVariant = primary.darken(0.15).desaturate(0.1);
diff --git a/packages/frontend/test/unit/globals/theme.js b/packages/frontend/test/unit/globals/theme.js
@@ -3,6 +3,8 @@ import { describe, it } from "node:test";
 import Color from "color";
 import {
   _getValidatedColor,
+  backgroundColor,
+  themeColor,
   themeCustomProperties,
 } from "../../../lib/globals/theme.js";
 
@@ -16,6 +18,16 @@ describe("frontend/lib/globals/icon", () => {
     assert.equal(result.hex(), "#800080");
   });
 
+  it("Returns background color as HSL", () => {
+    assert.equal(backgroundColor("#f00"), "hsl(0, 5%, 99%)");
+    assert.equal(backgroundColor("#f00", "dark"), "hsl(0, 5%, 10%)");
+  });
+
+  it("Returns theme color as HSL", () => {
+    assert.equal(themeColor("#f00"), "hsl(0, 5%, 95%)");
+    assert.equal(themeColor("#f00", "dark"), "hsl(0, 5%, 20%)");
+  });
+
   it("Returns theme color as CSS custom properties", () => {
     assert.equal(
       themeCustomProperties("#f00"),
