vibrancy

app/scripts/comp/settings/settings-manager.js

@@ -3,6 +3,7 @@ import { Features } from 'util/features';
 import { Locale } from 'util/locale';
 import { ThemeWatcher } from 'comp/browser/theme-watcher';
 import { AppSettingsModel } from 'models/app-settings-model';
+import { Launcher } from 'comp/launcher';
 import { Logger } from 'util/logger';
 
 const logger = new Logger('settings-manager');
@@ -110,6 +111,14 @@ const SettingsManager = {
         if (metaThemeColor) {
             metaThemeColor.content = window.getComputedStyle(document.body).backgroundColor;
         }
+        if (Features.isMac) {
+            const prevVibrancy = this.getThemeVibrancy(this.activeTheme);
+            const newVibrancy = this.getThemeVibrancy(theme);
+            if (prevVibrancy !== newVibrancy) {
+                // Launcher.getMainWindow().setBackgroundColor('#00000000'); // this doesn't work
+                Launcher.getMainWindow().setVibrancy(newVibrancy);
+            }
+        }
         this.activeTheme = theme;
         logger.debug('Theme changed', theme);
         Events.emit('theme-applied');
@@ -119,6 +128,10 @@ const SettingsManager = {
         return 'th-' + theme;
     },
 
+    getThemeVibrancy(theme) {
+        return theme === 'dark' ? 'sidebar' : null;
+    },
+
     selectDarkOrLightTheme(theme) {
         for (const config of this.autoSwitchedThemes) {
             if (config.light === theme || config.dark === theme) {

app/styles/themes/_dark.scss

@@ -27,4 +27,12 @@ body.th-dark {
     .list__item--active .blue-color {
         color: #689ff7;
     }
+
+    background-color: transparent !important;
+    .app__menu {
+        background-color: transparent !important;
+    }
+    .app__body > *:not(.app__menu) {
+        background-color: var(--background-color);
+    }
 }

desktop/app.js

@@ -74,6 +74,9 @@ const darkLightThemes = {
     te: 'lt',
     dc: 'hc'
 };
+const themeVibrancies = {
+    dark: 'sidebar'
+};
 const defaultBgColor = '#282C34';
 
 logProgress('defining args');
@@ -252,7 +255,8 @@ function createMainWindow() {
     if (autoSwitchTheme) {
         theme = selectDarkOrLightTheme(theme);
     }
-    const bgColor = themeBgColors[theme] || defaultBgColor;
+    const vibrancy = themeVibrancies[theme] || null;
+    const backgroundColor = vibrancy ? null : themeBgColors[theme] || defaultBgColor;
     const windowOptions = {
         show: false,
         width: 1000,
@@ -260,7 +264,8 @@ function createMainWindow() {
         minWidth: 700,
         minHeight: 400,
         titleBarStyle: appSettings.titlebarStyle,
-        backgroundColor: bgColor,
+        backgroundColor,
+        vibrancy,
         webPreferences: {
             contextIsolation: false,
             backgroundThrottling: false,