Skip to content

Commit 71daeda

Browse files
TorstenDittmannTorstenDittmann
committed
Replace data-theme with modern color-scheme API
Updates theme switching mechanism to use the standard `color-scheme` CSS property instead of custom data attributes, simplifying HTML markup and leveraging native browser capabilities.
1 parent e8bf281 commit 71daeda

File tree

8 files changed

+43
-47
lines changed

8 files changed

+43
-47
lines changed

‎README.md‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@ Just write semantic HTML and launch.css will style it for you. Add data attribut
4141

4242
```html
4343
<!DOCTYPE html>
44-
<html lang="en" data-theme="dark">
44+
<html lang="en">
4545
<head>
4646
<meta charset="UTF-8" />
4747
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
@@ -71,12 +71,12 @@ Just write semantic HTML and launch.css will style it for you. Add data attribut
7171

7272
## Theme Switching
7373

74-
Toggle between light and dark themes with a simple attribute change:
74+
Supports light and dark themes with seamless switching using `color-scheme`css properties:
7575

76-
```html
77-
<html data-theme="light">
78-
<!-- or -->
79-
<html data-theme="dark">
76+
```css
77+
color-scheme: only dark;
78+
// pr
79+
color-scheme: only dark;
8080
```
8181

8282
## Layout Options

‎apps/docs/docs.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -500,7 +500,7 @@ <h3>Confirm your action!</h3>
500500
</p>
501501
</main>
502502
<footer>
503-
<button class="secondary" onclick="modalExample.close()">Cancel</button>
503+
<button onclick="modalExample.close()">Cancel</button>
504504
<button autofocus onclick="modalExample.close()">Confirm</button>
505505
</footer>
506506
</dialog>

‎apps/docs/partials/base.hbs‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<!doctype html>
2-
<html lang="en" data-theme="dark">
2+
<html lang="en">
33
<head>
44
<meta charset="utf-8" />
55
<meta name="viewport" content="width=device-width, initial-scale=1" />

‎examples/website/blog.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<!DOCTYPE html>
2-
<html lang="en" data-theme="dark">
2+
<html lang="en">
33
<head>
44
<meta charset="utf-8" />
55
<meta name="viewport" content="width=device-width, initial-scale=1" />

‎examples/website/index.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<!DOCTYPE html>
2-
<html lang="en" data-theme="dark">
2+
<html lang="en">
33
<head>
44
<meta charset="utf-8" />
55
<meta name="viewport" content="width=device-width, initial-scale=1" />
@@ -263,7 +263,7 @@ <h2>Form elements</h2>
263263
Switch
264264
</label>
265265
</fieldset>
266-
<button type="reset" class="secondary">Reset</button>
266+
<button type="reset">Reset</button>
267267
<button type="submit" onclick="event.preventDefault()">
268268
Submit
269269
</button>

‎examples/website/main.js‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,7 @@ import "launch.css";
22

33
for (const element of document.querySelectorAll("[data-theme-switcher]")) {
44
element.addEventListener("click", () => {
5-
document.documentElement.setAttribute(
6-
"data-theme",
7-
element.dataset.themeSwitcher,
8-
);
5+
document.documentElement.style.colorScheme = element.dataset.themeSwitcher;
96
});
107
}
118

‎examples/website/post.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<!DOCTYPE html>
2-
<html lang="en" data-theme="dark">
2+
<html lang="en">
33
<head>
44
<meta charset="utf-8" />
55
<meta name="viewport" content="width=device-width, initial-scale=1" />

‎packages/main/README.md‎

Lines changed: 30 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -47,42 +47,42 @@ Just write semantic HTML and launch.css will style it for you. Add data attribut
4747

4848
```html
4949
<!DOCTYPE html>
50-
<html lang="en" data-theme="dark">
51-
<head>
52-
<meta charset="UTF-8" />
53-
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
54-
<title>My launch.css Site</title>
55-
</head>
56-
<body data-layout="website">
57-
<header>
58-
<nav>
59-
<a href="/">My Site</a>
60-
<menu>
61-
<li><a href="/">Home</a></li>
62-
<li><a href="/about">About</a></li>
63-
<li><a href="/contact">Contact</a></li>
64-
</menu>
65-
</nav>
66-
</header>
67-
<main>
68-
<section>
69-
<h1>Welcome to my site</h1>
70-
<p>Built with launch.css - no classes needed!</p>
71-
<button>Click me</button>
72-
</section>
73-
</main>
74-
</body>
50+
<html lang="en">
51+
<head>
52+
<meta charset="UTF-8" />
53+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
54+
<title>My launch.css Site</title>
55+
</head>
56+
<body data-layout="website">
57+
<header>
58+
<nav>
59+
<a href="/">My Site</a>
60+
<menu>
61+
<li><a href="/">Home</a></li>
62+
<li><a href="/about">About</a></li>
63+
<li><a href="/contact">Contact</a></li>
64+
</menu>
65+
</nav>
66+
</header>
67+
<main>
68+
<section>
69+
<h1>Welcome to my site</h1>
70+
<p>Built with launch.css - no classes needed!</p>
71+
<button>Click me</button>
72+
</section>
73+
</main>
74+
</body>
7575
</html>
7676
```
7777

7878
## Theme Switching
7979

80-
Toggle between light and dark themes with a simple attribute change:
80+
Support light and dark themes with seamless switching using `color-scheme` css properties:
8181

82-
```html
83-
<html data-theme="light">
84-
<!-- or -->
85-
<html data-theme="dark">
82+
```css
83+
color-scheme: only dark;
84+
// pr
85+
color-scheme: only dark;
8686
```
8787

8888
## Layout Options
@@ -92,7 +92,6 @@ launch.css provides two main layout options:
9292
```html
9393
<!-- Standard website layout -->
9494
<body data-layout="website">
95-
9695
<!-- Dashboard/app layout with fixed header -->
9796
<body data-layout="dashboard">
9897
```

0 commit comments

Comments
 (0)