Implement dark mode via light-dark() fn

app/components/color-scheme-menu.hbs

@@ -0,0 +1,20 @@
+<Dropdown local-class="dropdown" data-test-dark-mode-menu ...attributes as |dd|>
+  <dd.Trigger @hideArrow={{true}} local-class="trigger" data-test-dark-mode-toggle>
+    {{svg-jar this.icon local-class="icon"}}
+    <span local-class="trigger-label">Change color scheme</span>
+  </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,35 @@
+.dropdown {
+    line-height: 1rem;
+}
+
+.icon {
+    width: 1.4em;
+    height: auto;
+}
+
+.trigger {
+    background: none;
+    border: 0;
+    padding: 0;
+}
+
+.trigger-label {
+    composes: sr-only from '../styles/shared/a11y.module.css'
+}
+
+.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/crate-downloads-list.module.css

@@ -9,8 +9,8 @@
 }
 
 .link {
-    color: #525252;
-    background-color: #edebdd;
+    color: light-dark(#525252, #999999);
+    background-color: light-dark(#edebdd, #141413);
     font-size: 90%;
     padding: var(--space-s) var(--space-xs);
     display: flex;

app/components/crate-row.module.css

@@ -1,10 +1,10 @@
 .crate-row {
-    --shadow: 0 1px 3px hsla(51, 90%, 42%, .35);
+    --shadow: 0 1px 3px light-dark(hsla(51, 90%, 42%, .35), #232321);
 
     display: flex;
     flex-wrap: wrap;
     padding: var(--space-s-m) var(--space-m-l);
-    background-color: white;
+    background-color: light-dark(white, #141413);
     border-radius: var(--space-3xs);
     box-shadow: var(--shadow);
 }
@@ -77,6 +77,10 @@
             width: calc(1em + 20px);
             margin: -10px;
             margin-right: calc(var(--space-xs) - 10px);
+
+            circle {
+                fill: none;
+            }
         }
     }
 }

app/components/crate-sidebar.module.css

@@ -81,7 +81,7 @@
     cursor: pointer;
 
     &:hover {
-        background-color: white;
+        background-color: light-dark(white, #141413);
     }
 }
 

app/components/dependency-list/row.module.css

@@ -1,17 +1,17 @@
 .row {
     --bg-color: var(--grey200);
-    --hover-bg-color: hsl(217, 37%, 98%);
-    --range-color: var(--grey900);
-    --crate-color: var(--grey700);
+    --hover-bg-color: light-dark(hsl(217, 37%, 98%), hsl(204, 3%, 11%));
+    --range-color: light-dark(var(--grey900), #d1cfc7);
+    --crate-color: light-dark(var(--grey700), #d1cfc7);
     --placeholder-opacity: 0.35;
-    --shadow: 0 1px 3px hsla(51, 90%, 42%, .35);
+    --shadow: 0 1px 3px light-dark(hsla(51, 90%, 42%, .35), #232321);
 
     display: flex;
     align-items: center;
     position: relative;
     font-size: 18px;
     padding: var(--space-s) var(--space-m);
-    background-color: white;
+    background-color: light-dark(white, #141413);
     border-radius: var(--space-3xs);
     box-shadow: var(--shadow);
     transition: all var(--transition-slow);
@@ -26,8 +26,8 @@
     }
 
     &.optional {
-        --range-color: var(--grey600);
-        --crate-color: var(--grey600);
+        --range-color: light-dark(var(--grey600), var(--grey600));
+        --crate-color: light-dark(var(--grey600), var(--grey600));
         --placeholder-opacity: 0.15;
     }
 

app/components/dropdown/menu.module.css

@@ -2,7 +2,7 @@
     margin: 0;
     text-align: left;
     padding: 0;
-    background: white;
+    background: light-dark(white, #141413);
     border: 1px solid var(--gray-border);
     list-style: none;
     overflow: hidden;

app/components/dropdown/trigger.hbs

@@ -1,4 +1,6 @@
 <button type="button" local-class="button" {{on "click" @toggle}} ...attributes>
   {{yield}}
-  <span local-class="arrow"></span>
+  {{#unless @hideArrow}}
+    <span local-class="arrow"></span>
+  {{/unless}}
 </button>

app/components/front-page-list/item.module.css

@@ -1,13 +1,13 @@
 .link {
-    --shadow: 0 2px 3px hsla(51, 50%, 44%, .35);
+    --shadow: 0 2px 3px light-dark(hsla(51, 50%, 44%, .35), #232321);
 
     display: flex;
     align-items: center;
     width: 100%;
     height: var(--space-2xl);
     padding: 0 var(--space-s);
-    background-color: white;
-    color: #525252;
+    background-color: light-dark(white, #141413);
+    color: light-dark(#525252, #f9f7ec);
     text-decoration: none;
     border-radius: var(--space-3xs);
     box-shadow: var(--shadow);
@@ -19,8 +19,8 @@
     }
 
     &:hover, &:focus-visible {
-        color: #525252;
-        background-color: hsl(58deg 72% 97%);
+        color: light-dark(#525252, #f9f7ec);
+        background-color: light-dark(hsl(58deg 72% 97%), hsl(204, 3%, 11%));
         transition: background-color var(--transition-instant);
     }
 
@@ -48,13 +48,13 @@
 .subtitle {
     margin-top: var(--space-3xs);
     font-size: 13px;
-    color: rgb(118, 131, 138);
+    color: light-dark(rgb(118, 131, 138), #cccac2);
 }
 
 .right {
     flex-shrink: 0;
     height: var(--space-s);
     width: auto;
     margin-left: var(--space-xs);
-    color: rgb(118, 131, 138);
+    color: light-dark(rgb(118, 131, 138), #cccac2);
 }

app/components/front-page-list/item/placeholder.module.css

@@ -1,17 +1,17 @@
 .link {
-    --shadow: 0 2px 3px hsla(51, 50%, 44%, .35);
-    --placeholder-bg: hsla(59, 19%, 50%, 1.0);
-    --placeholder-bg2: hsla(59, 19%, 50%, 0.7);
+    --shadow: 0 2px 3px light-dark(hsla(51, 50%, 44%, .35), #232321);
+    --placeholder-bg: light-dark(hsla(59, 19%, 50%, 1.0), hsl(60, 14%, 85%));
+    --placeholder-bg2: light-dark(hsla(59, 19%, 50%, 0.7), hsla(59, 5%, 50%, 0.7));
 
     display: flex;
     align-items: center;
     width: 100%;
-    height: 60px;
+    height: var(--space-2xl);
     margin: 8px 0;
-    padding: 0 15px;
-    background-color: white;
-    color: #525252;
-    border-radius: 5px;
+    padding: 0 var(--space-s);
+    background-color: light-dark(white, #141413);
+    color: light-dark(#525252, #f9f7ec);
+    border-radius: var(--space-3xs);
     box-shadow: var(--shadow);
     cursor: wait;
 }
@@ -31,15 +31,15 @@
 .subtitle {
     height: 13px;
     width: 90px;
-    margin-top: 4px;
+    margin-top: var(--space-3xs);
     border-radius: 6.5px;
     opacity: 0.2;
 }
 
 .right {
     flex-shrink: 0;
-    height: 16px;
+    height: var(--space-s);
     width: auto;
-    margin-left: 10px;
-    color: rgb(118, 131, 138);
+    margin-left: var(--space-xs);
+    color: light-dark(rgb(118, 131, 138), #cccac2);
 }

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/components/pagination.module.css

@@ -23,6 +23,23 @@
 
     img, svg { vertical-align: middle; }
 
+
+    .prev, .next {
+        circle {
+            fill: none;
+        }
+
+        path {
+            fill: currentColor;
+        }
+
+        &:hover {
+            circle {
+                fill: var(--main-bg-dark);
+            }
+        }
+    }
+
     .next:global(.active),
     .prev:global(.active),
     .next:hover,

app/components/rev-dep-row.module.css

@@ -1,13 +1,13 @@
 .row {
-    --hover-bg-color: hsl(217, 37%, 98%);
-    --crate-color: var(--grey700);
+    --hover-bg-color: light-dark(hsl(217, 37%, 98%), hsl(204, 3%, 11%));
+    --crate-color: light-dark(var(--grey700), var(--grey600));
     --placeholder-opacity: 0.35;
-    --shadow: 0 1px 3px hsla(51, 90%, 42%, .35);
+    --shadow: 0 1px 3px light-dark(hsla(51, 90%, 42%, .35), #232321);
 
     position: relative;
     font-size: 18px;
     padding: var(--space-s) var(--space-m);
-    background-color: white;
+    background-color: light-dark(white, #141413);
     border-radius: var(--space-3xs);
     box-shadow: var(--shadow);
     transition: all var(--transition-slow);

app/components/search-form.module.css

@@ -25,11 +25,12 @@
     --search-form-focus-shadow: 0 0 0 var(--space-3xs) var(--yellow500);
 
     border: none;
-    color: black;
+    color: light-dark(black, var(--main-color));
+    background: light-dark(white, hsl(0, 1%, 19%));
     width: 100%;
     padding: var(--input-padding) var(--input-padding-right) var(--input-padding) var(--input-padding-left);
     border-radius: var(--border-radius);
-    box-shadow: 1px 2px 4px 0 var(--green900);
+    box-shadow: 1px 2px 4px 0 light-dark(var(--green900), hsl(111, 10%, 8%));
     transition: box-shadow var(--transition-fast);
 
     &:focus {