jake/dark-mode
1
Fork 0
mirror of https://github.com/jakejarvis/dark-mode.git synced 2025-04-26 01:45:24 -04:00
Code Issues Releases Activity

Update README

Browse Source
This commit is contained in:
Jake Jarvis 2021-08-05 08:12:49 -04:00
parent cfa1f575e3
commit 6bf29bca6f
Signed by: jake
GPG Key ID: 2B0C9CF251E69A39
2 changed files with 21 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
README.md
View File

@ -16,17 +16,17 @@ Very simple CSS dark/light mode toggler with saved preference via local storage
`darkMode.init([...options])` `darkMode.init([...options])`
- **toggle:** The clickable HTML element used to toggle between the two themes. (optional, default: `null`) - **`toggle`**: The clickable [HTMLElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement) used to toggle between the two themes. (optional, default: `null`)
- **classes:** An object containing the `<body>` class names for the light and dark themes. (optional, default: `{ light: "light", dark: "dark" }`) - **`classes`**: An object containing the `<body>` class names for the light and dark themes. (optional, default: `{ light: "light", dark: "dark" }`)
- **default:** The initial `<body>` class hard-coded into the HTML template. (optional, default: `"light"`) - **`default`**: The initial `<body>` class hard-coded into the HTML template. (optional, default: `"light"`)
- **storageKey:** Name of the `localStorage` key holding the user's preference. (optional, default: `"dark_mode_pref"`) - **`storageKey`**: Name of the `localStorage` key holding the user's preference. (optional, default: `"dark_mode_pref"`)
- **onInit(toggle?)** Callback function executed at the end of initialization. The toggle above is passed in if set. (optional, default: `null`) - **`onInit([toggle])`**: Callback function executed at the end of initialization. The toggle above is passed in if set. (optional, default: `null`)
- **onChange(theme?, toggle?)** Callback function executed when theme is switched. The new theme and the toggle above (if set) are passed in. (optional, default: `null`) - **`onChange([theme, toggle])`**: Callback function executed when theme is switched. The new theme and the toggle above (if set) are passed in. (optional, default: `null`)
### Browser ### Browser
```html ```html
<button class="dark-mode-toggle">💡 Click to see the light... or not.</button> <button class="dark-mode-toggle" style="visibility: hidden;">💡 Click to see the light... or not.</button>
<script src="https://unpkg.com/@jakejarvis/dark-mode/dist/dark-mode.min.js"></script> <script src="https://unpkg.com/@jakejarvis/dark-mode/dist/dark-mode.min.js"></script>
<script> <script>
@ -38,6 +38,12 @@ Very simple CSS dark/light mode toggler with saved preference via local storage
}, },
default: "light", default: "light",
storageKey: "dark_mode_pref", storageKey: "dark_mode_pref",
onInit: function (toggle) {
toggle.style.visibility = "visible"; // toggle appears now that we know JS is enabled
},
onChange: function (theme, toggle) {
console.log("Theme is now " + theme);
},
}); });
</script> </script>
``` ```
@ -56,13 +62,7 @@ yarn add @jakejarvis/dark-mode
import { init } from "@jakejarvis/dark-mode"; import { init } from "@jakejarvis/dark-mode";
init({ init({
toggle: document.querySelector(".dark-mode-toggle"), // ...same as browser.
classes: {
light: "light",
dark: "dark",
},
default: "light",
storageKey: "dark_mode_pref",
}); });
``` ```
@ -72,13 +72,7 @@ init({
const darkMode = require("@jakejarvis/dark-mode"); const darkMode = require("@jakejarvis/dark-mode");
darkMode.init({ darkMode.init({
toggle: document.querySelector(".dark-mode-toggle"), // ...same as browser.
classes: {
light: "light",
dark: "dark",
},
default: "light",
storageKey: "dark_mode_pref",
}); });
``` ```

9
example/index.html
View File

@ -47,13 +47,16 @@
<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> <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/dark-mode.js"></script> <!-- or use CDN: https://unpkg.com/@jakejarvis/dark-mode/dist/dark-mode.min.js --> <script src="../dist/dark-mode.min.js"></script> <!-- or use CDN: https://unpkg.com/@jakejarvis/dark-mode/dist/dark-mode.min.js -->
<script> <script>
window.darkMode.init({ window.darkMode.init({
toggle: document.querySelector(".dark-mode-toggle"), toggle: document.querySelector(".dark-mode-toggle"),
onInit: function (t) { onInit: function (e) {
t.style.visibility = "visible"; e.style.visibility = "visible";
console.log("Toggle is visible now that we know user has JS enabled."); console.log("Toggle is visible now that we know user has JS enabled.");
},
onChange: function (t) {
console.log("Set theme to " + t);
} }
}); });
</script> </script>