Css Zero Showcase

Previews

No matching results.

Pages

No matching results.

x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div contents data-controller="popover" data-popover-placement-value="bottom-start">
  <button type="button" class="btn btn--icon" data-popover-target="trigger" popovertarget="color_scheme_popover" aria-haspopup="true">
    <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 id="color_scheme_popover" class="popover" data-popover-target="content" role="menu" aria-label="Menu">
    <div class="menu" data-controller="menu" data-action="keydown->menu#navigate">
      <button type="button" class="btn menu__item" data-action="popover#hide color-scheme#setLight" data-menu-target="item" role="menuitem">Light</button>
      <button type="button" class="btn menu__item" data-action="popover#hide color-scheme#setDark" data-menu-target="item" role="menuitem">Dark</button>
      <button type="button" class="btn menu__item" data-action="popover#hide color-scheme#setSystem" data-menu-target="item" role="menuitem">System</button>
    </div>
  </div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div contents data-controller="popover" data-popover-placement-value="bottom-start">
  <button type="button" class="btn btn--icon" data-popover-target="trigger" popovertarget="color_scheme_popover" aria-haspopup="true">
    <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 id="color_scheme_popover" class="popover" data-popover-target="content" role="menu" aria-label="Menu">
    <div class="menu" data-controller="menu" data-action="keydown->menu#navigate">
      <button type="button" class="btn menu__item" data-action="popover#hide color-scheme#setLight" data-menu-target="item" role="menuitem">Light</button>
      <button type="button" class="btn menu__item" data-action="popover#hide color-scheme#setDark" data-menu-target="item" role="menuitem">Dark</button>
      <button type="button" class="btn menu__item" data-action="popover#hide color-scheme#setSystem" data-menu-target="item" role="menuitem">System</button>
    </div>
  </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>