docs: add links to other packages

Author: DylanVann

packages/docs/markdown/features.md

@@ -1,5 +1,7 @@
 - No flicker.
-- Framework agnostic, supports **React** | **Vue** | **Svelte** | etc.
+- Framework agnostic, easily supports **React** | **Vue** | **Svelte** | etc.
+  - [`react-perfect-dark-mode`](https://github.com/DylanVann/perfect-dark-mode/tree/main/packages/react-perfect-dark-mode)
+  - [`gatsby-plugin-perfect-dark-mode`](https://github.com/DylanVann/perfect-dark-mode/tree/main/packages/gatsby-plugin-perfect-dark-mode)
 - Supports SSR.
 - Supports no-js.
 - Tiny, less than 1kb.

packages/gatsby-plugin-perfect-dark-mode/README.md

@@ -0,0 +1,92 @@
+# gatsby-plugin-perfect-dark-mode
+
+![Example!](https://perfect-dark-mode-gatsby.netlify.app/)
+
+## Installation
+
+```bash
+yarn add gatsby-plugin-perfect-dark-mode
+```
+
+## Setup
+
+Add `gatsby-plugin-perfect-dark-mode` to your `gatsby-config.js` file.
+
+You'll need to add some CSS.
+
+```css
+@media (prefers-color-scheme: light) {
+  :root {
+    --color-background: #fff;
+    --color-primary: #005b99;
+    --color-text: #2e353f;
+    --color-text-light: #4f5969;
+    --color-heading: #1a202c;
+    --color-heading-black: black;
+    --color-accent: #d1dce5;
+  }
+}
+
+:root.light {
+  --color-background: #fff;
+  --color-primary: #005b99;
+  --color-text: #2e353f;
+  --color-text-light: #4f5969;
+  --color-heading: #1a202c;
+  --color-heading-black: black;
+  --color-accent: #d1dce5;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --color-background: #000;
+    --color-primary: #005b99;
+    --color-text: #fff;
+    --color-text-light: #fff;
+    --color-heading: #fff;
+    --color-heading-black: white;
+    --color-accent: #d1dce5;
+  }
+}
+
+:root.dark {
+  --color-background: #000;
+  --color-primary: #005b99;
+  --color-text: #fff;
+  --color-text-light: #fff;
+  --color-heading: #fff;
+  --color-heading-black: white;
+  --color-accent: #d1dce5;
+}
+
+:root {
+  color: var(--color);
+  background: var(--color-background);
+}
+```
+
+## Usage
+
+In a component you can use the hook:
+
+```js
+import { usePerfectDarkMode } from 'gatsby-plugin-perfect-dark-mode'
+
+export const Toggle = () => {
+  const { mode, updateMode } = usePerfectDarkMode()
+  const [visible, setVisible] = useState(false)
+  useEffect(() => setVisible(true), [])
+  return () => (
+    <button
+      style={{ visibility: visible ? 'visible' : 'hidden' }}
+      onClick={() =>
+        updateMode(
+          (mode, modes, modeIndex) => modes[(modeIndex + 1) % modes.length],
+        )
+      }
+    >
+      {mode}
+    </button>
+  )
+}
+```

packages/react-perfect-dark-mode/README.md

@@ -0,0 +1,31 @@
+# react-perfect-dark-mode
+
+## Installation
+
+```bash
+yarn add react-perfect-dark-mode
+```
+
+## Usage
+
+```js
+import { usePerfectDarkMode } from 'gatsby-plugin-perfect-dark-mode'
+
+export const Toggle = () => {
+  const { mode, updateMode } = usePerfectDarkMode()
+  const [visible, setVisible] = useState(false)
+  useEffect(() => setVisible(true), [])
+  return () => (
+    <button
+      style={{ visibility: visible ? 'visible' : 'hidden' }}
+      onClick={() =>
+        updateMode(
+          (mode, modes, modeIndex) => modes[(modeIndex + 1) % modes.length],
+        )
+      }
+    >
+      {mode}
+    </button>
+  )
+}
+```