Skip to content

Commit 81348fc

Browse files
TorstenDittmannTorstenDittmann
authored
Merge pull request #7 from TorstenDittmann/feat-theme-refactor
Refactor theming to use CSS color-scheme
2 parents 4094c7b + e402f87 commit 81348fc

File tree

7 files changed

+72
-38
lines changed

7 files changed

+72
-38
lines changed

‎apps/docs/docs.html‎

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -131,6 +131,14 @@ <h6>Heading 6</h6>
131131
</figcaption>
132132
</figure>
133133
</section>
134+
<section>
135+
<div role="tablist">
136+
<button role="tab" aria-selected="true">Tab 1</button>
137+
<button role="tab">Tab 2</button>
138+
<button role="tab">Tab 3</button>
139+
<button role="tab">Tab 4</button>
140+
</div>
141+
</section>
134142
<section>
135143
<div role="grid">
136144
<div>Grid 1</div>
@@ -274,7 +282,13 @@ <h2>Form elements</h2>
274282
Switch
275283
</label>
276284
</fieldset>
277-
<button type="reset" class="secondary">Reset</button>
285+
<button type="button" aria-label="cancel action">
286+
Cancel button
287+
</button>
288+
<button type="button" aria-label="delete resource">
289+
Danger button
290+
</button>
291+
<button type="reset">Reset</button>
278292
<button type="submit" onclick="event.preventDefault()">
279293
Submit
280294
</button>

‎apps/docs/install.html‎

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -31,19 +31,18 @@ <h3>Basic Setup</h3>
3131
<section id="themes-layouts">
3232
<h2>Themes</h2>
3333
<p>
34-
launch.css supports light and dark themes with seamless switching:
34+
launch.css supports light and dark themes with seamless switching
35+
using <code>color-scheme</code> css properties:
3536
</p>
3637

3738
<div>
38-
<button data-theme-switcher="light">Light</button>
39-
<button data-theme-switcher="dark">Dark</button>
39+
<button data-theme-switcher="only light">Light</button>
40+
<button data-theme-switcher="only dark">Dark</button>
4041
</div>
4142

4243
<h4>Theme Switching Code</h4>
43-
<pre
44-
><code class="language-html">&lt;html data-theme="dark"&gt;</code></pre>
45-
<pre
46-
><code class="language-html">&lt;html data-theme="light"&gt;</code></pre>
44+
<pre><code class="language-css">color-scheme: only dark;</code></pre>
45+
<pre><code class="language-css">color-scheme: only light;</code></pre>
4746
</section>
4847
</main>
4948
{{/base}}

‎apps/docs/main.js‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,21 +4,20 @@ import "htmx-ext-preload";
44
import "highlight.js/styles/github-dark.css";
55
import hljs from "highlight.js/lib/core";
66
import bash from "highlight.js/lib/languages/bash";
7+
import css from "highlight.js/lib/languages/css";
78
import javascript from "highlight.js/lib/languages/javascript";
89
import html from "highlight.js/lib/languages/xml";
910

1011
hljs.registerLanguage("html", html);
1112
hljs.registerLanguage("bash", bash);
13+
hljs.registerLanguage("css", css);
1214
hljs.registerLanguage("javascript", javascript);
1315

1416
function on_mount() {
1517
hljs.highlightAll();
1618
for (const element of document.querySelectorAll("[data-theme-switcher]")) {
1719
element.addEventListener("click", () => {
18-
document.documentElement.setAttribute(
19-
"data-theme",
20-
element.dataset.themeSwitcher,
21-
);
20+
document.documentElement.style.colorScheme = element.dataset.themeSwitcher;
2221
});
2322
}
2423

‎packages/main/src/_variables.scss‎

Lines changed: 12 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,13 @@
1-
html {
2-
--border: #27272a;
3-
--color: #fafafa;
4-
--color-primary: #09090b;
5-
--color-secondary: #fafafa;
6-
--color-danger: #fafafa;
7-
--color-muted: #a1a1aa;
8-
--background: #09090b;
9-
--background-primary: #fafafa;
10-
--background-secondary: #27272a;
11-
--background-danger: #7f1d1d;
12-
13-
&[data-theme="light"] {
14-
--border: #d4d4d8;
15-
--color: #09090b;
16-
--color-primary: #fafafa;
17-
--color-secondary: #09090b;
18-
--color-danger: #09090b;
19-
--color-muted: #71717a;
20-
--background: #fafafa;
21-
--background-primary: #09090b;
22-
--background-secondary: #e4e4e7;
23-
--background-danger: #fee2e2;
24-
}
1+
:root {
2+
color-scheme: light dark;
3+
--border: light-dark(#d4d4d8, #27272a);
4+
--color: light-dark(#09090b, #fafafa);
5+
--color-primary: light-dark(#fafafa, #09090b);
6+
--color-secondary: light-dark(#09090b, #fafafa);
7+
--color-danger: light-dark(#09090b, #fafafa);
8+
--color-muted: light-dark(#71717a, #a1a1aa);
9+
--background: light-dark(#fafafa, #09090b);
10+
--background-primary: light-dark(#09090b, #fafafa);
11+
--background-secondary: light-dark(#e4e4e7, #27272a);
12+
--background-danger: light-dark(#fee2e2, #7f1d1d);
2513
}

‎packages/main/src/compoments/_button.scss‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,12 +20,20 @@ button,
2020
text-decoration: none;
2121
white-space: nowrap;
2222

23-
&.secondary {
23+
&[aria-label*="cancel"],
24+
&[aria-label*="back"],
25+
&[aria-label*="close"],
26+
&[type="reset"] {
2427
background-color: var(--background-secondary);
2528
color: var(--color-secondary);
2629
}
2730

28-
&.danger {
31+
&[aria-label*="delete"],
32+
&[aria-label*="remove"],
33+
&[aria-label*="discard"],
34+
&[aria-label*="erase"],
35+
&[aria-label*="destroy"],
36+
&[aria-label*="clear"] {
2937
background-color: var(--background-danger);
3038
color: var(--color-danger);
3139
}

‎packages/main/src/compoments/_index.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,3 +13,4 @@
1313
@use "table";
1414
@use "form";
1515
@use "blog";
16+
@use "tabs";

‎packages/main/src/compoments/_tabs.scss‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
[role="tablist"] {
2+
display: flex;
3+
gap: 0;
4+
margin-bottom: 1rem;
5+
border-radius: 0.75rem;
6+
background: var(--background-secondary);
7+
padding: 0.25rem;
8+
width: 100%;
9+
}
10+
11+
[role="tab"] {
12+
flex: 1 1 0;
13+
cursor: pointer;
14+
border: none;
15+
border-radius: 0.5rem;
16+
background: none;
17+
background: transparent;
18+
padding: 0.75em 0;
19+
color: var(--color-muted);
20+
21+
&[aria-selected="true"] {
22+
background: var(--background-primary);
23+
color: var(--color-primary);
24+
}
25+
}

0 commit comments

Comments
 (0)