fix: theme color assignment (#6051)

rilldata · Nov 8, 2024 · ebc928e · ebc928e · github-actions · Nov 8, 2024
1 parent 5c95feb
commit ebc928e
Showing 1 changed file with 8 additions and 1 deletion.
diff --git a/web-common/src/features/themes/actions.ts b/web-common/src/features/themes/actions.ts
@@ -29,9 +29,16 @@ function updateColorVars(
   const palette = generateColorPalette(inputColor);
   // Update CSS variables
   palette.forEach((c, i) => {
+    const hsl = c.css("hsl");
+
+    root.style.setProperty(
+      `--hsl-${colorVarKind}-${TailwindColorSpacing[i]}`,
+      hsl.slice(4, -1).split(",").join(" "),
+    );
+
     root.style.setProperty(
       `--color-${colorVarKind}-${TailwindColorSpacing[i]}`,
-      c.css(),
+      hsl,
     );
   });
 }