tailwindcss-darkmode-variant

v1.0.0

Published

2 years ago

A Tailwind CSS plugin that adds variants for dark mode that is more customizable

Downloads

0High
0Medium
0Low

intellective

tailwind tailwindcss tailwindcss-plugin dark-theme dark-mode postcss css javascript

Tailwind CSS DarkMode Variant

Installation

npm install tailwindcss-darkmode-variant --save-dev

Add the plugin to the plugins array in your Tailwind configuration.

plugins: [require("tailwindcss-darkmode-variant")()];

Usage

Styles generated by this plugin are only used if the selector is applied to the <html> element. How you do that is up to you. prefers-dark.js is provided as an option, which is a simple script that enables dark mode based on the user's system theme.

Available Variants

Variants for dark mode are based on Tailwind's own variants...

darkmode
darkmode-hover
darkmode-focus
darkmode-active
darkmode-group-hover
darkmode-focus-within
darkmode-even
darkmode-odd

... and are used in the same way.

<div class="bg-white darkmode:bg-black">
  <p class="text-black darkmode:text-white">
    My eyes are grateful.

    <a
      ...
      class="text-blue-300 hover:text-blue-400 darkmode:text-blue-700 darkmode-hover:text-blue-600"
    >
      Learn more
    </a>
  </p>
</div>

Enabling Variants

As with existing variants such as hover and focus, variants for dark mode must be enabled in your Tailwind configuration for any utilities that need them.

variants: {
  backgroundColor: ['darkmode', 'darkmode-hover', 'darkmode-group-hover', 'darkmode-even', 'darkmode-odd'],
  borderColor: ['darkmode', 'darkmode-focus', 'darkmode-focus-within'],
  textColor: ['darkmode', 'darkmode-hover', 'darkmode-active']
}

Changing the Selector

By default, .mode-dark is used as the selector for dark mode. You can change this by adding the darkSelector key to the theme section in your Tailwind configuration.

theme: {
  darkSelector: ".mode-dark";
  darkIdentifier: "darkmode";
}

Don't forget to also change the selector in prefers-dark.js if you are using it.

PurgeCSS

If you are using PurgeCSS, you should either add the selector to the whitelist array...

whitelist: ["mode-dark"];

... or add prefers-dark.js to the content array.

content: [
  "**/*.js",
  "./node_modules/tailwindcss-darkmode-variant/prefers-dark.js",
  "./or/your/own/prefers-dark.js"
];

Otherwise, PurgeCSS will assume that any classes related to dark mode should be removed, as the selector is only applied when the page is loaded. If you have a custom selector then you will need to make a copy of the prefers-dark.js file and update it with your darkSelector and then include in the content array

This repo is forked from the original TailwindCSS Dark Mode repo and modified to provide additional options

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme