Theme Switcher with Ant Design

This example should demonstrate to you how a theme switcher can be implemented for the Ant Design component library.

You can see it in action on here.

Please also take a look at my dev.to Post. It describes the approach in more detail.

Implementation Variants

I implemented/extended theme switchin in various ways. Scoping via Less is the preferred way because it doesn't use another library for scoping.

Scoping via Less

Branch: less (default)

Scoping via less works by nesting all the ant design style imports into a .light/.dark-class. At the moment I didn't implement lazy loading or storing the current theme. But it's basically them same as with the PostCSS solution.

Scoping via PostCSS PrefixCSS

Branch: postcss

This is an outdated solution that used the PrefixCSS functionality of PostCSS to prefix every ant design styling rule with either .light or .dark.

Lazy Loading

Commit: Only request a single theme initially

The theme can be lazy loaded by using the import-function of webpack.

Storing the selected theme

Commit: Reuse the same theme from the last session

This change lets you reuse the theme that was set in the previous session by storing it in the local storage.