Added Darkmode

package.json

@@ -36,6 +36,7 @@
     "react-hook-form": "^3.29.4",
     "react-i18next": "^11.16.7",
     "react-page-visibility": "^7.0.0",
+    "react-responsive": "^8.2.0",
     "react-router-dom": "^5.3.1",
     "react-scripts": "^4.0.3",
     "theme-ui": "^0.3.5",

src/App.js

@@ -1,6 +1,7 @@
 //; -*- mode: rjsx;-*-
 /** @jsx jsx */
-import { jsx } from 'theme-ui';
+import { jsx, useColorMode } from 'theme-ui';
+import { useMediaQuery } from 'react-responsive';
 
 import { Flex } from '@theme-ui/components';
 import { useState, Fragment } from 'react';
@@ -21,6 +22,12 @@ import Warnings from './ui/warnings';
 
 function App({ settingsManager, userHasWebcam }) {
   const settings = useSettings();
+  const [, setColorMode] = useColorMode();
+
+  useMediaQuery({
+    query: '(prefers-color-scheme: dark)',
+  }, undefined, (isDarkPrefered) => setColorMode(isDarkPrefered ? 'dark' : 'light'))
+
   return (
     <Router basename={process.env.PUBLIC_URL || '/'}>
       <Global styles={settings.theme?.customCSS || ''}/>

src/i18n/locales/de.json

@@ -136,7 +136,11 @@
   "warning-missing-connection-settings": "Die Verbindung zum Opencast Server wurde noch nicht vollständig hergestellt. Bitte konfigurieren Sie die Verbindung in <1>den Einstellungen</1> (die Aufnahme geht nicht verloren).",
 
   "settings-back-to-recording": "Zurück zur Aufnahme",
+  "settings-theme-appearance": "Aussehen",
+  "settings-theme-dark": "Zum dunklen Design wechseln",
+  "settings-theme-light": "Zum hellen Design wechseln",
 
   "video-settings-open": "Videoeinstellungen öffnen",
   "video-settings-close": "Videoeinstellungen schließen"
+
 }

src/i18n/locales/en.json

@@ -140,5 +140,9 @@
   "settings-back-to-recording": "Back to recording",
 
   "video-settings-open": "Open video settings",
-  "video-settings-close": "Close video settings"
+  "video-settings-close": "Close video settings",
+
+  "settings-theme-appearance": "Appearance",
+  "settings-theme-dark": "Switch to Darkmode",
+  "settings-theme-light": "Switch to Lightmode"
 }

src/theme.js

@@ -44,6 +44,7 @@ const base = {
   heights: {
     headerHeight: '3em'
   },
+  useColorSchemeMediaQuery: true,
   colors: {
     text: '#000',
     background: '#fff',
@@ -54,7 +55,25 @@ const base = {
     highlight: '#3498db',
     error: '#f14668',
     gray: ['#363636', '#666666', '#aaaaaa', '#dddddd', '#f5f5f5'],
-    videoOverlay: 'rgba(255, 255, 255, 0.2)'
+    videoOverlay: 'rgba(255, 255, 255, 0.2)',
+    element_bg: '#fff',
+    notification_text: '#fff',
+    modes: {
+      dark: {
+        text: 'rgba(255, 255, 255, 0.87)',
+        background: '#1C1C1E',
+        button_fg: '#fff',
+        primary: '#47af7a',
+        secondary: '#30c',
+        muted: '#888888',
+        highlight: '#3498db',
+        error: 'rgba(241, 70, 104, 0.8)',
+        gray: ['#f5f5f5', '#dddddd', '#aaaaaa', '#666666', '#363636'],
+        videoOverlay: 'rgba(255, 255, 255, 0.2)',
+        element_bg: '#363636',
+        notification_text: 'rgba(255, 255, 255, 0.9)'
+      }
+    }
   },
   text: {
     text: {
@@ -177,6 +196,8 @@ const base = {
       maxWidth: '100%'
     },
     input: {
+      backgroundColor: 'element_bg',
+      color: 'text',
       borderWidth: 1,
       borderStyle: 'solid',
       borderColor: 'gray.2',
@@ -198,6 +219,8 @@ const base = {
       }
     },
     select: {
+      backgroundColor: 'element_bg',
+      color: 'text',
       height: '2rem',
       fontSize: '14pt',
       outline: 'none',

src/ui/header.js

@@ -1,6 +1,6 @@
 //; -*- mode: rjsx;-*-
 /** @jsx jsx */
-import { jsx } from 'theme-ui';
+import { jsx, useColorMode } from 'theme-ui';
 
 import { Link, NavLink, useLocation } from 'react-router-dom';
 import { Fragment, useState } from 'react';
@@ -20,6 +20,7 @@ import { useStudioState } from '../studio-state';
 // The header, including a logo on the left and the navigation on the right.
 export default function Header() {
   const { isRecording } = useStudioState();
+  const [ colorMode ] = useColorMode();
 
   return (
     <header
@@ -37,7 +38,7 @@ export default function Header() {
           the parent element, as the navigation overlay would otherwise occlude
           this background color */}
       <div sx={{
-        backgroundColor: 'gray.0',
+        backgroundColor: colorMode === 'dark' ? 'gray.4' : 'gray.0',
         position: 'absolute',
         zIndex: -3,
         height: '100%',
@@ -47,7 +48,7 @@ export default function Header() {
       {/* This div is an overlay that is shown when a recording is currently active.
           This prevents the user from visiting other pages while recording. */}
       { isRecording && <div sx={{
-        backgroundColor: 'gray.0',
+        backgroundColor: colorMode === 'dark' ? 'gray.4' : 'gray.0',
         position: 'absolute',
         zIndex: 20,
         height: '100%',
@@ -93,6 +94,7 @@ const Brand = () => {
 const NavElement = ({ target, children, icon, ...rest }) => {
   const location = useLocation();
   const { isRecording } = useStudioState();
+  const [ colorMode ] = useColorMode();
 
   return (
     <NavLink
@@ -112,12 +114,12 @@ const NavElement = ({ target, children, icon, ...rest }) => {
         textDecoration: 'none',
         fontSize: '18px',
         height: ['auto', '100%'],
-        borderLeft: ['none', theme => `1px solid ${theme.colors.gray[3]}`],
+        borderLeft: ['none', theme => `1px solid ${theme.colors.gray[colorMode === 'dark' ? 1 : 3]}`],
         display: ['block', 'inline-block'],
         width: ['100%', 'auto'],
 
         '&:hover': {
-          backgroundColor: 'gray.1',
+          backgroundColor: colorMode === 'dark' ? 'gray.3' : 'gray.1',
         },
         ':focus-visible': {
           outline: '5px solid #8ec8aa !important',
@@ -145,6 +147,7 @@ const Navigation = props => {
   const toggleMenu = () => updateIsOpened(!isOpened);
   const closeMenu = () => updateIsOpened(false);
   const { t } = useTranslation();
+  const [colorMode] = useColorMode();
 
   return (
     <Fragment>
@@ -193,7 +196,7 @@ const Navigation = props => {
           top: [theme => theme.heights.headerHeight, theme => theme.heights.headerHeight, 0],
           position: ['absolute', 'static'],
           width: ['100%', 'auto'],
-          backgroundColor: ['gray.0', 'none'],
+          backgroundColor: [colorMode === 'dark' ? 'gray.4' : 'gray.0', 'none'],
           transition: ['height 0.25s ease-out 0s', 'none'],
           scrollX: ['none', 'auto'],
         }}

src/ui/notification.js

@@ -7,7 +7,7 @@ const Notification = ({isDanger, ...rest}) => (
     sx={{
       ':not(:last-child)': { marginBottom: '1.5rem' },
       backgroundColor: isDanger ? 'error' : 'gray.3',
-      color: isDanger ? 'background' : 'currentColor',
+      color: isDanger ? 'notification_text' : 'currentColor',
       borderRadius: 2,
       padding: 3,
       position: 'relative'

src/ui/settings/colorMode.js

@@ -0,0 +1,47 @@
+//; -*- mode: rjsx;-*-
+/** @jsx jsx */
+
+import { jsx, useColorMode } from 'theme-ui';
+import { Button } from '@theme-ui/components';
+import { useTranslation } from 'react-i18next';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faMoon, faSun } from "@fortawesome/free-solid-svg-icons";
+
+import { SettingsSection } from './elements';
+
+const ColorModeSettings = () => {
+  const { t } = useTranslation();
+  const [colorMode, setColorMode] = useColorMode();
+
+  const dark = t('settings-theme-dark');
+  const light = t('settings-theme-light');
+
+  return (
+    <SettingsSection title={t('settings-theme-appearance')}>
+      <Button
+        onClick={() => setColorMode(colorMode === 'dark' ? 'light' : 'dark')}>
+        {colorMode === 'dark' ? light : dark}
+        <ThemeIcon/>
+      </Button>
+    </SettingsSection>
+  );
+};
+
+const ThemeIcon = () => {
+  const [colorMode] = useColorMode();
+
+  return(
+    <div
+      sx={{
+        color: '#ffd983',
+        width: '10px',
+        display: 'inline-block',
+        ml: 2,
+      }}
+    >
+    <FontAwesomeIcon icon={colorMode === 'dark' ? faSun : faMoon} />
+    </div>
+  )
+};
+
+export default ColorModeSettings;