From 947e43a615e59d18a09260b6cdb0ed31e321d808 Mon Sep 17 00:00:00 2001
From: Adorian Doran <adorian@esevo.ro>
Date: Wed, 29 Oct 2025 03:20:25 +0200
Subject: [PATCH] style: allow custom themes to turn off background effects

---
 apps/client/src/stylesheets/theme-next/base.css  |  1 +
 apps/client/src/stylesheets/theme-next/shell.css | 16 ++++++++--------
 .../src/widgets/containers/root_container.ts     | 13 ++++++++++++-
 3 files changed, 21 insertions(+), 9 deletions(-)

diff --git a/apps/client/src/stylesheets/theme-next/base.css b/apps/client/src/stylesheets/theme-next/base.css
index a33da2bc5..46934c8f5 100644
--- a/apps/client/src/stylesheets/theme-next/base.css
+++ b/apps/client/src/stylesheets/theme-next/base.css
@@ -82,6 +82,7 @@
 
     /* Theme capabilities */
     --tab-note-icons: true;
+    --allow-background-effects: true;
 
     /* To ensure that a tree item's custom color remains sufficiently contrasted and readable,
      * the color is adjusted based on the current color scheme (light or dark). The lightness
diff --git a/apps/client/src/stylesheets/theme-next/shell.css b/apps/client/src/stylesheets/theme-next/shell.css
index a8ec29e49..a0f73a082 100644
--- a/apps/client/src/stylesheets/theme-next/shell.css
+++ b/apps/client/src/stylesheets/theme-next/shell.css
@@ -35,7 +35,7 @@ body.mobile {
 }
 
 /* #region Mica */
-body.background-effects.platform-win32 {
+body.background-effects.theme-supports-background-effects.platform-win32 {
     --background-material: tabbed;
     --launcher-pane-horiz-border-color: var(--launcher-pane-horiz-border-color-bgfx);
     --launcher-pane-horiz-background-color: var(--launcher-pane-horiz-background-color-bgfx);
@@ -46,29 +46,29 @@ body.background-effects.platform-win32 {
     --root-background: transparent;
 }
 
-body.background-effects.platform-win32.layout-vertical {
+body.background-effects.theme-supports-background-effects.platform-win32.layout-vertical {
     --left-pane-background-color: var(--window-background-color-bgfx);
     --center-pane-background-color-bgfx: var(--center-pane-vert-layout-background-color-bgfx);
     --right-pane-background-color: var(--right-pane-background-color-bgfx);
     --background-material: mica;
 }
 
-body.background-effects.platform-win32.layout-horizontal {
+body.background-effects.theme-supports-background-effects.platform-win32.layout-horizontal {
     --center-pane-background-color-bgfx: var(--center-pane-horiz-layout-background-color-bgfx);
 }
 
-body.background-effects.platform-win32,
-body.background-effects.platform-win32 #root-widget {
+body.background-effects.theme-supports-background-effects.platform-win32,
+body.background-effects.theme-supports-background-effects.platform-win32 #root-widget {
     background: var(--window-background-color-bgfx) !important;
 }
 
-body.background-effects.platform-win32.layout-horizontal #horizontal-main-container,
-body.background-effects.platform-win32.layout-vertical #vertical-main-container {
+body.background-effects.theme-supports-background-effects.platform-win32.layout-horizontal #horizontal-main-container,
+body.background-effects.theme-supports-background-effects.platform-win32.layout-vertical #vertical-main-container {
     background-color: var(--root-background);
 }
 
 /* Note split with background effects */
-body.background-effects.platform-win32 #center-pane .note-split.bgfx {
+body.background-effects.theme-supports-background-effects.platform-win32 #center-pane .note-split.bgfx {
     --note-split-background-color: var(--center-pane-background-color-bgfx);
 }
 
diff --git a/apps/client/src/widgets/containers/root_container.ts b/apps/client/src/widgets/containers/root_container.ts
index bd1ae9719..2e532ac3d 100644
--- a/apps/client/src/widgets/containers/root_container.ts
+++ b/apps/client/src/widgets/containers/root_container.ts
@@ -1,9 +1,10 @@
 import { EventData } from "../../components/app_context.js";
+import { LOCALES } from "@triliumnext/commons";
+import { readCssVar } from "../../utils/css-var.js";
 import FlexContainer from "./flex_container.js";
 import options from "../../services/options.js";
 import type BasicWidget from "../basic_widget.js";
 import utils from "../../services/utils.js";
-import { LOCALES } from "@triliumnext/commons";
 
 /**
  * The root container is the top-most widget/container, from which the entire layout derives.
@@ -33,6 +34,7 @@ export default class RootContainer extends FlexContainer<BasicWidget> {
         this.#setMotion(options.is("motionEnabled"));
         this.#setShadows(options.is("shadowsEnabled"));
         this.#setBackdropEffects(options.is("backdropEffectsEnabled"));
+        this.#setThemeCapabilities();
         this.#setLocaleAndDirection(options.get("locale"));
 
         return super.render();
@@ -71,6 +73,15 @@ export default class RootContainer extends FlexContainer<BasicWidget> {
         document.body.classList.toggle("backdrop-effects-disabled", !enabled);
     }
 
+    #setThemeCapabilities() {
+        // Supports background effects
+
+        const useBgfx = readCssVar(document.documentElement, "allow-background-effects")
+                        .asBoolean(false);
+
+        document.body.classList.toggle("theme-supports-background-effects", useBgfx);
+    }
+
     #setLocaleAndDirection(locale: string) {
         const correspondingLocale = LOCALES.find(l => l.id === locale);
         document.body.lang = locale;