darkyjs

Darky.js documentation

Darky.js is a light, easy-to-use JavaScript library that allows developers to quickly and efficiently implement dark mode on their websites. This library dynamically changes the CSS styles of your website to provide a night mode effect that reduces the light emitted by the screen.

• Download
• Documentation
• Changelog

How to use Darky

Include the Darky.js library in your HTML file and Instantiate a new Darky object to add a darkmode toggle to your webpage:

The easy way (JSDelivr CDN)

<script src="https://cdn.jsdelivr.net/npm/darkyjs@1.2.0/1.2.0/darky.min.js"></script>
<script>
    const darkmode = new Darky();
    darkmode.enable();
</script>

Or download Darky.js and host it yourself.

Using NPM

npm install darkyjs

Options

Here are the available options

• bottom: (String) CSS value for the widget position from the bottom. Defaults to "32px".
• right: (String) CSS value for the widget position from the right. Defaults to "32px".
• left: (String) CSS value for the widget position from the left. Defaults to "unset".
• time: (String) CSS value for transition time. Defaults to "300ms".
• backgroundColor: (String) CSS value for the background color in dark mode. Defaults to "#fff".
• buttonColorDark: (String) CSS value for the dark mode button color. Defaults to "#000".
• buttonColorLight: (String) CSS value for the light mode button color. Defaults to "#fff".
• label.dark: (String) HTML content for the dark mode button label. Defaults to a SVG moon icon.
• label.light: (String) HTML content for the light mode button label. Defaults to a SVG sun icon.
• saveInCookies: (Boolean) if set to true, the user's preference will be saved in a cookie. Defaults to false.
• autoMatchOsTheme: (Boolean) if set to true, the color theme will automatically match the user's OS preference. Defaults to true.
• onChnge: (Function) Provides a callback whenever darkmode is toggled on or off. Defaults to false.

Example

const options = {
    bottom: "32px",
    right: "32px",
    left: "unset",
    time: "300ms",
    backgroundColor: "#fff",
    buttonColorDark: "#000",
    buttonColorLight: "#fff",
    buttonShadow: "0 0.2rem 0.5rem 0.1rem rgba(0,0,0,0.4)",
    zIndex: 9998,
    label: {
        dark: '<svg xmlns="http://www.w3.org/2000/svg" class="icon light" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M14.828 14.828a4 4 0 1 0 -5.656 -5.656a4 4 0 0 0 5.656 5.656z"></path><path d="M6.343 17.657l-1.414 1.414"></path><path d="M6.343 6.343l-1.414 -1.414"></path><path d="M17.657 6.343l1.414 -1.414"></path><path d="M17.657 17.657l1.414 1.414"></path><path d="M4 12h-2"></path><path d="M12 4v-2"></path><path d="M20 12h2"></path><path d="M12 20v2"></path></svg>',
        light: '<svg xmlns="http://www.w3.org/2000/svg" class="icon dark" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z"></path></svg>',
    },
    saveInCookies: false,
    autoMatchOsTheme: true,
    onChange: false
}
const darkmode = new Darky(options);
darkmode.enable();

Methods

Use the following methods to interact with the Darky library:

• darky.enable();: This method enables the Darky widget on your webpage.
• darky.toggle();: This method toggles the darkmode on or off. When called, it checks the current mode and changes it to the opposite one.
• darky.isEnabled();: This method checks if darkmode is currently enabled and returns a boolean value.

Example

const darkmode = new Darky();
darkmode.enable();      // Activates the Darky widget
darkmode.toggle();      // Toggles darkmode on/off
darkmode.isEnabled();   // Returns true if darkmode is enabled

Events

The following events are available:

• onChange: This callback function fires whenever darkmode is toggled on or off and returns the result of the defined JS.

Example

const darkmode = new Darky(
    onChange: function() {
    console.log('Darkmode was toggled');
    // JS goes here
    }
);
darkmode.enable();

Overrides

By default the following elements are not converted to dark mode: img, picture, video. There are several ways to prevent an element from being converted:

1. Add the class darkmode--ignore to the elements HTML:

<span class="darkmode--ignore">I AM NOT DARKMODE<span>

1. Add the following CSS to the element:

.element {
    isolation: isolate;
}

1. Revert the darkmode like so

.darkmode--enabled .element {
    mix-blend-mode: difference;
}