From 05f1dfc6896d3affa7c494a1b955f230d836a4b7 Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Fri, 27 Oct 2023 18:07:45 +0200
Subject: feat: replace next-themes with a custom ThemeProvider

To be honest, next-themes was working fine. However since I use a theme
provider for Prism code blocks, some code is duplicated between this
app and the library. So I prefer to use a custom Provider without the
options I don't need.
---
 src/utils/hooks/use-system-color-scheme/index.ts   |  1 +
 .../use-system-color-scheme.ts                     | 24 ++++++++++++++++++++++
 2 files changed, 25 insertions(+)
 create mode 100644 src/utils/hooks/use-system-color-scheme/index.ts
 create mode 100644 src/utils/hooks/use-system-color-scheme/use-system-color-scheme.ts

(limited to 'src/utils/hooks/use-system-color-scheme')

diff --git a/src/utils/hooks/use-system-color-scheme/index.ts b/src/utils/hooks/use-system-color-scheme/index.ts
new file mode 100644
index 0000000..78d1665
--- /dev/null
+++ b/src/utils/hooks/use-system-color-scheme/index.ts
@@ -0,0 +1 @@
+export * from './use-system-color-scheme';
diff --git a/src/utils/hooks/use-system-color-scheme/use-system-color-scheme.ts b/src/utils/hooks/use-system-color-scheme/use-system-color-scheme.ts
new file mode 100644
index 0000000..1956f32
--- /dev/null
+++ b/src/utils/hooks/use-system-color-scheme/use-system-color-scheme.ts
@@ -0,0 +1,24 @@
+import { useCallback, useState } from 'react';
+import { getThemeFromSystem } from '../../helpers';
+import { useMatchMedia } from '../use-match-media';
+
+export type SystemColorScheme = 'dark' | 'light';
+
+/**
+ * React hook to retrieve the system color scheme based on user preferences,
+ * and to watch for changes.
+ *
+ * @returns {SystemColorScheme} The system color scheme
+ */
+export const useSystemColorScheme = () => {
+  const [colorScheme, setColorScheme] =
+    useState<SystemColorScheme>(getThemeFromSystem);
+
+  const updateColorScheme = useCallback(() => {
+    setColorScheme(getThemeFromSystem);
+  }, []);
+
+  useMatchMedia('(prefers-color-scheme: dark)', updateColorScheme);
+
+  return colorScheme;
+};
-- 
cgit v1.2.3