Catppuccin variable in Custom CSS doesn't work

Questions & Help
1

Hi,

I tried to use a custom theme per graph as suggested here like this:

@import url('https://logseq.catppuccin.com/ctp-frappe.css'); 
:root {
  --ctp-primary-background-color: blue;
}

The background color doesn’t change to blue

2

Hi @alexzeitler

I don’t think you can override the theme like that since the actual CSS variable used by Logseq is: --ls-primary-background-color. In my experience you need to know some CSS and treat Logseq as a website when applying your own styles. Just open Dev Tools (on Mac: View ->Toggle Developer Tools) and inspect the elements you want to style.

If you look into the CSS file you imported you will, eventually, see the the row:

--ls-primary-background-color: var(--ctp-primary-background-color);

Which means that --ctp-primary-background-color is declared and then used. When you then declare/override the --ctp-* variable it will not be applied to any elements.

tl;dr
to change the sidebar background you can either:

  • set --left-sidebar-bg-color to the choice of your color e.g. --left-sidebar-bg-color: green !important;
  • set a css rule directly targeting .left-sidebar-inner
3

@gh_hy44 thanks, overriding the .left-sidebar-inner class in custom.css did work like this:

.left-sidebar-inner {
  background: green !important;
}

Updating the variable like this didn’t work (in custom.css):

--left-sidebar-bg-color: green !important;