New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
bootstrap-dark-5
Advanced tools
bootstrap-dark-5 - npm Package Compare versions
Comparing version 0.1.0 to 0.1.1
@@ -1,144 +0,139 @@ | ||
| /*! | ||
| * Bootstrap-Dark-5 v0.1.0 (https://vinorodrigues.github.io/bootstrap-dark-5/) | ||
| * Copyright 2021 Vino Rodrigues | ||
| * Licensed under MIT (https://github.com/vinorodrigues/bootstrap-dark-5/blob/main/LICENSE.md) | ||
| */ | ||
| 'use strict'; | ||
| const DATA_NAME = "bs_prefers_color_scheme"; | ||
| const LIGHT = "light"; | ||
| const DARK = "dark"; | ||
| var darkmode = { | ||
| // public | ||
| isInDarkMode: false, | ||
| hasGDPRConsent: false, | ||
| // private | ||
| __documentRoot: document.getElementsByTagName("html")[0], | ||
| saveValue: function (name, value, days = 365) { | ||
| if (this.hasGDPRConsent) { | ||
| // use cookies | ||
| var exp; | ||
| if (days) { | ||
| var date = new Date(); | ||
| date.setTime(date.getTime() + days * 24 * 60 * 60 * 1000); | ||
| exp = "; expires=" + date.toGMTString(); | ||
| } else { | ||
| exp = ""; | ||
| } | ||
| document.cookie = name + "=" + value + exp + "; SameSite=Strict; path=/"; | ||
| } else { | ||
| // use local storage | ||
| localStorage.setItem(name, value); | ||
| "use strict"; | ||
| class DarkMode { | ||
| constructor() { | ||
| this.isInDarkMode = false; | ||
| this.hasGDPRConsent = false; | ||
| this.cookieExpiry = 365; | ||
| this.documentRoot = document.getElementsByTagName("html")[0]; | ||
| document.addEventListener("DOMContentLoaded", function () { | ||
| DarkMode.onDOMContentLoaded(); | ||
| }); | ||
| } | ||
| }, | ||
| readValue: function (name) { | ||
| if (this.hasGDPRConsent) { | ||
| var n = name + "="; | ||
| var parts = document.cookie.split(";"); | ||
| for (var i = 0; i < parts.length; i++) { | ||
| var part = parts[i].trim(); | ||
| if (part.startsWith(n)) { | ||
| // found it | ||
| return part.substring(n.length); | ||
| saveValue(name, value, days = this.cookieExpiry) { | ||
| if (this.hasGDPRConsent) { | ||
| let exp; | ||
| if (days) { | ||
| const date = new Date(); | ||
| date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000)); | ||
| exp = "; expires=" + date.toUTCString(); | ||
| } | ||
| else { | ||
| exp = ""; | ||
| } | ||
| document.cookie = name + "=" + value + exp + "; SameSite=Strict; path=/"; | ||
| } | ||
| } | ||
| return null; | ||
| } else { | ||
| return localStorage.getItem(name); | ||
| else { | ||
| localStorage.setItem(name, value); | ||
| } | ||
| return; | ||
| } | ||
| }, | ||
| eraseValue: function (name) { | ||
| if (this.hasGDPRConsent) { | ||
| this.saveValue(name, "", -1); | ||
| } else { | ||
| localStorage.removeItem(name); | ||
| readValue(name) { | ||
| if (this.hasGDPRConsent) { | ||
| const n = name + "="; | ||
| const parts = document.cookie.split(";"); | ||
| for (let i = 0; i < parts.length; i++) { | ||
| const part = parts[i].trim(); | ||
| if (part.startsWith(n)) { | ||
| return part.substring(n.length); | ||
| } | ||
| } | ||
| return ""; | ||
| } | ||
| else { | ||
| const ret = localStorage.getItem(name); | ||
| return ret ? ret : ""; | ||
| } | ||
| } | ||
| }, | ||
| getSavedColorScheme: function () { | ||
| var val = this.readValue(DATA_NAME); | ||
| if (val) { | ||
| return val; | ||
| } else { | ||
| return null; | ||
| eraseValue(name) { | ||
| if (this.hasGDPRConsent) { | ||
| this.saveValue(name, "", -1); | ||
| } | ||
| else { | ||
| localStorage.removeItem(name); | ||
| } | ||
| } | ||
| }, | ||
| getPreferedColorScheme: function () { | ||
| if (window.matchMedia && window.matchMedia("(prefers-color-scheme: " + DARK + ")").matches) { | ||
| return DARK; | ||
| } else if (window.matchMedia && window.matchMedia("(prefers-color-scheme: " + LIGHT + ")").matches) { | ||
| return LIGHT; | ||
| } else { | ||
| return null; | ||
| getSavedColorScheme() { | ||
| const val = this.readValue(DarkMode.DATA_NAME); | ||
| if (val) { | ||
| return val; | ||
| } | ||
| else { | ||
| return ""; | ||
| } | ||
| } | ||
| }, | ||
| setDarkMode: function (darkMode, doSave = true) { | ||
| if (!darkMode) { | ||
| // light | ||
| this.__documentRoot.classList.remove(DARK); | ||
| this.__documentRoot.classList.add(LIGHT); | ||
| this.isInDarkMode = false; | ||
| if (doSave) this.saveValue(DATA_NAME, LIGHT); | ||
| } else { | ||
| // dark | ||
| this.__documentRoot.classList.remove(LIGHT); | ||
| this.__documentRoot.classList.add(DARK); | ||
| this.isInDarkMode = true; | ||
| if (doSave) this.saveValue(DATA_NAME, DARK); | ||
| getPreferedColorScheme() { | ||
| if (window.matchMedia && window.matchMedia("(prefers-color-scheme: " + DarkMode.DARK + ")").matches) { | ||
| return DarkMode.DARK; | ||
| } | ||
| else if (window.matchMedia && window.matchMedia("(prefers-color-scheme: " + DarkMode.LIGHT + ")").matches) { | ||
| return DarkMode.LIGHT; | ||
| } | ||
| else { | ||
| return ""; | ||
| } | ||
| } | ||
| }, | ||
| toggleDarkMode: function () { | ||
| this.setDarkMode(!this.__documentRoot.classList.contains(DARK), true); | ||
| }, | ||
| resetDarkMode: function () { | ||
| this.eraseValue(DATA_NAME); | ||
| var darkMode = this.getPreferedColorScheme(); | ||
| if (darkMode) this.setDarkMode(darkMode == DARK, false); | ||
| } | ||
| }; | ||
| function darkmodeUpdateEvent() { | ||
| var darkMode = darkmode.getSavedColorScheme(); | ||
| if (!darkMode) { | ||
| darkMode = darkmode.getPreferedColorScheme(); | ||
| if (darkMode) darkmode.setDarkMode(darkMode == DARK, false); | ||
| } | ||
| } | ||
| function darkmodeOnDOMContentLoaded() { | ||
| var pref = darkmode.readValue(DATA_NAME); | ||
| if (!pref) { | ||
| // user has not set pref. so get from `<HTML>` tag incase developer has set pref. | ||
| if (darkmode.__documentRoot.classList.contains(DARK)) { | ||
| pref = DARK; | ||
| } else if (darkmode.__documentRoot.classList.contains(LIGHT)) { | ||
| pref = LIGHT; | ||
| } else { | ||
| // when all else fails, get pref. from OS/browser | ||
| pref = darkmode.getPreferedColorScheme(); | ||
| setDarkMode(darkMode, doSave = true) { | ||
| if (!darkMode) { | ||
| this.documentRoot.classList.remove(DarkMode.DARK); | ||
| this.documentRoot.classList.add(DarkMode.LIGHT); | ||
| this.isInDarkMode = false; | ||
| if (doSave) | ||
| this.saveValue(DarkMode.DATA_NAME, DarkMode.LIGHT); | ||
| } | ||
| else { | ||
| this.documentRoot.classList.remove(DarkMode.LIGHT); | ||
| this.documentRoot.classList.add(DarkMode.DARK); | ||
| this.isInDarkMode = true; | ||
| if (doSave) | ||
| this.saveValue(DarkMode.DATA_NAME, DarkMode.DARK); | ||
| } | ||
| } | ||
| } | ||
| darkmode.isInDarkMode = pref == DARK; // initalize the `HTML` tag | ||
| darkmode.setDarkMode(darkmode.isInDarkMode, false); // update every time it changes | ||
| if (window.matchMedia) { | ||
| window.matchMedia("(prefers-color-scheme: " + DARK + ")").addEventListener("change", darkmodeUpdateEvent); | ||
| } | ||
| toggleDarkMode(doSave = true) { | ||
| this.setDarkMode(!this.documentRoot.classList.contains(DarkMode.DARK), doSave); | ||
| } | ||
| resetDarkMode() { | ||
| this.eraseValue(DarkMode.DATA_NAME); | ||
| const darkMode = this.getPreferedColorScheme(); | ||
| if (darkMode) { | ||
| this.setDarkMode(darkMode == DarkMode.DARK, false); | ||
| } | ||
| else { | ||
| this.documentRoot.classList.remove(DarkMode.LIGHT); | ||
| this.documentRoot.classList.remove(DarkMode.DARK); | ||
| } | ||
| } | ||
| static updatePreferedColorSchemeEvent() { | ||
| let darkMode = darkmode.getSavedColorScheme(); | ||
| if (!darkMode) { | ||
| darkMode = darkmode.getPreferedColorScheme(); | ||
| if (darkMode) | ||
| darkmode.setDarkMode(darkMode == DarkMode.DARK, false); | ||
| } | ||
| } | ||
| static onDOMContentLoaded() { | ||
| let pref = darkmode.readValue(DarkMode.DATA_NAME); | ||
| if (!pref) { | ||
| if (darkmode.documentRoot.classList.contains(DarkMode.DARK)) { | ||
| pref = DarkMode.DARK; | ||
| } | ||
| else if (darkmode.documentRoot.classList.contains(DarkMode.LIGHT)) { | ||
| pref = DarkMode.LIGHT; | ||
| } | ||
| else { | ||
| pref = darkmode.getPreferedColorScheme(); | ||
| } | ||
| } | ||
| darkmode.isInDarkMode = pref == DarkMode.DARK; | ||
| darkmode.setDarkMode(darkmode.isInDarkMode, false); | ||
| if (window.matchMedia) { | ||
| window.matchMedia("(prefers-color-scheme: " + DarkMode.DARK + ")").addEventListener("change", function () { | ||
| DarkMode.updatePreferedColorSchemeEvent(); | ||
| }); | ||
| } | ||
| } | ||
| } | ||
| document.addEventListener("DOMContentLoaded", darkmodeOnDOMContentLoaded); | ||
| //# sourceMappingURL=darkmode.js.map | ||
| DarkMode.DATA_NAME = "bs_prefers_color_scheme"; | ||
| DarkMode.LIGHT = "light"; | ||
| DarkMode.DARK = "dark"; | ||
| const darkmode = new DarkMode(); | ||
| //# sourceMappingURL=darkmode.js.map |
@@ -1,7 +0,1 @@ | ||
| /*! | ||
| * Bootstrap-Dark-5 v0.1.0 (https://vinorodrigues.github.io/bootstrap-dark-5/) | ||
| * Copyright 2021 Vino Rodrigues | ||
| * Licensed under MIT (https://github.com/vinorodrigues/bootstrap-dark-5/blob/main/LICENSE.md) | ||
| */ | ||
| "use strict";const e="bs_prefers_color_scheme",t="dark";var o={isInDarkMode:!1,hasGDPRConsent:!1,__documentRoot:document.getElementsByTagName("html")[0],saveValue:function(e,t,o=365){if(this.hasGDPRConsent){var s;if(o){var a=new Date;a.setTime(a.getTime()+24*o*60*60*1e3),s="; expires="+a.toGMTString()}else s="";document.cookie=e+"="+t+s+"; SameSite=Strict; path=/"}else localStorage.setItem(e,t)},readValue:function(e){if(this.hasGDPRConsent){for(var t=e+"=",o=document.cookie.split(";"),s=0;s<o.length;s++){var a=o[s].trim();if(a.startsWith(t))return a.substring(t.length)}return null}return localStorage.getItem(e)},eraseValue:function(e){this.hasGDPRConsent?this.saveValue(e,"",-1):localStorage.removeItem(e)},getSavedColorScheme:function(){var t=this.readValue(e);return t||null},getPreferedColorScheme:function(){return window.matchMedia&&window.matchMedia("(prefers-color-scheme: dark)").matches?t:window.matchMedia&&window.matchMedia("(prefers-color-scheme: light)").matches?"light":null},setDarkMode:function(o,s=!0){o?(this.__documentRoot.classList.remove("light"),this.__documentRoot.classList.add(t),this.isInDarkMode=!0,s&&this.saveValue(e,t)):(this.__documentRoot.classList.remove(t),this.__documentRoot.classList.add("light"),this.isInDarkMode=!1,s&&this.saveValue(e,"light"))},toggleDarkMode:function(){this.setDarkMode(!this.__documentRoot.classList.contains(t),!0)},resetDarkMode:function(){this.eraseValue(e);var o=this.getPreferedColorScheme();o&&this.setDarkMode(o==t,!1)}};function s(){var e=o.getSavedColorScheme();e||(e=o.getPreferedColorScheme())&&o.setDarkMode(e==t,!1)}document.addEventListener("DOMContentLoaded",(function(){var a=o.readValue(e);a||(a=o.__documentRoot.classList.contains(t)?t:o.__documentRoot.classList.contains("light")?"light":o.getPreferedColorScheme()),o.isInDarkMode=a==t,o.setDarkMode(o.isInDarkMode,!1),window.matchMedia&&window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change",s)})); | ||
| //# sourceMappingURL=darkmode.min.js.map | ||
| "use strict";class DarkMode{constructor(){this.isInDarkMode=!1,this.hasGDPRConsent=!1,this.cookieExpiry=365,this.documentRoot=document.getElementsByTagName("html")[0],document.addEventListener("DOMContentLoaded",(function(){DarkMode.onDOMContentLoaded()}))}saveValue(e,o,t=this.cookieExpiry){if(this.hasGDPRConsent){let a;if(t){const e=new Date;e.setTime(e.getTime()+24*t*60*60*1e3),a="; expires="+e.toUTCString()}else a="";document.cookie=e+"="+o+a+"; SameSite=Strict; path=/"}else localStorage.setItem(e,o)}readValue(e){if(this.hasGDPRConsent){const o=e+"=",t=document.cookie.split(";");for(let e=0;e<t.length;e++){const a=t[e].trim();if(a.startsWith(o))return a.substring(o.length)}return""}{const o=localStorage.getItem(e);return o||""}}eraseValue(e){this.hasGDPRConsent?this.saveValue(e,"",-1):localStorage.removeItem(e)}getSavedColorScheme(){const e=this.readValue(DarkMode.DATA_NAME);return e||""}getPreferedColorScheme(){return window.matchMedia&&window.matchMedia("(prefers-color-scheme: "+DarkMode.DARK+")").matches?DarkMode.DARK:window.matchMedia&&window.matchMedia("(prefers-color-scheme: "+DarkMode.LIGHT+")").matches?DarkMode.LIGHT:""}setDarkMode(e,o=!0){e?(this.documentRoot.classList.remove(DarkMode.LIGHT),this.documentRoot.classList.add(DarkMode.DARK),this.isInDarkMode=!0,o&&this.saveValue(DarkMode.DATA_NAME,DarkMode.DARK)):(this.documentRoot.classList.remove(DarkMode.DARK),this.documentRoot.classList.add(DarkMode.LIGHT),this.isInDarkMode=!1,o&&this.saveValue(DarkMode.DATA_NAME,DarkMode.LIGHT))}toggleDarkMode(e=!0){this.setDarkMode(!this.documentRoot.classList.contains(DarkMode.DARK),e)}resetDarkMode(){this.eraseValue(DarkMode.DATA_NAME);const e=this.getPreferedColorScheme();e?this.setDarkMode(e==DarkMode.DARK,!1):(this.documentRoot.classList.remove(DarkMode.LIGHT),this.documentRoot.classList.remove(DarkMode.DARK))}static updatePreferedColorSchemeEvent(){let e=darkmode.getSavedColorScheme();e||(e=darkmode.getPreferedColorScheme(),e&&darkmode.setDarkMode(e==DarkMode.DARK,!1))}static onDOMContentLoaded(){let e=darkmode.readValue(DarkMode.DATA_NAME);e||(e=darkmode.documentRoot.classList.contains(DarkMode.DARK)?DarkMode.DARK:darkmode.documentRoot.classList.contains(DarkMode.LIGHT)?DarkMode.LIGHT:darkmode.getPreferedColorScheme()),darkmode.isInDarkMode=e==DarkMode.DARK,darkmode.setDarkMode(darkmode.isInDarkMode,!1),window.matchMedia&&window.matchMedia("(prefers-color-scheme: "+DarkMode.DARK+")").addEventListener("change",(function(){DarkMode.updatePreferedColorSchemeEvent()}))}}DarkMode.DATA_NAME="bs_prefers_color_scheme",DarkMode.LIGHT="light",DarkMode.DARK="dark";const darkmode=new DarkMode; |
| { | ||
| "name": "bootstrap-dark-5", | ||
| "version": "0.1.0", | ||
| "version": "0.1.1", | ||
| "description": "The Ancillary Guide to Dark Mode and Bootstrap 5 - A continuation of the v4 Dark Mode POC", | ||
@@ -10,26 +10,38 @@ "main": "", | ||
| "lint": "npm-run-all --parallel css-lint js-lint", | ||
| "dist": "npm-run-all --parallel css js", | ||
| "DISABLED_serve": "browser-sync start --server --files [\"dist/css/*.css\", \"dist/js/*.js\", \"examples/*.*\", \"*.html\"]", | ||
| "dist": "npm-run-all --parallel css js docs", | ||
| "build": "echo \"Deprecated: Use `npm run dist`\" && npm-run-all dist", | ||
| "DISABLED_serve": "browser-sync start --server --files [\"dist/css/*.css\", \"dist/js/*.ts\", \"examples/*.*\", \"*.html\"]", | ||
| "serve": "browser-sync start --server", | ||
| "css": "npm-run-all css-compile css-prefix css-minify", | ||
| "css": "npm-run-all css-wipe css-compile css-prefix css-minify", | ||
| "css-wipe": "rimraf ./dist/css", | ||
| "css-compile": "sass --style expanded --source-map --embed-sources --no-error-css --load-path=node_modules/bootstrap/scss scss/:dist/css/", | ||
| "css-prefix": "postcss --config build/postcss.config.js --replace \"dist/css/*.css\" \"!dist/css/*.rtl*.css\" \"!dist/css/*.min.css\"", | ||
| "css-minify": "npm-run-all --parallel css-minify-*", | ||
| "css-minify-main": "cleancss -O1 --format breakWith=lf --source-map --source-map-inline-sources --output dist/css/bootstrap.min.css dist/css/bootstrap.css", | ||
| "css-minify-night": "cleancss -O1 --format breakWith=lf --source-map --source-map-inline-sources --output dist/css/bootstrap-night.min.css dist/css/bootstrap-night.css", | ||
| "css-minify-nightfall": "cleancss -O1 --format breakWith=lf --source-map --source-map-inline-sources --output dist/css/bootstrap-nightfall.min.css dist/css/bootstrap-nightfall.css", | ||
| "css-minify-nightshade": "cleancss -O1 --format breakWith=lf --source-map --source-map-inline-sources --output dist/css/bootstrap-nightshade.min.css dist/css/bootstrap-nightshade.css", | ||
| "css-minify-dark": "cleancss -O1 --format breakWith=lf --source-map --source-map-inline-sources --output dist/css/bootstrap-dark.min.css dist/css/bootstrap-dark.css", | ||
| "DISABLED_css-minify-main": "cleancss -O1 --format breakWith=lf --source-map --source-map-inline-sources --output dist/css/bootstrap.min.css dist/css/bootstrap.css", | ||
| "DISABLED_css-minify-night": "cleancss -O1 --format breakWith=lf --source-map --source-map-inline-sources --output dist/css/bootstrap-night.min.css dist/css/bootstrap-night.css", | ||
| "DISABLED_css-minify-nightfall": "cleancss -O1 --format breakWith=lf --source-map --source-map-inline-sources --output dist/css/bootstrap-nightfall.min.css dist/css/bootstrap-nightfall.css", | ||
| "DISABLED_css-minify-nightshade": "cleancss -O1 --format breakWith=lf --source-map --source-map-inline-sources --output dist/css/bootstrap-nightshade.min.css dist/css/bootstrap-nightshade.css", | ||
| "DISABLED_css-minify-dark": "cleancss -O1 --format breakWith=lf --source-map --source-map-inline-sources --output dist/css/bootstrap-dark.min.css dist/css/bootstrap-dark.css", | ||
| "css-minify-main": "cleancss -O1 --format breakWith=lf --output dist/css/bootstrap.min.css dist/css/bootstrap.css", | ||
| "css-minify-night": "cleancss -O1 --format breakWith=lf --output dist/css/bootstrap-night.min.css dist/css/bootstrap-night.css", | ||
| "css-minify-nightfall": "cleancss -O1 --format breakWith=lf --output dist/css/bootstrap-nightfall.min.css dist/css/bootstrap-nightfall.css", | ||
| "css-minify-nightshade": "cleancss -O1 --format breakWith=lf --output dist/css/bootstrap-nightshade.min.css dist/css/bootstrap-nightshade.css", | ||
| "css-minify-dark": "cleancss -O1 --format breakWith=lf --output dist/css/bootstrap-dark.min.css dist/css/bootstrap-dark.css", | ||
| "css-lint": "npm-run-all --continue-on-error --parallel css-lint-*", | ||
| "css-lint-stylelint": "stylelint \"**/*.scss\" --cache --cache-location .cache/.stylelintcache --rd", | ||
| "css-lint-vars": "fusv scss/", | ||
| "js": "npm-run-all js-compile js-minify", | ||
| "js-compile": "rollup --environment MIN:false --config build/rollup.config.js --sourcemap", | ||
| "js-minify": "rollup --environment MIN:true --config build/rollup.config.js --sourcemap", | ||
| "js-lint": "eslint --cache --cache-location .cache/.eslintcache --report-unused-disable-directives .", | ||
| "js": "npm-run-all js-wipe js-compile js-minify", | ||
| "js-wipe": "rimraf ./dist/js", | ||
| "js-compile": "tsc -p build", | ||
| "DISABLED_js-minify": "terser -c -m -o ./dist/js/darkmode.min.js ./dist/js/darkmode.js --source-map \"content='./dist/js/darkmode.js.map'\"", | ||
| "js-minify": "terser -c -m -o ./dist/js/darkmode.min.js ./dist/js/darkmode.js", | ||
| "js-lint": "eslint --cache --cache-location .cache/.eslintcache --report-unused-disable-directives . --ext .ts", | ||
| "watch": "npm-run-all --parallel watch-*", | ||
| "watch-css-main": "nodemon --watch scss/ --ext scss --exec \"npm-run-all css-lint css-compile css-prefix && browser-sync reload\"", | ||
| "watch-js-main": "nodemon --watch js/src/ --ext js --exec \"npm-run-all js-lint js-compile js-minify && browser-sync reload\"", | ||
| "watch-js-main": "nodemon --watch js/src/ --ext ts --exec \"npm-run-all js-lint js-compile js-minify docs-js-* && browser-sync reload\"", | ||
| "watch-examples": "nodemon --watch examples/ --ext html --exec \"browser-sync reload\"", | ||
| "watch-root": "nodemon --watch . --ext html --exec \"browser-sync reload\"", | ||
| "map-dark-vars": "npm-run-all --parallel map-dark-vars-*", | ||
| "docs": "npm-run-all --parallel docs-js-*", | ||
| "docs-js-darkmode": "documentation build js/src/darkmode.ts --parse-extension ts -f md -o docs/darkmode.js.md --markdown-toc false --shallow true", | ||
| "map-dark-vars-alt-to-core": "node ./build/make-dark-map.js ./build/dark-map-list.json '-alt' '' > ./scss/dark/_variables-map-alt-to-core.scss" | ||
@@ -53,3 +65,3 @@ }, | ||
| "scss/**/*.scss", | ||
| "js/**/*.js", | ||
| "js/src/*.ts", | ||
| "README.md", | ||
@@ -74,17 +86,9 @@ "LICENSE.md" | ||
| "devDependencies": { | ||
| "@babel/core": "^7.12.10", | ||
| "@babel/plugin-proposal-class-properties": "^7.12.1", | ||
| "@babel/plugin-proposal-private-methods": "^7.12.1", | ||
| "@babel/plugin-transform-async-to-generator": "^7.12.1", | ||
| "@babel/plugin-transform-regenerator": "^7.12.1", | ||
| "@babel/preset-env": "^7.12.11", | ||
| "@rollup/plugin-babel": "^5.2.3", | ||
| "@rollup/plugin-commonjs": "^17.1.0", | ||
| "@rollup/plugin-node-resolve": "^11.1.1", | ||
| "@rollup/plugin-replace": "^2.3.4", | ||
| "@typescript-eslint/eslint-plugin": "^4.14.2", | ||
| "@typescript-eslint/parser": "^4.14.2", | ||
| "autoprefixer": "^9.8.6", | ||
| "babel-eslint": "^10.1.0", | ||
| "browser-sync": "^2.26.14", | ||
| "clean-css-cli": "^4.3.0", | ||
| "cross-env": "^7.0.3", | ||
| "documentation": "^13.1.1", | ||
| "eslint": "^7.19.0", | ||
@@ -99,9 +103,8 @@ "eslint-config-xo": "^0.34.0", | ||
| "postcss-cli": "^8.3.1", | ||
| "rollup": "^2.38.3", | ||
| "rollup-plugin-eslint": "^7.0.0", | ||
| "rollup-plugin-terser": "^7.0.2", | ||
| "rimraf": "^3.0.2", | ||
| "sass": "^1.32.6", | ||
| "stylelint": "^13.9.0", | ||
| "stylelint-config-twbs-bootstrap": "^2.1.0", | ||
| "terser": "^5.5.1" | ||
| "terser": "^5.5.1", | ||
| "typescript": "^4.1.3" | ||
| }, | ||
@@ -108,0 +111,0 @@ "dependencies": { |
@@ -27,4 +27,8 @@ # The Ancillary Guide to Dark Mode and Bootstrap 5 | ||
| * `bootstrap-night`, | ||
| * `bootsrtap-nightshade`, _and;_ | ||
| * [Quick Start Guide](docs/bootstrap-night.md) | ||
| * `bootstrap-nightshade`, | ||
| * [Quick Start Guide](docs/bootstrap-nightshade.md) | ||
| * [`darkmode.js` Reference](docs/darkmode.js.md) | ||
| * `bootstrap-dark`. | ||
| * [Quick Start Guide](docs/bootstrap-dark.md) | ||
@@ -54,3 +58,3 @@ | ||
| ```bash | ||
| npm i -g autoprefixer browser-sync clean-css-cli cross-env find-unused-sass-variables nodemon npm-run-all postcss postcss-cli rtlcss sass stylelint stylelint-config-twbs-bootstrap rollup rollup-plugin-terser | ||
| npm i -g autoprefixer documentation browser-sync clean-css-cli cross-env eslint eslint-config-xo eslint-plugin-import eslint-plugin-unicorn find-unused-sass-variables imagemin-cli nodemon npm-run-all postcss-cli rtlcss sass stylelint stylelint-config-twbs-bootstrap svgo terser typescript | ||
| ``` | ||
@@ -63,3 +67,3 @@ | ||
| Developers can include the `scss`, `js` and `dist` folders into your own project with: | ||
| Developers can include the `scss` and `dist` folders into your own project with: | ||
@@ -78,14 +82,23 @@ `npm install bootstrap-dark-5` | ||
| * **`bootstrap-dark`** - the @media `perfers-color-scheme` variant | ||
| * [`https://cdn.jsdelivr.net/npm/bootstrap-dark-5@0.1/dist/css/bootstrap-dark.min.css`](https://cdn.jsdelivr.net/npm/bootstrap-dark-5@0.1/dist/css/bootstrap-dark.min.css) | ||
| * [`https://cdn.jsdelivr.net/npm/bootstrap-dark-5@0.1/dist/css/bootstrap-dark.css`](https://cdn.jsdelivr.net/npm/bootstrap-dark-5@0.1/dist/css/bootstrap-dark.css) | ||
| * Production / minified variant: | ||
| * [`https://cdn.jsdelivr.net/npm/bootstrap-dark-5@0.1/dist/css/bootstrap-dark.min.css`](https://cdn.jsdelivr.net/npm/bootstrap-dark-5@0.1/dist/css/bootstrap-dark.min.css) | ||
| * Development / Debug variant: | ||
| * [`https://cdn.jsdelivr.net/npm/bootstrap-dark-5@0.1/dist/css/bootstrap-dark.css`](https://cdn.jsdelivr.net/npm/bootstrap-dark-5@0.1/dist/css/bootstrap-dark.css) | ||
| * Also, read the [Quick Start Guide](docs/bootstrap-dark.md). | ||
| * **`bootstrap-nightshade`** - the `html.body` css class + JS library variant | ||
| * [`https://cdn.jsdelivr.net/npm/bootstrap-dark-5@0.1/dist/css/bootstrap-night.min.css`](https://cdn.jsdelivr.net/npm/bootstrap-dark-5@0.1/css/dist/bootstrap-night.min.css) | ||
| * [`https://cdn.jsdelivr.net/npm/bootstrap-dark-5@0.1/dist/js/darkmode.min.js`](https://cdn.jsdelivr.net/npm/bootstrap-dark-5@0.1/dist/js/darkmode.min.js) | ||
| * [`https://cdn.jsdelivr.net/npm/bootstrap-dark-5@0.1/dist/css/bootstrap-night.css`](https://cdn.jsdelivr.net/npm/bootstrap-dark-5@0.1/dist/css/bootstrap-night.css) | ||
| * [`https://cdn.jsdelivr.net/npm/bootstrap-dark-5@0.1/dist/js/darkmode.js`](https://cdn.jsdelivr.net/npm/bootstrap-dark-5@0.1/dist/js/darkmode.js) | ||
| * Production / minified variants: | ||
| * [`https://cdn.jsdelivr.net/npm/bootstrap-dark-5@0.1/dist/css/bootstrap-nightshade.min.css`](https://cdn.jsdelivr.net/npm/bootstrap-dark-5@0.1/dist/css/bootstrap-nightshade.min.css) | ||
| * [`https://cdn.jsdelivr.net/npm/bootstrap-dark-5@0.1/dist/js/darkmode.min.js`](https://cdn.jsdelivr.net/npm/bootstrap-dark-5@0.1/dist/js/darkmode.min.js) | ||
| * Development / Debug variants: | ||
| * [`https://cdn.jsdelivr.net/npm/bootstrap-dark-5@0.1/dist/css/bootstrap-nightshade.css`](https://cdn.jsdelivr.net/npm/bootstrap-dark-5@0.1/dist/css/bootstrap-nightshade.css) | ||
| * [`https://cdn.jsdelivr.net/npm/bootstrap-dark-5@0.1/dist/js/darkmode.js`](https://cdn.jsdelivr.net/npm/bootstrap-dark-5@0.1/dist/js/darkmode.js) | ||
| * Also, read the [Quick Start Guide](docs/bootstrap-nightshade.md) and the [`darkmode.js` Reference](docs/darkmode.js.md). | ||
| * **`bootstrap-night`** - that dark theme only variant | ||
| * [`https://cdn.jsdelivr.net/npm/bootstrap-dark-5@0.1/dist/css/bootstrap-night.min.css`](https://cdn.jsdelivr.net/npm/bootstrap-dark-5@0.1/dist/css.bootstrap-night.min.css) | ||
| * [`https://cdn.jsdelivr.net/npm/bootstrap-dark-5@0.1/dist/css/bootstrap-night.css`](https://cdn.jsdelivr.net/npm/bootstrap-dark-5@0.1/dist/css/bootstrap-night.css) | ||
| * Production / minified variant: | ||
| * [`https://cdn.jsdelivr.net/npm/bootstrap-dark-5@0.1/dist/css/bootstrap-night.min.css`](https://cdn.jsdelivr.net/npm/bootstrap-dark-5@0.1/dist/css.bootstrap-night.min.css) | ||
| * Development / Debug variant: | ||
| * [`https://cdn.jsdelivr.net/npm/bootstrap-dark-5@0.1/dist/css/bootstrap-night.css`](https://cdn.jsdelivr.net/npm/bootstrap-dark-5@0.1/dist/css/bootstrap-night.css) | ||
| * Also, read the [Quick Start Guide](docs/bootstrap-night.md). | ||
@@ -95,13 +108,13 @@ * Source etc. are [here](https://cdn.jsdelivr.net/gh/vinorodrigues/bootstrap-dark-5/), but I recommend using [GitHub](https://github.com/vinorodrigues/bootstrap-dark-5). | ||
| ## Further reading | ||
| ## Further Reading | ||
| **Must reads** for all developers wanting to write for dark mode: | ||
| * web.dev, Thomas Steiner ([@tomayac](https://github.com/tomayac)), Jun 27, 2019 *(updated Jun 9, 2020)*, [prefers-color-scheme: Hello darkness, my old friend](https://web.dev/prefers-color-scheme/) | ||
| * web.dev, Thomas Steiner ([@tomayac](https://github.com/tomayac)), Jun 27, 2019 *(updated Jun 9, 2020)*, "[prefers-color-scheme: Hello darkness, my old friend](https://web.dev/prefers-color-scheme/)" | ||
| * web.dev, Thomas Steiner ([@tomayac](https://github.com/tomayac)), Apr 8, 2020 *(updated Jun 16, 2020)*, [Improved dark mode default styling with the color-scheme CSS property and the corresponding meta tag](https://web.dev/color-scheme/) | ||
| * web.dev, Thomas Steiner ([@tomayac](https://github.com/tomayac)), Apr 8, 2020 *(updated Jun 16, 2020)*, "[Improved dark mode default styling with the color-scheme CSS property and the corresponding meta tag](https://web.dev/color-scheme/)" | ||
| * CSS-TRICKS, Adhuham, Sep 9, 2020 [A Complete Guide to Dark Mode on the Web](https://css-tricks.com/a-complete-guide-to-dark-mode-on-the-web/) | ||
| * CSS-TRICKS, Adhuham, Sep 9, 2020 "[A Complete Guide to Dark Mode on the Web](https://css-tricks.com/a-complete-guide-to-dark-mode-on-the-web/)" | ||
| * My bit about [images and other considerations](https://vinorodrigues.github.io/bootstrap-dark/readme.html#but-thats-not-enough) in my [.. Definitive Guide ..](http://vinorodrigues.github.io/bootstrap-dark) piece. | ||
| * My bit about [images and other considerations](https://vinorodrigues.github.io/bootstrap-dark/readme.html#but-thats-not-enough) in my "[.. Definitive Guide ..](http://vinorodrigues.github.io/bootstrap-dark)" piece. | ||
@@ -108,0 +121,0 @@ |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Fixed alerts
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
Improved metrics
- Dev dependency count
- decreased by-29.03%
22
- Number of lines in readme file
- increased by11.61%
125
- Number of medium supply chain risk alerts
- decreased by-100%
0
Worsened metrics
- Total package byte prevSize
- decreased by-32.1%
4383435
- Number of package files
- decreased by-10.59%
76
- Lines of code
- decreased by-6.46%
41634
No dependency changes