jake/dark-mode
1
Fork 0
mirror of https://github.com/jakejarvis/dark-mode.git synced 2025-04-25 17:35:21 -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
Signed by: jake
GPG Key ID: 2B0C9CF251E69A39
6 changed files with 25 additions and 25 deletions
Show Stats 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,
"semi": true,
"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>
window.darkMode({
window.darkMode.init({
toggle: document.querySelector(".dark-mode-toggle"),
classes: {
light: "light",
@ -53,7 +53,7 @@ import darkMode from "@jakejarvis/dark-mode";
// or:
// const darkMode = require("@jakejarvis/dark-mode");
darkMode({
darkMode.init({
toggle: document.querySelector(".dark-mode-toggle"),
classes: {
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>
<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>
window.darkMode({
window.darkMode.init({
toggle: document.querySelector(".dark-mode-toggle"),
});
</script>

6
src/index.d.ts vendored
View File

@ -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<DarkModeOptions>): void;
export function init(options?: Partial<DarkModeOptions>): void;

32
src/index.js
View File

@ -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 <body> 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;

2
webpack.config.js
View File

@ -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"),
},
],