Skip to content
This repository has been archived by the owner on Aug 23, 2021. It is now read-only.

danestves/tailwindcss-darkmode

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

38 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Tailwindcss DarkMode

Tailwind CSS plugin that adds variants for DarkMode.

Downloads License Travis Build

Installation

# npm
npm install @danestves/tailwindcss-darkmode --save-dev

# yarn
yarn add --dev @danestves/tailwindcss-darkmode

Add the plugin to the plugins array in your tailwind.config.js file.

module.exports = {
  // ...

  plugins: [
    // ...
    require('@danestves/tailwindcss-darkmode')()
  ]
};

Actually the function receive two parameters:

  • prefix: default to dark.
  • activatorClass: default to dark-mode.

So if you want to rename the activatorClass you can make it as simple as:

module.exports = {
  // ...

  plugins: [
    // ...
    require('@danestves/tailwindcss-darkmode')('dark', 'my-custom-activator-class')
  ]
};

Variants generated

Note: These variants are activated when either the html or body tag has the class dark-mode. But you can change it.

  • dark
  • dark:hover
  • dark:focus
  • dark:active
  • dark:disabled
  • dark:odd
  • dark:even
  • dark:group-hover
  • dark:focus-within
<div class="bg-gray-100 dark:bg-gray-800 border-t-4 border-green-500">
  <nav class="flex flex-wrap justify-end items-center p-4">
    <a class="text-gray-700 hover:bg-gray-300 dark:hover:bg-transparent dark:focus:text-green-500" href="#">Text</a>
  </nav>
</div>

🚨 Dark variants must be enabled on each utility in your tailwind.config.js file. 🚨

variants: {
    backgroundColor: [
      "responsive",
      "hover",
      "focus",
      "dark",
      "dark:hover",
      "dark:focus"
    ],
    borderColor: [
      "responsive",
      "hover",
      "focus",
      "dark",
      "dark:hover",
      "dark:focus"
    ],
    textColor: [
      "responsive",
      "hover",
      "focus",
      "group-hover",
      "dark",
      "dark:hover",
      "dark:focus",
      "dark:group-hover",
      "focus-within",
      "dark:focus-within",
      "dark:odd",
      "dark:even",
      "dark:active",
      "dark:disabled"
    ],
    borderStyle: ["responsive", "dark"]
  }

You can check the full list of default variants in the Tailwind default config file.

Customize class name prefix for variants

dark is used as default prefix for the variants that are generated. It´s possible to change dark for whatever you want, just pass any string as a param. For example, with prefers-dark:

module.exports = {
  // ...

  plugins: [
    // ...
    require('tailwindcss-prefers-dark-mode')('prefers-dark')
  ]
};

And variants must be named with the new prefix:

variants: {
  textColor: [
    'responsive',
    'hover',
    'focus',
    'group-hover',
    'prefers-dark',
    'prefers-dark:hover',
    'prefers-dark:focus',
    'prefers-dark:group-hover',
    'focus-within',
    'prefers-dark:focus-within'
  ];
}

About

Tailwind CSS plugin that adds variants for DarkMode

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 100.0%