Negotiate Pushing Milestone
    Have ideas to improve npm?Join in the discussion! »

    tw-themes

    0.1.1 • Public • Published

    tw-themes

    powerful tailwind color themes (dynamically selectable at run-time)

    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!

    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.

    Install

      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

    See It Live

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

    Revision History

    Install

    npm i tw-themes

    DownloadsWeekly Downloads

    2

    Version

    0.1.1

    License

    MIT

    Unpacked Size

    59.8 kB

    Total Files

    13

    Last publish

    Collaborators

    • avatar