refactor: use a multi-theme plugin for colours

tailwind.config.js

@@ -1,3 +1,73 @@
+let plugin = require("tailwindcss/plugin");
+
+let colors = {
+  black: "#333333",
+  blue: "#334982",
+  grey: "#f3f3f3",
+  orange: "#fdb913",
+  pink: "#e40087",
+  purple: "#782b8f",
+  red: "#dd372f",
+  teal: "#00857d",
+  white: "#fff",
+};
+
+let themes = {
+  blue: {
+    quaternary: colors.red,
+    quinary: colors.red,
+    primary: colors.blue,
+    secondary: colors.red,
+    tertiary: colors.white,
+  },
+
+  purple: {
+    quaternary: colors.white,
+    quinary: colors.purple,
+    primary: colors.purple,
+    secondary: colors.orange,
+    tertiary: colors.purple,
+  },
+
+  teal: {
+    quaternary: colors.pink,
+    quinary: colors.pink,
+    primary: colors.teal,
+    secondary: colors.pink,
+    tertiary: colors.white,
+  },
+};
+
+let multiThemePlugin = plugin(function ({ addBase }) {
+  addBase(generateForRoot());
+
+  Object.keys(themes).forEach((themeName) => {
+    addBase(generateForTheme(themeName));
+  });
+});
+
+function generateForRoot() {
+  let defaultThemeName = Object.keys(themes)[0];
+
+  return Object.entries(themes[defaultThemeName]).map(([colourName, value]) => {
+    return {
+      ":root": {
+        [`--color-${colourName}`]: value,
+      },
+    };
+  });
+}
+
+function generateForTheme(themeName) {
+  return Object.entries(themes[themeName]).map(([colourName, value]) => {
+    return {
+      [`[data-theme=${themeName}]`]: {
+        [`--color-${colourName}`]: value,
+      },
+    };
+  });
+}
+
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   content: [
@@ -6,17 +76,14 @@ module.exports = {
   ],
   theme: {
     colors: {
-      black: "#333333",
-      blue: "#334982",
-      grey: "#f3f3f3",
-      orange: "#fdb913",
-      pink: "#e40087",
-      purple: "#782b8f",
-      red: "#dd372f",
-      teal: "#00857d",
-      white: "#fff",
+      ...colors,
+
+      quaternary: "var(--color-quaternary)",
+      quinary: "var(--color-quinary)",
+      primary: "var(--color-primary)",
+      secondary: "var(--color-secondary)",
+      tertiary: "var(--color-tertiary)",
     },
-    extend: {},
   },
-  plugins: [],
+  plugins: [multiThemePlugin],
 };