diff --git a/.prettierrc b/.prettierrc
index 11cac10..78e645a 100644
--- a/.prettierrc
+++ b/.prettierrc
@@ -1,5 +1,5 @@
{
- "printWidth": 70,
+ "printWidth": 120,
"tabWidth": 2,
"semi": true,
"singleQuote": false
diff --git a/README.md b/README.md
index f661440..7fb5ab6 100644
--- a/README.md
+++ b/README.md
@@ -28,7 +28,7 @@ Very simple CSS dark/light mode toggler with saved preference via local storage
diff --git a/src/index.d.ts b/src/index.d.ts
index 7c50063..755fd10 100644
--- a/src/index.d.ts
+++ b/src/index.d.ts
@@ -1,8 +1,10 @@
-interface DarkModeOptions {
+export as namespace darkMode;
+
+export interface DarkModeOptions {
toggle?: HTMLElement;
classes?: { dark: string, light: string };
default?: string;
storageKey?: string;
}
-export default function (options?: Partial): void;
+export function init(options?: Partial): void;
diff --git a/src/index.js b/src/index.js
index 2a0e634..37f42ca 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,6 +1,6 @@
const storageAvailable = require("storage-available");
-module.exports = function (options) {
+const initializeDarkMode = function (options) {
// { toggle, classes: { light, dark }, default, storageKey }
options = options || {};
@@ -24,12 +24,12 @@ module.exports = function (options) {
let active = defaultTheme === dark;
// receives a class name and switches to it
- const activateTheme = function (theme, save = false) {
+ const activateTheme = function (theme, remember = false) {
document.body.classList.remove(dark, light);
document.body.classList.add(theme);
active = theme === dark;
- if (storageEnabled && save) {
+ if (storageEnabled && remember) {
localStorage.setItem(storageKey, theme);
}
};
@@ -53,20 +53,16 @@ module.exports = function (options) {
}
// 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);
- }
- });
+ 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);
@@ -91,3 +87,5 @@ module.exports = function (options) {
});
}
};
+
+module.exports.init = initializeDarkMode;
diff --git a/webpack.config.js b/webpack.config.js
index 75c1582..9c8dd50 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -22,7 +22,7 @@ module.exports = {
new CopyPlugin({
patterns: [
{
- from: path.join(__dirname, "src/index.d.ts"),
+ from: path.join(__dirname, "src", "index.d.ts"),
to: path.join(__dirname, "dist", "index.d.ts"),
},
],