Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit fca5b20

Browse files
theme-config
1 parent 56cb6c4 commit fca5b20

File tree

14 files changed

+1435
-2
lines changed

14 files changed

+1435
-2
lines changed

‎README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
> The [shadcn ui kit](https://ui.shadcn.com/) bindings for [react-declarative](https://github.com/react-declarative/react-declarative/)
44
5-
![screenshot](./screenshot.png)
5+
![screencast](./screencast.gif)
66

77
## Getting started
88

‎bun.lockb‎

1.05 KB
Binary file not shown.

‎package.json‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,11 @@
4343
"react-hook-form": "7.54.2",
4444
"tailwind-merge": "2.5.5",
4545
"tailwindcss-animate": "1.0.7",
46-
"zod": "3.24.1"
46+
47+
"zod": "3.24.1",
48+
"remeda": "1.33.0",
49+
"colord": "2.9.3",
50+
"jotai": "2.11.0"
4751
},
4852
"devDependencies": {
4953
"@emotion/react": "11.10.4",

‎screencast.gif‎

1.54 MB
Loading[フレーム]

‎src/assets/RandomTheme.tsx‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import { createTheme, Fab, ThemeProvider } from "@mui/material";
2+
3+
import Casino from "@mui/icons-material/Casino";
4+
import { randomThemeConfig } from "@/assets/random-theme-config";
5+
import { useSetThemeConfig } from "@/hooks/use-theme-config";
6+
7+
const theme = createTheme();
8+
9+
export const RandomTheme = () => {
10+
const setThemeConfig = useSetThemeConfig();
11+
return (
12+
<ThemeProvider theme={theme}>
13+
<Fab
14+
sx={{ position: "fixed", bottom: 16, right: 16 }}
15+
onClick={() =>
16+
setThemeConfig((prevTheme) => {
17+
let newTheme = randomThemeConfig();
18+
while (prevTheme === newTheme) {
19+
newTheme = randomThemeConfig();
20+
}
21+
return newTheme;
22+
})
23+
}
24+
color="primary"
25+
aria-label="add"
26+
>
27+
<Casino />
28+
</Fab>
29+
</ThemeProvider>
30+
);
31+
};
32+
33+
export default RandomTheme;

‎src/assets/ThemeProvider.tsx‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
2+
import { useMemo } from "react";
3+
4+
import { themeToStyles } from "@/assets/theme-to-styles";
5+
import { useThemeConfig, useThemeDark } from "@/hooks/use-theme-config";
6+
7+
// This weird approach is necessary to also style the portaled components
8+
export const ThemeStyleSheet = () => {
9+
const config = useThemeConfig();
10+
const dark = useThemeDark();
11+
12+
const style = useMemo(() => {
13+
14+
if (!config) {
15+
return "";
16+
}
17+
18+
const styles = {
19+
light: themeToStyles(config.light),
20+
dark: themeToStyles(config.dark),
21+
};
22+
23+
const lightStyles = Object.entries(styles.light)
24+
.map(([key, value]) => `${key}: ${value};`)
25+
.join("\n");
26+
27+
const darkStyles = Object.entries(styles.dark)
28+
.map(([key, value]) => `${key}: ${value};`)
29+
.join("\n");
30+
31+
if (dark) {
32+
return `
33+
body {
34+
${darkStyles}
35+
}`;
36+
}
37+
38+
return `
39+
body {
40+
${lightStyles}
41+
}`;
42+
}, [config]);
43+
44+
return <style dangerouslySetInnerHTML={{ __html: style }} />;
45+
};

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /