Themes

This is a premium lesson.

Subscribe to get access to the entire course.

Sign up now

We’ve set up some pretty solid styling foundations for our component, so any developer (ourselves included) can override the styles to suit their needs.

Here’s why overriding styles is useful:

1. We, the authors of the library, may want to offer alternative themes. Like a dark mode, or high contrast mode, etc
2. A consumer of the library may want to make small changes to suit their tastes a little better
3. A consumer may have strict branding guidelines that they need to meet, but they really, really want to use your library
4. A consumer requires extra accessibility considerations, and so may want to override a few values. For instance, a color palette change may be required to accommodate those with a form of color blindness.

If you want, you can expose several CSS stylesheets from your component library that override the default styles. Your consumer would just need to import whichever stylesheet they like the most. They can even create their own stylesheet to override your library’s default variab