From a0470519d74cebb70b5699e9f5c9dd4982fcabe3 Mon Sep 17 00:00:00 2001
From: Tulir Asokan <tulir@maunium.net>
Date: Fri, 11 Sep 2020 19:07:54 +0300
Subject: Add support for dark theme. Fixes #17

---
 web/style/index.sass | 49 ++++++++++++++++++++++++++++++++++++++++---------
 1 file changed, 40 insertions(+), 9 deletions(-)

(limited to 'web/style/index.sass')

diff --git a/web/style/index.sass b/web/style/index.sass
index d7884d6..4936836 100644
--- a/web/style/index.sass
+++ b/web/style/index.sass
@@ -23,6 +23,8 @@ $nav-height: calc(#{$nav-sticker-size} + #{$nav-bottom-highlight})
 $nav-height-inverse: calc(-#{$nav-sticker-size} - #{$nav-bottom-highlight})
 
 main
+  color: var(--text-color)
+
   &.spinner
     margin-top: 5rem
 
@@ -42,25 +44,49 @@ main
     display: grid
     grid-template-rows: $nav-height auto
 
+main.theme-light
+  --highlight-color: #eee
+  --text-color: black
+  background-color: white
+
+main.theme-dark
+  --highlight-color: #444
+  --text-color: white
+  background-color: #22262e
+
+main.theme-black
+  --highlight-color: #222
+  --text-color: white
+  background-color: black
+
+.icon
+  width: 100%
+  height: 100%
+  background-color: var(--text-color)
+  mask-size: contain
+  -webkit-mask-size: contain
+  mask-image: var(--icon-image)
+  -webkit-mask-image: var(--icon-image)
+
+  &.icon-settings
+    --icon-image: url(../res/settings.svg)
+
+  &.icon-recent
+    --icon-image: url(../res/recent.svg)
+
 nav
   display: flex
   overflow-x: auto
 
-  height: $nav-height
-
-  background-color: white
-
   > a
     border-bottom: $nav-bottom-highlight solid transparent
+
     &.visible
       border-bottom-color: green
+
     > div.sticker
       width: $nav-sticker-size
       height: $nav-sticker-size
-    > div.sticker.icon > img
-      width: 70%
-      height: 70%
-      padding: 15%
 
 div.pack-list, nav
   scrollbar-width: none
@@ -99,7 +125,7 @@ div.sticker
   box-sizing: border-box
 
   &:hover
-    background-color: #eee
+    background-color: var(--highlight-color)
 
   > img
     display: none
@@ -109,6 +135,11 @@ div.sticker
     &.visible
       display: initial
 
+  > .icon
+    width: 70%
+    height: 70%
+    margin: 15%
+
 div.settings-list
   display: flex
   flex-direction: column
-- 
cgit v1.2.3