Author: | JP-Vela |
---|---|
Views Total: | 1,310 views |
Official Page: | Go to website |
Last Update: | July 17, 2020 |
License: | MIT |
Preview:

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>