wai/qwt-reveal-toggle.html at main · Morrison-Lab/wai · GitHub

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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
<!--
  Light/dark toggle button for the qwt revealjs format.
  Pulled into every slide deck via the `include-in-header` entry in the
  `revealjs:` block of `_quarto-website.yml`. Pairs with
  `styles-reveal.scss` (which defines the palette CSS variables) — the
  button reads those vars so it stays legible in both modes. Persists
  the choice in localStorage; first-time visitors get
  `prefers-color-scheme` as the default.
-->
<style>
  #qwt-theme-toggle {
    position: fixed;
    bottom: 8px;
    left: 8px;
    /* Matches reveal.js's `.slide-number` and the `#revealjs-html-link` chip
       from `revealjs-html-links.lua`; the three elements occupy different
       corners so they don't overlap. Keep them aligned if you bump this. */
    z-index: 31;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 1px solid var(--qwt-border, rgba(0, 0, 0, 0.2));
    border-radius: 50%;
    background: var(--qwt-chip-bg, rgba(255, 255, 255, 0.8));
    color: var(--qwt-muted, rgba(0, 0, 0, 0.5));
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s, background 0.15s, border-color 0.15s;
  }
  #qwt-theme-toggle:hover {
    color: var(--qwt-fg, rgba(0, 0, 0, 0.9));
    background: var(--qwt-chip-bg-hover, rgba(255, 255, 255, 0.98));
    border-color: var(--qwt-fg, rgba(0, 0, 0, 0.4));
  }
  #qwt-theme-toggle:focus-visible {
    outline: 2px solid var(--qwt-link, #2a76dd);
    outline-offset: 2px;
  }
</style>
<script>
(function () {
  "use strict";
  var STORAGE_KEY = "qwt-reveal-theme";
  var DARK_CLASS = "qwt-dark";
  var SUN = "☀";       // ☀
  var MOON = "☾";      // ☾

  function applyTheme(theme) {
    if (theme === "dark") {
      document.body.classList.add(DARK_CLASS);
    } else {
      document.body.classList.remove(DARK_CLASS);
    }
    try { localStorage.setItem(STORAGE_KEY, theme); } catch (e) { /* private mode */ }
    var btn = document.getElementById("qwt-theme-toggle");
    if (btn) {
      var dark = (theme === "dark");
      btn.setAttribute("aria-pressed", dark ? "true" : "false");
      btn.title = dark ? "Switch to light mode" : "Switch to dark mode";
      btn.textContent = dark ? SUN : MOON;
    }
  }

  function currentTheme() {
    return document.body.classList.contains(DARK_CLASS) ? "dark" : "light";
  }

  function initialTheme() {
    try {
      var stored = localStorage.getItem(STORAGE_KEY);
      if (stored === "dark" || stored === "light") return stored;
    } catch (e) { /* private mode */ }
    if (window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches) {
      return "dark";
    }
    return "light";
  }

  function init() {
    if (document.getElementById("qwt-theme-toggle")) return;
    var theme = initialTheme();
    applyTheme(theme); // set body class early (button doesn't exist yet, so this only paints the body)
    var btn = document.createElement("button");
    btn.id = "qwt-theme-toggle";
    btn.type = "button";
    btn.setAttribute("aria-label", "Toggle light/dark mode");
    btn.addEventListener("click", function () {
      applyTheme(currentTheme() === "dark" ? "light" : "dark");
    });
    document.body.appendChild(btn);
    applyTheme(theme); // now that the button exists, populate its glyph/aria-pressed
  }

  if (document.readyState === "loading") {
    document.addEventListener("DOMContentLoaded", init);
  } else {
    init();
  }
})();
</script>