CSS variables dynamic

Wappler General Need Help
1

Is it possible to create css variables dynamic?

:root {
  --hours-box: #758f98;
  --dress-code-box: #06453f;
  --welcome-box: #102723;
  --tittle-category: #06453f;
  --dish-name: #9d4009;
  --lang-button:#231F20;    
  --lang-button-hover: #000000;
  --margin-bottom-logo : 50px;    
  --margin-top-logo : 50px;
  --logo-max-width: 260px;     
}
2

What do you mean? Please explain what you need to do?

3

Instead if CSS inline of each element I have declared classes on the head of the document inside I use some CSS variables. Is possible to change those values depending on a condition? Or I need to create inline CSS ??

4

You need to use inline styles for this.

5

i have used PHP before to do this... that is now if your project is PHP

but not for LARGE css only for say a few lines

Rename your CSS file from, say, styles.css to styles.php and add the following at the top:

<?php
  header("Content-Type: text/css");
  $hours_box = "#758f98"; // Example value
?>
:root {
  --hours-box: <?php echo $hours_box; ?>;
  --dress-code-box: #06453f;
  /* ... other variables ... */
}

Then reference it in your HTML like this:

<link rel="stylesheet" type="text/css" href="styles.php">

or inline

<style>
:root {
  --hours-box: <?php echo $hours_box; ?>;
  --dress-code-box: <?php echo $dress_code_box; ?>;
}
</style>

but not recommened for large css files..

6

Why not ask Copilot as I have done? This is what I got:

Certainly! Here's a simple example project where users can switch themes dynamically using CSS variables and JavaScript.

Project: Theme Switcher

In this project, users can toggle between light and dark themes by updating CSS variables.

1. HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Theme Switcher</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <button id="theme-toggle">Toggle Theme</button>
    <p>Dynamic CSS variables in action!</p>
    <script src="script.js"></script>
</body>
</html>

2. CSS (styles.css)

:root {
    --bg-color: white;
    --text-color: black;
}

body {
    background-color: var(--bg-color);
    color: var(--text-color);
    transition: background-color 0.3s ease, color 0.3s ease;
}

button {
    padding: 10px;
    background-color: var(--text-color);
    color: var(--bg-color);
    border: none;
    cursor: pointer;
}

3. JavaScript (script.js)

const toggleButton = document.getElementById('theme-toggle');

toggleButton.addEventListener('click', () => {
    const root = document.documentElement;
    const currentBg = getComputedStyle(root).getPropertyValue('--bg-color').trim();

    if (currentBg === 'white') {
        root.style.setProperty('--bg-color', 'black');
        root.style.setProperty('--text-color', 'white');
    } else {
        root.style.setProperty('--bg-color', 'white');
        root.style.setProperty('--text-color', 'black');
    }
});

How It Works

  1. CSS variables define the default colors.
  2. The button listens for click events and updates the variables dynamically using JavaScript.
  3. The transition effect ensures a smooth theme change.

This is a basic example, but you can enhance it with animations, additional themes, or even user preferences stored in localStorage!

7

As Teodor points out, you can set css values dynamically using dmx-style attribute on a dom element--it is not actually set in the css itself. You can use the variable IN your CSS, but you don't set the value in the css. You can place it as high in the dom as your dmx-app element.

Here's an example that allows for the use of --heading-font-family anywhere in my app:

<html is="dmx-app" 
  dmx-style:--heading-font-family="get_tenant_themes.data.heading_font_family" 
>
...
</html>
4 Likes