gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-11-10 08:29:00 +01:00
Code Issues Actions 14 Packages Projects Releases Wiki Activity

style: allow custom themes to turn off background effects
Some checks are pending
Checks / main (push) Waiting to run
Details

Browse Source
This commit is contained in:
Adorian Doran 2025-10-29 03:20:25 +02:00
parent 0424fe4fba
commit 947e43a615
3 changed files with 21 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
apps/client/src/stylesheets/theme-next/base.css
View File

@ -82,6 +82,7 @@
/* Theme capabilities */ /* Theme capabilities */
--tab-note-icons: true; --tab-note-icons: true;
--allow-background-effects: true;
/* To ensure that a tree item's custom color remains sufficiently contrasted and readable, /* 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 * the color is adjusted based on the current color scheme (light or dark). The lightness

16
apps/client/src/stylesheets/theme-next/shell.css
View File

@ -35,7 +35,7 @@ body.mobile {
} }
/* #region Mica */ /* #region Mica */
body.background-effects.platform-win32 { body.background-effects.theme-supports-background-effects.platform-win32 {
--background-material: tabbed; --background-material: tabbed;
--launcher-pane-horiz-border-color: var(--launcher-pane-horiz-border-color-bgfx); --launcher-pane-horiz-border-color: var(--launcher-pane-horiz-border-color-bgfx);
--launcher-pane-horiz-background-color: var(--launcher-pane-horiz-background-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; --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); --left-pane-background-color: var(--window-background-color-bgfx);
--center-pane-background-color-bgfx: var(--center-pane-vert-layout-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); --right-pane-background-color: var(--right-pane-background-color-bgfx);
--background-material: mica; --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); --center-pane-background-color-bgfx: var(--center-pane-horiz-layout-background-color-bgfx);
} }
body.background-effects.platform-win32, body.background-effects.theme-supports-background-effects.platform-win32,
body.background-effects.platform-win32 #root-widget { body.background-effects.theme-supports-background-effects.platform-win32 #root-widget {
background: var(--window-background-color-bgfx) !important; background: var(--window-background-color-bgfx) !important;
} }
body.background-effects.platform-win32.layout-horizontal #horizontal-main-container, body.background-effects.theme-supports-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-vertical #vertical-main-container {
background-color: var(--root-background); background-color: var(--root-background);
} }
/* Note split with background effects */ /* 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); --note-split-background-color: var(--center-pane-background-color-bgfx);
} }

13
apps/client/src/widgets/containers/root_container.ts
View File

@ -1,9 +1,10 @@
import { EventData } from "../../components/app_context.js"; 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 FlexContainer from "./flex_container.js";
import options from "../../services/options.js"; import options from "../../services/options.js";
import type BasicWidget from "../basic_widget.js"; import type BasicWidget from "../basic_widget.js";
import utils from "../../services/utils.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. * 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.#setMotion(options.is("motionEnabled"));
this.#setShadows(options.is("shadowsEnabled")); this.#setShadows(options.is("shadowsEnabled"));
this.#setBackdropEffects(options.is("backdropEffectsEnabled")); this.#setBackdropEffects(options.is("backdropEffectsEnabled"));
this.#setThemeCapabilities();
this.#setLocaleAndDirection(options.get("locale")); this.#setLocaleAndDirection(options.get("locale"));
return super.render(); return super.render();
@ -71,6 +73,15 @@ export default class RootContainer extends FlexContainer<BasicWidget> {
document.body.classList.toggle("backdrop-effects-disabled", !enabled); 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) { #setLocaleAndDirection(locale: string) {
const correspondingLocale = LOCALES.find(l => l.id === locale); const correspondingLocale = LOCALES.find(l => l.id === locale);
document.body.lang = locale; document.body.lang = locale;