feat(native-buttons): differentiate background based on layout

src/public/app/desktop.js

@@ -57,10 +57,14 @@ function initTitleBarButtons() {
     function applyTitleBarOverlaySettings() {
         const electronRemote = utils.dynamicRequire("@electron/remote");    
         const currentWindow = electronRemote.getCurrentWindow();
-        const documentStyle = window.getComputedStyle(document.documentElement);
-        const color = documentStyle.getPropertyValue("--native-titlebar-background");
-        const symbolColor = documentStyle.getPropertyValue("--native-titlebar-foreground");
-        currentWindow.setTitleBarOverlay({ color, symbolColor });
+        
+        const style = window.getComputedStyle(document.body);
+        const color = style.getPropertyValue("--native-titlebar-background");
+        const symbolColor = style.getPropertyValue("--native-titlebar-foreground");
+
+        if (color && symbolColor) {
+            currentWindow.setTitleBarOverlay({ color, symbolColor });
+        }
     }
     
     // Update the native title bar buttons.

src/public/stylesheets/style.css

@@ -20,9 +20,7 @@
 }
 
 :root {
-    --submenu-opening-delay: 300ms;
-    --native-titlebar-background: var(--left-pane-background-color);
-    --native-titlebar-foreground: var(--main-text-color);
+    --submenu-opening-delay: 300ms;    
 }
 
 html {
@@ -40,6 +38,13 @@ body {
     color: var(--main-text-color);
     font-family: var(--main-font-family);
     font-size: var(--main-font-size);
+
+    --native-titlebar-background: var(--main-background-color);
+    --native-titlebar-foreground: var(--main-text-color);
+}
+
+body.layout-horizontal {
+    --native-titlebar-background: var(--left-pane-background-color);
 }
 
 body.mobile .desktop-only {

src/public/stylesheets/theme-next.css

@@ -347,7 +347,7 @@
     background-color: var(--root-background);
 }
 
-#root-widget.horizontal-layout {
+body.layout-horizontal {
     --launcher-pane-background-color: var(--launcher-pane-horizontal-background-color);
     --launcher-pane-size: var(--launcher-pane-horizontal-size);
     --active-tab-background-color: var(--launcher-pane-background-color);
@@ -369,7 +369,7 @@
  *  Launcher pane
  */
 #launcher-container,
-#root-widget.horizontal-layout > .horizontal {
+body.layout-horizontal > .horizontal {
     align-items: center;
 }
 
@@ -687,7 +687,7 @@ html body #left-pane .quick-search:focus-within .search-button:hover,
     position: relative;
 }
 
-#root-widget.horizontal-layout .tab-row-container:after {
+body.layout-horizontal .tab-row-container:after {
     content: "";
     position: absolute;
     bottom: 0;
@@ -702,11 +702,11 @@ html body #left-pane .quick-search:focus-within .search-button:hover,
     height: var(--tab-height) !important;    
 }
 
-#root-widget.horizontal-layout .tab-row-container {
+body.layout-horizontal .tab-row-container {
     padding-top: calc((var(--tab-bar-height) - var(--tab-height)));    
 }
 
-#root-widget.horizontal-layout .tab-row-widget-container {
+body.layout-horizontal .tab-row-widget-container {
     margin-top: 0;
     position: relative;
     overflow: hidden;
@@ -722,7 +722,7 @@ html body #left-pane .quick-search:focus-within .search-button:hover,
     transition: none;
 }
 
-#root-widget.horizontal-layout .tab-row-widget .note-tab .note-tab-wrapper {
+body.layout-horizontal .tab-row-widget .note-tab .note-tab-wrapper {
     border-bottom-left-radius: 0;
     border-bottom-right-radius: 0;   
 }

src/routes/index.ts

@@ -32,6 +32,7 @@ function index(req: Request, res: Response) {
         csrfToken: csrfToken,
         themeCssUrl: getThemeCssUrl(options.theme),
         headingStyle: options.headingStyle,
+        layoutOrientation: options.layoutOrientation,
         mainFontSize: parseInt(options.mainFontSize),
         treeFontSize: parseInt(options.treeFontSize),
         detailFontSize: parseInt(options.detailFontSize),

src/views/desktop.ejs

@@ -6,7 +6,7 @@
     <link rel="manifest" crossorigin="use-credentials" href="manifest.webmanifest">
     <title>TriliumNext Notes</title>
 </head>
-<body class="desktop heading-style-<%= headingStyle %>">
+<body class="desktop heading-style-<%= headingStyle %> layout-<%= layoutOrientation %>">
 <noscript><%= t("javascript-required") %></noscript>
 
 <script>