add theming via css custom properties

and a bonus dark color theme toggle

1 files changed, 13 insertions, 3 deletions

diff --git a/client/src/app/menu/menu.component.scss b/client/src/app/menu/menu.component.scss
index 941c208e2..4ef330b2f 100644
--- a/client/src/app/menu/menu.component.scss
+++ b/client/src/app/menu/menu.component.scss
@@ -9,7 +9,7 @@
 }
 
 menu {
-  background-color: $black-background;
+  background-color: $menu-background;
   margin: 0;
   padding: 0;
   height: 100%;
@@ -190,10 +190,10 @@ menu {
   }
 
   .footer {
-    margin-bottom: 15px;
+    padding-bottom: 15px;
     padding-left: $menu-left-padding;
 
-    .language {
+    .language, .color-palette {
       display: inline-block;
       color: $menu-bottom-color;
       cursor: pointer;
@@ -213,6 +213,16 @@ menu {
           background-image: url('../../assets/images/menu/language.png');
         }
 
+        &.icon-moonsun  {
+          margin-left: 10px;
+          position: relative;
+          top: -1px;
+          width: 24px;
+          height: 24px;
+
+          background-image: url('../../assets/images/menu/moonsun.svg');
+        }
+
         &:hover {
           opacity: 1;
         }