A classy way to write sustainable CSS
This is a darkmode add-on for the greenCSS library.
Getting started
npm i @greencss/dark-mode
Initialisation
- 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
- 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>Contribute
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 |