dark mode fixes + refactoring

src/public/app/layouts/desktop_layout.js

@@ -2,7 +2,7 @@ import FlexContainer from "../widgets/containers/flex_container.js";
 import GlobalMenuWidget from "../widgets/buttons/global_menu.js";
 import TabRowWidget from "../widgets/tab_row.js";
 import TitleBarButtonsWidget from "../widgets/title_bar_buttons.js";
-import SidePaneContainer from "../widgets/containers/side_pane_container.js";
+import TreeSidebarContainer from "../widgets/containers/tree_sidebar_container.js";
 import NoteTreeWidget from "../widgets/note_tree.js";
 import NoteTitleWidget from "../widgets/note_title.js";
 import OwnedAttributeListWidget from "../widgets/section_widgets/owned_attribute_list.js";
@@ -50,7 +50,7 @@ export default class DesktopLayout {
         return new RootContainer()
             .setParent(appContext)
             .child(new FlexContainer("column")
-                .id("launcher-pane")
+                .id("launcher-sidebar")
                 .child(new GlobalMenuWidget())
                 .child(new ButtonWidget()
                     .icon("bx-file-blank")
@@ -74,12 +74,12 @@ export default class DesktopLayout {
                 .child(new SidebarToggleWidget())
                 .css("width", "54px")
             )
-            .child(new SidePaneContainer('left')
+            .child(new TreeSidebarContainer()
                 .hideInZenMode()
                 .css("width", "300px")
                 .child(new QuickSearchWidget())
                 .child(appContext.mainTreeWidget)
-                .child(...this.customWidgets.get('left-pane'))
+                .child(...this.customWidgets.get('tree-sidebar'))
             )
             .child(new FlexContainer('column')
                 .id('center-pane')

src/public/app/services/split.js

@@ -8,7 +8,7 @@ function setupSplit(leftPaneVisible) {
         instance = null;
     }
 
-    $("#left-pane").toggle(leftPaneVisible);
+    $("#tree-sidebar").toggle(leftPaneVisible);
 
     if (!leftPaneVisible) {
         $("#center-pane").css('width', '100%');
@@ -22,7 +22,7 @@ function setupSplit(leftPaneVisible) {
     }
 
     if (leftPaneVisible) {
-        instance = Split(['#left-pane', '#center-pane'], {
+        instance = Split(['#tree-sidebar', '#center-pane'], {
             sizes: [leftPaneWidth, 100 - leftPaneWidth],
             gutterSize: 5,
             onDragEnd: sizes => options.save('leftPaneWidth', Math.round(sizes[0]))

src/public/app/widgets/containers/tree_sidebar_container.js

@@ -1,11 +1,11 @@
 import options from "../../services/options.js";
 import FlexContainer from "./flex_container.js";
 
-export default class SidePaneContainer extends FlexContainer {
+export default class TreeSidebarContainer extends FlexContainer {
     constructor() {
         super('column');
 
-        this.id('left-pane');
+        this.id('tree-sidebar');
         this.css('height', '100%');
     }
 

src/public/app/widgets/note_tree.js

@@ -42,6 +42,7 @@ const TPL = `
         padding: 2px;
         max-height: 34px;
         color: var(--button-text-color);
+        background-color: var(--button-background-color);
         border-radius: var(--button-border-radius);
         border: 1px solid transparent;
         z-index: 100;

src/public/app/widgets/tab_row.js

@@ -125,8 +125,8 @@ const TAB_ROW_TPL = `
         bottom: 0;
         left: 0;
         right: 0;
-        height: 40px;
+        height: 36px;
-        padding: 8px 11px;
+        padding: 7px 11px;
         border-radius: 8px;
         overflow: hidden;
         pointer-events: all;

src/public/stylesheets/style.css

@@ -883,24 +883,27 @@ ul.fancytree-container li {
     margin: 10px;
 }
 
-#launcher-pane .icon-action {
+#launcher-sidebar .icon-action {
     font-size: 150%;
     display: inline-block;
     padding: 15px 15px;
     cursor: pointer;
     border: none;
+    color: var(--button-text-color);
 }
 
-#launcher-pane .icon-action:hover {
+#launcher-sidebar .icon-action:hover {
     background-color: var(--hover-item-background-color);
 }
 
-#left-pane, #launcher-pane {
+#tree-sidebar {
-    background-color: #F3F3F3;
+    color: var(--tree-sidebar-text-color);
+    background-color: var(--tree-sidebar-background-color);
 }
 
-#left-pane, #launcher-pane {
+#launcher-sidebar {
-    color: #333 !important;
+    color: var(--launcher-sidebar-text-color);
+    background-color: var(--launcher-sidebar-background-color);
 }
 
 input {

src/public/stylesheets/themes.css

@@ -35,6 +35,12 @@
     --modal-background-color: white;
     --modal-backdrop-color: black;
     --scrollbar-border-color: #ddd;
+
+    --tree-sidebar-background-color: #F3F3F3;
+    --tree-sidebar-text-color: #333;
+
+    --launcher-sidebar-background-color: #F3F3F3;
+    --launcher-sidebar-text-color: #333;
 }
 
 body.theme-black {
@@ -78,9 +84,9 @@ body.theme-dark {
     --accented-background-color: #555;
     --more-accented-background-color: #777;
     --header-background-color: #333;
-    --button-background-color: #555;
+    --button-background-color: transparent;
-    --button-border-color: #444;
+    --button-border-color: transparent;
-    --button-text-color: white;
+    --button-text-color: currentColor;
     --button-border-radius: 5px;
     --primary-button-background-color: #888;
     --primary-button-text-color: white;
@@ -89,9 +95,9 @@ body.theme-dark {
     --input-text-color: white;
     --input-background-color: #333;
     --hover-item-text-color: black;
-    --hover-item-background-color: #aaa;
+    --hover-item-background-color: #333;
     --active-item-text-color: black;
-    --active-item-background-color: #ccc;
+    --active-item-background-color: #999;
     --menu-text-color: white;
     --menu-background-color: #222;
     --tooltip-background-color: #333;
@@ -99,6 +105,12 @@ body.theme-dark {
     --modal-background-color: #333;
     --modal-backdrop-color: #444;
     --scrollbar-border-color: #888;
+
+    --tree-sidebar-background-color: #1f1f1f;
+    --tree-sidebar-text-color: #807c7c;
+
+    --launcher-sidebar-background-color: #1f1f1f;
+    --launcher-sidebar-text-color: #807c7c;
 }
 
 body.theme-dark .CodeMirror {