Skip to content

Commit 6023a47

Browse files
mayank1513mayank1513
committed
Add theme buttons
1 parent 8b34c79 commit 6023a47

File tree

5 files changed

+134
-24
lines changed

5 files changed

+134
-24
lines changed

‎packages/shared-ui/src/globals.css‎

Lines changed: 55 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,29 @@
33
}
44

55
:root {
6+
/* colors */
7+
--bg-light: #fff;
8+
--color-light: #000;
9+
--bg-dark: #000;
10+
--color-dark: #fff;
11+
12+
--th1-bg-light: #aaf;
13+
--th1-color-light: #00f;
14+
--th1-bg-dark: #008;
15+
--th1-color-dark: #aaf;
16+
17+
--th2-bg-light: #faa;
18+
--th2-color-light: #f00;
19+
--th2-bg-dark: #800;
20+
--th2-color-dark: #fbb;
21+
22+
/* root style variables */
623
--max-width: 1100px;
724
--border-radius: 12px;
825
--font-mono: ui-monospace, Menlo, Monaco, "Cascadia Mono", "Segoe UI Mono", "Roboto Mono", "Oxygen Mono",
926
"Ubuntu Monospace", "Source Code Pro", "Fira Mono", "Droid Sans Mono", "Courier New", monospace;
10-
--bg-color: #fff;
11-
--text-color: #000;
27+
--bg-color: var(--bg-light);
28+
--text-color: var(--color-light);
1229

1330
--primary-glow: conic-gradient(
1431
from 180deg at 50% 50%,
@@ -28,10 +45,12 @@
2845
}
2946

3047
/* dark themes */
31-
.dark,
32-
.dark ~ * {
33-
--bg-color: #000;
34-
--text-color: #fff;
48+
.th-.dark,
49+
.th-.dark *,
50+
.th-.dark ~ *,
51+
.th-.dark ~ * * {
52+
--bg-color: var(--bg-dark);
53+
--text-color: var(--color-dark);
3554
}
3655

3756
.dark,
@@ -48,10 +67,36 @@
4867

4968
/* light themes */
5069

51-
.light,
52-
.light ~ * {
53-
--bg-color: #fff;
54-
--text-color: #000;
70+
.th-.light,
71+
.th-.light *,
72+
.th-.light ~ *,
73+
.th-.light ~ * * {
74+
--bg-color: var(--bg-light);
75+
--text-color: var(--color-light);
76+
}
77+
78+
.th-theme1.light ~ *,
79+
.th-theme1.light ~ * * {
80+
--bg-color: var(--th1-bg-light);
81+
--text-color: var(--th1-color-light);
82+
}
83+
84+
.th-theme1.dark ~ *,
85+
.th-theme1.dark ~ * * {
86+
--bg-color: var(--th1-bg-dark);
87+
--text-color: var(--th1-color-dark);
88+
}
89+
90+
.th-theme2.light ~ *,
91+
.th-theme2.light ~ * * {
92+
--bg-color: var(--th2-bg-light);
93+
--text-color: var(--th2-color-light);
94+
}
95+
96+
.th-theme2.dark ~ *,
97+
.th-theme2.dark ~ * * {
98+
--bg-color: var(--th2-bg-dark);
99+
--text-color: var(--th2-color-dark);
55100
}
56101

57102
html {

‎packages/shared-ui/src/lib-examples/lib-examples.module.css‎

Lines changed: 51 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,21 +3,65 @@
33
align-items: center;
44
gap: 20px;
55
flex-wrap: wrap;
6+
justify-content: space-evenly;
7+
}
8+
9+
.lib-example-container h1 {
10+
text-align: center;
11+
width: 100%;
612
}
713

814
.example {
9-
min-width: 200px;
10-
min-height: 200px;
11-
flex-grow: 1;
12-
border-radius: 20px;
15+
border-radius: 10px;
16+
box-shadow: 0 0 10px gray;
17+
overflow: hidden;
18+
margin-bottom: 50px;
19+
background: var(--bg-color);
1320
}
1421

1522
.example * {
1623
background: var(--bg-color);
1724
}
1825

26+
.example header {
27+
padding: 10px;
28+
text-align: end;
29+
}
1930

20-
.lib-example-container h1 {
21-
text-align: center;
22-
width: 100%;
31+
.example main {
32+
width: 300px;
33+
height: 100px;
34+
padding: 10px;
35+
}
36+
37+
.themes {
38+
--bg1: var(--bg-dark);
39+
--bg2: var(--bg-light);
40+
list-style-type: none;
41+
padding: 10px;
42+
display: flex;
43+
gap: 10px;
44+
justify-content: space-evenly;
45+
align-items: center;
46+
flex-wrap: wrap;
47+
}
48+
49+
.themes button {
50+
all: reset;
51+
height: 30px;
52+
width: 30px;
53+
border-radius: 5px;
54+
background: linear-gradient(-45deg, var(--bg1), var(--bg1) 45%, var(--bg2) 55%, var(--bg2));
55+
box-shadow: 0 0 10px gray;
56+
cursor: pointer;
57+
}
58+
59+
.theme1 {
60+
--bg1: var(--th1-bg-dark);
61+
--bg2: var(--th1-bg-light);
62+
}
63+
64+
.theme2 {
65+
--bg1: var(--th2-bg-dark);
66+
--bg2: var(--th2-bg-light);
2367
}

‎packages/shared-ui/src/lib-examples/simple-color-switch/index.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ export default function SimpleColorSwitch() {
1111
<header>
1212
<ColorSwitch targetId={targetId} />
1313
</header>
14+
<main>Simple dark/light scopped theme.</main>
1415
</div>
1516
);
1617
}

‎packages/shared-ui/src/lib-examples/theme-switching/index.tsx‎

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
11
import { ColorSwitch, ThemeSwitcher } from "nthul";
22
import { ServerTarget } from "nthul/server";
33
import styles from "../lib-examples.module.css";
4+
import ThemeButton from "./theme-button";
5+
6+
export const targetId = "theme-switching";
7+
const themes = ["", "theme1", "theme2"];
48

5-
const targetId = "theme-switching";
6-
const themes = ["theme1", "theme2"];
79
export default function SimpleColorSwitch() {
810
return (
911
<div className={styles.example}>
@@ -13,13 +15,12 @@ export default function SimpleColorSwitch() {
1315
<ColorSwitch targetId={targetId} />
1416
</header>
1517
<main>
16-
<select name="" id="">
18+
Simple scoped multi-theme.
19+
<ul className={styles.themes}>
1720
{themes.map(th => (
18-
<option value={th} key={th}>
19-
{th}
20-
</option>
21+
<ThemeButton key={th} {...{ targetId, th }} />
2122
))}
22-
</select>
23+
</ul>
2324
</main>
2425
</div>
2526
);

‎packages/shared-ui/src/lib-examples/theme-switching/theme-button.tsx‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
"use client";
2+
3+
import { useTheme } from "nthul/src/hooks";
4+
import styles from "../lib-examples.module.css";
5+
6+
export default function ThemeButton({ th, targetId }: { th: string; targetId: string }) {
7+
const { setTheme } = useTheme(targetId);
8+
return (
9+
<li>
10+
<button
11+
className={styles[th]}
12+
onClick={() => {
13+
setTheme(th);
14+
}}
15+
type="button"
16+
/>
17+
</li>
18+
);
19+
}

0 commit comments

Comments
 (0)