Darken - A javascript library that makes darkmode easy
source link: https://github.com/ColinEspinas/darken
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
darken
:new_moon: Darkmode made easy
Table of Contents
Getting Started
:airplane: Using the CDN
Just use this snippet to include darken to your code:
<script src="https://unpkg.com/darken"></script> <script> const darkmode = new darken(); </script>
:package: Using NPM
Install darken with npm:
npm install darken
And import it in your code:
import darken from 'darken'; const darkmode = new darken();
Usage
Basic
Here is a basic usage of darken:
<!-- index.html --> <button id="darkmode-button">Toggle darkmode</button> <script src="path/to/darken"></script> <script> const darkmode = new darken({ class: "darkmode-active", variables: { "--primary-color" : ["#000000", "#fafafa"], "--background-color" : ["#fafafa", "#000000"] }, toggle: "#darkmode-button", }); </script>
You can either use a class and/or CSS variables to customize your styles.
Options
const defaultOptions = { container: null, default: "light", toggle: null, class: "darken", variables: {}, }
container
Type: String
, Default: null
Element selector to the container of darken. The darkmode will be applied only to the selected container.
If the value is left to ``null`, the document element will be selected instead.
default
Type: String
, Default: "light"
Defines the default mode on page load.
toggle
Type: String
, Default: null
Element selector to the toggle button, the selected element will call the toggle
method on click.
class
Type: String
, Default: "darken"
Class that will be added to the selected container when the darkmode is active. The class is removed of the selected container once the darkmode is disabled.
If no container is selected, the class will be added to the body
element instead.
variables
Type: Object
, Default: {}
List of CSS variables that will change when the darkmode is active.
The keys of the object are the variables names, the value are arrays where the 1th index is the value the variable will take in lightmode and the 2nd index the value the variable will take in darkmode.
variables: { "--name-of-the-variable": ["lightmode value", "darkmode value"], "--background-color": ["white", "black"], }
API
The darken
class is the entry point to the library.
const darkmode = new darken(options);
toggle()
Return: none
Toggles darkmode.
darkmode.toggle();
on()
Return: none
Enables darkmode.
darkmode.on();
off()
Return: none
Disables darkmode.
darkmode.off();
Contributing
Any help and contribution is always welcome, feel free to submit issues and/or contribute to the project.
- Fork the Project
- Create your Feature or Fix Branch (
git checkout -b feature/feature-name
orgit checkout -b fix/fix-name
) - Commit your Changes (
git commit -m 'Add some feature or fix'
) - Push to the Branch (
git push origin feature/feature-name
orgit push origin fix/fix-name
) - Open a Pull Request
License
darken is distributed under the MIT License. See LICENSE
for more information.
Contact
Colin Espinas - Website - [email protected]
Project link: https://github.com/ColinEspinas/darken
Acknowledgements
Recommend
-
70
googleplaystore post AccoladesUpvoteDownvoteAdd to Favorites
-
26
分享创造 - @ydatong - 从 1.1.0 上线以后,很多老哥都反馈要增加暗黑模式,所以在这两天功能 bug 修复的差不多的时候,抽空赶紧把暗黑模式适配了😁, 希望大家多多支持,最好能到 App Store 给些评论和反馈。
-
23
DarkModeJS Lightweight and cross-browser DarkModeJS helps you to auto detect user's time and switch theme to darkside. Also, it's weight only 2.39KB (1.05KB gzipped) and written on pure Javascript, without any pl...
-
18
DarkMode A micro library (~360B) for handling dark mode on browsers. Instalation You can install DarkMode via npm: npm install --save @kazzkiq/darkmode ...
-
15
3 May 2019 / product HyperTrack V3 makes live location tracking easy for app developers Building apps with live location tracking...
-
10
Functional Programming Makes Simple Easy I do love the fact that F# (and functional programming in general) gives a developer the tools to make it easy to build simple code. I was hacking together...
-
7
Optimizing code to darken a bitmap, part 2 Raymond March 8th, 2022
-
7
利用CSS3自定义属性来为网站添加“暗黑模式”(暗色模式/DarkMode)首页 - Web Design/2019-09-22
-
8
-
6
暗夜发光,独自闪耀,盘点网页暗黑模式(DarkMode)下的特效和动效,CSS3实现首页 - Web Design/2023-03-23...
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK