Theme Object: Your Design System's Single Source of Truth
A theme object is a central dictionary for your UI's design tokens, like colors and font sizes. It ensures consistency across components by providing a single, shared source for styling values.
Why it exists
To prevent style inconsistencies in a large codebase. Without a central theme, developers might hardcode different hex codes for the same brand color or use slightly different pixel values for spacing, leading to a messy, hard-to-maintain UI. A theme object provides a single source of truth for all design values.
The mental model
Think of a theme object as a contract for your visual design. Instead of a developer having to remember that the primary brand color is #07c, they just reference theme.colors.primary. This decouples the design decision (the specific blue) from its implementation, making the system more robust and easier to update.
How it works
The core of a theme object is the concept of "scales" for CSS properties with many possible values. For ordinal values like font sizes or spacing, you use an array. For named values like colors, you use an object. You can also create aliases for array indices to improve code readability, for example, theme.fontSizes.body is much clearer than theme.fontSizes[2].
When to use it
Use a theme object when building a design system, a component library, or any application where visual consistency is critical. It's especially powerful for apps that need to support multiple themes (like light and dark mode) or may be rebranded in the future, as a global style change can be made by editing a single file.
When not to use it
Avoid creating scales for CSS properties that have a small, finite number of valid keyword values. For example, the text-align property only accepts values like left, center, and right. Creating a theme scale for this (theme.textAlign: ['left', 'center']) is redundant and adds unnecessary abstraction. Just use the standard CSS values directly.
One canonical example
A theme object might define scales for font sizes and colors. The fontSizes scale is an array for ordered values, while the colors scale is an object for named values.
const theme = {fontSizes: [ 12, 14, 16, 20, 24, 32 ], colors: {
blue: '#07c',
green: '#0fa',blues: [ '#004170', '#006fbe', '#2d8fd5' ] } };
To make the font size array easier to use, you can add named aliases: theme.fontSizes.body = theme.fontSizes[2]; // 16 theme.fontSizes.display = theme.fontSizes[5]; // 32
Interview question
What is the primary advantage of using a theme object in UI development?
- a.It allows developers to hardcode unique styles for individual components.
- b.It automatically converts all CSS properties into JavaScript objects.
- c.It centralizes design token values, ensuring visual consistency and simplifying global updates.Correct
- d.It provides scales for all CSS properties, including those with a small, finite number of keyword values.
Why? this is the answer
The card states that a theme object is a 'single source of truth' that 'ensures consistency across components' and makes the system 'easier to update' for global style changes. Option D is incorrect because the card explicitly advises against creating scales for CSS properties with a small, finite number of keyword values, as it's redundant.
Just read this? Test yourself on what you have been reading.
Read the original → github.com
You just looked this up. Could you explain it out loud?
That is the part interviews actually test. Tezvyn takes questions like this one and gives you what the interviewer is really checking, the answer that lands, and the mistake that ends the conversation, in the four minutes before your next meeting.
The iPhone app is on the way
We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.
Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.
We are hiring for this. Open roles that interview on design systems — each one lists the topics its interview covers.
See open roles