jake/dark-mode
1
Fork 0
mirror of https://github.com/jakejarvis/dark-mode.git synced 2025-06-27 17:55:40 -04:00
Code Issues Releases Activity

expose an init function instead of exporting as module default

Browse Source
This commit is contained in:
Jake Jarvis
2021-08-04 15:00:26 -04:00
parent 092c833d97
commit 4881b908e9
6 changed files with 25 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
.prettierrc
View File

@ -1,5 +1,5 @@
{ {
"printWidth": 70, "printWidth": 120,
"tabWidth": 2, "tabWidth": 2,
"semi": true, "semi": true,
"singleQuote": false "singleQuote": false

4
README.md
View File

@ -28,7 +28,7 @@ Very simple CSS dark/light mode toggler with saved preference via local storage
<script src="https://unpkg.com/@jakejarvis/dark-mode/dist/index.js"></script> <script src="https://unpkg.com/@jakejarvis/dark-mode/dist/index.js"></script>
<script> <script>
window.darkMode({ window.darkMode.init({
toggle: document.querySelector(".dark-mode-toggle"), toggle: document.querySelector(".dark-mode-toggle"),
classes: { classes: {
light: "light", light: "light",
@ -53,7 +53,7 @@ import darkMode from "@jakejarvis/dark-mode";
// or: // or:
// const darkMode = require("@jakejarvis/dark-mode"); // const darkMode = require("@jakejarvis/dark-mode");
darkMode({ darkMode.init({
toggle: document.querySelector(".dark-mode-toggle"), toggle: document.querySelector(".dark-mode-toggle"),
classes: { classes: {
light: "light", light: "light",

4
example/index.html
View File

@ -11,11 +11,11 @@
<button class="dark-mode-toggle">💡 Click to see the light... or not.</button> <button class="dark-mode-toggle">💡 Click to see the light... or not.</button>
<p><a href="https://github.com/jakejarvis/dark-mode-example" target="_blank" rel="noopener">View the source code</a> or <a href="https://jarv.is/notes/dark-mode/" target="_blank" rel="noopener">read the post</a>.</p> <p><a href="https://github.com/jakejarvis/dark-mode" target="_blank" rel="noopener">View the source code</a> or <a href="https://jarv.is/notes/dark-mode/" target="_blank" rel="noopener">read the post</a>.</p>
<script src="../dist/index.js"></script> <script src="../dist/index.js"></script>
<script> <script>
window.darkMode({ window.darkMode.init({
toggle: document.querySelector(".dark-mode-toggle"), toggle: document.querySelector(".dark-mode-toggle"),
}); });
</script> </script>

6
src/index.d.ts vendored
View File

@ -1,8 +1,10 @@
interface DarkModeOptions { export as namespace darkMode;
export interface DarkModeOptions {
toggle?: HTMLElement; toggle?: HTMLElement;
classes?: { dark: string, light: string }; classes?: { dark: string, light: string };
default?: string; default?: string;
storageKey?: string; storageKey?: string;
} }
export default function (options?: Partial<DarkModeOptions>): void; export function init(options?: Partial<DarkModeOptions>): void;

32
src/index.js
View File

@ -1,6 +1,6 @@
const storageAvailable = require("storage-available"); const storageAvailable = require("storage-available");
module.exports = function (options) { const initializeDarkMode = function (options) {
// { toggle, classes: { light, dark }, default, storageKey } // { toggle, classes: { light, dark }, default, storageKey }
options = options || {}; options = options || {};
@ -24,12 +24,12 @@ module.exports = function (options) {
let active = defaultTheme === dark; let active = defaultTheme === dark;
// receives a class name and switches <body> to it // receives a class name and switches <body> to it
const activateTheme = function (theme, save = false) { const activateTheme = function (theme, remember = false) {
document.body.classList.remove(dark, light); document.body.classList.remove(dark, light);
document.body.classList.add(theme); document.body.classList.add(theme);
active = theme === dark; active = theme === dark;
if (storageEnabled && save) { if (storageEnabled && remember) {
localStorage.setItem(storageKey, theme); localStorage.setItem(storageKey, theme);
} }
}; };
@ -53,20 +53,16 @@ module.exports = function (options) {
} }
// real-time switching if supported by OS/browser // real-time switching if supported by OS/browser
window window.matchMedia(prefers("dark")).addEventListener("change", function (e) {
.matchMedia(prefers("dark")) if (e.matches) {
.addEventListener("change", function (e) { activateTheme(dark);
if (e.matches) { }
activateTheme(dark); });
} window.matchMedia(prefers("light")).addEventListener("change", function (e) {
}); if (e.matches) {
window activateTheme(light);
.matchMedia(prefers("light")) }
.addEventListener("change", function (e) { });
if (e.matches) {
activateTheme(light);
}
});
} else if (pref === dark || pref === light) { } else if (pref === dark || pref === light) {
// if user already explicitly toggled in the past, restore their preference // if user already explicitly toggled in the past, restore their preference
activateTheme(pref); activateTheme(pref);
@ -91,3 +87,5 @@ module.exports = function (options) {
}); });
} }
}; };
module.exports.init = initializeDarkMode;

2
webpack.config.js
View File

@ -22,7 +22,7 @@ module.exports = {
new CopyPlugin({ new CopyPlugin({
patterns: [ 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"), to: path.join(__dirname, "dist", "index.d.ts"),
}, },
], ],