Skip to content

Commit 7309439

Browse files
lucaslarrochelucaslarroche
committed
feat: Pico v2 Conditional styling
1 parent f4bc1ad commit 7309439

File tree

4 files changed

+184
-1
lines changed

4 files changed

+184
-1
lines changed

‎README.md

+3-1
Original file line numberDiff line numberDiff line change
@@ -20,10 +20,12 @@ An example to customize Pico CSS with SASS.
2020

2121
- **[React class-less login](https://codesandbox.io/s/github/picocss/examples/tree/master/v2-react-classless-login)**
2222
A minimal, class-less login page in React, with a custom primary color.
23-
</details>
2423

2524
- **[React color schemes and modal](https://codesandbox.io/s/github/picocss/examples/tree/master/v2-react-color-schemes-and-modal)**
2625
Switch color schemes and open modals with React.
26+
27+
- **[Conditional Styling](https://codesandbox.io/s/github/picocss/examples/tree/master/v2-conditional-styling)**
28+
A minimal example with the conditional version.
2729
</details>
2830

2931
---

‎v2-conditional-styling/README.md

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<a href="https://picocss.com/">
2+
<img src="https://picocss.com/img/logo.svg" width="64" height="64">
3+
</a>
4+
5+
# Conditional Styling
6+
| Pico version | Tech stack |
7+
| ----- | ----- |
8+
| 2 | HTML |
9+
10+
A minimal example with the conditional version.
11+
12+
[![Open in CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/picocss/examples/tree/master/v2-conditional-styling)

‎v2-conditional-styling/index.html

+90
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1" />
6+
<meta name="color-scheme" content="light dark" />
7+
<title>Conditional Styling • Pico CSS</title>
8+
<meta name="description" content="A minimal example with the conditional version." />
9+
10+
<!-- Pico.css -->
11+
<link
12+
rel="stylesheet"
13+
href="https://cdn.jsdelivr.net/npm/@picocss/[email protected]/css/pico.conditional.min.css"
14+
/>
15+
</head>
16+
17+
<body>
18+
<!-- Header -->
19+
<header class="container">
20+
<hgroup>
21+
<h1>Pico</h1>
22+
<p>Conditional Styling</p>
23+
</hgroup>
24+
<div class="pico">
25+
<nav>
26+
<ul>
27+
<li><a href="#" data-theme-switcher="auto">Auto</a></li>
28+
<li><a href="#" data-theme-switcher="light">Light</a></li>
29+
<li><a href="#" data-theme-switcher="dark">Dark</a></li>
30+
</ul>
31+
</nav>
32+
</div>
33+
</header>
34+
<!-- ./ Header -->
35+
36+
<!-- Main -->
37+
<main class="container">
38+
<!-- Styled -->
39+
<section class="pico">
40+
<h2>Styled section</h2>
41+
<form>
42+
<input
43+
type="text"
44+
name="firstname"
45+
placeholder="First name"
46+
aria-label="First name"
47+
required
48+
/>
49+
<input
50+
type="email"
51+
name="email"
52+
placeholder="Email address"
53+
aria-label="Email address"
54+
autocomplete="email"
55+
required
56+
/>
57+
<button type="submit">Subscribe</button>
58+
</form>
59+
</section>
60+
<!-- ./ Styled -->
61+
62+
<!-- Unstyled -->
63+
<section>
64+
<h2>Unstyled section</h2>
65+
<form>
66+
<input
67+
type="text"
68+
name="firstname"
69+
placeholder="First name"
70+
aria-label="First name"
71+
required
72+
/>
73+
<input
74+
type="email"
75+
name="email"
76+
placeholder="Email address"
77+
aria-label="Email address"
78+
autocomplete="email"
79+
required
80+
/>
81+
<button type="submit">Subscribe</button>
82+
</form>
83+
</section>
84+
<!-- ./ Unstyled -->
85+
</main>
86+
87+
<!-- Minimal theme switcher -->
88+
<script src="js/minimal-theme-switcher.js"></script>
89+
</body>
90+
</html>

‎v2-conditional-styling/js/minimal-theme-switcher.js

+79
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
/*!
2+
* Minimal theme switcher
3+
*
4+
* Pico.css - https://picocss.com
5+
* Copyright 2019-2024 - Licensed under MIT
6+
*/
7+
8+
const themeSwitcher = {
9+
// Config
10+
_scheme: "auto",
11+
menuTarget: "details.dropdown",
12+
buttonsTarget: "a[data-theme-switcher]",
13+
buttonAttribute: "data-theme-switcher",
14+
rootAttribute: "data-theme",
15+
localStorageKey: "picoPreferredColorScheme",
16+
17+
// Init
18+
init() {
19+
this.scheme = this.schemeFromLocalStorage;
20+
this.initSwitchers();
21+
},
22+
23+
// Get color scheme from local storage
24+
get schemeFromLocalStorage() {
25+
return window.localStorage?.getItem(this.localStorageKey) ?? this._scheme;
26+
},
27+
28+
// Preferred color scheme
29+
get preferredColorScheme() {
30+
return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
31+
},
32+
33+
// Init switchers
34+
initSwitchers() {
35+
const buttons = document.querySelectorAll(this.buttonsTarget);
36+
buttons.forEach((button) => {
37+
button.addEventListener(
38+
"click",
39+
(event) => {
40+
event.preventDefault();
41+
// Set scheme
42+
this.scheme = button.getAttribute(this.buttonAttribute);
43+
// Close dropdown
44+
document.querySelector(this.menuTarget)?.removeAttribute("open");
45+
},
46+
false
47+
);
48+
});
49+
},
50+
51+
// Set scheme
52+
set scheme(scheme) {
53+
if (scheme == "auto") {
54+
this._scheme = this.preferredColorScheme;
55+
} else if (scheme == "dark" || scheme == "light") {
56+
this._scheme = scheme;
57+
}
58+
this.applyScheme();
59+
this.schemeToLocalStorage();
60+
},
61+
62+
// Get scheme
63+
get scheme() {
64+
return this._scheme;
65+
},
66+
67+
// Apply scheme
68+
applyScheme() {
69+
document.querySelector("html")?.setAttribute(this.rootAttribute, this.scheme);
70+
},
71+
72+
// Store scheme to local storage
73+
schemeToLocalStorage() {
74+
window.localStorage?.setItem(this.localStorageKey, this.scheme);
75+
},
76+
};
77+
78+
// Init
79+
themeSwitcher.init();

0 commit comments

Comments
 (0)