Get color value programmatically when it's a reference theme

Programming

Theming

Color Reference

Code

Developer Tips

Get color value programmatically when it's a reference theme

Master System Design with Codemia

Enhance your system design skills with over 120 practice problems, detailed solutions, and hands-on exercises.

Start Practicing Learn More

Introduction

In many design systems, a color is not stored as a final hex value at the point where you use it. Instead, it is stored as a theme reference such as primary, surface, or --brand-accent, and your code has to resolve that reference to the concrete color value that is active in the current theme.

Theme References Versus Raw Colors

A theme reference is a level of indirection. Instead of saying "use #2563eb here," the component says "use the theme's primary color here."

That gives you:

centralized control over colors
dark-mode and light-mode switching
easier brand changes
less duplication in component code

The tradeoff is that programmatic color access now requires resolution, not a hardcoded lookup.

Example With CSS Custom Properties

On the web, a very common theme-reference mechanism is CSS custom properties.

html

1<!DOCTYPE html>
2<html>
3  <head>
4    <style>
5      :root {
6        --primary-color: #2563eb;
7        --surface-color: #f8fafc;
8      }
9
10      .button {
11        background-color: var(--primary-color);
12        color: white;
13      }
14    </style>
15  </head>
16  <body>
17    <button class="button" id="demo">Click me</button>
18    <script>
19      const rootStyles = getComputedStyle(document.documentElement);
20      const primary = rootStyles.getPropertyValue("--primary-color").trim();
21      console.log(primary);
22    </script>
23  </body>
24</html>

The important point is that you do not read the string var(--primary-color) from the component. You read the computed style or the variable value from the active theme context.

Resolving a Color Applied to an Element

Sometimes you do not want the theme token itself. You want the actual computed color applied to a specific element after all inheritance and overrides.

html

1<div id="panel" style="color: var(--primary-color)">Hello</div>
2
3<script>
4  const panel = document.getElementById("panel");
5  const appliedColor = getComputedStyle(panel).color;
6  console.log(appliedColor);
7</script>

This returns the final computed value, often in rgb(...) form.

That distinction matters:

read the variable if you want the theme token's current value
read the computed style if you want the actual resolved style on an element

Nested Theme Objects in JavaScript

Some applications keep theme values in JavaScript objects instead of CSS variables.

javascript

1const theme = {
2  colors: {
3    primary: "#2563eb",
4    danger: "#dc2626",
5  },
6  button: {
7    background: "primary",
8  },
9};
10
11const reference = theme.button.background;
12const colorValue = theme.colors[reference];
13
14console.log(colorValue);

This is the same idea in a different container: resolve the reference through the theme map before trying to use the final color.

Handling Fallbacks Safely

Theme references sometimes point to missing keys because of typos, partial themes, or version drift. Add a fallback path so your UI does not silently break.

javascript

1function resolveThemeColor(theme, key, fallback = "#000000") {
2  return theme.colors[key] ?? fallback;
3}
4
5console.log(resolveThemeColor(theme, "primary"));
6console.log(resolveThemeColor(theme, "missing"));

This is especially important in component libraries where themes may come from application code you do not control directly.

Common Pitfalls

The most common mistake is treating the reference name as if it were already the final color. A token like primary is only meaningful if you resolve it through the active theme.

Another issue is reading inline style strings instead of computed values. If the color comes from inheritance, CSS variables, or a higher-level theme provider, raw attributes may not show the real applied color.

A third pitfall is forgetting that the resolved value may change at runtime when the user switches theme mode. If your code caches a color too aggressively, it can go stale.

Finally, do not assume every resolved color will be in hex form. Browser APIs often return computed colors as rgb(...), which is normal and still represents the same value.

Summary

Theme references are indirections, not final color values.
Resolve them through the active theme source, such as CSS variables or a theme object.
Use computed styles when you need the final color actually applied to an element.
Add fallbacks for missing or invalid theme keys.
Expect the resolved format to vary, especially in browser APIs.