Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
dark-mode-switcheroo
Advanced tools
dark-mode-switcheroo - npm Package Compare versions
Comparing version 0.9.1 to 0.10.0
@@ -1,9 +0,12 @@ | ||
| export function init(options?: { | ||
| toggle?: Element | null; | ||
| classes?: { dark: string, light: string }; | ||
| default?: string; | ||
| storageKey?: string; | ||
| onInit?: (toggle?: Element | null) => unknown; | ||
| onUserToggle?: (toggle?: Element | null) => unknown; | ||
| onChange?: (theme: string, toggle?: Element | null) => unknown; | ||
| export declare function init(options: { | ||
| toggle?: Element | null; | ||
| classes?: { | ||
| dark: string; | ||
| light: string; | ||
| }; | ||
| default?: string; | ||
| storageKey?: string; | ||
| onInit?: (toggle?: Element | null) => unknown; | ||
| onUserToggle?: (toggle?: Element | null) => unknown; | ||
| onChange?: (theme: string, toggle?: Element | null) => unknown; | ||
| }): void; |
@@ -1,93 +0,2 @@ | ||
| /*! Dark Mode Switcheroo v0.9.1 | MIT License | jrvs.io/darkmode */ | ||
| const init = function (options) { | ||
| options = options || {}; // use a specified element(s) to trigger swap when clicked | ||
| const toggle = options.toggle || null; // check for preset `dark_mode_pref` preference in local storage | ||
| const storageKey = options.storageKey || "dark_mode_pref"; | ||
| const pref = localStorage.getItem(storageKey); // change CSS via these <body> classes: | ||
| const dark = options.classes ? options.classes.dark : "dark"; | ||
| const light = options.classes ? options.classes.light : "light"; // which class is <body> set to initially? | ||
| const defaultTheme = options.default || "light"; // keep track of current state no matter how we got there | ||
| let active = defaultTheme === dark; // receives a class name and switches <body> to it | ||
| const activateTheme = function (theme, remember) { | ||
| // optional onChange callback function passed as option | ||
| if (typeof options.onChange === "function") { | ||
| options.onChange(theme, toggle); | ||
| } | ||
| document.body.classList.remove(dark, light); | ||
| document.body.classList.add(theme); | ||
| active = theme === dark; | ||
| if (remember) { | ||
| localStorage.setItem(storageKey, theme); | ||
| } | ||
| }; // optional onInit callback function passed as option | ||
| if (typeof options.onInit === "function") { | ||
| options.onInit(toggle); | ||
| } // user has never clicked the button, so go by their OS preference until/if they do so | ||
| if (!pref) { | ||
| // returns media query selector syntax | ||
| const prefers = function (colorScheme) { | ||
| // https://drafts.csswg.org/mediaqueries-5/#prefers-color-scheme | ||
| return `(prefers-color-scheme: ${colorScheme})`; | ||
| }; // check for OS dark/light mode preference and switch accordingly | ||
| // default to `defaultTheme` set above if unsupported | ||
| if (window.matchMedia(prefers("dark")).matches) { | ||
| activateTheme(dark); | ||
| } else if (window.matchMedia(prefers("light")).matches) { | ||
| activateTheme(light); | ||
| } else { | ||
| activateTheme(defaultTheme); | ||
| } // real-time switching if supported by OS/browser | ||
| window.matchMedia(prefers("dark")).addEventListener("change", function (e) { | ||
| if (e.matches) { | ||
| activateTheme(dark); | ||
| } | ||
| }); | ||
| window.matchMedia(prefers("light")).addEventListener("change", function (e) { | ||
| if (e.matches) { | ||
| activateTheme(light); | ||
| } | ||
| }); | ||
| } else if (pref === dark || pref === light) { | ||
| // if user already explicitly toggled in the past, restore their preference | ||
| activateTheme(pref); | ||
| } else { | ||
| // fallback to default theme (this shouldn't happen) | ||
| activateTheme(defaultTheme); | ||
| } // don't freak out if page happens not to have a toggle | ||
| if (toggle !== null) { | ||
| // handle toggle click | ||
| toggle.addEventListener("click", function () { | ||
| // optional onUserToggle callback function passed as option | ||
| if (typeof options.onUserToggle === "function") { | ||
| options.onUserToggle(toggle); | ||
| } // switch to the opposite theme & save preference in local storage | ||
| if (active) { | ||
| activateTheme(light, true); | ||
| } else { | ||
| activateTheme(dark, true); | ||
| } | ||
| }); | ||
| } | ||
| }; | ||
| export { init }; | ||
| function e(e){var t=(e=e||{}).toggle||null,n=e.storageKey||"dark_mode_pref",a=localStorage.getItem(n),o=e.classes?e.classes.dark:"dark",c=e.classes?e.classes.light:"light",s=e.default||"light",i=s===o,d=function(a,s){"function"==typeof e.onChange&&e.onChange(a,t),document.body.classList.remove(o,c),document.body.classList.add(a),i=a===o,s&&localStorage.setItem(n,a)};if("function"==typeof e.onInit&&e.onInit(t),a)d(a===o||a===c?a:s);else{var l=function(e){return"(prefers-color-scheme: "+e+")"};window.matchMedia(l("dark")).matches?d(o):window.matchMedia(l("light")).matches?d(c):d(s),window.matchMedia(l("dark")).addEventListener("change",function(e){e.matches&&d(o)}),window.matchMedia(l("light")).addEventListener("change",function(e){e.matches&&d(c)})}null!==t&&t.addEventListener("click",function(){"function"==typeof e.onUserToggle&&e.onUserToggle(t),d(i?c:o,!0)})}export{e as init}; | ||
| //# sourceMappingURL=dark-mode.esm.js.map |
@@ -1,2 +0,2 @@ | ||
| /*! Dark Mode Switcheroo v0.9.1 | MIT License | jrvs.io/darkmode */ | ||
| !function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).darkMode={})}(this,(function(e){"use strict";e.init=function(e){var t=(e=e||{}).toggle||null,n=e.storageKey||"dark_mode_pref",o=localStorage.getItem(n),i=e.classes?e.classes.dark:"dark",a=e.classes?e.classes.light:"light",s=e.default||"light",c=s===i,d=function(o,s){"function"==typeof e.onChange&&e.onChange(o,t),document.body.classList.remove(i,a),document.body.classList.add(o),c=o===i,s&&localStorage.setItem(n,o)};if("function"==typeof e.onInit&&e.onInit(t),o)d(o===i||o===a?o:s);else{var l=function(e){return"(prefers-color-scheme: ".concat(e,")")};window.matchMedia(l("dark")).matches?d(i):window.matchMedia(l("light")).matches?d(a):d(s),window.matchMedia(l("dark")).addEventListener("change",(function(e){e.matches&&d(i)})),window.matchMedia(l("light")).addEventListener("change",(function(e){e.matches&&d(a)}))}null!==t&&t.addEventListener("click",(function(){"function"==typeof e.onUserToggle&&e.onUserToggle(t),d(c?a:i,!0)}))}})); | ||
| !function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t((e||self).darkMode={})}(this,function(e){e.init=function(e){var t=(e=e||{}).toggle||null,n=e.storageKey||"dark_mode_pref",o=localStorage.getItem(n),i=e.classes?e.classes.dark:"dark",a=e.classes?e.classes.light:"light",s=e.default||"light",d=s===i,c=function(o,s){"function"==typeof e.onChange&&e.onChange(o,t),document.body.classList.remove(i,a),document.body.classList.add(o),d=o===i,s&&localStorage.setItem(n,o)};if("function"==typeof e.onInit&&e.onInit(t),o)c(o===i||o===a?o:s);else{var l=function(e){return"(prefers-color-scheme: "+e+")"};window.matchMedia(l("dark")).matches?c(i):window.matchMedia(l("light")).matches?c(a):c(s),window.matchMedia(l("dark")).addEventListener("change",function(e){e.matches&&c(i)}),window.matchMedia(l("light")).addEventListener("change",function(e){e.matches&&c(a)})}null!==t&&t.addEventListener("click",function(){"function"==typeof e.onUserToggle&&e.onUserToggle(t),c(d?a:i,!0)})}}); | ||
| //# sourceMappingURL=dark-mode.min.js.map |
| { | ||
| "name": "dark-mode-switcheroo", | ||
| "version": "0.9.1", | ||
| "version": "0.10.0", | ||
| "description": "🌓 Simple CSS theme switching with saved preferences and automatic OS setting detection", | ||
| "license": "MIT", | ||
| "homepage": "https://jrvs.io/darkmode", | ||
| "author": { | ||
@@ -16,17 +17,17 @@ "name": "Jake Jarvis", | ||
| "type": "module", | ||
| "sideEffects": false, | ||
| "files": [ | ||
| "dist" | ||
| ], | ||
| "main": "./dist/dark-mode.cjs.js", | ||
| "source": "./src/dark-mode.ts", | ||
| "main": "./dist/dark-mode.cjs", | ||
| "module": "./dist/dark-mode.esm.js", | ||
| "unpkg": "./dist/dark-mode.min.js", | ||
| "types": "./dist/dark-mode.d.ts", | ||
| "exports": { | ||
| "require": "./dist/dark-mode.cjs.js", | ||
| "require": "./dist/dark-mode.cjs", | ||
| "import": "./dist/dark-mode.esm.js", | ||
| "browser": "./dist/dark-mode.min.js" | ||
| }, | ||
| "types": "./dist/dark-mode.d.ts", | ||
| "scripts": { | ||
| "build": "rollup -c", | ||
| "build": "microbundle --format cjs,esm,umd --name 'darkMode'", | ||
| "lint": "eslint .", | ||
@@ -37,16 +38,8 @@ "prepublishOnly": "yarn build" | ||
| "devDependencies": { | ||
| "@babel/core": "^7.15.5", | ||
| "@babel/preset-env": "^7.15.6", | ||
| "@jakejarvis/eslint-config": "*", | ||
| "@rollup/plugin-babel": "^5.3.0", | ||
| "@rollup/plugin-eslint": "^8.0.1", | ||
| "@rollup/plugin-node-resolve": "^13.0.5", | ||
| "eslint": "^7.32.0", | ||
| "eslint-plugin-compat": "^3.13.0", | ||
| "eslint-plugin-import": "^2.24.2", | ||
| "rollup": "^2.58.0", | ||
| "rollup-plugin-copy": "^3.4.0", | ||
| "rollup-plugin-delete": "^2.0.0", | ||
| "rollup-plugin-filesize": "^9.1.1", | ||
| "rollup-plugin-terser": "^7.0.2" | ||
| "@typescript-eslint/eslint-plugin": "^5.3.1", | ||
| "@typescript-eslint/parser": "^5.3.1", | ||
| "eslint": "^8.2.0", | ||
| "microbundle": "^0.14.1", | ||
| "typescript": "^4.4.4" | ||
| }, | ||
@@ -53,0 +46,0 @@ "keywords": [ |
| # 🌓 Dark Mode Switcheroo™ | ||
| [](https://github.com/jakejarvis/dark-mode/actions/workflows/ci.yml) | ||
| [](https://www.npmjs.com/package/dark-mode-switcheroo) | ||
| [](LICENSE) | ||
| [](https://www.npmjs.com/package/dark-mode-switcheroo) | ||
@@ -7,0 +6,0 @@ Very simple CSS dark/light mode toggler with saved preference via local storage & dynamic OS setting detection. Zero dependencies and [only ~500 bytes gzipped!](https://bundlephobia.com/package/dark-mode-switcheroo) |
New alerts
License Policy Violation
LicenseThis 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 riskPackage 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
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
No website
QualityPackage does not have a website.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by35.32%
23526
- Dev dependency count
- decreased by-57.14%
6
- Number of package files
- increased by25%
10
- Number of low quality alerts
- decreased by-50%
1
Worsened metrics
- Lines of code
- decreased by-88.28%
28
- Number of lines in readme file
- decreased by-1.12%
88
- Number of medium supply chain risk alerts
- increased byInfinity%
1
No dependency changes