feat: Pico v2 Conditional styling

picocss · Feb 4, 2024 · 9517563 · 9517563
1 parent f4bc1ad
commit 9517563
Show file tree

Hide file tree

Showing 4 changed files with 184 additions and 1 deletion.
diff --git a/README.md b/README.md
@@ -20,10 +20,12 @@ An example to customize Pico CSS with SASS.
 
 - **[React class-less login](https://codesandbox.io/s/github/picocss/examples/tree/master/v2-react-classless-login)**  
 A minimal, class-less login page in React, with a custom primary color.
-</details>
 
 - **[React color schemes and modal](https://codesandbox.io/s/github/picocss/examples/tree/master/v2-react-color-schemes-and-modal)**  
 Switch color schemes and open modals with React.
+
+- **[Conditional Styling](https://codesandbox.io/s/github/picocss/examples/tree/master/v2-conditional-styling)**  
+A minimal example with the conditional version.
 </details>
 
 ---

diff --git a/v2-conditional-styling/README.md b/v2-conditional-styling/README.md
@@ -0,0 +1,12 @@
+<a href="https://picocss.com/">
+  <img src="https://picocss.com/img/logo.svg" width="64" height="64">
+</a>
+
+# Conditional Styling
+| Pico version | Tech stack |
+| ----- | ----- |
+| 2 | HTML |
+
+A minimal example with the conditional version.
+
+[![Open in CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/picocss/examples/tree/master/v2-conditional-styling)
diff --git a/v2-conditional-styling/index.html b/v2-conditional-styling/index.html
@@ -0,0 +1,90 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="color-scheme" content="light dark" />
+    <title>Conditional Styling • Pico CSS</title>
+    <meta name="description" content="A pure HTML example, without dependencies." />
+
+    <!-- Pico.css -->
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/@picocss/[email protected]/css/pico.conditional.min.css"
+    />
+  </head>
+
+  <body>
+    <!-- Header -->
+    <header class="container">
+      <hgroup>
+        <h1>Pico</h1>
+        <p>Conditional Styling</p>
+      </hgroup>
+      <div class="pico">
+        <nav>
+          <ul>
+            <li><a href="#" data-theme-switcher="auto">Auto</a></li>
+            <li><a href="#" data-theme-switcher="light">Light</a></li>
+            <li><a href="#" data-theme-switcher="dark">Dark</a></li>
+          </ul>
+        </nav>
+      </div>
+    </header>
+    <!-- ./ Header -->
+
+    <!-- Main -->
+    <main class="container">
+      <!-- Formatted -->
+      <section class="pico">
+        <h2>Formatted section.</h2>
+        <form>
+          <input
+            type="text"
+            name="firstname"
+            placeholder="First name"
+            aria-label="First name"
+            required
+          />
+          <input
+            type="email"
+            name="email"
+            placeholder="Email address"
+            aria-label="Email address"
+            autocomplete="email"
+            required
+          />
+          <button type="submit">Subscribe</button>
+        </form>
+      </section>
+      <!-- ./ Formatted -->
+
+      <!-- Unformatted -->
+      <section>
+        <h2>Unformatted section.</h2>
+        <form>
+          <input
+            type="text"
+            name="firstname"
+            placeholder="First name"
+            aria-label="First name"
+            required
+          />
+          <input
+            type="email"
+            name="email"
+            placeholder="Email address"
+            aria-label="Email address"
+            autocomplete="email"
+            required
+          />
+          <button type="submit">Subscribe</button>
+        </form>
+      </section>
+      <!-- ./ Unformatted -->
+    </main>
+
+    <!-- Minimal theme switcher -->
+    <script src="js/minimal-theme-switcher.js"></script>
+  </body>
+</html>
diff --git a/v2-conditional-styling/js/minimal-theme-switcher.js b/v2-conditional-styling/js/minimal-theme-switcher.js
@@ -0,0 +1,79 @@
+/*!
+ * Minimal theme switcher
+ *
+ * Pico.css - https://picocss.com
+ * Copyright 2019-2024 - Licensed under MIT
+ */
+
+const themeSwitcher = {
+  // Config
+  _scheme: "auto",
+  menuTarget: "details.dropdown",
+  buttonsTarget: "a[data-theme-switcher]",
+  buttonAttribute: "data-theme-switcher",
+  rootAttribute: "data-theme",
+  localStorageKey: "picoPreferredColorScheme",
+
+  // Init
+  init() {
+    this.scheme = this.schemeFromLocalStorage;
+    this.initSwitchers();
+  },
+
+  // Get color scheme from local storage
+  get schemeFromLocalStorage() {
+    return window.localStorage?.getItem(this.localStorageKey) ?? this._scheme;
+  },
+
+  // Preferred color scheme
+  get preferredColorScheme() {
+    return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+  },
+
+  // Init switchers
+  initSwitchers() {
+    const buttons = document.querySelectorAll(this.buttonsTarget);
+    buttons.forEach((button) => {
+      button.addEventListener(
+        "click",
+        (event) => {
+          event.preventDefault();
+          // Set scheme
+          this.scheme = button.getAttribute(this.buttonAttribute);
+          // Close dropdown
+          document.querySelector(this.menuTarget)?.removeAttribute("open");
+        },
+        false
+      );
+    });
+  },
+
+  // Set scheme
+  set scheme(scheme) {
+    if (scheme == "auto") {
+      this._scheme = this.preferredColorScheme;
+    } else if (scheme == "dark" || scheme == "light") {
+      this._scheme = scheme;
+    }
+    this.applyScheme();
+    this.schemeToLocalStorage();
+  },
+
+  // Get scheme
+  get scheme() {
+    return this._scheme;
+  },
+
+  // Apply scheme
+  applyScheme() {
+    document.querySelector("html")?.setAttribute(this.rootAttribute, this.scheme);
+  },
+
+  // Store scheme to local storage
+  schemeToLocalStorage() {
+    window.localStorage?.setItem(this.localStorageKey, this.scheme);
+  },
+};
+
+// Init
+themeSwitcher.init();