Using .theme-light flag across components

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

src/renderer/components/+apps-releases/release-details.scss

@@ -1,13 +1,6 @@
 @import "release.mixins";
 
 .ReleaseDetails {
-  &.light {
-    .AceEditor {
-      border: 1px solid gainsboro;
-      border-radius: $radius;
-    }
-  }
-
   .DrawerItem {
     align-items: center;
   }

src/renderer/components/ace-editor/ace-editor.scss

@@ -5,14 +5,17 @@
   flex: 1;
   z-index: 10;
 
-  &.hidden {
+  .theme-light & {
-    visibility: hidden;
+    border: 1px solid gainsboro;
+    border-radius: $radius;
+
+    .ace_scrollbar {
+      @include custom-scrollbar(dark);
+    }
   }
 
-  &.light {
+  &.hidden {
-    .ace_scrollbar {
+    visibility: hidden;
-      @include custom-scrollbar($theme: dark);
-    }
   }
 
   > .editor {

src/renderer/components/ace-editor/ace-editor.tsx

@@ -148,9 +148,8 @@ export class AceEditor extends React.Component<Props, State> {
 
   render() {
     const { className, hidden } = this.props;
-    const themeType = themeStore.activeTheme.type;
     return (
-      <div className={cssNames("AceEditor", className, { hidden }, themeType)}>
+      <div className={cssNames("AceEditor", className, { hidden })}>
         <div className="editor" ref={e => this.elem = e}/>
       </div>
     )

src/renderer/components/dock/terminal-window.scss

@@ -5,7 +5,7 @@
   margin-left: $padding * 2;
   margin-top: $padding * 2;
 
-  &.light {
+  .theme-light & {
     .xterm-viewport {
       @include custom-scrollbar(dark);
     }

src/renderer/components/drawer/drawer.scss

@@ -9,7 +9,7 @@
   box-shadow: 0 0 $unit * 2 $boxShadow;
   z-index: $zIndex-drawer;
 
-  &.light {
+  .theme-light & {
     .drawer-content {
       @include custom-scrollbar(dark);
     }

src/renderer/components/drawer/drawer.tsx

@@ -6,7 +6,6 @@ import { cssNames, noop } from "../../utils";
 import { Icon } from "../icon";
 import { Animate, AnimateName } from "../animate";
 import { history } from "../../navigation";
-import { themeStore } from "../../theme.store";
 
 export interface DrawerProps {
   open: boolean;
@@ -101,7 +100,7 @@ export class Drawer extends React.Component<DrawerProps> {
   render() {
     const { open, position, title, animation, children, toolbar, size, usePortal } = this.props
     let { className, contentClass } = this.props;
-    className = cssNames("Drawer", className, position, themeStore.activeTheme.type);
+    className = cssNames("Drawer", className, position);
     contentClass = cssNames("drawer-content flex column box grow", contentClass);
     const style = size ? { "--size": size } as React.CSSProperties : undefined;
     const drawer = (

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

@@ -11,6 +11,10 @@
     @include custom-scrollbar;
     --flex-gap: #{$spacing};
     padding: $spacing;
+
+    .theme-light & {
+      @include custom-scrollbar(dark);
+    }
   }
 
   > .head-col {

src/renderer/components/table/table.scss

@@ -1,9 +1,9 @@
 .Table {
   &.scrollable {
-    &.light {
+    .theme-light & {
       @include custom-scrollbar(dark);
     }
-    
+
     @include custom-scrollbar();
     flex: 1 0 0; // hackfix: flex-basis must be "0" for proper work in firefox
   }

src/renderer/theme.store.ts

@@ -94,8 +94,8 @@ export class ThemeStore {
     });
     this.styles.textContent = `:root {\n${cssVars.join("\n")}}`;
     // Adding universal theme flag which can be used in component styles
-    const rootElem = document.getElementById("app");
+    const body = document.querySelector("body");
-    rootElem.classList.toggle("theme-light", theme.type === ThemeType.LIGHT);
+    body.classList.toggle("theme-light", theme.type === ThemeType.LIGHT);
   }
 }