Merge pull request #45 from olafsulich/develop

✨ Add useTheme hook

Author: olafsulich

README.md

@@ -82,6 +82,8 @@
 
 - [`useMeasure`](./docs/useMeasure.md) — gives sizes of an element and its position
 
+- [`useTheme`](./docs/useTheme.md) — dynamically change the appearance of your app using CSS variables with light/dark mode.
+
   <br />
 
 ## Technologies

docs/useTheme.md

@@ -0,0 +1,53 @@
+# `useEventListener`
+
+This hook helps you implement light/dark mode in your app, based on prefers-color-scheme and localStorage.
+
+## Usage
+
+Component:
+
+```jsx
+import { useEventListener } from 'use-haki';
+
+const App = () => {
+  const [theme, setTheme] = useTheme();
+
+  return (
+      <section>
+      <h2>Current theme: {theme}</h2>
+      <button onClick={() => setTheme('dark')}>Set dark theme<button>
+      <button onClick={() => setTheme('light')}>Set light theme<button>
+      <section />
+  )
+};
+```
+
+CSS:
+
+```css
+html[data-theme='dark'] {
+  --text-color: #f0f0f0;
+  --background-body: #1c1c1c;
+  --other-var: #111111;
+}
+
+html[data-theme='light'] {
+  --text-color: #111111;
+  --background-body: #fafafa;
+  --other-var: #ffffff;
+}
+
+body {
+  color: var(--text-color);
+  background-color: var(--background-body);
+}
+```
+
+## Reference
+
+```ts
+const [theme, setTheme] = useTheme();
+```
+
+- **theme** - current theme, based on prefers-color-scheme
+- **setTheme** - function that set theme

src/index.ts

@@ -17,3 +17,4 @@ export { default as useDateTimeFormat } from './useDateTimeFormat';
 export { default as usePluralRules } from './usePluralRules';
 export { default as useIntersection } from './useIntersection';
 export { default as useMeasure } from './useMeasure';
+export { default as useTheme } from './useTheme';

src/useTheme.ts

@@ -0,0 +1,17 @@
+import { useState, useLayoutEffect } from 'react';
+
+const preferDarkSchema = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
+const defaultTheme = preferDarkSchema ? 'dark' : 'light';
+
+const useTheme = () => {
+  const [theme, setTheme] = useState(localStorage.getItem('theme') || defaultTheme);
+
+  useLayoutEffect(() => {
+    document.documentElement.setAttribute('data-theme', theme);
+    localStorage.setItem('theme', theme);
+  }, [theme]);
+
+  return [theme, setTheme];
+};
+
+export default useTheme;