jake/jarv.is
1
Fork 0
mirror of https://github.com/jakejarvis/jarv.is.git synced 2025-07-21 11:01:17 -04:00
Code Issues Activity

update dark mode post with NPM module details

Browse Source
This commit is contained in:
Jake Jarvis
2021-10-15 14:42:40 -04:00
parent a74f01ae6f
commit f17623ea1e
2 changed files with 47 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
content/notes/dark-mode/example.html
View File

@@ -41,7 +41,7 @@
<body class="light"> <body class="light">
<h1>Welcome to the dark side 🌓</h1> <h1>Welcome to the dark side 🌓</h1>
<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> <script>
/*! Dark mode switcheroo | MIT License | jrvs.io/darkmode */ /*! Dark mode switcheroo | MIT License | jrvs.io/darkmode */
// Note: Using sessionStorage instead of localStorage for the iframe'd example, since we're sandboxed from the parent window here. // Note: Using sessionStorage instead of localStorage for the iframe'd example, since we're sandboxed from the parent window here.

48
content/notes/dark-mode/index.md
View File

@@ -1,10 +1,11 @@
--- ---
title: "How To: Add Dark Mode to a Website 🌓" title: "How To: Add Dark Mode to a Website 🌓"
date: 2020-04-29 12:14:09-0400 date: 2021-10-15 08:56:33-0400
description: "Simple dark mode switching using local storage, OS preference detection, and minimal JavaScript." description: "Simple dark mode switching using local storage, OS preference detection, and minimal JavaScript."
tags: tags:
- CSS
- JavaScript - JavaScript
- NPM
- CSS
- Dark Mode - Dark Mode
- How To - How To
- Tutorial - Tutorial
@@ -45,6 +46,49 @@ A _very_ barebones example is embedded above ([view the source here](https://git
--- ---
### ⚡ Update: Now Available on [NPM](https://www.npmjs.com/package/dark-mode-switcheroo)! {#npm-module}
I have cleaned up this code a bit, added a few features, and packaged it as an [📦 NPM module](https://www.npmjs.com/package/dark-mode-switcheroo) (zero dependencies and still [only ~500 bytes](https://bundlephobia.com/package/dark-mode-switcheroo) minified and gzipped!). Here's a small snippet of the updated method for the browser (pulling the module from [UNPKG](https://unpkg.com/browse/dark-mode-switcheroo/)), but definitely [read the readme](https://github.com/jakejarvis/dark-mode#readme) for much more detail on the API.
```html
<button class="dark-mode-toggle" style="visibility: hidden;">
💡 Click to see the light... or not.
</button>
<script src="https://unpkg.com/dark-mode-switcheroo/dist/dark-mode.min.js"></script>
<script>
window.darkMode.init({
toggle: document.querySelector(".dark-mode-toggle"),
classes: {
light: "light",
dark: "dark",
},
default: "light",
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>
```
You can also install it [straight from NPM](https://www.npmjs.com/package/dark-mode-switcheroo) (`npm install dark-mode-switcheroo` or `yarn add dark-mode-switcheroo`) and simply include the ESM module, which works great when bundling using [Webpack](https://webpack.js.org/), [Browserify](https://browserify.org/), [Parcel](https://parceljs.org/), [esbuild](https://esbuild.github.io/), etc.
```js
import { init } from "dark-mode-switcheroo";
init({
// ...same options as browser code.
});
```
The [example HTML and CSS below](#html-css) is still helpful for reference.
---
### [Minified JS](https://raw.githubusercontent.com/jakejarvis/dark-mode-example/gh-pages/dark-mode.min.js) (410 bytes gzipped! 📦): {#minified-js} ### [Minified JS](https://raw.githubusercontent.com/jakejarvis/dark-mode-example/gh-pages/dark-mode.min.js) (410 bytes gzipped! 📦): {#minified-js}
<!-- prettier-ignore --> <!-- prettier-ignore -->