A classy way to write sustainable CSS
This is a darkmode add-on for the greenCSS library.
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:
You will find more information about the CSS categories here.
Instead of the normal version, you can also import a lightweight minified version.
Compact imports also work with categories:
Before you code
- Install the greenCSS library and import it into your project. If you have not done yet
- Install the greenCSS darkmode add-on and import it into your project. If you have not done yet
- Create your personal reset file to adjuste HTML elements according to your needs. If you have not done yet
- 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 </p>
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 </p>
You want to collaborate? Have a look at the documentation in the information folder.
For commits, use semantig writing:
|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|