Canvas Support

How to set background color in topbar etc. using template's css variables

1 reply · opened Aug 23, 2023

LlochmuellerMEDIAAug 23, 2023

I'm struggeling a bit with customizing the color scheme in Canvas 7. Is there documentation available to set colors other than the theme color? In this case how to set the background color for the dark topbar using the template's CSS variables. I've tried to set it via those I see when inspecting the code in the browser:

:root {
	--cnvs-themecolor: #C0DF16;
	--cnvs-themecolor-rgb: 192, 223, 22;
	--main-color: #00A499;
	--main-color-rgb: 0, 164, 153;
	--cnvs-contrast-bg-offset: var(--main-color);
	--cnvs-topbar-bg: var(--main-color);
}

I'm getting a bit lost in the dependencies of the different css variables as --cnvs-topbar-bg is based on --cnvs-contrast-bg-offset but resetting either of them to my own value doesn't change anything on the front end.

Using #topbar.dark {background-color: var(--main-color)} in custom.css works though. But is there a better way?

SSemicolon WebSTAFFAug 25, 2023

Hello,

We recommend using the following CSS instead:
[ch_pre type="css"]#top-bar {
--cnvs-topbar-bg: var(--main-color);
}[/ch_pre]

This is because, once you add the .dark Class to the #top-bar Element, the .dark will get more priority than :root.

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard
How to set background color in topbar etc. using template's css variables · Canvas Template Support