feat: Added translucency effect to menus, dialogs and alerts. Can be turned off from Preferences > Appeareance (#2387) [skip e2e]

packages/ui-services/src/Theme/ThemeManager.ts

@@ -5,6 +5,7 @@ import {
   LocalStorageDecryptedContextualPayload,
   PrefKey,
   ThemeInterface,
+  PrefDefaults,
 } from '@standardnotes/models'
 import {
   InternalEventBusInterface,
@@ -21,6 +22,7 @@ import { AbstractUIServicee } from '../Abstract/AbstractUIService'
 import { GetAllThemesUseCase } from './GetAllThemesUseCase'
 import { Uuid } from '@standardnotes/domain-core'
 import { ActiveThemeList } from './ActiveThemeList'
+import { Color } from './Color'
 
 const CachedThemesKey = 'cachedThemes'
 const TimeBeforeApplyingColorScheme = 5
@@ -82,6 +84,8 @@ export class ThemeManager extends AbstractUIServicee {
           return
         }
 
+        this.toggleTranslucentUIColors()
+
         let hasChange = false
 
         const { features, uuids } = this.components.getActiveThemesIdentifiers()
@@ -169,6 +173,8 @@ export class ThemeManager extends AbstractUIServicee {
   }
 
   private async handlePreferencesChangeEvent() {
+    this.toggleTranslucentUIColors()
+
     const useDeviceThemeSettings = this.application.getPreference(PrefKey.UseSystemColorScheme, false)
 
     const hasPreferenceChanged = useDeviceThemeSettings !== this.lastUseDeviceThemeSettings
@@ -339,6 +345,8 @@ export class ThemeManager extends AbstractUIServicee {
             .handleThemeSchemeChange(packageInfo.isDark ?? false, this.getBackgroundColor())
         })
       }
+
+      this.toggleTranslucentUIColors()
     }
     document.getElementsByTagName('head')[0].appendChild(link)
   }
@@ -356,8 +364,11 @@ export class ThemeManager extends AbstractUIServicee {
 
     this.themesActiveInTheUI.remove(id)
 
-    if (this.themesActiveInTheUI.isEmpty() && this.application.isNativeMobileWeb()) {
-      this.application.mobileDevice().handleThemeSchemeChange(false, '#ffffff')
+    if (this.themesActiveInTheUI.isEmpty()) {
+      if (this.application.isNativeMobileWeb()) {
+        this.application.mobileDevice().handleThemeSchemeChange(false, '#ffffff')
+      }
+      this.toggleTranslucentUIColors()
     }
   }
 
@@ -366,6 +377,31 @@ export class ThemeManager extends AbstractUIServicee {
     return bgColor.length ? bgColor : '#ffffff'
   }
 
+  private shouldUseTranslucentUI() {
+    return this.application.getPreference(PrefKey.UseTranslucentUI, PrefDefaults[PrefKey.UseTranslucentUI])
+  }
+
+  private toggleTranslucentUIColors() {
+    if (!this.shouldUseTranslucentUI()) {
+      document.documentElement.style.removeProperty('--popover-background-color')
+      document.documentElement.style.removeProperty('--popover-backdrop-filter')
+      document.body.classList.remove('translucent-ui')
+      return
+    }
+    try {
+      const backgroundColor = new Color(this.getBackgroundColor())
+      const backdropFilter = backgroundColor.isDark()
+        ? 'blur(12px) saturate(190%) contrast(70%) brightness(80%)'
+        : 'blur(12px) saturate(190%) contrast(50%) brightness(130%)'
+      const translucentBackgroundColor = backgroundColor.setAlpha(0.65).toString()
+      document.documentElement.style.setProperty('--popover-background-color', translucentBackgroundColor)
+      document.documentElement.style.setProperty('--popover-backdrop-filter', backdropFilter)
+      document.body.classList.add('translucent-ui')
+    } catch (error) {
+      console.error(error)
+    }
+  }
+
   /**
    * Syncs the active theme's background color to the 'theme-color' meta tag
    * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta/name/theme-color