Using theme-light global flag

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

src/renderer/components/kubeconfig-dialog/kubeconfig-dialog.scss

@@ -1,5 +1,5 @@
 .KubeConfigDialog {
-  &.light {
+  .theme-light & {
     .AceEditor {
       border: 1px solid gainsboro;
       border-radius: $radius;

src/renderer/components/kubeconfig-dialog/kubeconfig-dialog.tsx

@@ -13,7 +13,6 @@ import { Dialog, DialogProps } from "../dialog";
 import { Icon } from "../icon";
 import { Notifications } from "../notifications";
 import { Wizard, WizardStep } from "../wizard";
-import { themeStore } from "../../theme.store";
 import { apiBase } from "../../api";
 
 interface IKubeconfigDialogData {
@@ -92,7 +91,7 @@ export class KubeConfigDialog extends React.Component<Props> {
     return (
       <Dialog
         {...dialogProps}
-        className={cssNames("KubeConfigDialog", themeStore.activeTheme.type)}
+        className={cssNames("KubeConfigDialog")}
         isOpen={isOpen}
         onOpen={this.onOpen}
         close={this.close}

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/virtual-list/virtual-list.scss

@@ -1,14 +1,13 @@
 .VirtualList {
   overflow: hidden;
 
-  &.light {
-    .list {
-      @include custom-scrollbar(dark);
-    }
-  }
-
   > .list {
     @include custom-scrollbar;
+
+    .theme-light & {
+      @include custom-scrollbar(dark);
+    }
+
     overflow-y: overlay !important;
     overflow-x: hidden !important;
   }