tw-themes

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!

Want to see tw-themes in action? ... take a peek at the See It Live section.

NPM Version Badge

Introduction

tw-themes is a tailwindcss utility that facilitates dynamic color themes that are selectable at run-time.

Using tw-themes ...

  • 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 primary and secondary), 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 dark variant 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 promotes a clean and simple approach to dynamic color themes that yields powerful results.

At a Glance

results matching ""

    No results matching ""