CSS code that controls the background color

Customization
1

Hi!
Does anyone know what CSS code I can use on the .css file to change the background color, editor and panels? Thank you.

2

Welcome. Test this:

#root>div {
    --ls-primary-background-color: #55aa55;
    --ls-secondary-background-color: #5555aa;
}

Then pick some practical values.

UPDATE: Change the main background color with css

2 Likes
3

Is there some comprehensive list of all the controls that one can use to style the interface?

4

UPDATE: Look in css files here.

For --ls variables, look at the first 200 lines inside file common.css, either on your installation or here.

1 Like
5

Besides what was already stated about CSS variables, here’s how to drill down on what rules impact which part of the interface. If you know your way around HTML + CSS, you can identify which selector(s) to override in the following way:

  1. Make sure you have developer mode enabled via ... > Settings > Advanced > Developer mode
  2. Go to the Logseq page of your choice
  3. Hit CTRL + SHIFT + i or ALT > View > Toggle Developer Tools to open the Dev/Inspector Tool (thread)

Logseq Inspector Tool shortcut

Access Dev Tools from menu
Access Dev Tools from menu427×216 62.1 KB

.

From there, you can mess around with the existing rules using the Element selector and Styles panel:

Logseq Inspect Tools

.
And copy-paste your new rule or declaration into custom.css:

Logseq_Copy rule or declaration

2 Likes
6

Thank you a lot @candide!

1 Like