Apply Cookie Based Dark Mode To Webpage – OpenLight

Category: Javascript | July 17, 2020
0 Comment
Demo Download
Author:JP-Vela
Views Total:1,151 views
Official Page:Go to website
Last Update:July 17, 2020
License:MIT

Preview:

Apply Cookie Based Dark Mode To Webpage – OpenLight

Description:

OpenLight is an easy vanilla JavaScript implementation of the Dark Mode for your existing web project.

It uses cookies to store preferred mode in the local and automatically applies corresponding colors to most commonly used HTML tags without writing additional CSS rules.

How to use it:

1. Put the main JavaScript ‘openLight.js’ in the document.

<script src="openLight.js"></script>

2. Create an OpenLight object and determine which mode you prefer.

// auto mode
// recommended
openLight = new OpenLight("auto");
// manual mode
openLight = new OpenLight("manual");

3. Initialize the OpenLight.

openLight.init();

5. Toggle between dark & light modes.

openLight.toggleMode();

6. Change the default colors. OPTIONAL.

openLight.openLightColors = {
  darkBackgroundStyle: "rgb(30,30,38)",
  lightBackgroundStyle: "rgb(255,255,255)",
  darkForegroundStyle: "rgb(240,240,250)",
  lightForegroundStyle: "rgb(30,30,40)"
}

7. Customize the CSS class applied to elements that shouldn’t use dark mode. Useful in Auto mode. OPTIONAL.

openLight.addOverrideByClassName("override");

8. You need to apply additional CSS classes to elements when using Manual mode.

<body class="lightDarkB light">
  <p class="lightDarkF light">Some text</p>
  <h1 class="lightDarkF light">Some Title</p>
  ..
</div>

See Also:

You Might Be Interested In:

Leave a Reply