Theming
54 bites tagged Theming — interview questions with model answers, and 60-second explainers.
Manage light and dark themes with Variables and Modes
Separate primitive and semantic variables, define light and dark modes in one collection, and bind UI fills to semantic tokens. token-driven theming in Figma. duplicating screens per theme or hardcoding hex values.
Platform-specific typography in a global theme
Define one theme with Platform.select for fontFamily, expose semantic text styles, and reuse them everywhere rather than per-screen overrides. centralizing platform-aware styling.
Architecting density themes with tokens
Components reference semantic spacing tokens; a density theme repoints those tokens via CSS variables on a wrapper, so one stylesheet adapts. Density via token layering.
Breaking token changes across multiple themes
A change is safe if every theme still satisfies the token's contract and contrast; dangerous if it breaks one theme, like a value that fails contrast in high-contrast mode. Token change safety under multi-theme.
Governance for a multi-brand design system
Brand-agnostic core consuming semantic tokens, per-brand token themes, contribution rules blocking brand conditionals in core. Multi-brand architecture and governance.
Explain token aliasing in design systems
Primitives hold raw values, semantic tokens reference them by intent, components consume only semantic ones. Layered token architecture intuition. Hardcoding hex values in components or skipping the semantic layer entirely.
CSS custom properties versus Sass for theming
Custom properties are live and cascade for dynamic switching; Sass variables compile away. runtime versus build-time variables. claiming Sass variables can change theme at runtime without recompiling.
Architecting a themeable React component library
A ThemeProvider supplying tokens through Context, components reading them, and CSS variables for performance. theming React components via Context. prop-drilling the theme or putting fast-changing state in Context.
Structuring tokens for brand and sub-brand inheritance
Tiered tokens (primitive, semantic, component), sub-brands override only semantic aliases, and references keep inheritance live. layered token architecture. copying the full token set per brand and diverging.
Implementing light and dark mode on the web
CSS custom properties for color tokens, a data-theme attribute toggle, and prefers-color-scheme as default. practical theming with CSS. hardcoding two full stylesheets or only relying on JS to recolor.
Architecting global and local theming with context
A top-level provider supplies global tokens, nested providers merge local overrides, components read the nearest theme, often backed by CSS variables. layered theming via context. passing theme through props at every level.
Multi-theme infrastructure for a component library
Style components against semantic tokens exposed as CSS custom properties, define per-theme token values, and switch at runtime via a data-theme attribute or class. theming architecture.
Core tokens versus alias semantic tokens
Core tokens are raw values like blue-500; alias tokens reference cores with intent like color-action; semantic aliasing decouples meaning from raw value. token-tier architecture.
Brand color as a token and CSS custom property
Define a typed color token in JSON, generate a custom property like --color-brand-primary, then reference it with var(). practical token-to-CSS wiring.
Cross-platform themeable token system
Tier tokens with semantic theme sets that remap primitives per mode, transform to each platform's theme mechanism, and deliver versioned packages. combining theming with cross-platform delivery.
Architecting multi-brand, dark-mode theming
Tier tokens into primitive, semantic, and component layers; components consume semantic tokens; themes swap by remapping semantic-to-primitive on a scope like data-theme. scalable theming architecture.
What design tokens are and why they matter
Tokens are named, platform-agnostic design decisions stored centrally, enabling consistency, theming, and one-place updates. grasp of design tokens as a single source of truth.
Declaring and scoping CSS custom properties
Declare with --name, read with var(), :root makes it global while a class scopes it locally. understanding of custom property syntax and the cascade. thinking they behave like compile-time Sass variables.
Customize a Button without !important
Expose CSS custom properties as a styling API, accept className or style overrides, keep internal selectors low specificity so overrides win cleanly. designed-in customization. reaching for !important.
Token architecture for white-label multi-brand
A shared semantic schema, per-brand primitive and mapping overrides, a build step emitting one bundle per brand, components consume stable semantic names. multi-brand token strategy. forking the system per brand.
Light and dark themes with design tokens
A shared primitives file plus per-theme semantic files, transformed into custom properties scoped by selector, components read the semantics. token file structure for two themes. duplicated stylesheets or hardcoding.
Architect themes on a token foundation
Separate primitive tokens from semantic alias tokens that themes redefine, emit semantics as custom properties per theme scope, components use only semantics. layered token architecture. components reading primitives.
What are design tokens?
Platform-agnostic name-value pairs for design values, transformed into CSS variables or platform code, consumed by components by name. tokens as named design decisions. equating a token with a raw hex used inline.
Build a scalable Sass theming system
Store themes as maps, emit values as CSS custom properties so runtime switching needs no recompile, generate per-theme scopes via mixins. scalable theme architecture in Sass. duplicating whole stylesheets per theme.
Get Theming bites daily.
Five a day, five minutes, offline. With quizzes so it sticks.
Open testing — you’ll join as an early tester.