Support dark mode

.gitignore

@@ -25,3 +25,4 @@ docker-compose.override.yml
 *~
 src/schema.rs.orig
 
+.DS_Store

app/app.js

@@ -5,6 +5,9 @@ import Resolver from 'ember-resolver';
 
 import config from './config/environment';
 import * as Sentry from './sentry';
+import { theme } from './utils/theme';
+
+theme.loadSettingTheme();
 
 if (typeof FastBoot === 'undefined') {
   // eslint-disable-next-line unicorn/prefer-add-event-listener

app/components/crate-downloads-list.module.css

@@ -8,8 +8,8 @@
 }
 
 .link {
-    color: #525252;
-    background-color: #edebdd;
+    color: var(--download-list-link);
+    background-color: var(--main-bg-dark);
     font-size: 90%;
     padding: 20px 10px;
     display: flex;

app/components/crate-row.module.css

@@ -1,10 +1,9 @@
 .crate-row {
-    --shadow: 0 1px 3px hsla(51, 90%, 42%, .35);
-
     display: flex;
     flex-wrap: wrap;
     padding: 15px 25px;
-    background-color: white;
+    background-color: var(--item-background);
+    color: var(--item);
     border-radius: 5px;
     box-shadow: var(--shadow);
     transition: all 300ms;

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

@@ -4,20 +4,19 @@
     --range-color: var(--grey900);
     --crate-color: var(--grey700);
     --placeholder-opacity: 0.35;
-    --shadow: 0 1px 3px hsla(51, 90%, 42%, .35);
-
+
     display: flex;
     align-items: center;
     position: relative;
     font-size: 18px;
     padding: 15px 25px;
-    background-color: white;
+    background-color: var(--item-background);
     border-radius: 5px;
     box-shadow: var(--shadow);
     transition: all 300ms;
 
     &:hover, &.focused {
-        background-color: var(--hover-bg-color);
+        background-color: var(--item-hover);
         transition: all 0ms;
     }
 

app/components/dropdown/menu-item.module.css

@@ -1,15 +1,16 @@
 .item {
-    > a, button {
+    > a, span, button {
         font-size: 90%;
         width: 100%;
         display: inline-flex;
         text-align: start;
         padding: 8px 10px;
         text-decoration: none;
+        cursor: pointer;
         color: var(--main-color) !important;
 
         &:hover {
-            background: #5e5e5e;
+            background: var(--menu-hover);
             color: white !important;
         }
     }

app/components/dropdown/menu.module.css

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

app/components/email-input.module.css

@@ -6,7 +6,7 @@
 
 .row {
     width: 100%;
-    border: 1px solid #d5d3cb;
+    border: 1px solid var(--gray-border);
     border-bottom-width: 0;
     padding: 10px 20px;
     display: flex;

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

@@ -1,17 +1,16 @@
 .link {
-    --shadow: 0 2px 3px hsla(51, 50%, 44%, .35);
 
     display: flex;
     align-items: center;
     width: 100%;
     height: 60px;
     margin: 8px 0;
     padding: 0 15px;
-    background-color: white;
-    color: #525252;
+    background-color: var(--item-background);
+    color: var(--item);
     text-decoration: none;
     border-radius: 5px;
-    box-shadow: var(--shadow);
+    box-shadow: var(--shadow2);
     transition: background-color 300ms;
 
     &:focus-visible {
@@ -20,14 +19,14 @@
     }
 
     &:hover, &:focus-visible {
-        color: #525252;
-        background-color: hsl(58deg 72% 97%);
+        color: var(--download-list-link);
+        background-color: var(--item-hover);
         transition: background-color 0ms;
     }
 
     &:active {
         transform: translateY(2px);
-        --shadow: inset 0 0 0 1px hsla(51, 50%, 44%, .15);
+        box-shadow: inset 0 0 0 1px hsla(51, 50%, 44%, .15);;
     }
 }
 

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

@@ -1,5 +1,4 @@
 .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);
 
@@ -9,10 +8,10 @@
     height: 60px;
     margin: 8px 0;
     padding: 0 15px;
-    background-color: white;
-    color: #525252;
+    background-color: var(--item-background);
+    color: var(--download-list-link);
     border-radius: 5px;
-    box-shadow: var(--shadow);
+    box-shadow: var(--shadow2);
     cursor: wait;
 }
 

app/components/header.hbs

@@ -32,6 +32,17 @@
         Browse All Crates
       </LinkTo>
       <span local-class="sep">|</span>
+      <Dropdown as |dd|>
+        <dd.Trigger local-class="dropdown-button">
+          Theme
+        </dd.Trigger>
+        <dd.Menu local-class="doc-links" as |menu|>
+          <menu.Item onclick={{this.useSystemTheme}}><span>Sync with system</span></menu.Item>
+          <menu.Item onclick={{this.useLightTheme}}><span>Light theme</span></menu.Item>
+          <menu.Item onclick={{this.useDarkTheme}}><span>Dark theme</span></menu.Item>
+        </dd.Menu>
+      </Dropdown>
+      <span local-class="sep">|</span>
       <Dropdown as |dd|>
         <dd.Trigger local-class="dropdown-button">
           Docs

app/components/header.js

@@ -2,6 +2,8 @@ import { action } from '@ember/object';
 import { inject as service } from '@ember/service';
 import Component from '@glimmer/component';
 
+import { theme } from '../utils/theme';
+
 export default class Header extends Component {
   @service header;
   @service router;
@@ -20,4 +22,16 @@ export default class Header extends Component {
       },
     });
   }
+
+  @action useSystemTheme() {
+    theme.useSystemTheme();
+  }
+
+  @action useLightTheme() {
+    theme.useLightTheme();
+  }
+
+  @action useDarkTheme() {
+    theme.useDarkTheme();
+  }
 }

app/components/owned-crate-row.module.css

@@ -2,7 +2,7 @@
     display: flex;
     align-items: center;
     background-color: #fff;
-    border: 1px solid #d5d3cb;
+    border: 1px solid var(--gray-border);
     padding: 20px 30px;
     font-weight: bold;
     cursor: pointer;
@@ -24,12 +24,12 @@
     width: 36px;
     height: 36px;
     margin-left: 10px;
-    border: 2px solid #d5d3cb;
+    border: 2px solid var(--gray-border);
     border-radius: 50%;
 
     .checked & {
-        background-color: #cfc487;
-        border-color: #cfc487;
+        background-color: var(--owned-crate-checked);
+        border-color: var(--owned-crate-checked);
     }
 }
 

app/components/rendered-html.module.css

@@ -20,8 +20,9 @@
 
     p {
         code {
-            background-color: #fff;
-            padding: 0 2px;
+            background-color: var(--code);
+            padding: 0 4px;
+            border-radius: 2px;
         }
     }
 
@@ -35,7 +36,7 @@
         overflow-x: auto;
 
         th, td {
-            border: 1px solid #dfe2e5;
+            border: 1px solid var(--rendered-html-table);
             padding: 6px 13px;
         }
     }

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

@@ -2,18 +2,17 @@
     --hover-bg-color: hsl(217, 37%, 98%);
     --crate-color: var(--grey700);
     --placeholder-opacity: 0.35;
-    --shadow: 0 1px 3px hsla(51, 90%, 42%, .35);
-
+
     position: relative;
     font-size: 18px;
     padding: 15px 25px;
-    background-color: white;
+    background-color: var(--item-background);
     border-radius: 5px;
     box-shadow: var(--shadow);
     transition: all 300ms;
 
     &:hover, &.focused {
-        background-color: var(--hover-bg-color);
+        background-color: var(--item-hover);
         transition: all 0ms;
     }
 

app/components/settings/api-tokens.module.css

@@ -21,7 +21,7 @@
 
 .row {
     width: 100%;
-    border: 1px solid #d5d3cb;
+    border: 1px solid var(--gray-border);
     border-bottom-width: 0;
     padding: 10px 20px;
     display: flex;

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

@@ -2,20 +2,19 @@
     --bg-color: var(--grey200);
     --hover-bg-color: hsl(217, 37%, 98%);
     --fg-color: var(--grey700);
-    --shadow: 0 1px 3px hsla(51, 90%, 42%, .35);
 
     display: flex;
     align-items: center;
     position: relative;
     font-size: 18px;
     padding: 15px 25px;
-    background-color: white;
+    background-color: var(--item-background);
     border-radius: 5px;
-    box-shadow: var(--shadow);
+    box-shadow: var(--shadow2);
     transition: all 300ms;
 
     &:hover, &.focused {
-        background-color: var(--hover-bg-color);
+        background-color: var(--item-hover);
         transition: all 0ms;
     }
 

app/index.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" data-color-mode="auto" data-light-theme="light" data-dark-theme="dark">
   <head>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">

app/styles/application.module.css

@@ -1,29 +1,25 @@
+@import url(./theme.module.css);
+
 :root {
     --violet800: hsl(252, 44%, 24%);
     --grey900: hsl(200, 15%, 19%);
     --grey700: hsl(200, 11%, 43%);
     --grey600: hsl(200, 13%, 60%);
     --grey200: hsl(200, 17%, 96%);
-    --green800: hsl(115, 31%, 31%);
     --yellow500: hsl(44, 100%, 60%);
 
-    --header-bg-color: var(--green800);
-    --footer-bg-color: var(--green800);
-
     --font-sans: "Fira Sans", sans-serif;
     --font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
-
-    --main-color: #383838;
     --main-color-light: #858585;
-    --main-bg: #f9f7ec;
-    --main-bg-dark: #edebdd;
-    --gray-border: #d5d3cb;
-    --link-color: rgb(0, 172, 91);
-    --link-hover-color: #007940;
-    --separator-color: #284725;
 
+    --download-list-link: #525252;
+    --owned-crate-checked: #cfc487;
+    --rendered-html-table: #dfe2e5;
     --placeholder-bg: hsl(212, 7%, 57%);
     --placeholder-bg2: hsl(213, 16%, 75%);
+    --separator-color: #284725;
+    --link-hover-color: #007940;
+    --link-color: rgb(0, 172, 91);
 }
 
 :global(.new-design) {

app/styles/crate/version.module.css

@@ -6,13 +6,11 @@
 }
 
 .docs {
-    --shadow: 0 2px 3px hsla(51, 50%, 44%, .35);
-
     margin-bottom: 25px;
     padding: 25px;
-    background-color: white;
+    background-color: var(--item-background);
     border-radius: 5px;
-    box-shadow: var(--shadow);
+    box-shadow: var(--shadow2);
 
     @media only screen and (max-width: 550px) {
         margin-left: -15px;
@@ -104,6 +102,9 @@
         font-size: 160%;
         font-weight: bold;
         margin-bottom: 4px;
+        circle {
+            fill: #fff;
+        }
     }
 
     .num__align {

app/styles/crates.module.css

@@ -4,7 +4,7 @@
     justify-content: space-between;
     padding: 20px;
     border-radius: 5px;
-    background-color: white;
+    background-color: var(--item-background);
     margin-bottom: 40px;
 
     a {

app/styles/dashboard.module.css

@@ -81,7 +81,7 @@
 }
 
 .feed {
-    background: white;
+    background: var(--item-background);
     padding: 0 20px 20px;
 }