Switching color theme globally (#728)

* Adding cluster menu colors

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Adding theme class name flag into #app

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Cleaning up mixins

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Tuning up Wizard Layout styles

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Using theme-light global flag

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Minor style fixes

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Using .theme-light flag across components

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Set theme as @computed value

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Preventing Drawer slide-in scroll flickering

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Setting background for settings views

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Minor layout fixes

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Switching AceEditor theme reactively

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Cleaning up

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

src/renderer/components/layout/main-layout.scss

@@ -8,13 +8,6 @@
   grid-template-columns: [sidebar] minmax(var(--main-layout-header), min-content) [main] 1fr;
   height: 100%;
 
-  &.light {
-    main {
-      @include custom-scrollbar(dark);
-      overflow-y: scroll;
-    }
-  }
-
   > .Tabs {
     grid-area: tabs;
     background: $layoutTabsBackground;
@@ -69,6 +62,10 @@
     @include custom-scrollbar;
     $spacing: $margin * 2;
 
+    .theme-light & {
+      @include custom-scrollbar(dark);
+    }
+
     grid-area: main;
     overflow-y: scroll; // always reserve space for scrollbar (17px)
     overflow-x: auto;

src/renderer/components/layout/main-layout.tsx

@@ -11,7 +11,6 @@ import { ErrorBoundary } from "../error-boundary";
 import { Dock } from "../dock";
 import { navigate, navigation } from "../../navigation";
 import { getHostedCluster } from "../../../common/cluster-store";
-import { themeStore } from "../../theme.store";
 
 export interface TabRoute extends RouteProps {
   title: React.ReactNode;
@@ -50,7 +49,7 @@ export class MainLayout extends React.Component<Props> {
     const routePath = navigation.location.pathname;
     const cluster = getHostedCluster();
     return (
-      <div className={cssNames("MainLayout", className, themeStore.activeTheme.type)}>
+      <div className={cssNames("MainLayout", className)}>
         <header className={cssNames("flex gaps align-center", headerClass)}>
           <span className="cluster">
             {cluster.preferences?.clusterName || cluster.contextName}

src/renderer/components/layout/sidebar.scss

@@ -20,6 +20,10 @@
   &.pinned {
     .sidebar-nav {
       @include custom-scrollbar;
+
+      .theme-light & {
+        @include custom-scrollbar(dark);
+      }
     }
   }
 

src/renderer/components/layout/wizard-layout.scss

@@ -2,7 +2,7 @@
   $spacing: $padding * 2;
 
   position: relative;
-  padding: $padding * 3;
+  padding: $padding * 2;
   height: 100%;
   display: grid;
   grid-template-columns: 1fr 40%;
@@ -11,17 +11,21 @@
     @include custom-scrollbar;
     --flex-gap: #{$spacing};
     padding: $spacing;
+
+    .theme-light & {
+      @include custom-scrollbar(dark);
+    }
   }
 
   > .head-col {
     position: sticky;
-    border-bottom: 1px solid $grey-800;
     justify-content: space-between;
+    background-color: $clusterMenuBackground;
   }
 
   > .content-col {
     margin-right: $spacing;
-    background-color: var(--clusters-menu-bgc);
+    background-color: $contentColor;
     border-radius: $radius;
 
     > div {
@@ -36,7 +40,7 @@
   }
 
   > .info-col {
-    border-left: 1px solid #353a3e;
+    background-color: $contentColor;
   }
 
   p {