Using CSS variables in Dash

Dash Python
1

Does Dash support CSS variables, as in:

:root {
–custom-color: #F9F9F9;
}

.header {
background-color: var(–custom-color);
}

(here is the website describing how to do this: https://codeburst.io/css-variables-explained-with-5-examples-84adaffaa5bd)

I’d like to give my custom colors names, and CSS variables are one way to do that; they aren’t working in my code, so I wanted to make sure they were supported before I began troubleshooting.

Thanks,

David

1 Like
2

I have the same question. I want to use css library which is using css variables. css variable is not overridden by its value.

3

Hello @manishkt,

Welcome to the community!

I think this has to deal with how the components parse the information as it would be in string form and not a function.

A workaround would be to give specific classNames to each component you are wanting to style.

4

Hi @manishkt

CSS variables do work in Dash.

For example, if you are using a Bootstrap stylesheet, there are lots of css variables you can use.

You can use them in the style prop like this:

 html.Div("bootstrap css variable ", style = {"backgroundColor": "var(--bs-gray-400)"})

or you can use them in your own .css file in the assets folder. For example

.header {
   background-color: var(--bs-gray-400)
}

Then you can use this in the className prop in Dash like this:

  html.Div("header class name", className="header")

If this isn’t working for you, feel free to post a minimal example that reproduces the issue