Theming
54 bites tagged Theming — interview questions with model answers, and 60-second explainers.
Sass variable versus CSS custom property
Sass $vars resolve at build time and vanish from output; CSS --vars live in the browser, cascade, inherit, and update at runtime. Use Sass for static config, custom properties for theming. compile-time versus runtime values.
How custom properties enable dynamic theming
Custom properties cascade and resolve live, so redefining them on a scope or data attribute reskins everything via var(). runtime theming with CSS variables.
Categories of Design Tokens
Design tokens fall into tiers: primitive tokens hold raw values, semantic tokens assign meaning by aliasing primitives, and component tokens scope decisions to specific UI parts.
Design Token Naming Conventions
Design token names encode meaning through a consistent, layered structure so values stay portable across themes and platforms. A clear convention like category-type-item-state turns scattered constants into a self-documenting, predictable system that…
Structuring color tokens for a new app
Primitive palette, semantic role tokens, optional component tokens, theming benefit. tiered color-token architecture and why layering matters. a flat list of named colors with no semantic layer, blocking theming and dark mode.
Design tokens for multi-brand button theming
Tokens as named design decisions, primitive-versus-semantic layers, per-brand themes mapping semantic to primitive. token fundamentals and tiered theming. hardcoding hex values per brand instead of a shared semantic token.
Shadow DOM vs build-time scoping for third-party widgets
Shadow DOM gives true isolation but blocks global theming and complicates SSR; build-time scoping keeps theming and SSR simple but needs tooling. Your grasp of style encapsulation tradeoffs in widgets.
How would you architect Figma components and styles for light and dark themes?
This tests token-based system thinking and Figma variable scoping. A strong answer maps primitives to semantic tokens, binds components to semantic variables, and switches modes at the page level.
How do Figma Variables and component properties enable theme switching?
Tests binding semantic variable collections to component layers for theme switching. Outline: create Light/Dark modes, apply variables to fills, spacing; override modes on instances. Red flag: separate masters per theme or using colors in component properties.
How would you implement a light and dark mode theme switcher?
Tests scalable theming via Figma variable modes, not manual duplication. Create a color collection with Light and Dark modes, bind variables to component fills, then switch modes to toggle themes.
How would you structure Figma colors for light and dark themes?
Fluency with token layers and Figma's mode-aware raw values. Use aliased color variables for semantics, switch themes via variable modes, and apply variables to styles not relying on styles for modes. Suggesting styles handle theming instead of variables.
How would you structure a multi-theme color system in Figma and CSS?
Primitives and Semantic collections with theme modes; pipeline to CSS variables; components use semantic tokens only. Token architecture bridging Figma modes to code.
Figma Variable Modes for Multi-Context Theming
Variable modes let a single token hold different values for different contexts, like light and dark themes. Apply a mode to a frame and every token inside swaps instantly. The footgun is treating modes as component states, which creates a combinatorial mess.
CSS Custom Properties vs JS Theme Object in React
Tests render overhead vs CSS cascade. Strong answers: CSS variables update styles without re-renders, while JS theme objects in Context force subtree re-renders. Mention scoping, SSR FOUC, and setProperty interop.
Implement a light/dark theming system with CSS-in-JS and React Context
This tests React Context architecture with CSS-in-JS theme injection. Strong answers include: a Theme Context with mode and toggle; ThemeProvider at the app root; consumption via useTheme or props.theme.
Describe a robust architecture for implementing theming using design tokens
Three tiers, CSS custom properties for live switching, and layered overrides. Tiered token separation and runtime strategy for multi-theme systems. Hardcoded colors in components or CSS rebuilds on theme change.
Structural vs. Thematic Tokens: Job vs. Value
Structural tokens describe the role, like text-primary; thematic tokens describe the value, like blue-500. Split them so retheming does not require hunting hexes. The footgun is using only thematic tokens, which hardcodes intent and breaks dark mode.
Scoped Theming: Local Overrides Without Global Leaks
Scoped theming is sunglasses for a UI subtree: it swaps tokens for one section without touching the global page. Use it for a dark-mode dashboard or white-label widget inside a light app, but avoid deep nesting or you will fight invisible inheritance chains.
Token Aliasing: Theme by Role, Not Value
Token aliasing names a color by its job, not its hex, so you swap the underlying value per theme. One library supports light mode, dark mode, or multiple brands without code changes. The footgun is deep alias chains that hide which primitive value renders.
Tiered Token Architecture in CSS
Tiered tokens layer CSS variables as raw values, semantic aliases, and component bindings. Use them when one rebrand must update hundreds of elements. The footgun is skipping aliases and binding hex codes directly to components, locking you into manual…
Semantic vs. Primitive Design Tokens
Semantic tokens give meaning to raw values so components bind to intent, not hex codes. They let you rebrand or theme by changing aliases, not component code.
Android Style vs. Theme and Attribute Resolution
Tests your grasp of Android's resource scope and resolution timing. A Style targets a single View, while a Theme applies to a whole Context. `@color/` is a direct, compile-time link; `?attr/` is an indirect pointer resolved against the Theme at runtime.
Styles vs. Themes and Attribute Resolution in Android
This tests your grasp of Android's resource indirection. A Style is a set of attributes for one View type. A Theme is a collection of named attributes for an app or Activity. `?attr` is resolved at runtime against the Theme, while `@color` is a direct.
React Theming: Context API and CSS-in-JS
Use React's Context API to inject a theme object (colors, spacing) into your component tree for your CSS-in-JS styles. It's ideal for light/dark modes or brand skins. The footgun: this pattern fails in React Server Components, which lack context.
Get Theming bites daily.
Five a day, five minutes, offline. With quizzes so it sticks.
Open testing — you’ll join as an early tester.