Merge pull request #433 from ArendPeter/auto-dark-mode

Detect dark mode and set featured elections
Equal-Vote · Jan 9, 2024 · 9875560 · 9875560
2 parents 7d23ed3 + c107d09
commit 9875560
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 4 deletions.
diff --git a/Dockerfile b/Dockerfile
@@ -25,6 +25,7 @@ COPY --chown=node:node domain_model domain_model
 COPY --chown=node:node package*.json ./
 WORKDIR /usr/src/app/frontend
 COPY --chown=node:node frontend .
+ENV REACT_APP_FEATURED_ELECTIONS 4e7b3f9d-ce53-4b25-8747-b5927c6745aa,753bb873-12de-4aca-af25-e96ec72f0b49,18ad9f37-94a8-4fed-a784-83761c692052
 ENV REACT_APP_KEYCLOAK_URL https://auth.star.vote:8443/realms/STARVotingDev/protocol/openid-connect
 ENV REACT_APP_FF_METHOD_STAR_PR true
 ENV REACT_APP_FF_METHOD_RANKED_ROBIN true

diff --git a/frontend/src/components/Header.js b/frontend/src/components/Header.js
@@ -176,6 +176,12 @@ const Header = () => {
                             >
                                 Logout
                             </MenuItem>
+                            <MenuItem
+                                color='inherit'
+                                onClick={() => themeSelector.selectColorMode('browserDefault')}
+                            >
+                                browser default
+                            </MenuItem>
                             {themeSelector.modes.map(mode => (
                                 <MenuItem
                                     color='inherit'

diff --git a/frontend/src/theme.tsx b/frontend/src/theme.tsx
@@ -3,6 +3,7 @@ import { PaletteOptions, Theme, createTheme, responsiveFontSizes, ThemeProvider
 import { createContext } from 'react';
 import { useLocalStorage } from './hooks/useLocalStorage';
 import { TypographyOptions } from '@mui/material/styles/createTypography';
+import { useMediaQuery } from '@mui/material';
 
 declare module '@mui/material/styles' {
   interface Palette {
@@ -140,7 +141,7 @@ const themes = {
   })),
 }
 
-type mode = keyof typeof themes
+type mode = keyof typeof themes | 'browserDefault'
 type ThemeContextType = {
   mode: mode,
   modes: mode[],
@@ -151,17 +152,26 @@ type ThemeContextType = {
 export const ThemeContext = createContext<ThemeContextType>({ mode: 'base', modes: Object.keys(themes) as mode[], selectColorMode: () => { }, theme: themes.turquoise })
 
 export const ThemeContextProvider = ({ children }) => {
-  const [mode, setMode] = useLocalStorage<mode>('themeMode', 'turquoise')
+  // https://mui.com/material-ui/customization/dark-mode/#system-preference
+  const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
+  const [mode, setMode] = useLocalStorage<mode>('themeMode', 'browserDefault');
+  let theme;
+  if(mode === 'browserDefault'){
+    theme = themes[prefersDarkMode? 'darkMode' : 'turquoise'];
+  }else{
+    theme = themes[mode];
+  }
+
   const value: ThemeContextType = {
     mode: mode,
     modes: Object.keys(themes) as mode[],
     selectColorMode: newMode => setMode(newMode),
-    theme: themes[mode]
+    theme
   }
 
   return (
     <ThemeContext.Provider value={value} >
-      <ThemeProvider theme={themes[mode]}>
+      <ThemeProvider theme={theme}>
         {children}
       </ThemeProvider>
     </ThemeContext.Provider>