1 files changed, 60 insertions, 2 deletions
diff --git a/web/src/containers/config/Config.jsx b/web/src/containers/config/Config.jsx
index 3d402a116..652d6702f 100644
--- a/web/src/containers/config/Config.jsx
+++ b/web/src/containers/config/Config.jsx
@@ -18,10 +18,14 @@ import {
   ButtonVariant,
   Modal,
   ModalVariant,
-  Switch
+  Switch,
+  Select,
+  SelectOption,
+  SelectVariant
 } from '@patternfly/react-core'
 import { CogIcon } from '@patternfly/react-icons'
 import { setPreference } from '../../actions/preferences'
+import { resolveDarkMode, setDarkMode } from '../../Misc'
 
 class ConfigModal extends React.Component {
 
@@ -39,6 +43,8 @@ class ConfigModal extends React.Component {
     this.state = {
       isModalOpen: false,
       autoReload: false,
+      theme: 'Auto',
+      isThemeOpen: false,
     }
     this.handleModalToggle = () => {
       this.setState(({ isModalOpen }) => ({
@@ -47,9 +53,39 @@ class ConfigModal extends React.Component {
       this.resetState()
     }
 
+    this.handleEscape = () => {
+      if (this.state.isThemeOpen) {
+        this.setState(({ isThemeOpen }) => ({
+          isThemeOpen: !isThemeOpen,
+        }))
+      } else {
+        this.handleModalToggle()
+      }
+    }
+
+    this.handleThemeToggle = () => {
+      this.setState(({ isThemeOpen }) => ({
+        isThemeOpen: !isThemeOpen,
+      }))
+    }
+
+    this.handleThemeSelect = (event, selection) => {
+      this.setState({
+        theme: selection,
+        isThemeOpen: false
+      })
+    }
+
+    this.handleTheme = () => {
+      let darkMode = resolveDarkMode(this.state.theme)
+      setDarkMode(darkMode)
+    }
+
     this.handleSave = () => {
       this.handleModalToggle()
       this.props.dispatch(setPreference('autoReload', this.state.autoReload))
+      this.props.dispatch(setPreference('theme', this.state.theme))
+      this.handleTheme()
     }
 
     this.handleAutoReload = () => {
@@ -62,11 +98,12 @@ class ConfigModal extends React.Component {
   resetState() {
     this.setState({
       autoReload: this.props.preferences.autoReload,
+      theme: this.props.preferences.theme,
     })
   }
 
   render() {
-    const { isModalOpen, autoReload } = this.state
+    const { isModalOpen, autoReload, theme, isThemeOpen } = this.state
     return (
       <React.Fragment>
         <Button
@@ -80,6 +117,7 @@ class ConfigModal extends React.Component {
           title="Preferences"
           isOpen={isModalOpen}
           onClose={this.handleModalToggle}
+          onEscapePress={this.handleEscape}
           actions={[
             <Button key="confirm" variant="primary" onClick={this.handleSave}>
               Confirm
@@ -91,6 +129,8 @@ class ConfigModal extends React.Component {
         >
           <div>
             <p key="info">Application settings are saved in browser local storage only. They are applied whether authenticated or not.</p>
+          </div>
+          <div>
             <Switch
               key="autoreload"
               id="autoreload"
@@ -99,6 +139,24 @@ class ConfigModal extends React.Component {
               onChange={this.handleAutoReload}
             />
           </div>
+          <div style={{'paddingTop': '25px'}}>
+            <p key="theme-info">Select your preferred theme, auto will base it on your system preference.</p>
+          </div>
+          <div>
+            <Select
+              variant={SelectVariant.single}
+              label="Select Input"
+              onToggle={this.handleThemeToggle}
+              onSelect={this.handleThemeSelect}
+              selections={theme}
+              isOpen={isThemeOpen}
+              menuAppendTo="parent"
+            >
+              <SelectOption key="auto" value="Auto"/>
+              <SelectOption key="light" value="Light"/>
+              <SelectOption key="dark" value="Dark"/>
+            </Select>
+          </div>
         </Modal>
       </React.Fragment>
     )