New: Auto theme option to match OS theme

Closes #2022

Co-authored-by: Qstick <qstick@gmail.com>
(cherry picked from commit 4ca5a213fa0fc29ed93e7e31b080728d6fa7f1f3)

frontend/src/Settings/UI/UISettings.js

@@ -186,11 +186,11 @@ class UISettings extends Component {
                   legend={translate('Style')}
                 >
                   <FormGroup>
-                    <FormLabel>Theme</FormLabel>
+                    <FormLabel>{translate('Theme')}</FormLabel>
                     <FormInputGroup
                       type={inputTypes.SELECT}
                       name="theme"
-                      helpText="Change Application UI Theme, Inspired by Theme.Park"
+                      helpText={translate('ThemeHelpText')}
                       values={themeOptions}
                       onChange={onInputChange}
                       {...settings.theme}

frontend/src/Styles/Themes/index.js

@@ -1,7 +1,11 @@
 import * as dark from './dark';
 import * as light from './light';
 
+const defaultDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+const auto = defaultDark ? { ...dark } : { ...light };
+
 export default {
+  auto,
   light,
   dark
 };