aeeble

Darkmode.js is a lightweight JavaScript library that allows you to add a dark mode or night mode to your website easily. It uses the CSS mix-blend-mode property to bring dark mode to any website. With Darkmode.js, you can improve user experience by providing an alternative theme that is easier on the eyes, especially in low-light environments.

Key Features

• Automatically shows a dark mode widget
• Saves user preferences using local storage
• Automatically enables dark mode if the user's OS prefers a dark theme (if the browser supports prefers-color-scheme)
• Can be used programmatically without the widget

How It Works

Darkmode.js is simple to implement. You can either use a CDN link to include it in your HTML or install it via npm. The library is built in VanillaJS, making it lightweight and easy to integrate into any web project.

Customization and Usage

You can customize the appearance and behavior of Darkmode.js through various options, such as changing the position, color, and label of the dark mode toggle button. It also provides methods to toggle dark mode programmatically and check if dark mode is activated.

Browser Compatibility

Darkmode.js uses CSS properties that may not be compatible with all browsers. It is hidden in Internet Explorer and Edge due to compatibility issues. Check the compatibility of mix-blend-mode and prefers-color-scheme for more details.

Examples and Integrations

There are examples and integrations available for popular platforms like WordPress and Drupal, making it easier to add dark mode to your website regardless of the CMS you use.