Question about specific CSS in Custom Theme

[Gemstone-of-the-sun]

Originally, I wanted to use the custom theme called Lemon Tree (https://github.com/yu-jingrui/trilium-theme-lemon-tree). However it doesn't seem up to date as some of the parts that where supposed to be green was a type of yellow-white instead. Didn't sound like it would be difficult to fix, but... this lead me on a journey of replacing every single hex code attempting to find what I now know is called the launcher pane background.

In the process of this, I also decided that the background color of the left side menu (that shows all your notebooks) wasn't a color I liked. (Weird grey-blue tint that really stood out to me).

Now on to the problems and what I'm confused about. I'm going to be honest, as someone who doesn't know anything about this stuff. I've spent a few hours picking apart the theme, erasing parts, replacing color codes and so on. I discovered that not only does some of the color codes in the Lemon Tree Theme not do anything when changed (or erased) but when I found the element names on what I actually desired to change - it didn't work. But only within this custom Lemon Tree Theme.

It works if I put the below code into an entirely empty file, or add them to the wiki example of a custom theme. (https://github.com/TriliumNext/Trilium/wiki/Themes).

:root {
	
    --left-pane-background-color: #EF6B8E;
    --launcher-pane-background-color: #0d6efd;
 }

But adding these lines into the Lemon Tree Theme doesn't do anything. I've systematically erased parts of the code to see if any of the other code overrides it and it just.. doesn't work regardless of what I do. (Even if I copy the way they wrote the colors with their var (color-name)

It isn't the biggest of deals, as through this experience I've been slowly replacing the color codes that does work to pink and I'm pretty happy with how it currently looks but it really frustrates me that I couldn't figure out why it doesn't work.

[dosubot[bot]]

The reason your changes to --left-pane-background-color and --launcher-pane-background-color work in a blank or example theme but not in the Lemon Tree theme is that Lemon Tree uses an outdated theme structure. Since Trilium v0.48, custom themes must define CSS variables inside a :root selector and use the #appTheme attribute with a value that matches the note name exactly. Old themes that use selectors like body.theme-lemon-tree or don't use :root won't work properly in newer Trilium versions, so variable overrides won't take effect as expected see docs theme guide.

Also, in the latest TriliumNext, --launcher-pane-background-color is deprecated and replaced by --launcher-pane-vert-background-color and --launcher-pane-horiz-background-color. If you want to override the launcher pane color, use these new variables in your :root block, and add !important if your changes aren't taking effect see example:

:root {
  --left-pane-background-color: #EF6B8E !important;
  --launcher-pane-vert-background-color: #0d6efd !important;
  --launcher-pane-horiz-background-color: #0d6efd !important;
}

To fix Lemon Tree, update its CSS to use :root for all variables, remove any body.theme-lemon-tree prefixes, and make sure the note has the correct #appTheme attribute. This should let your color changes work as expected.

To reply, just mention @dosu.

---

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

[hulmgulm]

@dosu I want to convert an older Trilium them to a new TriliumNext them. Can you give me a list of CSS variables which I need to rename as the old one got removed and a list of variables which now need an !important which was not necessary before? Any other hints you can provide which will make the conversion easier for me?

[adoriandoran]

You can easily change the colors in lemon-tree.css. Just replace with the color code you wish, as in the below examples.

However it doesn't seem up to date as some of the parts that where supposed to be green was a type of yellow-white instead.

Line 69:

--launcher-pane-vert-button-hover-background: var(--color-lemon-dark) !important;

To use own color, modify like this:

--launcher-pane-vert-button-hover-background: gray !important;

In the process of this, I also decided that the background color of the left side menu (that shows all your notebooks) wasn't a color I liked.

Line 82:

--left-pane-background-color: gray !important;

Don't forget to reload the front-end (Menu -> Advanced -> Reload Frontend) to apply the new changes.

[adoriandoran]

By the way, the actual color scheme is intentional by the theme's author, it's not outdated.