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 */
--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

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

@ -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);
}

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

@ -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;