From 4881b908e9bddff3a8f18480b253304d85b3675c Mon Sep 17 00:00:00 2001 From: Jake Jarvis Date: Wed, 4 Aug 2021 15:00:26 -0400 Subject: [PATCH] expose an init function instead of exporting as module default --- .prettierrc | 2 +- README.md | 4 ++-- example/index.html | 4 ++-- src/index.d.ts | 6 ++++-- src/index.js | 32 +++++++++++++++----------------- webpack.config.js | 2 +- 6 files changed, 25 insertions(+), 25 deletions(-) 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"), }, ],