Developing color themes that are dynamically selectable at run-time is a tedious and arduous process. Ideally Dark Mode would also be included in our requirements list! While tailwind provides a powerful foundation to work from, it has no real support for the dynamics that are needed for this task.
If you are a tailwind user that needs dynamic color themes, this utility may be just what you are looking for!
-
You define and use Context Colors. These are abstract colors that have meaning in the context of your application. You define them however you wish (such as
primaryandsecondary), and reference them throughout your markup with tailwind's standard color syntax (ex:text-primary,bg-secondary-400, etc.). -
You then map Real Colors to your Context Colors through one or more Themes, which can be selected at run-time to change your application colors on the fly!
Your colors can be defined either through the tailwind's standard color pallet, or your own custom colors (or a combination of both).
It's common to use Color Shading to accentuate various aspects of your UI. In tw-themes you can define your own shade nomenclature (e.g.
primaryLight,primaryDark), or piggy back off of tailwind's numeric shade scale (e.g.primary-50,primary-100,primary-200, etc.). -
Speaking of color shades, tw-themes even allows you to invert your color shades at run-time (light-to-dark, and dark-to-light), in effect doubling the number of color themes available, and potentially supporting an automatic dark mode theme (depending on how your colors are implemented).
Of course, you can explicitly define your own Dark Mode with minimal effort (if Shade Inversion doesn't produce the desired effect) ... it's merely a new theme! Unlike tailwind's new Dark Mode feature, using tw-themes to define your dark themes requires NO CHANGES to your markup (the tailwind solution requires you to tediously add the
darkvariant throughout your markup). -
Because tailwind needs to know about your Context Colors, tw-themes provides a utility that auto-generates the required color definitions ... referenced in your
tailwind.config.js(part of the build process). -
As an internal tidbit, the dynamics of run-time color mapping is accomplished through the use of CSS Variables (see How do it know?) ... inquiring minds want to know!
tw-themes is a tailwindcss utility that facilitates dynamic color themes that are selectable at run-time.
Using tw-themes ...
tw-themes promotes a clean and simple approach to dynamic color themes that yields powerful results.
tw-themes is a zero-dependent library, other than the tailwindcss peerDependency (v2+), which most likely you have already installed and configured.
To install tw-themes:
npm install --save tw-themes- Getting Started
- Concepts
- a full API Reference
- and more!
The best way to get started is to review the Comprehensive Documentation, found at https://tw-themes.js.org/. This includes sections for:
Want to see tw-themes in action? ... take a peek at the See It Live section (of the documentation).
Please refer to the Revision History (found in the documentation).