feat(app): implement dark mode

Closes #13
christianliebel · Jul 27, 2020 · 8a11e08 · 8a11e08
1 parent d092c17
commit 8a11e08
Show file tree

Hide file tree

Showing 30 changed files with 182 additions and 122 deletions.
diff --git a/README.md b/README.md
@@ -26,6 +26,7 @@ This project demonstrates the use of:
 - [Async Clipboard API](https://web.dev/image-support-for-async-clipboard/) for clipboard access
 - [Web Share API Level 2](https://web.dev/web-share/#sharing-files) for sharing images to other applications via _File > Send…_
 - [StorageManager API](https://web.dev/storage-for-the-web/#check) for estimating storage usage in _Help > About Paint_
+- [prefers-color-scheme](https://web.dev/prefers-color-scheme/) for dark mode
 - [Snowpack](https://www.snowpack.dev/), a bundle-free, O(1) build system
 
 ## Goals

diff --git a/assets/tools-dark.png b/assets/tools-dark.png
diff --git a/assets/tools-light.png b/assets/tools-light.png
diff --git a/elements/app.js b/elements/app.js
@@ -19,11 +19,18 @@ class App extends LitElement {
     return css`
       :host {
         --button-face: rgb(192 192 192);
-        --canvas: rgb(128 128 128);
+        --button-light: white;
+        --button-dark: rgb(128 128 128);
+        --button-darker: black;
         --button-text: black;
+        --canvas: rgb(128 128 128);
+        --disabled-text: rgb(128 128 128);
         --highlight: rgb(0 0 128);
         --highlight-text: white;
+        --highlight-disabled-text: rgb(128 128 128);
+        --disabled-text-backdrop: white;
         --selected-background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAAAAABX3VL4AAAADklEQVQIHWP4f4DhwH8ACoADf16N/DIAAAAASUVORK5CYII=');
+
         --z-index-menu: 10;
         --z-index-dialog: 20;
 
@@ -44,6 +51,22 @@ class App extends LitElement {
         -webkit-tap-highlight-color: transparent;
       }
 
+      @media (prefers-color-scheme: dark) {
+        :host {
+          --button-face: rgb(64 64 64);
+          --button-light: rgb(128 128 128);
+          --button-dark: rgb(32 32 32);
+          --button-text: white;
+          --canvas: rgb(32 32 32);
+          --disabled-text: rgb(64 64 64);
+          --highlight: rgb(0 0 128);
+          --highlight-text: white;
+          --highlight-disabled-text: rgb(128 128 128);
+          --disabled-text-backdrop: rgb(192 192 192);
+          --selected-background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAAAAABX3VL4AAAADklEQVQIHWNocGBwaAAABIYBga3c92oAAAAASUVORK5CYII=');
+        }
+      }
+
       @media print {
         * {
           display: none;

diff --git a/elements/canvas.js b/elements/canvas.js
@@ -19,9 +19,9 @@ class Canvas extends LitElement {
         height: 100%;
 
         box-sizing: border-box;
-        border: 1px solid var(--canvas);
-        border-bottom-color: var(--highlight-text);
-        border-right-color: var(--highlight-text);
+        border: 1px solid var(--button-dark);
+        border-bottom-color: var(--button-light);
+        border-right-color: var(--button-light);
 
         overflow: hidden;
       }
@@ -30,7 +30,7 @@ class Canvas extends LitElement {
         height: 100%;
 
         box-sizing: border-box;
-        border: 1px solid var(--button-text);
+        border: 1px solid var(--button-darker);
         border-bottom-color: var(--button-face);
         border-right-color: var(--button-face);
 

diff --git a/elements/color-picker.js b/elements/color-picker.js
@@ -12,16 +12,16 @@ class ColorPicker extends LitElement {
   static get styles() {
     return css`
       :host {
-        border: 1px solid var(--highlight-text);
-        border-top-color: var(--canvas);
-        border-left-color: var(--canvas);
+        border: 1px solid var(--button-light);
+        border-top-color: var(--button-dark);
+        border-left-color: var(--button-dark);
       }
 
       div.frame {
         box-sizing: border-box;
         border: 1px solid var(--button-face);
-        border-top-color: var(--button-text);
-        border-left-color: var(--button-text);
+        border-top-color: var(--button-darker);
+        border-left-color: var(--button-darker);
         height: 100%;
       }
     `;

diff --git a/elements/color-switcher.js b/elements/color-switcher.js
@@ -11,18 +11,18 @@ class ColorSwitcher extends LitElement {
   static get styles() {
     return css`
       :host {
-        border: 1px solid var(--highlight-text);
-        border-top-color: var(--canvas);
-        border-left-color: var(--canvas);
+        border: 1px solid var(--button-light);
+        border-top-color: var(--button-dark);
+        border-left-color: var(--button-dark);
         background: var(--selected-background);
         image-rendering: pixelated;
       }
 
       div.frame {
         box-sizing: border-box;
         border: 1px solid var(--button-face);
-        border-top-color: var(--button-text);
-        border-left-color: var(--button-text);
+        border-top-color: var(--button-darker);
+        border-left-color: var(--button-darker);
         height: 100%;
         padding: 3px 2px;
         position: relative;
@@ -32,9 +32,9 @@ class ColorSwitcher extends LitElement {
         box-sizing: border-box;
         width: 15px;
         height: 15px;
-        border: 1px solid var(--canvas);
-        border-top-color: var(--highlight-text);
-        border-left-color: var(--highlight-text);
+        border: 1px solid var(--button-dark);
+        border-top-color: var(--button-light);
+        border-left-color: var(--button-light);
         position: absolute;
         z-index: 2;
       }

diff --git a/elements/dialogs/about.js b/elements/dialogs/about.js
@@ -40,6 +40,10 @@ export class About extends LitElement {
         margin-right: 1px;
         float: right;
       }
+
+      a {
+        color: var(--button-text);
+      }
     `;
   }
 

diff --git a/elements/inset-container.js b/elements/inset-container.js
@@ -7,9 +7,9 @@ class InsetContainer extends LitElement {
     return css`
       :host {
         box-sizing: border-box;
-        border: 1px solid var(--canvas);
-        border-bottom-color: var(--highlight-text);
-        border-right-color: var(--highlight-text);
+        border: 1px solid var(--button-dark);
+        border-bottom-color: var(--button-light);
+        border-right-color: var(--button-light);
 
         display: flex;
         align-items: flex-end;

diff --git a/elements/menu.js b/elements/menu.js
@@ -18,7 +18,7 @@ class Menu extends LitElement {
         z-index: var(--z-index-menu);
         display: inline-block;
         box-sizing: border-box;
-        border: 1px solid var(--button-text);
+        border: 1px solid var(--button-darker);
         border-top: 1px solid var(--button-face);
         border-left: 1px solid var(--button-face);
         background-color: var(--button-face);
@@ -32,8 +32,8 @@ class Menu extends LitElement {
 
       div.frame {
         border: 1px solid var(--canvas);
-        border-top: 1px solid var(--highlight-text);
-        border-left: 1px solid var(--highlight-text);
+        border-top: 1px solid var(--button-light);
+        border-left: 1px solid var(--button-light);
         display: grid;
         grid-template-columns: 22px auto auto 19px;
         padding: 1px;
@@ -79,30 +79,34 @@ class Menu extends LitElement {
         padding-left: 9px;
       }
 
+      .menu-entry span {
+        fill: var(--button-text);
+      }
+
       .menu-entry:hover span {
         background-color: var(--highlight);
         color: var(--highlight-text);
         fill: var(--highlight-text);
-        text-shadow: none;
       }
 
       .menu-entry.disabled:hover span {
-        color: var(--canvas);
-        fill: var(--canvas);
+        color: var(--highlight-disabled-text);
+        fill: var(--highlight-disabled-text);
+        text-shadow: none;
       }
 
       .menu-entry.disabled:hover svg .shadow {
         fill: transparent;
       }
 
-      .disabled {
-        color: var(--canvas);
-        fill: var(--canvas);
-        text-shadow: 1px 1px 0 var(--highlight-text);
+      .menu-entry.disabled span {
+        color: var(--disabled-text);
+        fill: var(--disabled-text);
+        text-shadow: 1px 1px 0 var(--disabled-text-backdrop);
       }
 
       .disabled svg .shadow {
-        fill: var(--highlight-text);
+        fill: var(--disabled-text-backdrop);
       }
     `;
   }

diff --git a/elements/ruler.js b/elements/ruler.js
@@ -5,8 +5,8 @@ class Ruler extends LitElement {
     return css`
       :host {
         display: block;
-        border-top: 1px solid var(--canvas);
-        border-bottom: 1px solid var(--highlight-text);
+        border-top: 1px solid var(--button-dark);
+        border-bottom: 1px solid var(--button-light);
       }
     `;
   }

diff --git a/elements/status-bar.js b/elements/status-bar.js
@@ -35,6 +35,12 @@ class StatusBar extends LitElement {
         margin-right: 3px;
         image-rendering: pixelated;
       }
+
+      @media (prefers-color-scheme: dark) {
+        img {
+          filter: invert(1);
+        }
+      }
     `;
   }
 

diff --git a/elements/tool-fill-style.js b/elements/tool-fill-style.js
@@ -44,7 +44,7 @@ export class ToolFillStyle extends LitElement {
       }
 
       li .item.fill {
-        background-color: var(--canvas);
+        background-color: var(--button-dark);
       }
     `;
   }

diff --git a/elements/tool.js b/elements/tool.js
@@ -14,42 +14,60 @@ class Tool extends LitElement {
         box-sizing: border-box;
         width: 25px;
         height: 25px;
-        border: 1px solid var(--button-text);
-        border-top: 1px solid var(--highlight-text);
-        border-left: 1px solid var(--highlight-text);
+        border: 1px solid var(--button-darker);
+        border-top: 1px solid var(--button-light);
+        border-left: 1px solid var(--button-light);
         background-color: var(--button-face);
-        image-rendering: pixelated;
       }
 
-      div {
-        box-sizing: border-box;
+      div.wrapper {
         height: 100%;
-        border: 1px solid var(--canvas);
+        border: 1px solid var(--button-dark);
         border-top: 1px solid var(--button-face);
         border-left: 1px solid var(--button-face);
-        background-position: 2px 2px;
+      }
+
+      div.tool {
+        display: inline-block;
+        width: 16px;
+        height: 16px;
+        image-rendering: pixelated;
+        background-image: url('assets/tools-light.png');
         background-repeat: no-repeat;
+        margin: 2px;
+      }
+
+      @media (prefers-color-scheme: dark) {
+        div.tool {
+          background-image: url('assets/tools-dark.png');
+        }
       }
 
       :host(.active),
       :host(:active) {
-        border: 1px solid var(--highlight-text);
-        border-top: 1px solid var(--button-text);
-        border-left: 1px solid var(--button-text);
-        background: var(--selected-background);
+        border: 1px solid var(--button-light);
+        border-top: 1px solid var(--button-darker);
+        border-left: 1px solid var(--button-darker);
+        background-image: var(--selected-background);
       }
 
-      :host(.active) div,
-      :host(:active) div {
+      :host(.active) div.wrapper,
+      :host(:active) div.wrapper {
         border: 1px solid var(--button-face);
-        border-top: 1px solid var(--canvas);
-        border-left: 1px solid var(--canvas);
-        background-position: 3px 3px;
+        border-top: 1px solid var(--button-dark);
+        border-left: 1px solid var(--button-dark);
       }
 
-      :host(:active) div {
+      :host(:active) div.wrapper {
         background-color: var(--button-face);
-        background-position: 4px 4px;
+      }
+
+      :host(.active) div.tool {
+        margin: 3px;
+      }
+
+      :host(:active) div.tool {
+        margin: 4px;
       }
     `;
   }
@@ -74,7 +92,12 @@ class Tool extends LitElement {
 
   render() {
     return html`
-      <div style="background-image: url('${this.tool.image}')"></div>
+      <div class="wrapper">
+        <div
+          class="tool"
+          style="background-position: ${this.tool.imagePosition}"
+        ></div>
+      </div>
     `;
   }
 }

diff --git a/elements/window/title-bar-button.js b/elements/window/title-bar-button.js
@@ -14,26 +14,26 @@ export class TitleBarButton extends LitElement {
         box-sizing: border-box;
         width: 16px;
         height: 14px;
-        border: 1px solid var(--highlight-text);
-        border-bottom-color: var(--button-text);
-        border-right-color: var(--button-text);
+        border: 1px solid var(--button-light);
+        border-bottom-color: var(--button-darker);
+        border-right-color: var(--button-darker);
         background-color: var(--button-face);
       }
 
       div.wrapper {
         box-sizing: border-box;
         height: 12px;
         border: 1px solid transparent;
-        border-bottom-color: var(--canvas);
-        border-right-color: var(--canvas);
+        border-bottom-color: var(--button-dark);
+        border-right-color: var(--button-dark);
         display: flex;
         justify-content: center;
       }
 
       :host(:active) {
-        border: 1px solid var(--button-text);
-        border-bottom-color: var(--highlight-text);
-        border-right-color: var(--highlight-text);
+        border: 1px solid var(--button-darker);
+        border-bottom-color: var(--button-light);
+        border-right-color: var(--button-light);
       }
 
       :host(:active) div.wrapper {
-Original file line number
+Diff line change
@@ Expand Up / @@ -40,6 +40,10 @@ export class About extends LitElement { @@
             margin-right: 1px;
             float: right;
           }
+          a {
+            color: var(--button-text);
+          }
         `;
       }
@@ Expand Down @@