(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.