darkmode-js - npm Package Compare versions

Comparing version 1.0.0 to 1.0.1

package.json

 {
   "name": "darkmode-js",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "🌓 Add darkmode / nightmode to your website in a few seconds",
@@ -5,0 +5,0 @@ "main": "lib/darkmode.js",

README.md

@@ -1,3 +0,1 @@
-![Logo](logo.gif "Logo")
-
 # Darkmode.js ![GitHub](https://img.shields.io/github/license/mashape/apistatus.svg)
@@ -7,2 +5,8 @@
 
+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/
+
 ## Demo
@@ -15,9 +19,6 @@ Check out the demo in these websites:
 
-### Important
-Your background (even white) needs to be in another tag than body.
-
 ### Easy way (using the JSDelivr CDN)
 Just add this code to your html page:
 ```html
-<script src="https://cdn.jsdelivr.net/npm/darkmode/lib/darkmode.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/darkmode-js/lib/darkmode-js.min.js"></script>
 <script>
@@ -28,2 +29,16 @@ new Darkmode().showWidget();
 
+### Important
+Your background (even white) needs to be in another tag than body.
+
+#### Exemple
+```css
+body {
+  background: #fff; //The darkmode library will NOT work
+}
+
+main {
+  background: #fff; //The darkmode library WILL work
+}
+```
+
 ### Using NPM
@@ -41,5 +56,2 @@ ```sh
 
-### Programmatically (without the widget)
-(coming soon)
-
 ## Options
@@ -49,10 +61,29 @@ 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 = Darkmode(options);
+const darkmode = new Darkmode(options);
 darkmode.showWidget();
 ```
 
+## Methods
+If you don't want to show the widget and enable/disable Darkmode programatically you can use the method `toggle()` like this:
+```javascript
+const darkmode =  new Darkmode();
+darkmode.toggle();
+```
+
+
+## Override style
+* A CSS class `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 style
+* Use the class `darkmode-ignore` where you don't want to apply darkmode
+
 ## Development
-
 * `yarn build` or `npm run build` - produces production version of your library under the `lib` folder
@@ -59,0 +90,0 @@ * `yarn dev` or `npm run dev` - produces development version of your library and runs a watcher

src/darkmode.js

@@ -7,2 +7,5 @@ export default class Darkmode {
     const time = options && options.time ? options.time : '0.3s';
+    const mixColor = options && options.mixColor ? options.mixColor : '#fff';
+    const buttonColorDark = options && options.buttonColorDark ? options.buttonColorDark : '#100f2c';
+    const buttonColorLight = options && options.buttonColorLight ? options.buttonColorLight : '#fff';
     /* eslint-disable */
@@ -16,3 +19,3 @@ const saveInCookies = options && options.saveInCookies === false ? false : true;
         pointer-events: none;
-        background: white;
+        background: ${mixColor};
         transition: all ${time} ease;
@@ -43,3 +46,3 @@ mix-blend-mode: difference;
       .darkmode-toggle {
-        background: #100f2c;
+        background: ${buttonColorDark};
         width: 3rem;
@@ -57,3 +60,3 @@ height: 3rem;
       .darkmode-toggle--white {
-        background: #fff;
+        background: ${buttonColorLight};
       }
@@ -60,0 +63,0 @@

test/index.spec.js

 /* global describe, it, before */
 
 import chai from 'chai';
-import Darkmode from '../lib/darkmode';
+import Darkmode from '../lib/darkmode-js';
 
@@ -27,2 +27,5 @@ chai.use(require('chai-dom'));
       time: '0.5s',
+      mixColor: '#fff',
+      buttonColorDark: '#100f2c',
+      buttonColorLight: '#fff',
       saveInCookies: false
@@ -29,0 +32,0 @@ }).showWidget();

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

340012

increased by1.69%

Lines of code

413

increased by2.48%

Number of lines in readme file

96

increased by47.69%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes