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;
}
What do you mean? Please explain what you need to do?
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 ??
You need to use inline styles for this.
Mozzi
June 5, 2025, 12:15pm
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..
ben
June 5, 2025, 12:33pm
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
CSS variables define the default colors.
The button listens for click events and updates the variables dynamically using JavaScript.
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
!
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