feat(theme): implement dynamic theme switching based on system prefer…

…ences
Valik3201 · Jan 27, 2024 · 103190c · 103190c
1 parent 43c52e2
commit 103190c
Showing 1 changed file with 23 additions and 0 deletions.
diff --git a/src/components/Searchbar.jsx b/src/components/Searchbar.jsx
@@ -25,6 +25,29 @@ class Searchbar extends Component {
     ];
   }
 
+  componentDidMount() {
+    const prefersDarkMode = window.matchMedia(
+      '(prefers-color-scheme: dark)'
+    ).matches;
+
+    this.handleThemeChange(prefersDarkMode ? 'dark' : 'light');
+
+    window
+      .matchMedia('(prefers-color-scheme: dark)')
+      .addEventListener('change', this.handleSystemThemeChange);
+  }
+
+  componentWillUnmount() {
+    window
+      .matchMedia('(prefers-color-scheme: dark)')
+      .removeEventListener('change', this.handleSystemThemeChange);
+  }
+
+  handleSystemThemeChange = e => {
+    const prefersDarkMode = e.matches;
+    this.handleThemeChange(prefersDarkMode ? 'dark' : 'light');
+  };
+
   handleThemeChange = selectedTheme => {
     this.setState({ theme: selectedTheme });