A TailwindCSS variant for class-based dark mode with CSS Modules.

Last update: Dec 1, 2022

Overview

A TailwindCSS variant for class-based dark mode with Svelte's scoped stylesheets and CSS modules.

If you've ever tried to use TailwindCSS dark mode with Svelte and received an Unused CSS selector ".dark ..." error, this plugin is for you.

Motivations

TailwindCSS uses a global .dark class for its manual dark mode, and the dark: selector simply adds .dark as a parent selector. When the .dark selector gets scoped, it breaks manual dark mode functionality.

tailwindcss-global-dark introduces a gdark variant that adds the :global modifier to the .dark class used by TailwindCSS.

Usage

Simply replace dark: with gdark:

<style lang="postcss">
  .incorrect {
    @apply dark:bg-red-400;
    /* transpiles to - .dark .incorrect {...} */
  }

  .correct {
    @apply gdark:bg-green-400;
    /* transpiles to - :global(.dark) .correct {...} */
  }
</style>

Installation

$ npm i tailwindcss-global-dark

Add the plugin to tailwind.config.cjs:

module.exports = {
  ...
  theme: { ... },
  plugins: [require('tailwindcss-global-dark')]
};

A drop in replacement for Hacker News with support for dark mode and more.

Worker News A drop in replacement for Hacker News with support for dark mode, quotes in comments, user identicons and submission favicons. What's cool

Dec 31, 2022

chakra-radix-colors provides radix-ui color palettes, automatic dark mode, and acessible colors to chakra-ui applications

chakra-radix-colors chakra-radix-colors provides radix-ui color palettes, automatic dark mode, and acessible colors to chakra-ui applications. About C

Dec 30, 2022

Stylesheet and scripts for implementing dark mode with Bootstrap 4

Bootstrap Darkmode This project provides a stylesheet and two scripts that allow you to implement a dark theme on your website. It is initially loaded

Nov 27, 2022

Variant types in Roblox TypeScript - Ported from Vanilla TypeScript

Variant (for Roblox) This is a roblox typescript variant (heh, pun) of Variant. See the Variant documentation on how to use Variant. A variant type is

Jun 3, 2022

HanAssist - Utilities to ease Chinese variant handling in user scripts and gadgets.

HanAssist 代码文档 HanAssist 是帮助中文维基百科及其他 MediaWiki 网站上的用户脚本和小工具更优雅地处理中文变体消息的实用程序。本程序的目标是取代wgULS()和wgUVS()小工具。 HanAssist.localize( { hans: '一天一苹果，医生远离我。'

Oct 29, 2022

🌀 The gamma variant of Pastebin

snip 🌀 The gamma variant of Pastebin Supabase Hackathon · Demo ✨ Team Harsh Singh • Frontend (TypeScript) • GitHub • Twitter Ibrahim Hisham • Backend

Dec 28, 2022

They stole our free learn feature, so it's now time for an open source variant

Quizletbutfree This project was generated using Nx. 🔎 Smart, Fast and Extensible Build System Quick Start & Documentation Nx Documentation 10-minute

Nov 13, 2022

This project is based on the Awesome Books app repo, refactored with ES6 and organized with modules. The purpose of this project is to learn functionality organization using JavaScript modules.

Awesome Books with ES6 and modules A basic app project built with HTML, CSS and JS ES6 to keep track of awesome books. Built With HTML/CSS and JS best

Aug 27, 2022

this is a single-page web application. we built a book website where the user can add , remove and display books. we used modules to implement these functionalities. also, we used the Date class to display the date and time.

Awsome Books In this Project, we have built A Books websites. Built With 🔨 HTML CSS javascript Git & Github Live Demo Here you can find the live Demo

Aug 3, 2022

Comments

Nice but it has a few issues

Thanks for this great idea.

I encountered issues with some classes and escaping though. For example the divide utilities were not working, I modified the code to this

module.exports = plugin(({ addVariant, e}) => {
    addVariant('sv-dark', ({modifySelectors, separator}) => {
        modifySelectors(({ className }) => {
            return `:global(.dark) .${e(`sv-dark${separator}${className}`)}`
        })
    })
})

and things seem fine so far.

bug

opened by simoneferrari 1

A TailwindCSS variant for class-based dark mode with CSS Modules.

Related tags

Overview

Motivations

Usage

Installation

You might also like...

A drop in replacement for Hacker News with support for dark mode and more.

chakra-radix-colors provides radix-ui color palettes, automatic dark mode, and acessible colors to chakra-ui applications

Stylesheet and scripts for implementing dark mode with Bootstrap 4

Variant types in Roblox TypeScript - Ported from Vanilla TypeScript

HanAssist - Utilities to ease Chinese variant handling in user scripts and gadgets.

🌀 The gamma variant of Pastebin

They stole our free learn feature, so it's now time for an open source variant

This project is based on the Awesome Books app repo, refactored with ES6 and organized with modules. The purpose of this project is to learn functionality organization using JavaScript modules.

this is a single-page web application. we built a book website where the user can add , remove and display books. we used modules to implement these functionalities. also, we used the Date class to display the date and time.

Comments

Nice but it has a few issues

Releases(v1.0.1)

v1.0.1(Jan 8, 2022)

v1.0.0(Jan 8, 2022)

Owner

Bryan Lee

🌓 Add dark mode/night mode custom elements to your website.

Automatically switch Terminal profile based on dark / light mode

Grupprojekt för kurserna 'Javascript med Ramverk' och 'Agil Utveckling'

Hemsida för personer i Sverige som kan och vill erbjuda boende till människor på flykt

Kurs-repo för kursen Webbserver och Databaser

Perfect SvelteKit dark mode in 2 lines of code. Support System preference and any other theme with no flashing

Force dark mode for all web pages.

DoMe is a ToDo App. you can add, delete and reorder elements of the todo list using drag and drop. You can also toggle between dark&light mode

Toggle Dark-Mode manually on InStream.de

ZaDark is an open source extension that helps you enable Dark Mode for Zalo on PC and Browser.