2 files changed, 25 insertions, 0 deletions
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;
+};