How to change css property values dynamically?

Wappler General Need Help
1

Hi!

I wanna bind some css variables to some data from the database.
I suppose I have to add something like this in head of the page:

<style>
:root {
  --text-color: #24a3e3;
  --bg-color: #1a74a1;
}
</style>

And then somehow bind colors to dynamic values from DB. E.g. {{user.text-color}} But I don’t know how to do that.
Would be grateful for any advice.

2

One thing to mention.
I suppose binding will work only if this tag is placed in the page body.

Seems like it is allowed to do that.
And I’ve already tried to place an additional <link rel="stylesheet"> in the body and it worked.

But maybe there are some consequences of this practice I don’t understand yet?

3

You might want to try the Style dynamic attribute on the body.

1 Like
4

Indeed, it worked!
Thank you @George, I completely forgot about that option.

5

I have to restart this discussion again.
The goal is the same as in the first message.
But now I want to apply dynamic values to properties of some different classes and selectors.

For example, I have:

body {
    background-color: #adafaf;
}

p , a , h5 , label {
    color: #000000
}

.navbar-light .navbar-nav .nav-link {
    color: #000000
}

I want to make unique colors for each page (and pages comes from database items).

I know I can place style tags like ones above in page content, it works.
But how to bind css properties from style tags to the dynamic values?

6

I know that one way is to generate a css file for each page, store it somewhere and bind when needed.

It definitely will work, but will require some hussle.

That’s why I’m curious if there is a more easy and straightforward way.

7

You can define colors in your css file using css variables.

Then just give those variables a value with dynamic style attributes.

1 Like
8

Again, thank you very much, @George!
This is, indeed, what I’ve been looking for.

9

Is any example of this ?? Or tutorial ??

10

What exactly are you trying to do?

11

Open a new post to explain better.