diff --git a/packages/frontend/layouts/default.njk b/packages/frontend/layouts/default.njk
index 6c26c2cc0..b3afd9f4e 100644
--- a/packages/frontend/layouts/default.njk
+++ b/packages/frontend/layouts/default.njk
@@ -54,6 +54,8 @@
+
+
diff --git a/packages/frontend/lib/globals/index.js b/packages/frontend/lib/globals/index.js
index da3303c0c..b59af4fdf 100644
--- 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 { themeColor, themeCustomProperties } from "./theme.js";
diff --git a/packages/frontend/lib/globals/theme.js b/packages/frontend/lib/globals/theme.js
index 925fd6459..8e866adeb 100644
--- a/packages/frontend/lib/globals/theme.js
+++ b/packages/frontend/lib/globals/theme.js
@@ -38,6 +38,21 @@ export const _getValidatedColor = ({
return newColor;
};
+/**
+ * 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" ? 99 : 10;
+
+ return new Color({ h, s, l }).hsl().toString();
+};
+
/**
* Return theme color as CSS custom properties
* @param {string} string - Color (as hexadecimal)
@@ -49,8 +64,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(themeColor(string));
+ const neutral10 = new Color(themeColor(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
index a1abec90d..9850b9a57 100644
--- a/packages/frontend/test/unit/globals/theme.js
+++ b/packages/frontend/test/unit/globals/theme.js
@@ -3,6 +3,7 @@ import { describe, it } from "node:test";
import Color from "color";
import {
_getValidatedColor,
+ themeColor,
themeCustomProperties,
} from "../../../lib/globals/theme.js";
@@ -16,6 +17,11 @@ describe("frontend/lib/globals/icon", () => {
assert.equal(result.hex(), "#800080");
});
+ it("Returns theme color as HSL", () => {
+ assert.equal(themeColor("#f00"), "hsl(0, 5%, 99%)");
+ assert.equal(themeColor("#f00", "dark"), "hsl(0, 5%, 10%)");
+ });
+
it("Returns theme color as CSS custom properties", () => {
assert.equal(
themeCustomProperties("#f00"),