webui: allow to use system ui theme (#228)

Author: hyperblast

js/webui/src/css_settings_controller.js

@@ -1,5 +1,5 @@
 import startsWith from 'lodash/startsWith'
-import SettingsModel, { MediaSize } from './settings_model'
+import { MediaSize } from './settings_model'
 
 const settingClassPrefix = 'st-';
 
@@ -27,11 +27,11 @@ export default class CssSettingsController
 
     start()
     {
-        this.settingsModel.on('change', this.handleUpdate.bind(this));
-        this.handleUpdate();
+        this.settingsModel.on('change', this.update.bind(this));
+        this.update();
     }
 
-    handleUpdate()
+    update()
     {
         const rootElement = document.documentElement;
 

js/webui/src/general_settings.js

@@ -29,7 +29,7 @@ class GeneralSettings extends React.PureComponent
 
         return (
             <form className='settings-form'>
-                <SettingEditor settingKey='uiTheme' />
+                <SettingEditor settingKey='uiThemePreference' />
                 <SettingEditor settingKey='windowTitleExpression' />
                 {
                     showFullWidth ? <SettingEditor settingKey='fullWidth' /> : null

js/webui/src/index.js

@@ -15,6 +15,7 @@ import urls, { getPathFromUrl } from './urls'
 import { playlistTableKey } from './playlist_content';
 import { PlaybackState } from 'beefweb-client/src';
 import { SettingsView, View } from './navigation_model';
+import MediaThemeController from "./media_theme_controller";
 
 const client = new PlayerClient(new RequestHandler());
 const settingsStore = new SettingsStore();
@@ -30,6 +31,7 @@ const {
 } = appModel;
 
 const mediaSizeController = new MediaSizeController(settingsModel);
+const mediaThemeController = new MediaThemeController(settingsModel);
 const touchModeController = new TouchModeController(settingsModel);
 const cssSettingsController = new CssSettingsController(settingsModel);
 const windowController = new WindowController(playerModel);
@@ -131,6 +133,7 @@ playlistModel.on('playlistsChange', () => {
 
 appModel.load();
 mediaSizeController.start();
+mediaThemeController.start();
 touchModeController.start();
 cssSettingsController.start();
 appModel.start();

js/webui/src/media_theme_controller.js

@@ -0,0 +1,25 @@
+import { UITheme } from "./settings_model";
+
+export default class MediaThemeController
+{
+    constructor(settingsModel)
+    {
+        this.settingsModel = settingsModel;
+        this.darkThemeQuery = window.matchMedia('(prefers-color-scheme: dark)');
+        this.update = this.update.bind(this);
+    }
+
+    start()
+    {
+        this.settingsModel.on('uiThemePreferenceChange', this.update);
+        this.darkThemeQuery.addEventListener('change', this.update);
+        this.update();
+    }
+
+    update()
+    {
+        this.settingsModel.uiTheme = this.settingsModel.uiThemePreference === UITheme.system
+            ? (this.darkThemeQuery.matches ? UITheme.dark : UITheme.light)
+            : this.settingsModel.uiThemePreference;
+    }
+}

js/webui/src/settings_model.js

@@ -33,6 +33,7 @@ export const MediaSize = Object.freeze({
 });
 
 export const UITheme = Object.freeze({
+    system: 'system',
     light: 'light',
     dark: 'dark',
 })
@@ -70,6 +71,7 @@ const defaultSettingProps = Object.freeze({
  * @property {string} mediaSize
  * @property {boolean} showPlaybackInfo
  * @property {string} uiTheme
+ * @property {string} uiThemePreference
  */
 export default class SettingsModel extends EventEmitter
 {
@@ -138,15 +140,24 @@ export default class SettingsModel extends EventEmitter
             }
         });
 
+        // Actual UI Theme (takes into account currently selected system theme)
         this.define({
             key: 'uiTheme',
             type: SettingType.enum,
             defaultValue: UITheme.light,
+            cssVisible: true
+        });
+
+        // What user selects in settings screen
+        this.define({
+            key: 'uiThemePreference',
+            type: SettingType.enum,
+            defaultValue: UITheme.system,
             title: 'UI Theme',
             persistent: true,
-            cssVisible: true,
             enumKeys: UITheme,
             enumNames: {
+                [UITheme.system]: 'Use system setting',
                 [UITheme.light]: 'Light',
                 [UITheme.dark]: 'Dark',
             }