Implement color scheme toggle

Co-authored-by: eth3lbert <[email protected]>

Author: Turbo87

app/components/color-scheme-menu.hbs

@@ -0,0 +1,19 @@
+<Dropdown local-class="dropdown" data-test-dark-mode-menu ...attributes as |dd|>
+  <dd.Trigger local-class="trigger" data-test-dark-mode-toggle>
+    {{svg-jar this.icon local-class="icon"}}
+  </dd.Trigger>
+
+  <dd.Menu local-class="menu" as |menu|>
+    {{#each this.colorSchemes as |colorScheme|}}
+      <menu.Item>
+        <button
+          local-class="menu-button {{if (eq colorScheme.mode this.colorScheme.scheme) 'selected'}}"
+          type="button"
+          {{on 'click' (fn this.colorScheme.set colorScheme.mode)}}
+        >
+          {{svg-jar colorScheme.svg local-class="icon"}} {{colorScheme.mode}}
+        </button>
+      </menu.Item>
+    {{/each}}
+  </dd.Menu>
+</Dropdown>

app/components/color-scheme-menu.js

@@ -0,0 +1,17 @@
+import { inject as service } from '@ember/service';
+import Component from '@glimmer/component';
+
+export default class Header extends Component {
+  /** @type {import("../services/dark-mode").default} */
+  @service colorScheme;
+
+  colorSchemes = [
+    { mode: 'light', svg: 'sun' },
+    { mode: 'dark', svg: 'moon' },
+    { mode: 'system', svg: 'color-mode' },
+  ];
+
+  get icon() {
+    return this.colorSchemes.find(({ mode }) => mode === this.colorScheme.scheme)?.svg;
+  }
+}

app/components/color-scheme-menu.module.css

@@ -0,0 +1,36 @@
+.dropdown {
+    line-height: 1rem;
+}
+
+.icon {
+    width: 1.4em;
+    height: auto;
+}
+
+.trigger {
+    background: none;
+    border: 0;
+    padding: 0;
+
+    /* hide arrow */
+    > span {
+        display: none !important;
+    }
+}
+
+.menu {
+    right: 0;
+    min-width: max-content;
+}
+
+.menu-button {
+    composes: button-reset from '../styles/shared/buttons.module.css';
+    align-items: center;
+    gap: var(--space-2xs);
+    cursor: pointer;
+    text-transform: capitalize;
+}
+
+.selected {
+    background: light-dark(#e6e6e6, #404040);
+}

app/components/header.hbs

@@ -14,6 +14,8 @@
     </div>
 
     <nav local-class='nav'>
+      <ColorSchemeMenu local-class="color-scheme-menu" />
+
       <LinkTo @route="crates" @query={{hash letter=null page=1}} data-test-all-crates-link>
         Browse All Crates
       </LinkTo>
@@ -81,6 +83,8 @@
     </nav>
 
     <div local-class='menu'>
+      <ColorSchemeMenu local-class="color-scheme-menu" />
+
       <Dropdown as |dd|>
         <dd.Trigger local-class="dropdown-button">
           Menu

app/components/header.module.css

@@ -101,7 +101,7 @@
 .nav {
     grid-area: nav;
     display: flex;
-    align-items: stretch;
+    align-items: center;
     justify-self: end;
 
     @media only screen and (max-width: 900px) {
@@ -115,14 +115,19 @@
     display: none;
 
     @media only screen and (max-width: 900px) {
-        display: block;
+        display: flex;
+        align-items: center;
     }
 }
 
 .menu-item-with-separator {
     border-top: 1px solid var(--gray-border);
 }
 
+.color-scheme-menu {
+    margin-right: var(--space-xs);
+}
+
 .login-button {
     composes: button-reset from '../styles/shared/buttons.module.css';
     display: inline-flex;

app/controllers/application.js

@@ -2,6 +2,7 @@ import Controller from '@ember/controller';
 import { inject as service } from '@ember/service';
 
 export default class ApplicationController extends Controller {
+  @service colorScheme;
   @service design;
   @service progress;
   @service router;

app/helpers/set-color-scheme.js

@@ -0,0 +1,9 @@
+import { helper } from '@ember/component/helper';
+
+export default helper(function ([mode]) {
+  if (mode) {
+    window.document.documentElement.dataset.colorScheme = mode;
+  } else {
+    delete window.document.documentElement.dataset.colorScheme;
+  }
+});

app/services/color-scheme.js

@@ -0,0 +1,22 @@
+import { action } from '@ember/object';
+import Service from '@ember/service';
+import { tracked } from '@glimmer/tracking';
+
+import * as localStorage from '../utils/local-storage';
+
+const DEFAULT_SCHEME = 'light';
+const VALID_SCHEMES = new Set(['light', 'dark', 'system']);
+const LS_KEY = 'color-scheme';
+
+export default class DesignService extends Service {
+  @tracked _scheme = localStorage.getItem(LS_KEY);
+
+  get scheme() {
+    return VALID_SCHEMES.has(this._scheme) ? this._scheme : DEFAULT_SCHEME;
+  }
+
+  @action set(scheme) {
+    this._scheme = scheme;
+    localStorage.setItem(LS_KEY, scheme);
+  }
+}

app/styles/application.module.css

@@ -77,6 +77,14 @@
     color-scheme: light dark;
 }
 
+[data-color-scheme="light"] {
+     color-scheme: light;
+}
+
+[data-color-scheme="dark"] {
+     color-scheme: dark;
+}
+
 [data-theme="new-design"] {
     --header-bg-color: var(--violet800);
     --main-bg: white;

app/templates/application.hbs

@@ -2,6 +2,7 @@
 
 {{page-title "crates.io: Rust Package Registry" separator=' - ' prepend=true}}
 {{set-theme this.design.theme}}
+{{set-color-scheme this.colorScheme.scheme}}
 
 <ProgressBar/>
 <NotificationContainer @position="top-right"/>