Dark Mode it's not new to Apple's design system, and it has been something we've been wanting to add since the first version of Puppertino. And this is now a strong part of Puppertino, to use Dark Mode, you will need to get the CSS of Dark Mode or download the full CSS
Dark mode it's pretty straight forward to use. And it comes in two flavors, automatic and manual toggling. The automatic toggling uses the media-prefers-scheme to get the user's desired theme and apply automatically. Of course, this doesn't work in some (mosts) of Linux Operating systems, and that's what the manual version is aimed for. It's also really useful if you want your users to select their own theme.
This is how it looks on practice (All current components support dark mode):
You can experience the Dark Mode in all of the Puppertino's website by clicking This button
Usage:
<body class="p-auto-dark-mode"></body> <!-- Automatic -->
<body class="p-dark-theme"></body> <!-- Manual -->
Manual will require you to create your own JS to toggle the class according to your needs (Examples will be added in 1.02). For the moment, if you do not wish to do any JS, we recommend you to do the automatic one. Is simple to use and it only requires one class.
How does this all work? Simple, Puppertino is based on CSS variables, and when you toggle this class you are basically overriding all the colors in CSS variables for the dark themed ones, making it really easy to change all the colors, and also create your own themes if you need to do so. Keep in mind that some variables have been reused to cut down sizes.