Adding Light/Dark Mode to a Material-UI App Without the Rerender Trap
Dark mode in Material-UI is twenty lines of code — until the re-render flicker shows up. Here's the memoized ThemeProvider pattern, plus the pitfalls that break it.
Loading…
ReadMeFeed / Community knowledge
#theming
Real questions. Useful conversations. Find the people who know your stack.
reactChoosing Between Less Variables, CSS Custom Properties, and a Hybrid Token Strategy for Theming
A decision guide comparing Less compile-time variables, native CSS custom properties, and a hybrid token approach for theming. Includes a comparison table, trade-off analysis, and a concrete Less 4-compatible implementation with validation steps.
lessCSS Custom Properties: A Practical Engineering Decision for Design Systems
Define design tokens once on :root, reference them with var(), and swap themes by changing a single data-theme attribute—no rebuild needed.
css3Theme Bootstrap 5 with CSS Variables—No Sass Needed
Want to change Bootstrap 5’s colors and spacing without a build step? Use its CSS custom properties. Override the root variables for a site‑wide theme or target specific components for local tweaks. This guide walks through the process, shows a live example, and explains the limits of the approach.
bootstrapTheming Ant Design v5 with ConfigProvider Tokens: An Architecture Note
An architecture note on Ant Design v5 token theming: one root ConfigProvider, algorithm-based dark mode, validation for tenant-supplied tokens, and failure modes.
antdesignScoped Dark Mode in Ant Design v5: Nested ConfigProvider Without a Second Build
Ant Design v5 turned scoped theming from a Less-compile problem into a runtime decision. How nested ConfigProvider works, what it costs, and how to verify it.
Building a Runtime‑Switchable Custom Theme in Angular Material v14+
Learn how to create a custom Angular Material theme that can switch between light and dark at runtime using CSS variables, with a practical example and trade‑off analysis.
angularmaterialArchitecture Note: Building a Custom Angular Material Theme
Define a palette once, include mat-core only, apply via angular-material-theme, and verify CSS output and contrast for accessible theming.
Implementing a Dark‑Mode Toggle in MUI v5 with ThemeProvider, createTheme, and useMediaQuery
Learn how to add a user‑controlled dark‑mode switch to a MUI v5 app using ThemeProvider, createTheme, and useMediaQuery. The guide covers the core code, common pitfalls, and how to verify the theme changes.