Merge pull request #8559 from Turbo87/dark-mode

Implement dark mode via `light-dark()` fn

Author: Turbo87

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);
 }