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

About Dark Mode.

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):

Dark theme

Primary Second

Home

Default theme

Primary Second

Home

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 -->

How to use manual.

Getting Started

1. Initializing PuppertinoThemeMan

To get started, initialize PuppertinoThemeMan by calling the init() function. This setup allows you to customize theme behavior, including auto-detection based on system preferences.


  puppertinoThemeMan.init({
    autoDetect: true, // Automatically detect system theme
    darkThemeClass: 'p-dark-mode' // Your custom dark theme class (optional)
  });

Options:

autoDetect: Enable automatic detection of the system's preferred color scheme. If set to true, PuppertinoThemeMan will adjust based on the system's light or dark mode.
darkThemeClass: Define the class name for the dark mode (defaults to p-dark-mode). Customize this if you’re using a different class for your dark theme styles.

2. Toggling Themes

Easily switch between light and dark themes using the toggle() function. This function will apply the correct theme class and store the user’s selection for future visits.


  puppertinoThemeMan.toggle();

When this function is called, PuppertinoThemeMan will:

Add or remove the dark theme class from the document’s body.
Save the user’s selection in localStorage to remember the preference across sessions.

3. System Theme Auto-Detection

If enabled in the init() options, PuppertinoThemeMan can automatically switch to light or dark mode based on the user’s system preferences. This ensures a seamless experience aligned with the user’s device settings.

The detection is powered by the prefers-color-scheme media query.
PuppertinoThemeMan will listen for changes to this setting and adjust the theme accordingly.

4. Consistency Across Tabs

PuppertinoThemeMan synchronizes theme changes across multiple tabs. If a user changes their theme in one tab, the new theme will automatically apply to all open tabs in the same browser.

No extra configuration is needed—this behavior is built into PuppertinoThemeMan, ensuring a unified user experience.

5. Checking the Current Theme

You can check whether the dark theme is active by using the isDarkThemeActive() function. This function returns true if the dark theme is currently applied.


  const isDarkMode = puppertinoThemeMan.isDarkThemeActive();

This allows you to tailor additional features based on the active theme.

Under the hood.

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.