1.2.2 • Public • Published

A classy way to write sustainable CSS

This is a darkmode add-on for the greenCSS library.

Prettier Code Style Downloads p/week NPM version License

greencss logo

Getting started

npm i @greencss/dark-mode


  • Import all greenCSS and dark-mode classes into your project.
import 'greencss/css/greencss.css'.
import '@greencss/dark-mode/css/greencss-dark.css'
  • If you only want to use the dark mode colors, for example, import only the category into your project that you need.
import '@greencss/dark-mode/css/classes/color/color.css'

Currently, the following categories are available:

  • background/background.css
  • borders/borders.css
  • color/color.css
  • effects/effects.css
  • filters/filters.css
  • flex-grow/flex-grow.css
  • interactivity/interactivity.css
  • layout/layout.css
  • sizing/sizing.css
  • spacing/spacing.css
  • svg/svg.css
  • tables/tables.css
  • transforms/transforms.css
  • typography/typography.css

You will find more information about the CSS categories here.

Lightweight Version

Instead of the normal version, you can also import a lightweight minified version.

import '@greencss/dark-mode/css/minified/greencss-dark.css'

Compact imports also work with categories:

import '@greencss/dark-mode/css/minified/classes/color/color.css'

Before you code

  1. Install the greenCSS library and import it into your project. If you have not done yet
  2. Install the greenCSS darkmode add-on and import it into your project. If you have not done yet
  3. Create your personal reset file to adjuste HTML elements according to your needs. If you have not done yet
  4. Dark mode does not work out of the box. You must specify the dark mode settings in your project. Here we can not make a guide, because this is unique to each project or framework.
import 'greencss/css/greencss.css'.
import '@greencss/dark-mode/css/greencss-dark.css'
import 'path-to-your-reset.css-file'.

How it works

All greenCSS classes have the same structure. An explanation of this principle can be given with the help of the examples below.

<p class="text-blue dark:text-blue-10">a blue text and a blue-10 text for the dark mode state</p>

If the text colour for an element is to be changed on small screens only (0px - 480px), the class is inserted with a prefix called "sm:".

<p class="text-blue dark:text-blue-10 sm:text-purple dark:sm:text-purple-10">
  a purple text for small screens with a dark mode color

In addition to the responsive classes, all dark mode classes also have active, focus and hover classes, which can be combined as desired. Just add the dark: prefix in front of every individual class.

<p class="text-blue hover:text-orange dark:text-blue-10 dark:hover:text-orange-10 dark:hover:sm:text-red">
  Different text colours and different states for all screens


You want to collaborate? Have a look at the documentation in the information folder.

For commits, use semantig writing:

Commit Usage
fix(pencil): stop graphite breaking when too much pressure applied Fix Release
feat(pencil): add 'graphiteWidth' option Feature Release
perf(pencil): remove graphiteWidth option Breaking Release

Useful links

Package Sidebar


npm i @greencss/dark-mode

Weekly Downloads






Unpacked Size

89 MB

Total Files


Last publish


  • greencss