Sharing a Variable Across HTML, CSS, and JavaScript

When building modern web applications, having a single source of truth for variables used in HTML, CSS, and JavaScript is often helpful. A typical example is a theme color or font size you want to reference and modify across your styles and scripts. This post will explore how to achieve this seamlessly using CSS custom properties (variables).

Why Share Variables?

Sharing variables across HTML, CSS, and JavaScript offers several advantages:

▪️Consistency: Ensures that the exact value is applied everywhere.

▪️Dynamic Updates: Enables easy updates and live changes through JavaScript.

▪️Simplified Maintenance: Reduces redundancy and keeps your code DRY (Don’t Repeat Yourself).

Step 1: Declare the Variable in CSS

CSS custom properties (variables) start with a -- prefix and are defined in a selector, typically :root for global scope.

:root {
    --main-color: #3498db;
    --font-size: 16px;
}

These variables are now globally accessible in your CSS and can be modified dynamically via JavaScript.

Step 2: Use the Variable in CSS

You can use the var() function to reference the custom property in your CSS rules:

body {
    color: var(--main-color);
    font-size: var(--font-size);
}

This ensures that the styles dynamically respond to changes made to the variable.

Step 3: Access and Modify the Variable in JavaScript

In JavaScript, you can interact with CSS variables using the getComputedStyle and setProperty methods:

Access the Variable

To read the current value of a CSS variable:

const rootStyles = getComputedStyle(document.documentElement);
const mainColor = rootStyles.getPropertyValue('--main-color').trim(); // "#3498db"
console.log(mainColor);

Modify the Variable

To update the value dynamically:

document.documentElement.style.setProperty('--main-color', '#e74c3c');

This immediately updates the --main-color variable; any element using it will reflect the new value.

Step 4: Optional - Reflect the Variable in HTML

If needed, you can use JavaScript to pass the variable’s value to an HTML element:

document.getElementById('color-value').textContent = mainColor;

This approach is useful for displaying or debugging variable values in your app.

Complete Example

Here’s how everything ties together:

How It Works

1. CSS Variables: Define --main-color in :root.

2. Dynamic Styling: Use var(--main-color) in your CSS styles.

3. JavaScript Integration: Use setProperty to update the variable and dynamically change styles.

Benefits of This Approach

▪️Dynamic Theme Updates: Easily change themes without modifying multiple files.

▪️Reactive Design: Styles react instantly to JavaScript updates.

▪️Cross-Context Consistency: Use the same value across HTML, CSS, and JavaScript.

This method is a clean, maintainable way to ensure your application’s variables stay consistent across all layers. You can create dynamic and reactive designs with minimal effort by leveraging CSS custom properties.

---

I hope you found it helpful. Thanks for reading. 🙏
Let's get connected! You can find me on:

• Medium: https://medium.com/@nhannguyendevjs/
• Dev: https://dev.to/nhannguyendevjs/
• Linkedin: https://www.linkedin.com/in/nhannguyendevjs/
• X (formerly Twitter): https://twitter.com/nhannguyendevjs/
• Buy Me a Coffee: https://www.buymeacoffee.com/nhannguyendevjs