Implement dark mode toggle

Author: eth3lbert

app/components/header.hbs

@@ -14,6 +14,22 @@
     </div>
 
     <nav local-class='nav'>
+      <Dropdown data-test-dark-mode-menu as |dd|>
+        <dd.Trigger local-class="dropdown-button dark-mode-toggle" data-test-dark-mode-toggle>
+          {{svg-jar this.preferredDarkMode.svg local-class="dark-mode-icon"}}
+        </dd.Trigger>
+
+        <dd.Menu local-class='dark-mode-options' as |menu|>
+          {{#each this.colorSchemes as |colorScheme|}}
+            <menu.Item>
+              <button local-class='dark-mode-menu-item' type="button" {{on 'click' (fn this.setDarkMode colorScheme.mode)}}>
+                {{colorScheme.mode}}
+              </button>
+            </menu.Item>
+          {{/each}}
+        </dd.Menu>
+      </Dropdown>
+
       <LinkTo @route="crates" @query={{hash letter=null page=1}} data-test-all-crates-link>
         Browse All Crates
       </LinkTo>
@@ -81,6 +97,22 @@
     </nav>
 
     <div local-class='menu'>
+      <Dropdown data-test-dark-mode-menu as |dd|>
+        <dd.Trigger local-class="dropdown-button dark-mode-toggle" data-test-dark-mode-toggle>
+          {{svg-jar this.preferredDarkMode.svg local-class="dark-mode-icon"}}
+        </dd.Trigger>
+
+        <dd.Menu local-class='dark-mode-options' as |menu|>
+          {{#each this.colorSchemes as |colorScheme|}}
+            <menu.Item>
+              <button local-class='dark-mode-menu-item' type="button" {{on 'click' (fn this.setDarkMode colorScheme.mode)}}>
+                {{colorScheme.mode}}
+              </button>
+            </menu.Item>
+          {{/each}}
+        </dd.Menu>
+      </Dropdown>
+
       <Dropdown as |dd|>
         <dd.Trigger local-class="dropdown-button">
           Menu

app/components/header.js

@@ -9,6 +9,15 @@ export default class Header extends Component {
   /** @type {import("../services/session").default} */
   @service session;
 
+  /** @type {import("../services/dark-mode").default} */
+  @service darkMode;
+
+  colorSchemes = [
+    { mode: 'light', svg: 'sun' },
+    { mode: 'dark', svg: 'moon' },
+    { mode: 'system', svg: 'color-mode' },
+  ];
+
   @action
   enableSudo() {
     this.session.setSudo(SUDO_SESSION_DURATION_MS);
@@ -18,4 +27,17 @@ export default class Header extends Component {
   disableSudo() {
     this.session.setSudo(0);
   }
+
+  get preferredDarkMode() {
+    return this.colorSchemes.find(c => c.mode === this.darkMode.preferred) ?? {};
+  }
+
+  get currentDarkMode() {
+    return this.darkMode.mode;
+  }
+
+  @action
+  setDarkMode(mode) {
+    this.darkMode.preferred = mode;
+  }
 }

app/components/header.module.css

@@ -101,12 +101,16 @@
 .nav {
     grid-area: nav;
     display: flex;
-    align-items: stretch;
+    align-items: center;
     justify-self: end;
 
     @media only screen and (max-width: 900px) {
         display: none;
     }
+
+    & > div {
+        display: inline-flex;
+    }
 }
 
 .menu {
@@ -117,6 +121,10 @@
     @media only screen and (max-width: 900px) {
         display: block;
     }
+
+    & > div {
+        vertical-align: top;
+    }
 }
 
 .menu-item-with-separator {
@@ -144,6 +152,19 @@
     }
 }
 
+.dark-mode-icon {
+    width: calc(var(--space-m) * .85);
+    height: auto;
+}
+
+.dark-mode-toggle {
+    border-radius: 9999px;
+    padding: var(--space-3xs);
+    margin-right: calc(var(--space-xs) * 2);
+    /* hdie arrow */
+    &.dropdown-button > span { display: none; }
+}
+
 .login-icon {
     width: 1em;
     margin-right: var(--space-2xs);
@@ -158,12 +179,18 @@
     margin-right: var(--space-3xs);
 }
 
-.current-user-links {
+.current-user-links,
+.dark-mode-options {
+    top: 120%;
     left: auto;
     right: 0;
     min-width: 200px;
 }
 
+.dark-mode-options {
+    min-width: max-content;
+}
+
 .dropdown-button {
     background: none;
     border: 0;
@@ -177,7 +204,8 @@
 
 .login-menu-item,
 .logout-menu-item,
-.sudo-menu-item {
+.sudo-menu-item,
+.dark-mode-menu-item {
     composes: button-reset from '../styles/shared/buttons.module.css';
     cursor: pointer;
 
@@ -199,3 +227,7 @@
         padding-top: var(--space-3xs);
     }
 }
+
+.dark-mode-menu-item {
+    text-transform: capitalize;
+}

app/routes/application.js

@@ -14,11 +14,13 @@ export default class ApplicationRoute extends Route {
   @service session;
   @service playground;
   @service sentry;
+  @service darkMode;
 
   async beforeModel(transition) {
     this.setSentryTransaction(transition);
     this.router.on('routeWillChange', transition => this.setSentryTransaction(transition));
     this.router.on('routeDidChange', transition => this.setSentryTransaction(transition));
+    this.darkMode.setupOnce();
 
     // trigger the task, but don't wait for the result here
     //

app/services/dark-mode.js

@@ -0,0 +1,65 @@
+import Service from '@ember/service';
+import { tracked } from '@glimmer/tracking';
+import * as localStorage from '../utils/local-storage';
+
+const LIGHT_OR_DARK = new Set(['dark', 'light']);
+
+export default class DarkModeService extends Service {
+  @tracked _preferred = localStorage.getItem('dark-mode') ?? 'system';
+  @tracked _mode = null;
+
+  setupOnce() {
+    let mode = this.preferred;
+    const darkQuery = this._darkMQList();
+    console.log('[setup]', mode, darkQuery.matches)
+    if (mode === 'system') {
+      mode = this.detectColorScheme(darkQuery);
+    }
+    console.log('[setup]', mode)
+    this.mode = mode;
+    darkQuery.addEventListener('change', e => {
+      this.mode = this.detectColorScheme(e);
+    });
+  }
+
+  get preferred() {
+    return this._formatDarkMode(this._preferred, () => 'system');
+  }
+
+  set preferred(mode = '') {
+    const preferred = this._formatDarkMode(mode, () => 'system');
+    this._preferred = preferred;
+    if (preferred === 'system') {
+      localStorage.removeItem('dark-mode');
+    } else {
+      localStorage.setItem('dark-mode', preferred);
+    }
+    this.mode = preferred;
+  }
+
+  get mode() {
+    return this._formatDarkMode(this._mode, this.detectColorScheme);
+  }
+
+  set mode(mode) {
+    const darkMode = this._formatDarkMode(mode, this.detectColorScheme);
+    this._mode = darkMode;
+    if (LIGHT_OR_DARK.has(this.preferred)) {
+      document.documentElement.dataset.darkMode = darkMode;
+    } else {
+      delete document.documentElement.dataset.darkMode;
+    }
+  }
+
+  _formatDarkMode(mode, defaultCb) {
+    return LIGHT_OR_DARK.has(mode) ? mode : defaultCb?.();
+  }
+
+  _darkMQList() {
+    return window.matchMedia('(prefers-color-scheme: dark)');
+  }
+
+  detectColorScheme(darkMQList) {
+    return (darkMQList ?? this._darkMQList()).matches ? 'dark' : 'light';
+  }
+}

app/styles/application.module.css

@@ -74,7 +74,22 @@
     /* Custom pairs */
     --space-s-l: clamp(0.88rem, calc(0.34rem + 2.68vw), 2.25rem);
 
-    color-scheme: light dark;
+}
+
+/* Allows setting dark mode manually, even at the element level. */
+/* Adapted from https://github.com/csstools/postcss-plugins/issues/1348#issuecomment-2030678571 */
+@layer theme {
+    :root {
+         color-scheme: light dark;
+    }
+
+    [data-dark-mode="light"] {
+         color-scheme: light;
+    }
+
+    [data-dark-mode="dark"] {
+         color-scheme: dark;
+    }
 }
 
 [data-theme="new-design"] {