From f989474e1d4e3b529e36e0b7390b1c0676953425 Mon Sep 17 00:00:00 2001 From: Rahul Kumar Date: Sun, 2 Mar 2025 16:42:38 +0530 Subject: [PATCH 1/2] Added support for automatic dark/light mode based on user os settings --- src/components/top-nav/settings/index.jsx | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/src/components/top-nav/settings/index.jsx b/src/components/top-nav/settings/index.jsx index a4a1d4bc5..ec6067d35 100644 --- a/src/components/top-nav/settings/index.jsx +++ b/src/components/top-nav/settings/index.jsx @@ -30,7 +30,8 @@ import Head from './head.jsx'; var THEMES = [ // value, display_name 'light', 'Light', - 'dark', 'Dark' + 'dark', 'Dark', + 'auto', 'Auto' ]; var MODES = [ @@ -127,7 +128,12 @@ class Settings extends React.Component { * @param {Object} event - event object */ _onThemeChange = ( event ) => { - this.props.onThemeChange( event.target.value ); + let theme = event.target.value; + if(theme === 'auto'){ + const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches; + theme = prefersDark ? 'dark' : 'light'; + } + this.props.onThemeChange(theme); } /** From 4c35ffe46f1083dd08539415981b253351231372 Mon Sep 17 00:00:00 2001 From: Rahul Kumar Date: Sat, 8 Mar 2025 16:27:54 +0530 Subject: [PATCH 2/2] Added state to track dropdown selection --- src/components/top-nav/settings/index.jsx | 15 +++++++++------ 1 file changed, 9 insertions(+), 6 deletions(-) diff --git a/src/components/top-nav/settings/index.jsx b/src/components/top-nav/settings/index.jsx index ec6067d35..62e42baee 100644 --- a/src/components/top-nav/settings/index.jsx +++ b/src/components/top-nav/settings/index.jsx @@ -85,7 +85,8 @@ class Settings extends React.Component { this.state = { // Boolean indicating whether the settings menu is open or closed: - 'open': false + 'open': false, + 'selectedTheme': props.theme }; } @@ -128,12 +129,14 @@ class Settings extends React.Component { * @param {Object} event - event object */ _onThemeChange = ( event ) => { - let theme = event.target.value; - if(theme === 'auto'){ + const selectedTheme = event.target.value; + let effectiveTheme = selectedTheme; + if(selectedTheme === 'auto'){ const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches; - theme = prefersDark ? 'dark' : 'light'; + effectiveTheme = prefersDark ? 'dark' : 'light'; } - this.props.onThemeChange(theme); + this.setState({ selectedTheme }); + this.props.onThemeChange(effectiveTheme); } /** @@ -252,7 +255,7 @@ class Settings extends React.Component { className="settings-select" onChange={ this._onThemeChange } > - { this._renderOptions( THEMES, this.props.theme ) } + { this._renderOptions( THEMES, this.state.selectedTheme ) }