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

2023-08-05 20:40:37 +05:30
parent 83b83cd96d
commit ec309d6fb5
29 changed files with 264 additions and 28 deletions
--- a/packages/models/src/Domain/Syncable/UserPrefs/PrefDefaults.ts
+++ b/packages/models/src/Domain/Syncable/UserPrefs/PrefDefaults.ts
@@ -28,6 +28,7 @@ export const PrefDefaults = {
  [PrefKey.NotesHideTags]: false,
  [PrefKey.NotesHideEditorIcon]: false,
  [PrefKey.UseSystemColorScheme]: false,
+  [PrefKey.UseTranslucentUI]: true,
  [PrefKey.AutoLightThemeIdentifier]: 'Default',
  [PrefKey.AutoDarkThemeIdentifier]: NativeFeatureIdentifier.TYPES.DarkTheme,
  [PrefKey.NoteAddToParentFolders]: true,
--- a/packages/models/src/Domain/Syncable/UserPrefs/PrefKey.ts
+++ b/packages/models/src/Domain/Syncable/UserPrefs/PrefKey.ts
@@ -29,6 +29,7 @@ export enum PrefKey {
  NotesHideTags = 'hideTags',
  NotesHideEditorIcon = 'hideEditorIcon',
  UseSystemColorScheme = 'useSystemColorScheme',
+  UseTranslucentUI = 'useTranslucentUI',
  AutoLightThemeIdentifier = 'autoLightThemeIdentifier',
  AutoDarkThemeIdentifier = 'autoDarkThemeIdentifier',
  NoteAddToParentFolders = 'noteAddToParentFolders',
@@ -66,6 +67,7 @@ export type PrefValue = {
  [PrefKey.NotesHideTags]: boolean
  [PrefKey.NotesHideEditorIcon]: boolean
  [PrefKey.UseSystemColorScheme]: boolean
+  [PrefKey.UseTranslucentUI]: boolean
  [PrefKey.AutoLightThemeIdentifier]: string
  [PrefKey.AutoDarkThemeIdentifier]: string
  [PrefKey.NoteAddToParentFolders]: boolean
--- a/packages/ui-services/src/Theme/Color.spec.ts
+++ b/packages/ui-services/src/Theme/Color.spec.ts
@@ -0,0 +1,64 @@
+import { Color } from './Color'
+
+describe('Color', () => {
+  it('should throw an error if the color is invalid', () => {
+    expect(() => new Color('#ff')).toThrowError('Invalid color')
+  })
+
+  it('should parse a rgb string', () => {
+    const color = new Color('rgb(255, 0, 0)')
+    expect(color.r).toBe(255)
+    expect(color.g).toBe(0)
+    expect(color.b).toBe(0)
+    expect(color.a).toBe(1)
+  })
+
+  it('should throw error if rgb string is invalid', () => {
+    expect(() => new Color('rgb(255, 0)')).toThrowError('Invalid color')
+    expect(() => new Color('rgb(266, -1, 0)')).toThrowError('Invalid color')
+  })
+
+  it('should parse a hex string', () => {
+    const color = new Color('#ff0000')
+    expect(color.r).toBe(255)
+    expect(color.g).toBe(0)
+    expect(color.b).toBe(0)
+    expect(color.a).toBe(1)
+  })
+
+  it('should throw error if hex string is invalid', () => {
+    expect(() => new Color('#ff')).toThrowError('Invalid color')
+    expect(() => new Color('#ff000')).toThrowError('Invalid color')
+    expect(() => new Color('#ff00000')).toThrowError('Invalid color')
+  })
+
+  it('should set the alpha value', () => {
+    const color = new Color('rgb(255, 0, 0)')
+    color.setAlpha(0.5)
+    expect(color.a).toBe(0.5)
+  })
+
+  it('should throw error if alpha value is invalid', () => {
+    const color = new Color('rgb(255, 0, 0)')
+    expect(() => color.setAlpha(-1)).toThrowError('Invalid alpha value')
+    expect(() => color.setAlpha(1.1)).toThrowError('Invalid alpha value')
+  })
+
+  it('should convert to string', () => {
+    const color = new Color('rgb(255, 0, 0)')
+    color.setAlpha(0.5)
+    expect(color.toString()).toBe('rgba(255, 0, 0, 0.5)')
+  })
+
+  it('should return correct isDark value', () => {
+    const autobiographyThemeBG = 'rgb(237, 228, 218)'
+    const darkThemeBG = 'rgb(15, 16, 17)'
+    const solarizedThemeBG = 'rgb(0, 43, 54)'
+    const titaniumThemeBG = 'rgb(238, 239, 241)'
+
+    expect(new Color(autobiographyThemeBG).isDark()).toBe(false)
+    expect(new Color(darkThemeBG).isDark()).toBe(true)
+    expect(new Color(solarizedThemeBG).isDark()).toBe(true)
+    expect(new Color(titaniumThemeBG).isDark()).toBe(false)
+  })
+})
--- a/packages/ui-services/src/Theme/Color.ts
+++ b/packages/ui-services/src/Theme/Color.ts
@@ -0,0 +1,84 @@
+const RGBRegex = /-?\b[0-9]{1,3}\b/g
+
+export class Color {
+  r: number = 0
+  g: number = 0
+  b: number = 0
+  a: number = 1
+
+  constructor(color: string) {
+    if (color.startsWith('rgb')) {
+      this.setFromRGB(color)
+    } else if (color.startsWith('#')) {
+      this.setFromHex(color)
+    } else {
+      throw new Error('Invalid color')
+    }
+  }
+
+  /**
+   * Sets the color from a hex string
+   * @param hex - The hex string to set
+   */
+  setFromHex(hex: string) {
+    if (!hex.startsWith('#')) {
+      throw new Error('Invalid color')
+    }
+    const hexValue = hex.substring(1)
+    if (hexValue.length !== 3 && hexValue.length !== 6) {
+      throw new Error('Invalid color')
+    }
+    const r = parseInt(hexValue.substring(0, 2), 16)
+    const g = parseInt(hexValue.substring(2, 4), 16)
+    const b = parseInt(hexValue.substring(4, 6), 16)
+    this.r = r
+    this.g = g
+    this.b = b
+  }
+
+  /**
+   * Sets the color from an RGB string
+   * @param color - The RGB string to set
+   */
+  setFromRGB(color: string) {
+    if (!color.startsWith('rgb')) {
+      throw new Error('Invalid color')
+    }
+    const regexMatches = color.match(RGBRegex)
+    if (!regexMatches || regexMatches.length !== 3) {
+      throw new Error('Invalid color')
+    }
+    const [r, g, b] = regexMatches.map((value) => parseInt(value, 10))
+    if (r < 0 || r > 255 || g < 0 || g > 255 || b < 0 || b > 255) {
+      throw new Error('Invalid color')
+    }
+    this.r = r
+    this.g = g
+    this.b = b
+  }
+
+  /**
+   * Sets the alpha value of the color
+   * @param alpha - The alpha value to set (0-1)
+   */
+  setAlpha(alpha: number) {
+    if (alpha < 0 || alpha > 1) {
+      throw new Error('Invalid alpha value')
+    }
+    this.a = alpha
+    return this
+  }
+
+  toString() {
+    return `rgba(${this.r}, ${this.g}, ${this.b}, ${this.a})`
+  }
+
+  /**
+   * Returns true if the color is dark
+   * Based on RGB->YIQ equation https://24ways.org/2010/calculating-color-contrast
+   */
+  isDark() {
+    const yiq = (this.r * 299 + this.g * 587 + this.b * 114) / 1000
+    return yiq <= 128
+  }
+}
--- a/packages/ui-services/src/Theme/ThemeManager.ts
+++ b/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
--- a/packages/web/src/components/assets/org.standardnotes.theme-focus/index.css
+++ b/packages/web/src/components/assets/org.standardnotes.theme-focus/index.css
@@ -47,5 +47,10 @@
  --sn-stylekit-menu-border: 1px solid #424242;
  --navigation-item-selected-background-color: var(--background-color);
  --normal-button-background-color: var(--sn-stylekit-passive-color-5);
-  --menu-border-color: var(--sn-stylekit-border-color);
+  --popover-border-color: var(--sn-stylekit-passive-color-3);
+  --separator-color: var(--sn-stylekit-passive-color-3);
+}
+
+.translucent-ui [role='dialog'] {
+  --sn-stylekit-border-color: var(--sn-stylekit-passive-color-3);
 }
--- a/packages/web/src/javascripts/Components/AlertDialog/AlertDialog.tsx
+++ b/packages/web/src/javascripts/Components/AlertDialog/AlertDialog.tsx
@@ -40,10 +40,13 @@ const AlertDialog = ({
      />
      <div
        className={classNames(
-          'z-[1] w-[95vw] rounded border border-border bg-default px-6 py-5 shadow-xl md:w-auto',
+          'w-[95vw] rounded border border-[--popover-border-color] bg-[--popover-background-color] px-6 py-5 shadow-xl md:w-auto',
          !className?.includes('max-w-') && 'max-w-[600px]',
          className,
        )}
+        style={{
+          backdropFilter: 'var(--popover-backdrop-filter)',
+        }}
      >
        {children}
      </div>
--- a/packages/web/src/javascripts/Components/ChallengeModal/ChallengeModal.tsx
+++ b/packages/web/src/javascripts/Components/ChallengeModal/ChallengeModal.tsx
@@ -253,7 +253,7 @@ const ChallengeModal: FunctionComponent<Props> = ({
        close={cancelChallenge}
        className={{
          content: classNames(
-            'sn-component challenge-modal relative m-0 flex h-full w-full flex-col items-center rounded border-solid border-border bg-default p-0 md:h-auto md:!w-max md:border',
+            'sn-component challenge-modal relative m-0 flex h-full w-full flex-col items-center rounded border-solid border-border bg-default p-0 md:h-auto md:!w-max md:border md:translucent-ui:bg-[--popover-background-color] translucent-ui:[backdrop-filter:var(--popover-backdrop-filter)]',
            !isMobileScreen && 'shadow-overlay-light',
            isMobileOverlay && 'shadow-overlay-light border border-solid border-border',
          ),
--- a/packages/web/src/javascripts/Components/ChangeEditor/ChangeEditorMenu.tsx
+++ b/packages/web/src/javascripts/Components/ChangeEditor/ChangeEditorMenu.tsx
@@ -203,7 +203,11 @@ const ChangeEditorMenu: FunctionComponent<ChangeEditorMenuProps> = ({

            return (
              <Fragment key={groupId}>
-                <div className={`border-0 border-t border-solid border-border py-1 ${index === 0 ? 'border-t-0' : ''}`}>
+                <div
+                  className={`border-0 border-t border-solid border-[--separator-color] py-1 ${
+                    index === 0 ? 'border-t-0' : ''
+                  }`}
+                >
                  {group.items.map((menuItem) => {
                    const onClickEditorItem = () => {
                      handleMenuSelection(menuItem).catch(console.error)
--- a/packages/web/src/javascripts/Components/ContentListView/Header/NewNotePreferences.tsx
+++ b/packages/web/src/javascripts/Components/ContentListView/Header/NewNotePreferences.tsx
@@ -207,7 +207,7 @@ const NewNotePreferences: FunctionComponent<Props> = ({
            <input
              disabled={disabled}
              className={classNames(
-                'w-full min-w-55 rounded border border-solid border-passive-3 bg-default px-2 py-1.5 text-sm',
+                'w-full min-w-55 rounded border border-solid border-passive-3 bg-default md:translucent-ui:bg-transparent px-2 py-1.5 text-sm',
                'focus-within:ring-2 focus-within:ring-info',
              )}
              placeholder="e.g. YYYY-MM-DD"
--- a/packages/web/src/javascripts/Components/Dropdown/Dropdown.tsx
+++ b/packages/web/src/javascripts/Components/Dropdown/Dropdown.tsx
@@ -62,7 +62,7 @@ const Dropdown = ({
      </VisuallyHidden>
      <Select
        className={classNames(
-          'flex w-full min-w-55 items-center justify-between rounded border border-border bg-default px-3.5 py-1.5 text-sm text-foreground',
+          'flex w-full min-w-55 items-center justify-between rounded border border-passive-3 bg-default md:translucent-ui:bg-transparent px-3.5 py-1.5 text-sm text-foreground',
          disabled && 'opacity-50',
          classNameOverride.button,
          !fullWidth && 'md:w-fit',
@@ -83,9 +83,12 @@ const Dropdown = ({
      <SelectPopover
        store={select}
        className={classNames(
-          'z-dropdown-menu max-h-[var(--popover-available-height)] w-[var(--popover-anchor-width)] overflow-y-auto rounded border border-border bg-default py-1',
+          'z-dropdown-menu max-h-[var(--popover-available-height)] w-[var(--popover-anchor-width)] overflow-y-auto rounded border border-passive-3 bg-default py-1',
          classNameOverride.popover,
        )}
+        style={{
+          backdropFilter: 'var(--popover-backdrop-filter)',
+        }}
        portal={false}
      >
        {items.map((item) => (
--- a/packages/web/src/javascripts/Components/FilePreview/FilePreviewModal.tsx
+++ b/packages/web/src/javascripts/Components/FilePreview/FilePreviewModal.tsx
@@ -121,7 +121,7 @@ const FilePreviewModal = observer(({ application, viewControllerManager }: Props
      close={dismiss}
      className={{
        content: classNames(
-          'm-0 flex h-full w-full flex-col rounded bg-[color:var(--modal-background-color)] p-0 shadow-main md:!h-full md:max-h-[90%] md:!w-full md:max-w-[90%]',
+          'm-0 flex h-full w-full flex-col rounded bg-[--popover-background-color] p-0 shadow-main md:!h-full md:max-h-[90%] md:!w-full md:max-w-[90%]',
        ),
      }}
      actions={[
--- a/packages/web/src/javascripts/Components/Input/DecoratedInput.tsx
+++ b/packages/web/src/javascripts/Components/Input/DecoratedInput.tsx
@@ -4,7 +4,7 @@ import { DecoratedInputProps } from './DecoratedInputProps'

 const getClassNames = (hasLeftDecorations: boolean, hasRightDecorations: boolean, roundedFull?: boolean) => {
  return {
-    container: `position-relative flex items-stretch overflow-hidden border border-solid border-passive-3 bg-default text-sm focus-within:ring-2 focus-within:ring-info bg-clip-padding ${
+    container: `position-relative flex items-stretch overflow-hidden border border-solid border-passive-3 bg-default translucent-ui:bg-transparent text-sm focus-within:ring-2 focus-within:ring-info bg-clip-padding ${
      !hasLeftDecorations && !hasRightDecorations ? 'px-2 py-1.5' : ''
    } ${roundedFull ? 'rounded-full' : 'rounded'}`,
    input: `focus:ring-none w-full border-0 bg-transparent text-text focus:shadow-none focus:outline-none ${
--- a/packages/web/src/javascripts/Components/LinkedItems/LinkedItemsPanel.tsx
+++ b/packages/web/src/javascripts/Components/LinkedItems/LinkedItemsPanel.tsx
@@ -62,7 +62,7 @@ const LinkedItemsPanel = ({
    <div>
      <form
        className={classNames(
-          'sticky top-0 z-10 bg-default px-2.5 pt-2.5',
+          'sticky top-0 z-10 bg-default md:translucent-ui:bg-transparent px-2.5 pt-2.5',
          linkedResults.length || unlinkedItems.length || notesLinkingToItem.length
            ? 'border-b border-border pb-2.5'
            : 'pb-1',
@@ -70,7 +70,10 @@ const LinkedItemsPanel = ({
      >
        <DecoratedInput
          type="text"
-          className={{ container: !isSearching ? 'px-0.5 py-1.5' : 'py-0', input: 'placeholder:text-passive-0' }}
+          className={{
+            container: classNames(!isSearching ? 'px-0.5 py-1.5' : 'py-0', 'md:translucent-ui:bg-default'),
+            input: 'placeholder:text-passive-0',
+          }}
          placeholder="Search items to link..."
          value={searchQuery}
          onChange={setSearchQuery}
--- a/packages/web/src/javascripts/Components/Menu/MenuItemSeparator.tsx
+++ b/packages/web/src/javascripts/Components/Menu/MenuItemSeparator.tsx
@@ -2,7 +2,7 @@ import { FunctionComponent } from 'react'

 const MenuItemSeparator: FunctionComponent = () => (
  <li className="list-none" role="none">
-    <div role="separator" className="my-2 h-[1px] bg-border" />
+    <div role="separator" className="my-2 h-[1px] bg-[--separator-color]" />
  </li>
 )

--- a/packages/web/src/javascripts/Components/Menu/MenuRadioButtonItem.tsx
+++ b/packages/web/src/javascripts/Components/Menu/MenuRadioButtonItem.tsx
@@ -38,7 +38,7 @@ const Tooltip = ({ text }: { text: string }) => {
        onMouseEnter={() => setVisible(true)}
        onMouseLeave={() => setVisible(false)}
      >
-        <Icon type={'notes'} className="text-border" size="large" />
+        <Icon type={'notes'} className="text-border translucent-ui:text-[--popover-border-color]" size="large" />
      </div>
      <Popover
        open={visible}
--- a/packages/web/src/javascripts/Components/Modal/Modal.tsx
+++ b/packages/web/src/javascripts/Components/Modal/Modal.tsx
@@ -104,16 +104,19 @@ const Modal = ({
      />
      <div
        className={classNames(
-          'z-[1] m-0 flex h-full w-full flex-col border-solid border-border bg-default p-0 md:h-auto md:max-h-[85vh] md:w-160 md:rounded md:border md:shadow-main',
+          'z-[1] m-0 flex h-full w-full flex-col border-solid border-[--popover-border-color] bg-[--popover-background-color] p-0 md:h-auto md:max-h-[85vh] md:w-160 md:rounded md:border md:shadow-main',
          className?.content,
        )}
+        style={{
+          backdropFilter: 'var(--popover-backdrop-filter)',
+        }}
      >
        {customHeader && !disableCustomHeader ? (
          customHeader
        ) : (
          <div
            className={classNames(
-              'flex w-full flex-shrink-0 select-none items-center justify-between rounded-t border-b border-solid border-border bg-default px-2 text-text md:px-4.5 md:py-3',
+              'flex w-full flex-shrink-0 select-none items-center justify-between rounded-t border-b border-solid border-border bg-default px-2 text-text md:px-4.5 md:py-3 md:translucent-ui:bg-transparent',
              hasTopInset ? 'pb-1.5 pt-safe-top' : 'py-1.5',
            )}
          >
--- a/packages/web/src/javascripts/Components/Popover/PositionedPopoverContent.tsx
+++ b/packages/web/src/javascripts/Components/Popover/PositionedPopoverContent.tsx
@@ -98,7 +98,7 @@ const PositionedPopoverContent = ({
      <div
        className={classNames(
          'absolute left-0 top-0 flex w-full min-w-80 cursor-auto flex-col',
-          'overflow-y-auto rounded border border-[--menu-border-color] bg-default shadow-main md:h-auto md:max-w-xs',
+          'overflow-y-auto rounded border border-[--popover-border-color] bg-[--popover-background-color] shadow-main md:h-auto md:max-w-xs',
          !disableMobileFullscreenTakeover && 'h-full',
          overrideZIndex ? overrideZIndex : 'z-dropdown-menu',
          !isDesktopScreen && !disableMobileFullscreenTakeover ? 'pb-safe-bottom pt-safe-top' : '',
@@ -109,6 +109,7 @@ const PositionedPopoverContent = ({
          {
            ...styles,
            ...adjustedStyles,
+            backdropFilter: 'var(--popover-backdrop-filter)',
          } as CSSProperties
        }
        ref={mergeRefs([setPopoverElement, addCloseMethod])}
--- a/packages/web/src/javascripts/Components/Preferences/Panes/Appearance.tsx
+++ b/packages/web/src/javascripts/Components/Preferences/Panes/Appearance.tsx
@@ -14,6 +14,7 @@ import PreferencesSegment from '../PreferencesComponents/PreferencesSegment'
 import { PremiumFeatureIconName } from '@/Components/Icon/PremiumFeatureIcon'
 import EditorAppearance from './Appearance/EditorAppearance'
 import { GetAllThemesUseCase } from '@standardnotes/ui-services'
+import usePreference from '@/Hooks/usePreference'

 type Props = {
  application: WebApplication
@@ -33,6 +34,11 @@ const Appearance: FunctionComponent<Props> = ({ application }) => {
    application.getPreference(PrefKey.UseSystemColorScheme, PrefDefaults[PrefKey.UseSystemColorScheme]),
  )

+  const useTranslucentUI = usePreference(PrefKey.UseTranslucentUI)
+  const toggleTranslucentUI = () => {
+    application.setPreference(PrefKey.UseTranslucentUI, !useTranslucentUI).catch(console.error)
+  }
+
  useEffect(() => {
    const usecase = new GetAllThemesUseCase(application.items)
    const { thirdParty, native } = usecase.execute({ excludeLayerable: true })
@@ -106,6 +112,14 @@ const Appearance: FunctionComponent<Props> = ({ application }) => {
        <PreferencesSegment>
          <Title>Themes</Title>
          <div className="mt-2">
+            <div className="flex justify-between gap-2 md:items-center">
+              <div className="flex flex-col">
+                <Subtitle>Disable translucent UI</Subtitle>
+                <Text>Use opaque style for UI elements instead of translucency</Text>
+              </div>
+              <Switch onChange={toggleTranslucentUI} checked={!useTranslucentUI} />
+            </div>
+            <HorizontalSeparator classes="my-4" />
            <div className="flex justify-between gap-2 md:items-center">
              <div className="flex flex-col">
                <Subtitle>Use system color scheme</Subtitle>
--- a/packages/web/src/javascripts/Components/Preferences/PreferencesCanvas.tsx
+++ b/packages/web/src/javascripts/Components/Preferences/PreferencesCanvas.tsx
@@ -9,7 +9,10 @@ import { FOCUSABLE_BUT_NOT_TABBABLE } from '@/Constants/Constants'
 const PreferencesCanvas: FunctionComponent<PreferencesProps & { menu: PreferencesSessionController }> = (props) => (
  <div className="flex min-h-0 flex-grow flex-col md:flex-row md:justify-between">
    <PreferencesMenuView menu={props.menu} />
-    <div className="min-h-0 flex-grow overflow-auto bg-contrast" tabIndex={FOCUSABLE_BUT_NOT_TABBABLE}>
+    <div
+      className="min-h-0 flex-grow overflow-auto bg-contrast md:bg-[--popover-background-color]"
+      tabIndex={FOCUSABLE_BUT_NOT_TABBABLE}
+    >
      <PaneSelector {...props} />
    </div>
  </div>
--- a/packages/web/src/javascripts/Components/Preferences/PreferencesMenuView.tsx
+++ b/packages/web/src/javascripts/Components/Preferences/PreferencesMenuView.tsx
@@ -24,7 +24,7 @@ const PreferencesMenuView: FunctionComponent<Props> = ({ menu }) => {
  )

  return (
-    <div className="border-b border-border bg-default px-5 py-2 md:border-0 md:bg-contrast md:px-0 md:py-0">
+    <div className="border-b border-border bg-default px-5 py-2 md:border-0 md:bg-[--popover-background-color] md:px-0 md:py-0">
      <div className="hidden min-w-55 flex-col overflow-y-auto px-3 py-6 md:flex">
        {menuItems.map((pref) => (
          <PreferencesMenuItem
--- a/packages/web/src/javascripts/Components/QuickSettingsMenu/QuickSettingsMenu.tsx
+++ b/packages/web/src/javascripts/Components/QuickSettingsMenu/QuickSettingsMenu.tsx
@@ -13,7 +13,6 @@ import Icon from '@/Components/Icon/Icon'
 import FocusModeSwitch from './FocusModeSwitch'
 import ThemesMenuButton from './ThemesMenuButton'
 import { sortThemes } from '@/Utils/SortThemes'
-import HorizontalSeparator from '../Shared/HorizontalSeparator'
 import { QuickSettingsController } from '@/Controllers/QuickSettingsController'
 import PanelSettingsSection from './PanelSettingsSection'
 import Menu from '../Menu/Menu'
@@ -21,6 +20,7 @@ import MenuSwitchButtonItem from '../Menu/MenuSwitchButtonItem'
 import MenuRadioButtonItem from '../Menu/MenuRadioButtonItem'
 import { useApplication } from '../ApplicationProvider'
 import { GetAllThemesUseCase } from '@standardnotes/ui-services'
+import MenuItemSeparator from '../Menu/MenuItemSeparator'

 type MenuProps = {
  quickSettingsMenuController: QuickSettingsController
@@ -133,7 +133,7 @@ const QuickSettingsMenu: FunctionComponent<MenuProps> = ({ quickSettingsMenuCont
              {component.displayName}
            </MenuSwitchButtonItem>
          ))}
-          <HorizontalSeparator classes="my-2" />
+          <MenuItemSeparator />
        </>
      )}
      <div className="my-1 px-3 text-sm font-semibold uppercase text-text">Appearance</div>
@@ -143,7 +143,7 @@ const QuickSettingsMenu: FunctionComponent<MenuProps> = ({ quickSettingsMenuCont
      {themes.map((theme) => (
        <ThemesMenuButton uiFeature={theme} key={theme.uniqueIdentifier.value} />
      ))}
-      <HorizontalSeparator classes="my-2" />
+      <MenuItemSeparator />
      <FocusModeSwitch
        application={application}
        onToggle={setFocusModeEnabled}
--- a/packages/web/src/javascripts/Components/RevisionHistoryModal/HistoryModalDialog.tsx
+++ b/packages/web/src/javascripts/Components/RevisionHistoryModal/HistoryModalDialog.tsx
@@ -38,7 +38,7 @@ const HistoryModalDialog = forwardRef(({ children, onDismiss }: Props, ref: Forw
      />
      <div
        className={classNames(
-          'absolute z-[1] my-0 flex h-full w-full flex-col rounded-md bg-[color:var(--modal-background-color)]',
+          'absolute z-[1] my-0 flex h-full w-full flex-col rounded-md bg-[--modal-background-color]',
          'p-0 pb-safe-bottom pt-safe-top shadow-lg md:max-h-[90%] md:w-[90%] md:max-w-[90%]',
          'md:left-1/2 md:top-1/2 md:-translate-x-1/2 md:-translate-y-1/2 md:transform',
          getPlatformString(),
--- a/packages/web/src/javascripts/Components/Shared/HorizontalSeparator.tsx
+++ b/packages/web/src/javascripts/Components/Shared/HorizontalSeparator.tsx
@@ -4,7 +4,7 @@ type Props = {
  classes?: string
 }
 const HorizontalSeparator: FunctionComponent<Props> = ({ classes = '' }) => {
-  return <hr className={`min-h-[1px] w-full border-none bg-border ${classes}`} />
+  return <hr className={`min-h-[1px] w-full border-none bg-[--separator-color] ${classes}`} />
 }

 export default HorizontalSeparator
--- a/packages/web/src/javascripts/Components/StyledTooltip/StyledTooltip.tsx
+++ b/packages/web/src/javascripts/Components/StyledTooltip/StyledTooltip.tsx
@@ -47,7 +47,7 @@ const StyledTooltip = ({
        autoFocusOnShow={!showOnHover}
        store={tooltip}
        className={classNames(
-          'z-tooltip max-w-max rounded border border-border bg-contrast px-3 py-1.5 text-sm text-foreground shadow',
+          'z-tooltip max-w-max rounded border border-border translucent-ui:border-[--popover-border-color] bg-contrast translucent-ui:bg-[--popover-background-color] [backdrop-filter:var(--popover-backdrop-filter)] px-3 py-1.5 text-sm text-foreground shadow',
          className,
        )}
        updatePosition={() => {
--- a/packages/web/src/javascripts/Components/SuperEditor/Plugins/FloatingTextFormatToolbarPlugin/index.tsx
+++ b/packages/web/src/javascripts/Components/SuperEditor/Plugins/FloatingTextFormatToolbarPlugin/index.tsx
@@ -277,7 +277,7 @@ function TextFormatFloatingToolbar({
  return (
    <div
      ref={toolbarRef}
-      className="absolute left-0 top-0 rounded-lg border border-border bg-contrast px-2 py-1 shadow-sm shadow-contrast"
+      className="absolute left-0 top-0 rounded-lg border border-border bg-contrast translucent-ui:bg-[--popover-background-color] translucent-ui:[backdrop-filter:var(--popover-backdrop-filter)] px-2 py-1 shadow-sm shadow-contrast"
    >
      {isLink && (
        <LinkEditor
--- a/packages/web/src/stylesheets/_modals.scss
+++ b/packages/web/src/stylesheets/_modals.scss
@@ -56,6 +56,12 @@
  justify-content: center;
  flex-direction: column;

+  .sk-panel {
+    border-color: var(--popover-border-color);
+    background-color: var(--popover-background-color);
+    backdrop-filter: var(--popover-backdrop-filter);
+  }
+
  .sn-component {
    height: 100%;
    .sk-panel {
--- a/packages/web/src/stylesheets/_theme.scss
+++ b/packages/web/src/stylesheets/_theme.scss
@@ -44,5 +44,8 @@

  --normal-button-background-color: var(--sn-stylekit-background-color);

-  --menu-border-color: transparent;
+  --popover-background-color: var(--sn-stylekit-background-color);
+  --popover-border-color: var(--sn-stylekit-border-color);
+
+  --separator-color: var(--sn-stylekit-border-color);
 }
--- a/packages/web/tailwind.config.js
+++ b/packages/web/tailwind.config.js
@@ -170,6 +170,7 @@ module.exports = {
  plugins: [
    plugin(function ({ addVariant }) {
      addVariant('pointer-coarse', '@media (pointer: coarse)')
+      addVariant('translucent-ui', '.translucent-ui &')
    }),
  ],
 }