theme-config

Author: tripolskypetr

README.md

@@ -2,7 +2,7 @@
 
 > The [shadcn ui kit](https://ui.shadcn.com/) bindings for [react-declarative](https://github.com/react-declarative/react-declarative/) 
 
-![screenshot](./screenshot.png)
+![screencast](./screencast.gif)
 
 ## Getting started
 

bun.lockb

@@ -43,7 +43,11 @@
     "react-hook-form": "7.54.2",
     "tailwind-merge": "2.5.5",
     "tailwindcss-animate": "1.0.7",
-    "zod": "3.24.1"
+
+    "zod": "3.24.1",
+    "remeda": "1.33.0",
+    "colord": "2.9.3",
+    "jotai": "2.11.0"
   },
   "devDependencies": {
     "@emotion/react": "11.10.4",

package.json

@@ -0,0 +1,33 @@
+import { createTheme, Fab, ThemeProvider } from "@mui/material";
+
+import Casino from "@mui/icons-material/Casino";
+import { randomThemeConfig } from "@/assets/random-theme-config";
+import { useSetThemeConfig } from "@/hooks/use-theme-config";
+
+const theme = createTheme();
+
+export const RandomTheme = () => {
+  const setThemeConfig = useSetThemeConfig();
+  return (
+    <ThemeProvider theme={theme}>
+      <Fab
+        sx={{ position: "fixed", bottom: 16, right: 16 }}
+        onClick={() =>
+          setThemeConfig((prevTheme) => {
+            let newTheme = randomThemeConfig();
+            while (prevTheme === newTheme) {
+              newTheme = randomThemeConfig();
+            }
+            return newTheme;
+          })
+        }
+        color="primary"
+        aria-label="add"
+      >
+        <Casino />
+      </Fab>
+    </ThemeProvider>
+  );
+};
+
+export default RandomTheme;

screencast.gif

@@ -0,0 +1,45 @@
+
+import { useMemo } from "react";
+
+import { themeToStyles } from "@/assets/theme-to-styles";
+import { useThemeConfig, useThemeDark } from "@/hooks/use-theme-config";
+
+// This weird approach is necessary to also style the portaled components
+export const ThemeStyleSheet = () => {
+  const config = useThemeConfig();
+  const dark = useThemeDark();
+
+  const style = useMemo(() => {
+
+    if (!config) {
+        return "";
+    }
+
+    const styles = {
+      light: themeToStyles(config.light),
+      dark: themeToStyles(config.dark),
+    };
+
+    const lightStyles = Object.entries(styles.light)
+      .map(([key, value]) => `${key}: ${value};`)
+      .join("\n");
+
+    const darkStyles = Object.entries(styles.dark)
+      .map(([key, value]) => `${key}: ${value};`)
+      .join("\n");
+
+    if (dark) {
+        return `
+        body {
+          ${darkStyles}
+        }`;
+    }
+
+    return `
+    body {
+      ${lightStyles}
+    }`;
+  }, [config]);
+
+  return <style dangerouslySetInnerHTML={{ __html: style }} />;
+};

src/assets/RandomTheme.tsx

@@ -0,0 +1,9 @@
+import { type Hsl } from "@/assets/theme-config";
+
+export const hslToVariableValue = (hsl: Hsl) => {
+  return `${hsl.h} ${hsl.s}% ${hsl.l}%`;
+};
+
+export const hslToCssValue = (hsl: Hsl) => {
+  return `hsl(${hslToVariableValue(hsl)})`;
+};

src/assets/ThemeProvider.tsx

@@ -0,0 +1,4 @@
+import themes from "@/assets/themes";
+import { ThemeConfig } from "./theme-config";
+
+export const randomThemeConfig = () => themes[Math.floor(Math.random() * themes.length)] as unknown as ThemeConfig;

src/assets/create-theme-config.ts

@@ -0,0 +1,59 @@
+import { z } from "zod";
+
+const HslSchema = z.object({
+  h: z.number(),
+  s: z.number(),
+  l: z.number(),
+});
+
+export type Hsl = z.infer<typeof HslSchema>;
+
+export const chartKeys = [
+  "chart-1",
+  "chart-2",
+  "chart-3",
+  "chart-4",
+  "chart-5",
+] as const;
+
+export type ChartKeys = (typeof chartKeys)[number];
+
+const chartSchemas = chartKeys.reduce(
+  (acc, key) => {
+    acc[key] = HslSchema;
+    return acc;
+  },
+  {} as Record<ChartKeys, typeof HslSchema>,
+);
+
+export const ThemeSchema = z.object({
+  background: HslSchema,
+  foreground: HslSchema,
+  card: HslSchema,
+  cardForeground: HslSchema,
+  popover: HslSchema,
+  popoverForeground: HslSchema,
+  primary: HslSchema,
+  primaryForeground: HslSchema,
+  secondary: HslSchema,
+  secondaryForeground: HslSchema,
+  muted: HslSchema,
+  mutedForeground: HslSchema,
+  accent: HslSchema,
+  accentForeground: HslSchema,
+  destructive: HslSchema,
+  destructiveForeground: HslSchema,
+  border: HslSchema,
+  input: HslSchema,
+  ring: HslSchema,
+  ...chartSchemas,
+});
+
+export type Theme = z.infer<typeof ThemeSchema>;
+
+export const ThemeConfigSchema = z.object({
+  light: ThemeSchema,
+  dark: ThemeSchema,
+});
+
+export type ThemeConfig = z.infer<typeof ThemeConfigSchema>;

src/assets/hsl-to-variable-value.ts

@@ -0,0 +1,132 @@
+import { hslToVariableValue } from "@/assets/hsl-to-variable-value";
+import { backfillCharts } from "@/assets/create-theme-config";
+import { chartKeys, type Hsl, type Theme } from "@/assets/theme-config";
+
+import { fromPairs, invert, keys } from "remeda";
+
+const variables: Record<keyof Theme, string> = {
+  background: "background",
+  foreground: "foreground",
+  muted: "muted",
+  mutedForeground: "muted-foreground",
+  popover: "popover",
+  popoverForeground: "popover-foreground",
+  card: "card",
+  cardForeground: "card-foreground",
+  border: "border",
+  input: "input",
+  primary: "primary",
+  primaryForeground: "primary-foreground",
+  secondary: "secondary",
+  secondaryForeground: "secondary-foreground",
+  accent: "accent",
+  accentForeground: "accent-foreground",
+  destructive: "destructive",
+  destructiveForeground: "destructive-foreground",
+  ring: "ring",
+  "chart-1": "chart-1",
+  "chart-2": "chart-2",
+  "chart-3": "chart-3",
+  "chart-4": "chart-4",
+  "chart-5": "chart-5",
+};
+
+export const themeToStyles = (theme: Theme) => {
+  const order = keys.strict(variables);
+
+  const themeWithCharts = backfillCharts(theme, [...chartKeys]);
+
+  const ordered = order.map((key) => {
+    return [
+      `--${variables[key]}`,
+      hslToVariableValue(themeWithCharts[key]),
+    ] as const;
+  });
+
+  return fromPairs.strict(ordered);
+};
+
+export const cssToTheme = (styles: string) => {
+  const lines = styles.split("\n");
+
+  const invertedVariables = invert(variables);
+
+  const lightThemeEntries: Array<[keyof Theme, Hsl]> = [];
+  const darkThemeEntries: Array<[keyof Theme, Hsl]> = [];
+
+  let errors = 0;
+
+  let isDark = false;
+
+  for (const line of lines) {
+    if (line.includes(".dark")) {
+      isDark = true;
+    }
+
+    if (line.includes("}")) {
+      isDark = false;
+    }
+
+    const trimmed = line.trim();
+
+    if (trimmed.startsWith("--")) {
+      const [variable, value] = trimmed.split(":");
+
+      if (!variable) {
+        errors++;
+        continue;
+      }
+
+      const themeKey = invertedVariables[variable.replace("--", "")];
+
+      if (!themeKey) continue;
+
+      if (!value) {
+        errors++;
+        continue;
+      }
+
+      const hsl = value.trim().replace(";", "").replaceAll("%", "").split(" ");
+
+      if (hsl.length !== 3) {
+        errors++;
+        continue;
+      }
+
+      const [h, s, l] = hsl;
+
+      if (!h || !s || !l) {
+        errors++;
+        continue;
+      }
+
+      const hAsNumber = Number(h);
+      const sAsNumber = Number(s);
+      const lAsNumber = Number(l);
+
+      if (isNaN(hAsNumber) || isNaN(sAsNumber) || isNaN(lAsNumber)) {
+        errors++;
+        continue;
+      }
+
+      const hslColor: Hsl = {
+        h: hAsNumber,
+        s: sAsNumber,
+        l: lAsNumber,
+      };
+
+      if (isDark) {
+        darkThemeEntries.push([themeKey, hslColor]);
+        continue;
+      }
+
+      lightThemeEntries.push([themeKey, hslColor]);
+    }
+  }
+
+  return {
+    light: fromPairs.strict(lightThemeEntries),
+    dark: fromPairs.strict(darkThemeEntries),
+    errors,
+  };
+};

src/assets/random-theme-config.ts

@@ -0,0 +1,36 @@
+"use client";
+
+import { type ThemeConfig } from "@/assets/theme-config";
+
+import { atom, useAtomValue, useSetAtom } from "jotai";
+
+export const themeConfigAtom = atom<ThemeConfig>(null as unknown as ThemeConfig);
+
+export const themeDarkAtom = atom<boolean>(false);
+
+export const useThemeConfig = () => {
+  return useAtomValue(themeConfigAtom);
+};
+
+export const useThemeDark = () => {
+    return useAtomValue(themeDarkAtom);
+};
+
+export const useSetThemeConfig = () => {
+  const setThemeConfig = useSetAtom(themeConfigAtom);
+  const setThemeDark = useSetAtom(themeDarkAtom);
+
+  const set = (
+    value: ThemeConfig | ((v: ThemeConfig) => ThemeConfig),
+  ) => {
+    setThemeConfig(value);
+    setThemeDark((dark) => !dark);
+  };
+
+  return set;
+};
+
+export const useActiveTheme = () => {
+  const config = useThemeConfig();
+  return config["light"];
+};

src/assets/theme-config.ts

@@ -3,12 +3,16 @@ import App from "./App";
 import "./index.css";
 import { ModalManagerProvider, ModalProvider } from "react-declarative";
 import { SlotFactory } from "./components/SlotFactory";
+import { ThemeStyleSheet } from "./assets/ThemeProvider";
+import RandomTheme from "./assets/RandomTheme";
 
 ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
   <SlotFactory>
     <ModalProvider>
       <ModalManagerProvider>
+        <ThemeStyleSheet />
         <App />
+        <RandomTheme />
       </ModalManagerProvider>
     </ModalProvider>
   </SlotFactory>