added support for toggling between new light theme and dark theme. (#527)

* added support for toggling between new light theme and dark theme.

* improved light theme colors

* light-theme styles are now scoped and applied in each component/page

Co-authored-by: Catalin MUNTEANU <cmunteanu@bitdefender.com>

assets/App.vue

@@ -82,6 +82,9 @@ export default {
     if (this.hasSmallerScrollbars) {
       document.documentElement.classList.add("has-custom-scrollbars");
     }
+    if (this.hasLightTheme) {
+      document.documentElement.classList.add("has-light-theme");
+    }
     this.menuWidth = this.settings.menuWidth;
   },
   watch: {
@@ -92,6 +95,13 @@ export default {
         document.documentElement.classList.remove("has-custom-scrollbars");
       }
     },
+    hasLightTheme(newValue, oldValue) {
+      if (newValue) {
+        document.documentElement.classList.add("has-light-theme");
+      } else {
+        document.documentElement.classList.remove("has-light-theme");
+      }
+    }
   },
   computed: {
     ...mapState(["activeContainers", "isMobile", "settings"]),
@@ -99,6 +109,9 @@ export default {
     hasSmallerScrollbars() {
       return this.settings.smallerScrollbars;
     },
+    hasLightTheme() {
+      return this.settings.lightTheme;
+    },
   },
   methods: {
     ...mapActions({
@@ -146,6 +159,18 @@ export default {
     &:hover {
       left: -25px;
     }
+
+    html.has-light-theme & {
+      background-color: #7d7d68;
+    }
+  }
+}
+</style>
+<style lang="scss">
+html.has-light-theme .splitpanes--vertical > .splitpanes__splitter {
+  background: #DCDCDC;
+  &:hover {
+    background: #d8f0ca;
   }
 }
 </style>

assets/components/LogViewer.vue

@@ -91,6 +91,13 @@ export default {
 .date {
   background-color: #262626;
   color: #258ccd;
+
+  html.has-light-theme & {
+    background-color: #F0F0F0;
+    color: #009900;
+    padding-left: 5px;
+    padding-right: 5px;
+  }
 }
 
 .text {

assets/components/SideMenu.vue

@@ -88,6 +88,43 @@ aside {
   }
 }
 
+h1.title {
+  font-family: "Gafata", sans-serif;
+
+  html.has-light-theme & {
+    text-shadow: 1px 0px #ffdd57;
+
+    &.has-text-warning {
+      color: #ffcc00;
+    }
+  }
+}
+
+html.has-light-theme {
+  .menu-label {
+    color: #595959;
+  }
+
+  .menu-list a {
+    color: #444;
+
+    &:hover {
+      background-color: #eee8e7;
+    }
+    &.is-active {
+      background-color: #d8f0ca;
+      border-color: #d8f0ca;
+    }
+  }
+
+  .button {
+    &:active,
+    &.is-active {
+      color: #ffdd57;
+    }
+  }
+}
+
 li.exited a {
   color: #777;
 }
@@ -102,4 +139,6 @@ li.exited a {
     visibility: hidden;
   }
 }
+
+
 </style>

assets/pages/Index.vue

@@ -18,5 +18,13 @@ export default {
 .hero.is-dark {
   color: #ddd;
   background-color: #111;
+
+  html.has-light-theme & {
+    background-color: #F8F8F8;
+
+    .title {
+      color: #555;
+    }
+  }
 }
 </style>

assets/pages/Settings.vue

@@ -45,6 +45,12 @@
         </b-switch>
       </div>
 
+      <div class="item">
+        <b-switch v-model="lightTheme">
+          Use light theme
+        </b-switch>
+      </div>
+
       <div class="item">
         <h2 class="title is-6 is-marginless">Font size</h2>
         Modify the font size when viewing logs.
@@ -112,7 +118,7 @@ export default {
   },
   computed: {
     ...mapState(["settings"]),
-    ...["search", "size", "smallerScrollbars", "showTimestamp", "showAllContainers"].reduce((map, name) => {
+    ...["search", "size", "smallerScrollbars", "showTimestamp", "showAllContainers", "lightTheme"].reduce((map, name) => {
       map[name] = {
         get() {
           return this.settings[name];
@@ -148,6 +154,17 @@ a.next-release {
   border-bottom: 1px solid #fff;
   padding: 1em 0px;
   margin-bottom: 1em;
+
+  html.has-light-theme & {
+    border-bottom: 1px solid #DCDCDC;
+  }
+}
+
+html.has-light-theme .title {
+  &.is-4,
+  &.is-6 {
+    color: #555;
+  }
 }
 
 .item {
@@ -157,5 +174,10 @@ a.next-release {
 code {
   border-radius: 4px;
   background-color: #444;
+
+  html.has-light-theme & {
+    background-color: #999;
+    color: #FFF;
+  }
 }
 </style>

assets/store/settings.js

@@ -6,4 +6,5 @@ export const DEFAULT_SETTINGS = {
   smallerScrollbars: false,
   showTimestamp: true,
   showAllContainers: false,
+  lightTheme: false
 };

assets/styles.scss

@@ -14,15 +14,19 @@ html {
   overflow-y: unset;
   scroll-snap-type: y proximity;
   background-color: #111;
+
+  &.has-light-theme {
+    background-color: #F8F8F8;
+  }
 }
 
 body {
   font-family: "Roboto", sans-serif;
   color: #ddd;
-}
 
-h1.title {
-  font-family: "Gafata", sans-serif;
+  html.has-light-theme & {
+    color: #333;
+  }
 }
 
 html.has-custom-scrollbars {
@@ -70,4 +74,11 @@ html.has-custom-scrollbars {
     color: unset;
     border-color: transparent;
   }
+
+  html.has-light-theme & {
+    &:hover {
+      background: #7d7d68 !important;
+      border-color: #7d7d68 !important;
+    }
+  }
 }