Merge pull request #932 from naweidner/darkmode

Added Darkmode

Author: LukasKalbertodt

package-lock.json

@@ -15,8 +15,8 @@
     "@sentry/browser": "^6.6.0",
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^9.5.0",
-    "@theme-ui/color": "^0.3.5",
-    "@theme-ui/components": "^0.3.5",
+    "@theme-ui/color": "^0.14.5",
+    "@theme-ui/components": "^0.14.5",
     "@tippyjs/react": "^4.2.6",
     "deepmerge": "^4.2.2",
     "eslint": "^7.32.0",
@@ -38,7 +38,7 @@
     "react-page-visibility": "^7.0.0",
     "react-router-dom": "^5.3.3",
     "react-scripts": "^4.0.3",
-    "theme-ui": "^0.3.5",
+    "theme-ui": "^0.14.5",
     "use-resize-observer": "^7.0.0"
   },
   "repository": {

package.json

@@ -9,7 +9,6 @@ import { Beforeunload } from 'react-beforeunload';
 import { Global } from '@emotion/core';
 import { useSettings } from './settings';
 
-
 import { Provider, useStudioState, STATE_UPLOADED, STATE_UPLOADING } from './studio-state';
 
 import About from './ui/about';
@@ -18,9 +17,9 @@ import Studio from './ui/studio/page';
 import SettingsPage from './ui/settings/page';
 import Warnings from './ui/warnings';
 
-
 function App({ settingsManager, userHasWebcam }) {
   const settings = useSettings();
+
   return (
     <Router basename={process.env.PUBLIC_URL || '/'}>
       <Global styles={settings.theme?.customCSS || ''}/>

src/App.js

@@ -11,12 +11,11 @@ const Tooltip = ({ content, ...props }) => (
     <Tippy 
         content = { <span> {content} </span> }
         interactive={true}
-        theme='studio'
 
         sx={{
             fontSize: '16px',
-            backgroundColor: '#43a472',
-            color: 'white',
+            backgroundColor: theme => theme.colors.tooltip,
+            color: theme => theme.colors.tooltip_text,
             lineHeight: 'normal',
             fontFamily: 'Open Sans',
         }}

src/Tooltip.js

@@ -139,7 +139,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",
-
   "video-settings-open": "Videoeinstellungen öffnen",
-  "video-settings-close": "Videoeinstellungen schließen"
+  "video-settings-close": "Videoeinstellungen schließen",
+  
+  "settings-theme-appearance": "Aussehen",
+  "settings-theme-dark": "Dunkles Design",
+  "settings-theme-light": "Helles Design",
+  "settings-theme-system": "System Design"
 }

src/i18n/locales/de.json

@@ -140,6 +140,10 @@
   "warning-missing-connection-settings": "Connection to Opencast is not fully established: uploading is disabled. Please configure the connection in <1>the settings</1> (you won't lose your recording).",
 
   "settings-back-to-recording": "Back to recording",
+  "settings-theme-appearance": "Appearance",
+  "settings-theme-dark": "Dark mode",
+  "settings-theme-light": "Light mode",
+  "settings-theme-system": "System design",
 
   "video-settings-open": "Open video settings",
   "video-settings-close": "Close video settings"

src/i18n/locales/en.json

@@ -34,26 +34,6 @@ button {
   50% { opacity: 0.6 }
   to { opacity: 0.85 }
 }
-
-/* Remove outline for non-keyboard :focus */
-*:focus:not(:focus-visible) {
-  outline: none !important;
-  box-shadow: 0 0 0 rgb(255, 255, 255) !important;
-}
-
-*:focus-visible {
-  outline: 5px solid #2e724f !important;
-  outline-offset: -5px;
-}
-
-button:focus-visible {
-  outline: 5px solid #2e724f !important;
-  outline-offset: -3px;
-}
-
-.tippy-box[data-theme~='studio'] > .tippy-arrow::before {
-  color: #43a472;
-}
 `;
 
 export default GlobalStyle;

src/style/global-style.js

@@ -44,17 +44,40 @@ const base = {
   heights: {
     headerHeight: '3em'
   },
+  config: {
+    useColorSchemeMediaQuery: true,
+    useLocalStorage: true,
+    initialColorModeName: 'light',
+  },
   colors: {
     text: '#000',
     background: '#fff',
     button_fg: '#fff',
+    button_bg: '#363636',
     primary: '#47af7a',
-    secondary: '#30c',
-    muted: '#888888',
-    highlight: '#3498db',
     error: '#f14668',
     gray: ['#363636', '#666666', '#aaaaaa', '#dddddd', '#f5f5f5'],
-    videoOverlay: 'rgba(255, 255, 255, 0.2)'
+    element_bg: '#fff',
+    notification_text: '#fff',
+    tooltip: '#363636',
+    tooltip_text: '#fff',
+    focus: ['#363636', '#dddddd', '#dddddd', '#aaaaaa'],
+    modes: {
+      dark: {
+        text: 'rgba(255, 255, 255, 0.87)',
+        background: '#1C1C1E',
+        button_fg: '#fff',
+        button_bg: '#666666',
+        primary: '#388c61',
+        error: 'rgba(241, 70, 104, 0.8)',
+        gray: ['#f5f5f5', '#dddddd', '#aaaaaa', '#666666', '#363636'],
+        element_bg: '#363636',
+        notification_text: 'rgba(255, 255, 255, 0.9)',
+        tooltip: '#dddddd',
+        tooltip_text: '#000',
+        focus: ['#dddddd', '#363636', '#dddddd', '#dddddd'],
+      }
+    }
   },
   text: {
     text: {
@@ -113,6 +136,18 @@ const base = {
       '--theme-ui-colors-btn-hover': darken('primary', 0.03),
       '--theme-ui-colors-controls': '#000',
       '--theme-ui-colors-info': '#f5f5f5',
+      '*:focus:not(:focus-visible)': {
+        /* Remove outline for non-keyboard :focus */
+        outline: 'none !important',
+        boxShadow: '0 0 0 rgb(255, 255, 255) !important',
+      },
+      '*:focus-visible': {
+        outline: theme => `5px solid ${theme.colors.focus[0]}`,
+        outlineOffset: '-5px',
+      },
+      '.tippy-box > .tippy-arrow::before': {
+        color: theme => `${theme.colors.tooltip}`
+      },
     },
     h1: {
       ...heading,
@@ -177,6 +212,8 @@ const base = {
       maxWidth: '100%'
     },
     input: {
+      backgroundColor: 'element_bg',
+      color: 'text',
       borderWidth: 1,
       borderStyle: 'solid',
       borderColor: 'gray.2',
@@ -190,22 +227,24 @@ const base = {
       width: '100%',
       '&:focus': {
         borderColor: 'primary',
-        boxShadow: theme => `0 0 3px 0 ${theme.colors.primary}`
+        boxShadow: theme => `0 0 3px 0 ${theme.colors.focus[0]}`
       },
       '&[aria-invalid="true"]': {
         borderColor: 'error',
         boxShadow: theme => `0 0 3px 0 ${theme.colors.error}`
       }
     },
     select: {
+      backgroundColor: 'element_bg',
+      color: 'text',
       height: '2rem',
       fontSize: '14pt',
       outline: 'none',
       transition: 'border-color 0.3s, box-shadow 0.3s',
       width: '100%',
       '&:focus': {
         borderColor: 'primary',
-        boxShadow: theme => `0 0 3px 0 ${theme.colors.primary}`
+        boxShadow: theme => `0 0 3px 0 ${theme.colors.focus[0]}}`
       }
     },
     progress: {