blue-web 1.12.0 → 1.13.0

package/README.md

@@ -42,8 +42,9 @@ Here is an example of how to override variables using Sass:
 // Override Bootstrap Sass variable
 $primary: tomato;
 
-// Override Blue Web Sass variable
+// Override Blue Web Sass variables
 $theme: orange;
+$theme-dark: darken(orange, 10%);
 
 // Stylesheet for Blue Web. Already contains Bootstrap.
 @import "~blue-web/dist/style";

package/dist/js/color-mode.bundle.js

@@ -0,0 +1 @@
+(()=>{"use strict";const e=()=>localStorage.getItem("blue-web-color-mode"),t=()=>e()||(window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"),o=()=>{const e=t();"auto"===e&&window.matchMedia("(prefers-color-scheme: dark)").matches?document.documentElement.setAttribute("data-bs-theme","dark"):document.documentElement.setAttribute("data-bs-theme",e)};window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change",(()=>{localStorage.removeItem("blue-web-color-mode"),o()})),o(),window.blueWeb=window.blueWeb||{},window.blueWeb.colorMode={getStored:e,getPreferred:t,set:e=>{"auto"===e?localStorage.removeItem("blue-web-color-mode"):localStorage.setItem("blue-web-color-mode",e),o()},init:o}})();

package/dist/js/color-mode.d.ts

@@ -0,0 +1,4 @@
+export declare const getStored: () => string | null;
+export declare const getPreferred: () => string;
+export declare const set: (colorMode: string) => void;
+export declare const init: () => void;

package/dist/js/color-mode.js

@@ -0,0 +1,47 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.set = exports.init = exports.getStored = exports.getPreferred = void 0;
+const getStored = () => localStorage.getItem("blue-web-color-mode");
+exports.getStored = getStored;
+const getPreferred = () => {
+  const stored = getStored();
+  if (stored) {
+    return stored;
+  }
+  return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+};
+exports.getPreferred = getPreferred;
+const set = colorMode => {
+  if (colorMode === "auto") {
+    localStorage.removeItem("blue-web-color-mode");
+  } else {
+    localStorage.setItem("blue-web-color-mode", colorMode);
+  }
+  init();
+};
+exports.set = set;
+const init = () => {
+  const colorMode = getPreferred();
+  if (colorMode === "auto" && window.matchMedia("(prefers-color-scheme: dark)").matches) {
+    document.documentElement.setAttribute("data-bs-theme", "dark");
+  } else {
+    document.documentElement.setAttribute("data-bs-theme", colorMode);
+  }
+};
+exports.init = init;
+const onMatchMediaChange = () => {
+  localStorage.removeItem("blue-web-color-mode");
+  init();
+};
+window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", onMatchMediaChange);
+init();
+window.blueWeb = window.blueWeb || {};
+window.blueWeb.colorMode = {
+  getStored,
+  getPreferred,
+  set,
+  init
+};