Product
Introducing Ruby Support in Socket
Socket is launching Ruby support for all users. Enhance your Rails projects with AI-powered security scans for vulnerabilities and supply chain threats. Now in Beta!
darkmode-js
Advanced tools
🌓 Add darkmode / nightmode to your website in a few seconds
This library uses the css mix-blend-mode
in order to bring Dark-mode to any of your website.
You can use this library to display a widget or just use it programmatically without widget!
It also uses localstorage by default so your last setting will be remembered !
I have been inspired by this article: https://dev.wgao19.cc/2019-05-04__sun-moon-blending-mode/
Check out the demo in these websites:
Darkmode.js is very easy to use, just copy paste the following code or use the npm package.
Just add this code to your html page:
<script src="https://cdn.jsdelivr.net/npm/darkmode-js/lib/darkmode-js.min.js"></script>
<script>
new Darkmode().showWidget();
</script>
If it does not work you may have to add the following code, but this will invalidate the classes to override.
.darkmode-layer, .darkmode-toggle {
z-index: 500;
}
npm install darkmode
Then add the following javascript code:
import Darkmode from 'darkmode';
new Darkmode().showWidget();
Here are the option availables:
var options = {
bottom: '64px', // default: '32px'
right: 'unset', // default: '32px'
left: '32px', // default: 'unset'
time: '0.5s', // default: '0.3s'
mixColor: '#fff', // default: '#fff'
buttonColorDark: '#100f2c', // default: '#100f2c'
buttonColorLight: '#fff', // default: '#fff'
saveInCookies: false // default: true
}
const darkmode = new Darkmode(options);
darkmode.showWidget();
If you don't want to show the widget and enable/disable Darkmode programatically you can use the method toggle()
like this:
const darkmode = new Darkmode();
darkmode.toggle();
darkmode--activated
is added to the body tag when the darkmode is activated. You can take advantage of it to override the style and have a custom styledarkmode-ignore
where you don't want to apply darkmode.darkmode--activated p, .darkmode--activated li {
color: #000;
}
<span class="darkmode-ignore">😬<span>
yarn build
or npm run build
- produces production version of your library under the lib
folderyarn dev
or npm run dev
- produces development version of your library and runs a watcheryarn test
or npm run test
- it runs the tests :)yarn test:watch
or npm run test:watch
- same as above but in a watch modeIf you like this project, feel free to donate:
FAQs
🌓 Add darkmode / nightmode to your website in a few seconds
The npm package darkmode-js receives a total of 629 weekly downloads. As such, darkmode-js popularity was classified as not popular.
We found that darkmode-js demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Socket is launching Ruby support for all users. Enhance your Rails projects with AI-powered security scans for vulnerabilities and supply chain threats. Now in Beta!
Product
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
Product
We're launching a new set of license analysis and compliance features for analyzing, managing, and complying with licenses across a range of supported languages and ecosystems.