Css Zero Showcase

Pages

No matching results.

x
1
2
3
4
5
6
7
8
9
10
11
12
<div data-controller="popover" data-popover-placement-value="bottom-start">
  <button type="button" class="btn btn--icon" data-popover-target="button" data-action="popover#toggle">
    <span class="icon icon--sun icon--color-scheme-light" aria-hidden="true"></span>
    <span class="icon icon--moon icon--color-scheme-dark" aria-hidden="true"></span>
    <span class="sr-only">Theme switcher</span>
  </button>
  <div popover class="popover menu" data-popover-target="menu">
    <button type="button" class="btn menu__item" data-action="popover#hide color-scheme#setLight">Light</button>
    <button type="button" class="btn menu__item" data-action="popover#hide color-scheme#setDark">Dark</button>
    <button type="button" class="btn menu__item" data-action="popover#hide color-scheme#setSystem">System</button>
  </div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
<div data-controller="popover" data-popover-placement-value="bottom-start">
  <button type="button" class="btn btn--icon" data-popover-target="button" data-action="popover#toggle">
    <span class="icon icon--sun icon--color-scheme-light" aria-hidden="true"></span>
    <span class="icon icon--moon icon--color-scheme-dark" aria-hidden="true"></span>
    <span class="sr-only">Theme switcher</span>
  </button>
  <div popover class="popover menu" data-popover-target="menu">
    <button type="button" class="btn menu__item" data-action="popover#hide color-scheme#setLight">Light</button>
    <button type="button" class="btn menu__item" data-action="popover#hide color-scheme#setDark">Dark</button>
    <button type="button" class="btn menu__item" data-action="popover#hide color-scheme#setSystem">System</button>
  </div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
[data-color-scheme="light"] {
  color-scheme: light;
}
[data-color-scheme="dark"] {
  color-scheme: dark;
}
[data-color-scheme="system"] {
  color-scheme: light dark;
}
[data-color-scheme="light"] {
  .icon--color-scheme-light { display: inline-flex; }
  .icon--color-scheme-dark { display: none; }
}
[data-color-scheme="dark"] {
  .icon--color-scheme-light { display: none; }
  .icon--color-scheme-dark { display: inline-flex; }
}
[data-color-scheme="system"] {
  @media (prefers-color-scheme: light) {
    .icon--color-scheme-light { display: inline-flex; }
    .icon--color-scheme-dark { display: none; }
  }
  @media (prefers-color-scheme: dark) {
    .icon--color-scheme-light { display: none; }
    .icon--color-scheme-dark { display: inline-flex; }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
import { Controller } from "@hotwired/stimulus"
export default class extends Controller {
  connect() {
    this.element.dataset.colorScheme = this.#colorScheme
  }
  setLight() {
    this.element.dataset.colorScheme = "light"
    localStorage.setItem("color_scheme", "light")
  }
  setDark() {
    this.element.dataset.colorScheme = "dark"
    localStorage.setItem("color_scheme", "dark")
  }
  setSystem() {
    this.element.dataset.colorScheme = "system"
    localStorage.setItem("color_scheme", "system")
  }
  get #colorScheme() {
    return localStorage.getItem("color_scheme") || "system"
  }
}

Initialization

<html data-controller="color-scheme">...</html>