Added Dark mode; minor CSS improvements

src/app/components/browse/browse.component.scss

@@ -11,6 +11,7 @@
   flex-grow: 1;
   min-height: 0;
   flex-wrap: nowrap;
+  box-shadow: none;
 }
 
 #table-column {

src/app/components/browse/chart-sidebar/chart-sidebar.component.html

@@ -1,6 +1,6 @@
-<div *ngIf="selectedVersion" class="ui fluid card">
-  <div class="ui placeholder" [ngClass]="{'placeholder': albumArtSrc == ''}">
-    <img class="ui square image" [src]="albumArtSrc">
+<div id="sidebarCard" *ngIf="selectedVersion" class="ui fluid card">
+  <div class="ui placeholder" [ngClass]="{'placeholder': albumArtSrc == '', 'inverted': settingsService.theme == 'Dark'}">
+    <img *ngIf="albumArtSrc != null" class="ui square image" [src]="albumArtSrc">
   </div>
   <div *ngIf="charts.length > 1" id="chartDropdown" class="ui fluid right labeled scrolling icon dropdown button">
     <input type="hidden" name="Chart">

src/app/components/browse/chart-sidebar/chart-sidebar.component.scss

@@ -5,6 +5,11 @@
 .ui.card {
   display: flex;
   flex-direction: column;
+  border-radius: 0px;
+}
+
+.ui.placeholder {
+  border-radius: 0px !important;
 }
 
 #textPanel {
@@ -18,6 +23,7 @@
 
 #chartDropdown {
   min-height: min-content;
+  margin: 0px;
 }
 
 ::ng-deep #chartDropdownMenu > div.item {
@@ -50,4 +56,9 @@
 
 #downloadButton {
   width: min-content;
+  margin: 0px 1px 1px 1px;
+}
+
+#versionDropdown {
+  margin: 0px 1px 1px -3px;
 }

src/app/components/browse/chart-sidebar/chart-sidebar.component.ts

@@ -7,6 +7,7 @@ import { DownloadService } from '../../../core/services/download.service'
 import { groupBy } from 'src/electron/shared/UtilFunctions'
 import { SearchService } from 'src/app/core/services/search.service'
 import { DomSanitizer, SafeUrl } from '@angular/platform-browser'
+import { SettingsService } from 'src/app/core/services/settings.service'
 
 interface Difficulty {
   instrument: string
@@ -30,7 +31,8 @@ export class ChartSidebarComponent implements OnInit {
     private albumArtService: AlbumArtService,
     private downloadService: DownloadService,
     private searchService: SearchService,
-    private sanitizer: DomSanitizer
+    private sanitizer: DomSanitizer,
+    public settingsService: SettingsService
   ) { }
 
   ngOnInit() {
@@ -78,7 +80,7 @@ export class ChartSidebarComponent implements OnInit {
     if (albumArtBase64String) {
       this.albumArtSrc = this.sanitizer.bypassSecurityTrustUrl('data:image/jpg;base64,' + albumArtBase64String)
     } else {
-      this.albumArtSrc = ''
+      this.albumArtSrc = null
     }
   }
 

src/app/components/browse/result-table/result-table.component.html

@@ -1,4 +1,4 @@
-<table class="ui stackable selectable single fixed line striped compact small table">
+<table id="resultTable" class="ui stackable selectable single fixed line striped compact small table" [class.inverted]="settingsService.theme == 'Dark'">
   <!-- TODO: maybe have some of these tags customizable? E.g. small/large/compact/padded -->
   <!-- TODO: maybe add the sortable class? -->
   <!-- TODO: learn semantic themes in order to change the $mobileBreakpoint global variable (better search table adjustment) -->

src/app/components/browse/result-table/result-table.component.scss

@@ -8,4 +8,13 @@
 
 #checkboxColumn {
   width: 34.64px;
+}
+
+#resultTable {
+  border-radius: 0px;
+
+  thead>tr:first-child>th:first-child,
+  thead>tr:first-child>th:last-child {
+    border-radius: 0px;
+  }
 }

src/app/components/browse/result-table/result-table.component.ts

@@ -4,6 +4,7 @@ import { ResultTableRowComponent } from './result-table-row/result-table-row.com
 import { CheckboxDirective } from '../../../core/directives/checkbox.directive'
 import { SearchService } from '../../../core/services/search.service'
 import { SelectionService } from '../../../core/services/selection.service'
+import { SettingsService } from 'src/app/core/services/settings.service'
 
 @Component({
   selector: 'app-result-table',
@@ -20,7 +21,11 @@ export class ResultTableComponent implements OnInit {
   results: SongResult[]
   activeRowID: number = null
 
-  constructor(private searchService: SearchService, private selectionService: SelectionService) { }
+  constructor(
+    private searchService: SearchService,
+    private selectionService: SelectionService,
+    public settingsService: SettingsService
+  ) { }
 
   ngOnInit() {
     this.selectionService.onSelectAllChanged((selected) => {

src/app/components/browse/search-bar/search-bar.component.html

@@ -13,8 +13,8 @@
       <i class="dropdown icon"></i>
       <div class="text"><b>all</b> words match</div>
       <div class="menu">
-        <div class="item" data-value="all"><b>all</b> words match</div>
-        <div class="item" data-value="any"><b>any</b> words match</div>
+        <div id="dropdownItem" class="active selected item" data-value="all"><b>all</b> words match</div>
+        <div id="dropdownItem" class="item" data-value="any"><b>any</b> words match</div>
       </div>
     </div>
   </div>
@@ -25,8 +25,8 @@
       <i class="dropdown icon"></i>
       <div class="text"><b>similar</b> words match</div>
       <div class="menu">
-        <div class="item" data-value="similar"><b>similar</b> words match</div>
-        <div class="item" data-value="exact"><b>exact</b> words match</div>
+        <div id="dropdownItem" class="active selected item" data-value="similar"><b>similar</b> words match</div>
+        <div id="dropdownItem" class="item" data-value="exact"><b>exact</b> words match</div>
       </div>
     </div>
   </div>
@@ -228,7 +228,7 @@
       </div>
       <h5 class="ui dividing header">Difficulty range</h5>
       <div class="field">
-        <div #diffSlider class="ui labeled ticked range slider" id="diffSlider"></div>
+        <div #diffSlider class="ui labeled ticked inverted range slider" id="diffSlider"></div>
       </div>
     </div>
   </div>

src/app/components/browse/search-bar/search-bar.component.scss

@@ -1,6 +1,7 @@
 #searchMenu {
   flex-wrap: wrap;
   margin-bottom: 0em;
+  border-radius: 0px;
 }
 
 #searchMenu>.item {
@@ -14,6 +15,7 @@
 
 #searchIcon {
   cursor: default;
+  box-sizing: border-box;
 }
 
 #advancedSearchForm {

src/app/components/browse/status-bar/downloads-modal/downloads-modal.component.ts

@@ -44,9 +44,8 @@ export class DownloadsModalComponent {
 
   getBackgroundColor(download: DownloadProgress) {
     switch (download.type) {
-      case 'good': return 'unset'
-      case 'done': return 'unset'
       case 'error': return 'indianred'
+      default: return 'unset'
     }
   }
 

src/app/components/browse/status-bar/status-bar.component.html

@@ -1,4 +1,4 @@
-<div class="ui bottom borderless menu">
+<div id="bottomMenu" class="ui bottom borderless menu">
   <div *ngIf="resultCount > 0" class="item">{{resultCount}}{{allResultsVisible ? '' : '+'}} Result{{resultCount == 1 ? '' : 's'}}</div>
   <div class="item">
     <button *ngIf="selectedResults.length > 1" (click)="downloadSelected()" class="ui positive button">

src/app/components/browse/status-bar/status-bar.component.scss

@@ -1,4 +1,9 @@
 .ui.progress {
   margin: 0;
   min-width: 200px;
+}
+
+#bottomMenu {
+  border-radius: 0px;
+  border-width: 1px 0px 0px 0px;
 }

src/app/components/settings/settings.component.html

@@ -43,10 +43,10 @@
 <div *ngIf="settingsService.rateLimitDelay < 30" class="ui warning message">
   <i class="exclamation circle icon"></i>
   <b>Warning:</b> downloading files from Google with a delay less than about 30 seconds will eventually cause Google to
-  refuse download requests from this program for a few hours. This can be avoided by authenticating with your Google account.
+  refuse download requests from this program for a few hours. This can be avoided by authenticating with any Google account.
 </div>
 
-<!-- <h3 class="ui header">Theme</h3>
+<h3 class="ui header">Theme</h3>
 <div #themeDropdown class="ui selection dropdown mr">
   <input type="hidden" name="sort" [value]="settingsService.theme">
   <i class="dropdown icon"></i>
@@ -54,7 +54,7 @@
   <div class="menu">
     <div class="item" [attr.data-value]="i" *ngFor="let theme of settingsService.builtinThemes; let i = index">{{theme}}</div>
   </div>
-</div> -->
+</div>
 
 <div class="bottom">
   <div class="ui buttons">

src/app/components/settings/settings.component.scss

@@ -1,7 +1,7 @@
 :host {
   flex: 1;
   padding: 2em;
-  overflow-y: scroll;
+  overflow-y: auto;
 }
 
 .default-cursor {

src/app/components/settings/settings.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, AfterViewInit, ChangeDetectorRef } from '@angular/core'
+import { Component, OnInit, AfterViewInit, ChangeDetectorRef, ViewChild, ElementRef } from '@angular/core'
 import { ElectronService } from 'src/app/core/services/electron.service'
 import { SettingsService } from 'src/app/core/services/settings.service'
 
@@ -8,7 +8,7 @@ import { SettingsService } from 'src/app/core/services/settings.service'
   styleUrls: ['./settings.component.scss']
 })
 export class SettingsComponent implements OnInit, AfterViewInit {
-  // @ViewChild('themeDropdown', { static: true }) themeDropdown: ElementRef
+  @ViewChild('themeDropdown', { static: true }) themeDropdown: ElementRef
 
   cacheSize = 'Calculating...'
   updateAvailable = false
@@ -55,11 +55,11 @@ export class SettingsComponent implements OnInit, AfterViewInit {
   }
 
   ngAfterViewInit() {
-    // $(this.themeDropdown.nativeElement).dropdown({
-    //   onChange: (_value: string, text: string) => {
-    //     this.settingsService.theme = text
-    //   }
-    // })
+    $(this.themeDropdown.nativeElement).dropdown({
+      onChange: (_value: string, text: string) => {
+        this.settingsService.theme = text
+      }
+    })
   }
 
   async clearCache() {

src/app/components/toolbar/toolbar.component.scss

@@ -1,9 +1,12 @@
 .menu {
   -webkit-app-region: drag;
   z-index: 9000 !important;
+  border: 0px;
+  border-radius: 0px;
 
   .item,
   .item * {
+    border-radius: 0px;
     -webkit-app-region: no-drag;
     cursor: default !important;
   }

src/app/core/services/settings.service.ts

@@ -39,7 +39,7 @@ export class SettingsService {
     const link = document.createElement('link')
     link.type = 'text/css'
     link.rel = 'stylesheet'
-    link.href = `/assets/themes/${theme}.css`
+    link.href = `./assets/themes/${theme}.css`
     this.currentThemeLink = document.head.appendChild(link)
   }
 

src/assets/themes/dark.css

@@ -1,96 +1,317 @@
-body {
-  background-color: #222222;
+:root {
+  --dp0: 100%;
+  --dp1: 5%;
+  --dp2: 7%;
+  --dp3: 8%;
+  --dp4: 9%;
+  --dp6: 11%;
+  --dp8: 12%;
+  --dp12: 14%;
+  --dp16: 15%;
+  --dp24: 16%;
+
+  --dp-hovered: 4%;
+  --dp-focused: 12%;
+
+  --dk-00dp: rgba(18, 18, 18, var(--dp0));
+  --dk-01dp: rgba(255, 255, 255, var(--dp1));
+  --dk-02dp: rgba(255, 255, 255, var(--dp2));
+  --dk-03dp: rgba(255, 255, 255, var(--dp3));
+  --dk-04dp: rgba(255, 255, 255, var(--dp4));
+  --dk-06dp: rgba(255, 255, 255, var(--dp6));
+  --dk-08dp: rgba(255, 255, 255, var(--dp8));
+  --dk-12dp: rgba(255, 255, 255, var(--dp12));
+  --dk-16dp: rgba(255, 255, 255, var(--dp16));
+  --dk-24dp: rgba(255, 255, 255, var(--dp24));
+
+  --dk-01dp-hovered: rgba(255, 255, 255, calc(var(--dp1) + var(--dp-hovered)));
+  --dk-02dp-hovered: rgba(255, 255, 255, calc(var(--dp2) + var(--dp-hovered)));
+  --dk-03dp-hovered: rgba(255, 255, 255, calc(var(--dp3) + var(--dp-hovered)));
+  --dk-04dp-hovered: rgba(255, 255, 255, calc(var(--dp4) + var(--dp-hovered)));
+  --dk-06dp-hovered: rgba(255, 255, 255, calc(var(--dp6) + var(--dp-hovered)));
+  --dk-08dp-hovered: rgba(255, 255, 255, calc(var(--dp8) + var(--dp-hovered)));
+  --dk-12dp-hovered: rgba(255, 255, 255, calc(var(--dp12) + var(--dp-hovered)));
+  --dk-16dp-hovered: rgba(255, 255, 255, calc(var(--dp16) + var(--dp-hovered)));
+  --dk-24dp-hovered: rgba(255, 255, 255, calc(var(--dp24) + var(--dp-hovered)));
+
+  --dk-01dp-focused: rgba(255, 255, 255, calc(var(--dp1) + var(--dp-focused)));
+  --dk-02dp-focused: rgba(255, 255, 255, calc(var(--dp2) + var(--dp-focused)));
+  --dk-03dp-focused: rgba(255, 255, 255, calc(var(--dp3) + var(--dp-focused)));
+  --dk-04dp-focused: rgba(255, 255, 255, calc(var(--dp4) + var(--dp-focused)));
+  --dk-06dp-focused: rgba(255, 255, 255, calc(var(--dp6) + var(--dp-focused)));
+  --dk-08dp-focused: rgba(255, 255, 255, calc(var(--dp8) + var(--dp-focused)));
+  --dk-12dp-focused: rgba(255, 255, 255, calc(var(--dp12) + var(--dp-focused)));
+  --dk-16dp-focused: rgba(255, 255, 255, calc(var(--dp16) + var(--dp-focused)));
+  --dk-24dp-focused: rgba(255, 255, 255, calc(var(--dp24) + var(--dp-focused)));
+
+  /* Solid background is required for overlapping elements like dropdown menus */
+  --dk-24dp-solid: rgba(41, 41, 41, var(--dp0));
+  --dk-24dp-solid-hovered: rgba(51, 51, 51, var(--dp0));
+  --dk-24dp-solid-focused: rgba(71, 71, 71, var(--dp0));
+  --dk-32dp-solid: rgba(78, 78, 78, var(--dp0));
+  --dk-32dp-solid-hovered: rgba(88, 88, 88, var(--dp0));
+  --dk-32dp-solid-focused: rgba(109, 109, 109, var(--dp0));
+
+  --dk-high: #ffffffde;
+  --dk-med: #ffffff99;
+  --dk-low: #ffffff61;
+
+
+  --dk-disabled-text: #ffffff61;
+  --dk-disabled-outline: #ffffff1f;
+
+  --dk-error: #cf6679;
+  --dk-error-hovered: #65323b;
+
+  --dk-primary: rgba(22, 171, 57, var(--dp0));
+  --dk-primary-hovered: rgba(22, 171, 57, var(--dp-focused));
+
+  --dk-yellow: rgba(251, 189, 8, var(--dp0));
+  --dk-yellow-hovered: rgba(251, 189, 8, var(--dp-focused));
 }
 
 /* Text Color */
-.ui.menu .item,
+.item,
+#dropdownItem,
 .ui.header,
-.ui.form .field>label,
-.ui.input input,
 .ui.button,
+.header,
+.icon,
+label,
+input,
 div {
-  color: #CCCCCC !important;
+  color: var(--dk-high) !important;
 }
 
-/* Toolbar */
-
-.ui.menu, .menu>.item.traffic-light {
-  background-color: #303030 !important;
+.ui.input input,
+.ui.label {
+  background-color: var(--dk-24dp) !important;
+}
+.ui.input input:focus {
+  border-color: var(--dk-24dp) !important;
 }
 
-.ui.menu .active.item:hover {
-  background-color: #222222;
+
+/* Background */
+body,
+html,
+.modal,
+#sidebarCard {
+  background-color: var(--dk-00dp) !important;
+}
+.ui.menu {
+  background-color: var(--dk-08dp) !important;
 }
 
-.ui.menu .active.item {
-  background-color: #222222 !important;
+/* #region Buttons */
+
+.ui.button {
+  background-color: var(--dk-12dp) !important;
+}
+.ui.button:hover {
+  background-color: var(--dk-12dp-hovered) !important;
+}
+.ui.button.disabled {
+  color: var(--dk-disabled-text) !important;
+  background-color: var(--dk-disabled-outline) !important;
+}
+.ui.positive.button,
+#downloadButton,
+#versionDropdown {
+  background-color: transparent !important;
+  color: var(--dk-primary) !important;
+  box-shadow: 0 0 0 2px var(--dk-primary) inset !important;
+}
+.ui.positive.button:hover,
+#downloadButton:hover,
+#versionDropdown:hover {
+  background-color: var(--dk-primary-hovered) !important;
 }
 
-.ui.menu .item:hover {
-  background: rgba(0, 0, 0, .1) !important;
+/* #endregion */
+
+/* #region Dropdown */
+
+.ui.dropdown,
+.ui.dropdown .menu,
+.ui.dropdown .menu .item {
+  background-color: var(--dk-24dp-solid) !important;
 }
 
-.ui.menu .close:hover {
-  background: rgba(255, 0, 0, .15) !important;
-}
-
-/* Settings Page */
-.ui.input input {
-  background-color: #555555 !important;
-}
-
-.ui.label, .ui.basic.label {
-  background-color: #555555;
-}
-
-.ui.button,
-.ui.basic.button {
-  background-color: #444444;
-}
-
-.ui.positive.button {
-  background-color: transparent;
-  color: #16ab39 !important;
-  box-shadow: 0 0 0 2px #16ab39 inset !important;
-}
-
-.ui.positive.button:hover {
-  color: #222222 !important;
-}
-
-.ui.button:hover,
-.ui.basic.button:hover,
-.ui.basic.button:active,
-.ui.basic.button:focus {
-  background-color: #666666;
-}
-
-.ui.selection, .menu>.item {
-  background-color: #555555 !important;
-}
-
-.ui.selection.dropdown:focus,
-.ui.selection.dropdown:hover,
-.ui.selection.active.dropdown,
-.ui.selection.dropdown .menu,
-.ui.selection.active.dropdown .menu,
-.ui.selection.active.dropdown .menu:active,
-.ui.selection.dropdown .menu>.item,
-input:active,
+.ui.dropdown:focus,
+.ui.dropdown.active,
+.ui.dropdown .menu,
+.ui.dropdown .menu .item,
 .ui[class*="right labeled"].input>input:focus {
-  border-color: #7E8388 !important;
+  border-color: var(--dk-24dp-solid-focused) !important;
 }
 
+.ui.dropdown .menu .item:hover {
+  background-color: var(--dk-24dp-solid-hovered) !important;
+}
+
+.ui.dropdown .menu .item.active {
+  background-color: var(--dk-24dp-solid-focused) !important;
+}
+
+/* #endregion */
+
+/* #region Toolbar */
+.ui.top.menu .item {
+  background-color: var(--dk-12dp) !important;
+}
+.ui.top.menu .item:hover {
+  background-color: var(--dk-12dp-hovered) !important;
+}
+#bottomMenu .item:hover {
+  background-color: var(--dk-12dp-hovered) !important;
+}
+.ui.top.menu .item.active {
+  background-color: var(--dk-12dp-focused) !important;
+}
+.ui.top.menu .item.traffic-light {
+  background-color: transparent !important;
+}
+.ui.top.menu .item.traffic-light:hover {
+  background-color: var(--dk-08dp-hovered) !important;
+}
+.ui.top.menu .item.traffic-light.close:hover {
+  background-color: var(--dk-error-hovered) !important;
+}
+/* #endregion */
+
+/* #region Settings */
+
 input[type=number]::-webkit-inner-spin-button {
-  background-color: #FF0000;
+  -webkit-appearance: none;
 }
 
 .ui.warning.message {
-  background-color: #333333;
-  box-shadow: 0 0 0 1px #7E8388 inset,
-  0 0 0 0 transparent;
+  background-color: var(--dk-24dp);
+  box-shadow: 0 0 0 1px var(--dk-24dp-focused) inset,
+    0 0 0 0 transparent;
 }
 
-.ui.selection.dropdown .menu>.item.selected {
-  background-color: #222222 !important;
-}
+.ui.yellow.button {
+  background-color: transparent !important;
+  color: var(--dk-yellow) !important;
+  box-shadow: 0 0 0 2px var(--dk-yellow) inset !important;
+}
+
+.ui.yellow.button:hover {
+  background-color: var(--dk-yellow-hovered) !important;
+}
+
+/* #endregion */
+
+/* #region Advanced Search */
+
+.ui.menu {
+  border-color: var(--dk-08dp) !important;
+}
+
+/* I'm aware these selectors are really dumb; it's only because SemanticUI decided to style dropdowns with !important */
+#quantityDropdownItem .ui.dropdown,
+#quantityDropdownItem .ui.dropdown .menu,
+#quantityDropdownItem .ui.dropdown .menu .item,
+#similarityDropdownItem .ui.dropdown,
+#similarityDropdownItem .ui.dropdown .menu,
+#similarityDropdownItem .ui.dropdown .menu .item {
+  background-color: var(--dk-32dp-solid) !important;
+}
+
+#quantityDropdownItem .ui.dropdown:focus,
+#quantityDropdownItem .ui.dropdown.active,
+#quantityDropdownItem .ui.dropdown .menu,
+#quantityDropdownItem .ui.dropdown .menu .item,
+#similarityDropdownItem .ui.dropdown:focus,
+#similarityDropdownItem .ui.dropdown.active,
+#similarityDropdownItem .ui.dropdown .menu,
+#similarityDropdownItem .ui.dropdown .menu .item {
+  border-color: var(--dk-32dp-solid-focused) !important;
+}
+
+#quantityDropdownItem .ui.dropdown .menu .item:hover,
+#similarityDropdownItem .ui.dropdown .menu .item:hover {
+  background-color: var(--dk-32dp-solid-hovered) !important;
+}
+
+#quantityDropdownItem .ui.dropdown .menu .item.active,
+#similarityDropdownItem .ui.dropdown .menu .item.active {
+  background-color: var(--dk-32dp-solid-focused) !important;
+}
+
+.ui.secondary.segment {
+  background-color: var(--dk-01dp) !important;
+}
+.ui.dividing.header {
+  border-color: var(--dk-16dp) !important;
+}
+
+/* #endregion */
+
+/* #region Search Results */
+
+#textPanel {
+  background-color: var(--dk-00dp) !important;
+}
+
+#sidebar-column {
+  box-shadow: -1px 0 0 0 var(--dk-08dp) !important;
+}
+
+#chartCount {
+  background-color: transparent !important;
+  box-shadow: 0 0 0 1px var(--dk-med) inset !important;
+}
+.ui.table tr.active {
+  background-color: var(--dk-24dp-focused) !important;
+}
+.ui.table tr.active #chartCount {
+  box-shadow: 0 0 0 1px var(--dk-00dp) inset !important;
+}
+
+::-webkit-scrollbar-track {
+  background-color: var(--dk-08dp) !important;
+}
+::-webkit-scrollbar-thumb {
+  background-color: var(--dk-24dp) !important;
+}
+::-webkit-scrollbar-thumb:hover {
+  background-color: var(--dk-24dp-hovered) !important;
+}
+::-webkit-scrollbar-thumb:active {
+  background-color: var(--dk-24dp-focused) !important;
+}
+
+/* #endregion */
+
+/* #region Modals */
+
+.ui.modal>.header {
+  background-color: var(--dk-04dp) !important;
+  border-bottom: 1px solid var(--dk-08dp) !important;
+}
+
+.ui.modal .content {
+  background-color: var(--dk-04dp) !important;
+}
+
+.ui.segments:not(.horizontal)>.segment {
+  background-color: var(--dk-04dp) !important;
+  border-top: 1px solid var(--dk-12dp) !important;
+}
+.ui.segments:not(.horizontal)>.segment:first-child {
+  border-top: none !important;
+}
+
+.ui.modal>.actions {
+  background-color: var(--dk-04dp) !important;
+}
+
+.ui.cards>.card {
+  box-shadow: 0 1px 3px 0 var(--dk-08dp),
+  0 0 0 1px var(--dk-08dp) !important;
+}
+
+/* #endregion */

src/electron/main.ts

@@ -114,7 +114,8 @@ function createBrowserWindow(windowState: windowStateKeeper.State) {
       enableRemoteModule: true
     },
     simpleFullscreen: true,
-    fullscreenable: false
+    fullscreenable: false,
+    backgroundColor: '#121212'
   }
 
   if (process.platform == 'linux' && !isDevBuild) {