Merge pull request #952 from amstiel/feature/system-theme

feat(#731): support theme sync with system

packages/bruno-app/src/components/Preferences/Theme/index.js

@@ -13,7 +13,7 @@ const Theme = () => {
       theme: storedTheme
     },
     validationSchema: Yup.object({
-      theme: Yup.string().oneOf(['light', 'dark']).required('theme is required')
+      theme: Yup.string().oneOf(['light', 'dark', 'system']).required('theme is required')
     }),
     onSubmit: (values) => {
       setStoredTheme(values.theme);
@@ -55,6 +55,22 @@ const Theme = () => {
           <label htmlFor="dark-theme" className="ml-1 cursor-pointer select-none">
             Dark
           </label>
+
+          <input
+            id="system-theme"
+            className="ml-4 cursor-pointer"
+            type="radio"
+            name="theme"
+            onChange={(e) => {
+              formik.handleChange(e);
+              formik.handleSubmit();
+            }}
+            value="system"
+            checked={formik.values.theme === 'system'}
+          />
+          <label htmlFor="system-theme" className="ml-1 cursor-pointer select-none">
+            System
+          </label>
         </div>
       </div>
     </StyledWrapper>

packages/bruno-app/src/providers/Theme/index.js

@@ -1,15 +1,23 @@
 import themes from 'themes/index';
 import useLocalStorage from 'hooks/useLocalStorage/index';
 
-import { createContext, useContext } from 'react';
+import { createContext, useContext, useEffect, useState } from 'react';
 import { ThemeProvider as SCThemeProvider } from 'styled-components';
 
 export const ThemeContext = createContext();
 export const ThemeProvider = (props) => {
   const isBrowserThemeLight = window.matchMedia('(prefers-color-scheme: light)').matches;
-  const [storedTheme, setStoredTheme] = useLocalStorage('bruno.theme', isBrowserThemeLight ? 'light' : 'dark');
+  const [displayedTheme, setDisplayedTheme] = useState(isBrowserThemeLight ? 'light' : 'dark');
+  const [storedTheme, setStoredTheme] = useLocalStorage('bruno.theme', 'system');
 
-  const theme = themes[storedTheme];
+  useEffect(() => {
+    window.matchMedia('(prefers-color-scheme: light)').addEventListener('change', (e) => {
+      if (storedTheme !== 'system') return;
+      setDisplayedTheme(e.matches ? 'light' : 'dark');
+    });
+  }, []);
+
+  const theme = storedTheme === 'system' ? themes[displayedTheme] : themes[storedTheme];
   const themeOptions = Object.keys(themes);
   const value = {
     theme,