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 }} />;
+};