diff --git a/README.md b/README.md
index edea21e..674213b 100644
--- 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.
-
- **[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.
---
diff --git a/v2-conditional-styling/README.md b/v2-conditional-styling/README.md
new file mode 100644
index 0000000..16ec242
--- /dev/null
+++ b/v2-conditional-styling/README.md
@@ -0,0 +1,12 @@
+
+ 
+
+
+# Conditional Styling
+| Pico version | Tech stack |
+| ----- | ----- |
+| 2 | HTML |
+
+A minimal example with the conditional version.
+
+[](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
new file mode 100644
index 0000000..540e124
--- /dev/null
+++ b/v2-conditional-styling/index.html
@@ -0,0 +1,90 @@
+
+
+
+
+
+
+ Conditional Styling • Pico CSS
+
+
+
+
+
+
+
+
+
+
+ Pico
+ Conditional Styling
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Unformatted section.
+
+
+
+
+
+
+
+
+
diff --git a/v2-conditional-styling/js/minimal-theme-switcher.js b/v2-conditional-styling/js/minimal-theme-switcher.js
new file mode 100644
index 0000000..a4cfab5
--- /dev/null
+++ 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();