FEAT: darkmode (#155)

* darkmode fixes

* fix: darkmode: empty beats in active/ hovered state

* fix: color for empty beats

* fix: navbar background color

* Update src/assets/vars.scss

Co-authored-by: Adam Stachowicz <saibamenppl@gmail.com>

* Update src/assets/app.scss

Co-authored-by: Adam Stachowicz <saibamenppl@gmail.com>

* wip, split dark theme style by .dark and store light theme to normal

* add back missing css

* working switch theme button and tuning dark theme

* finish dark theme

Co-authored-by: Adam Stachowicz <saibamenppl@gmail.com>
Co-authored-by: LouisLam <louislam@users.noreply.github.com>

src/components/HeartbeatBar.vue

@@ -133,7 +133,7 @@ export default {
 }
 </script>
 
-<style scoped lang="scss">
+<style lang="scss" scoped>
 @import "../assets/vars.scss";
 
 .wrap {
@@ -150,6 +150,10 @@ export default {
 
         &.empty {
             background-color: aliceblue;
+
+            .dark & {
+                background-color: #d0d3d5;
+            }
         }
 
         &.down {
@@ -168,4 +172,10 @@ export default {
     }
 }
 
+.dark {
+    .hp-bar-big .beat.empty{
+        background-color: #848484;
+    }
+}
+
 </style>