v0.1.0

.gitignore

@@ -0,0 +1,5 @@
+.DS_Store
+/lib
+/node_modules
+yarn-debug.log*
+yarn-error.log*

.travis.yml

@@ -0,0 +1,5 @@
+language: node_js
+node_js: 10
+cache: yarn
+scripts:
+  - yarn prepack

CHANGELOG.md

@@ -0,0 +1,14 @@
+# Changelog
+
+All notable changes to this project will be documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
+and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+## Unreleased
+
+- Set theme in `document.body` or `document.documentElement` by default
+
+## [0.1.0](https://github.com/metonym/svelte-dark-mode/releases/tag/v0.1.0) - 2020-04-21
+
+- Initial release

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020-present Eric Liu
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,100 @@
+# svelte-dark-mode
+
+[![NPM][npm]][npm-url]
+[![Build][build]][build-badge]
+
+> Support dark mode in your Svelte apps.
+
+This component sets the theme based on the user’s preferred color scheme using [window.matchMedia](https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia).
+
+The preferred theme is persisted locally using [window.localStorage](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage).
+
+## Install
+
+```bash
+yarn add -D svelte-dark-mode
+```
+
+## Usage
+
+The `theme` is set to either `"dark"` or `"light"` based on the user’s system preference.
+
+```html
+<script>
+  import DarkMode from "svelte-dark-mode";
+
+  let theme;
+
+  $: document.body.className = theme; // "dark" or "light"
+</script>
+
+<style>
+  :global(.dark) {
+    background-color: #262626;
+    color: #f4f4f4;
+  }
+</style>
+
+<DarkMode bind:theme />
+```
+
+### Server-side rendering (SSR)
+
+If your app uses server-side rendering (SSR), you may need to employ the `afterUpdate` lifecycle hook because `document` is a browser API.
+
+```html
+<script>
+  import DarkMode from "svelte-dark-mode";
+  import { afterUpdate } from "svelte";
+
+  let theme;
+
+  afterUpdate(() => {
+    document.body.className = theme;
+  });
+</script>
+```
+
+### System preference change
+
+If the user changes their color scheme preference at the system level, the theme will be updated when the page is reloaded.
+
+### Custom `localStorage` key
+
+By default, this component uses `"theme"` as the key to persist the theme. Supply your own value through the `"key"` prop.
+
+```html
+<DarkMode key="custom-theme-key" />
+```
+
+```js
+localStorage.getItem("custom-theme-key"); // "dark" || "light"
+```
+
+## API
+
+| Property name | Value                                   |
+| :------------ | :-------------------------------------- |
+| theme         | `"dark"` or `"light"` (default: `null`) |
+| key           | `string` (default: `"theme"`)           |
+
+### Dispatched events
+
+```jsx
+<DarkMode
+  on:change={({ detail }) => {
+    console.log(detail.theme); // "dark" | "light"
+  }}
+/>
+```
+
+## [Changelog](CHANGELOG.md)
+
+## License
+
+[MIT](LICENSE)
+
+[npm]: https://img.shields.io/npm/v/svelte-dark-mode.svg?color=blue
+[npm-url]: https://npmjs.com/package/svelte-dark-mode
+[build]: https://travis-ci.com/metonym/svelte-dark-mode.svg?branch=master
+[build-badge]: https://travis-ci.com/metonym/svelte-dark-mode

demo/.gitignore

@@ -0,0 +1,5 @@
+.DS_Store
+/__sapper__
+/**/node_modules
+/public
+yarn-error.log

demo/gh-pages.js

@@ -0,0 +1 @@
+require("gh-pages").publish("public/svelte-dark-mode");

demo/package.json

@@ -0,0 +1,21 @@
+{
+  "version": "0.0.1",
+  "private": true,
+  "scripts": {
+    "develop": "sapper dev",
+    "build": "sapper export --basepath svelte-dark-mode",
+    "deploy": "node gh-pages"
+  },
+  "dependencies": {
+    "polka": "next",
+    "sirv": "^0.4.0"
+  },
+  "devDependencies": {
+    "@metonym/sapper": "^0.27.12",
+    "gh-pages": "^2.2.0",
+    "svelte": "^3.0.0",
+    "svelte-loader": "^2.9.0",
+    "webpack": "^4.7.0",
+    "svelte-dark-mode": "../"
+  }
+}

demo/src/client.js

@@ -0,0 +1,3 @@
+import * as sapper from "@sapper/app";
+
+sapper.start({ target: document.querySelector("#sapper") });

demo/src/routes/_error.svelte

@@ -0,0 +1,18 @@
+<script>
+  export let status;
+  export let error;
+
+  const dev = process.env.NODE_ENV === "development";
+</script>
+
+<svelte:head>
+  <title>{status}</title>
+</svelte:head>
+
+<h1>{status}</h1>
+
+<p>{error.message}</p>
+
+{#if dev && error.stack}
+  <pre>{error.stack}</pre>
+{/if}

demo/src/routes/_layout.svelte

@@ -0,0 +1,26 @@
+<style>
+  :global(*) {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+  }
+
+  :global(body) {
+    font-family: "Public Sans", sans-serif;
+    font-weight: 500;
+    overflow-y: scroll;
+    letter-spacing: 0.01rem;
+    color: #161616;
+  }
+
+  main {
+    position: relative;
+    max-width: 36rem;
+    padding: 1rem;
+    margin: 0 auto;
+  }
+</style>
+
+<main>
+  <slot />
+</main>

demo/src/routes/index.svelte

@@ -0,0 +1,78 @@
+<script>
+  import DarkMode from "svelte-dark-mode";
+  import { afterUpdate } from "svelte";
+
+  let theme;
+
+  afterUpdate(() => {
+    document.body.className = theme;
+  });
+
+  $: switchTheme = theme === "dark" ? "light" : "dark";
+</script>
+
+<style>
+  :global(body) {
+    line-height: 1.42;
+  }
+
+  :global(main > *) {
+    margin-bottom: 1.5rem;
+  }
+
+  :global(.dark) {
+    background-color: #262626;
+    color: #f4f4f4;
+  }
+
+  :global(.dark a) {
+    color: #f4f4f4;
+  }
+
+  h1 {
+    font-size: 2.25rem;
+  }
+
+  button {
+    background: none;
+    border: 0;
+    font: inherit;
+    color: inherit;
+    font-size: 1.25rem;
+    text-decoration: underline;
+    cursor: pointer;
+  }
+</style>
+
+<svelte:head>
+  <title>svelte-dark-mode</title>
+</svelte:head>
+
+<DarkMode bind:theme />
+
+<h1>This is {theme} mode.</h1>
+
+<button
+  type="button"
+  on:click={() => {
+    theme = switchTheme;
+  }}>
+  Switch to {switchTheme} mode
+</button>
+
+<p>
+  This component uses
+  <a
+    href="https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage"
+    target="_blank"
+    rel="noopener noreferrer">
+    window.localStorage
+  </a>
+  to persist the theme locally. If you reload the page, the browser will
+  remember the theme.
+</p>
+
+<p>
+  If you change the color scheme in your System Preferences, the theme will
+  update accordingly when the page is reloaded.
+</p>

demo/src/server.js

@@ -0,0 +1,16 @@
+import sirv from "sirv";
+import polka from "polka";
+import * as sapper from "@sapper/server";
+
+const { PORT, NODE_ENV } = process.env;
+const dev = NODE_ENV === "development";
+
+polka()
+  .use(
+    dev ? "/" : "/svelte-dark-mode",
+    sirv("static", { dev }),
+    sapper.middleware()
+  )
+  .listen(PORT, (err) => {
+    if (err) console.log("error", err);
+  });

demo/src/template.html

@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
+    %sapper.base%
+    <link rel="icon" type="image/png" href="favicon.png" />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Public+Sans:wght@500;800&display=swap"
+      rel="stylesheet"
+    />
+    %sapper.styles% %sapper.head%
+  </head>
+  <body>
+    <div id="sapper">%sapper.html%</div>
+    %sapper.scripts%
+  </body>
+</html>