Quick Start

This guide is a continuation of the previous.
If you have not installed blinds, and do not know how, now might be a good time to visit the previous guide, and follow the instructions.

Using Blinds

So you have installed blinds in your project, now is time to actually make use of it.
In your javascript code, import blinds. If you are using blinds as a script from CDN, you should skip this step.

import { blindsInit } from 'blinds';

Please note that if you are using CDN, blinds must be loaded in the browser before your own javascript for it to work. Therefore, it is important that your javascript comes after blinds.


blindsInit();

It is now time to show the toggle icons.
To do that, in your HTML, you must provide the tag where the icons will be displayed, and add to it the id attribute with value: 'blinds_id'.

The style given below is just an example. You are at liberty to style your icons as you like.


<div id="blinds_id" style="width: 24px; height: 24px; position: fixed; top: 10px; right: 10px;"><div>

The icons are showing, but they do not do anything for now. You need to activate the icons, but before that, you need to import the function that does just that. If you are using blinds via CDN, you should skip this step.


import { blindsInit, blindsToggle } from 'blinds';

Activate the icons.


blindsInit();

document.querySelector('#blinds_id').onclick = () => {
    blindsToggle();
}

Now when you click the icons, your website toggles from dark mode to normal mode. Just like that!
In the next guide add custom styling, we will go through the steps needed for you to enforce your own dark mode style instead of using the default style that comes with blinds.