(Feature request) Custom theming for specific notes

[FalcoGer]

Describe feature

I am using a dark theme by default. But some websites set a dark text, such as The rust programming language documentation use a dark text and don't set the background color. When creating a webview in trilium to view such a site, then the dark text on the dark background becomes not readable or very hard to read.

I have created a light theme CSS, but wish to use it only for such occasions and use the dark theme everywhere else.

This is currently not possible, or perhaps I just don't know how to do it.
I would like to have an attribute field for notes where you can specify a theme to be used for that note only (and not changing the theme of the trilium elements like the note tree view, etc)

Additional Information

Using a dark theme:

Using a light theme:

[sigaloid]

For this case you'd probably want to select the text and remove the formatting/coloring, you should be able to do ctrl-A and select no color in the context menu!

PS: go Rust 🦀

[FalcoGer]

you should be able to do ctrl-A and select no color in the context menu!

It's a web view and thus read-only. It's not my own note and the coloring comes from the page's CSS.

PS: go Rust 🦀

Rust is "safe"

[soulsands]

You can use cssClass and appCss to implement this.
https://github.com/zadam/trilium/wiki/Attributes

[FalcoGer]

• appCss - marks CSS notes which are loaded into the Trilium application and can thus be used to modify Trilium's looks.
• cssClass - the value of this label is then (then after what?) added as CSS class to the node representing the given note in the tree. This can be useful for advanced theming. Can be used in template notes.

This doesn't explain how to do it. I already added my 2 notes to be used as theming. I was only able to do that because of an example, because the documentation for that is certainly not enough.

For example the text in that webpage inherits from body { color = #333; /* other stuff, too */ }. I tried adding #cssClass(inheritable)="body { color=#FFF; }" but it didn't do anything. The documentation on these attributes is very lacking.

The note is a web view, not a css note, so why would I use appCSS? Furthermore what does it mean that a css class is added to the node representing the note in the tree? I don't want to edit the tree. I want the note itself to look different. And I can't edit the note itself because it's a web view. Also the CSS class (body) already exists. I just want to get rid of the color element and use the default color.

[dosubot[bot]]

Hi @FalcoGer! I'm Dosu and I’m helping the Trilium team.

cssClass only adds a CSS class to the note's node in the tree view, not to the note content itself, so it can't be used to style the content inside web view notes. appCss loads CSS globally into the Trilium app UI, but this also doesn't affect the content inside web view notes.

Web view notes are rendered using an iframe (in browsers) or a webview (in Electron), which isolates their content from Trilium's CSS for security reasons. This means you can't inject or override CSS for the content of a web view note using Trilium's theming features or attributes like cssClass or appCss. The only way to change the appearance of a web view note's content is if the external page itself supports theming or if you use a different note type, like a Render Note, where you control the HTML and CSS directly. There is currently no built-in way or plugin to apply per-note theming to web view content in Trilium (source, source).

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}    

[eliandoran]

https://docs.triliumnotes.org/User%20Guide/User%20Guide/Theme%20development/Custom%20app-wide%20CSS.html?h=app+css#per-workspace-styles can be used as reference. The only difference is that it doesn't have to be a workspace, the #cssClass attribute can be applied to the subtree where you need the custom style.