From c1eda323e40ee07c6efc89410e64498ff1ce7809 Mon Sep 17 00:00:00 2001 From: Maxim Kadushkin Date: Wed, 13 Apr 2022 15:37:47 +0300 Subject: [PATCH 1/2] [DE] option to sync ui theme with system --- apps/common/main/lib/controller/Themes.js | 41 ++++++++++++++++++- apps/common/main/lib/util/themeinit.js | 4 ++ .../main/app/view/FileMenuPanels.js | 2 +- apps/documenteditor/main/locale/en.json | 1 + 4 files changed, 45 insertions(+), 3 deletions(-) diff --git a/apps/common/main/lib/controller/Themes.js b/apps/common/main/lib/controller/Themes.js index 039232879..04311991c 100644 --- a/apps/common/main/lib/controller/Themes.js +++ b/apps/common/main/lib/controller/Themes.js @@ -11,7 +11,16 @@ define([ Common.UI.Themes = new (function(locale) { !locale && (locale = {}); + + const THEME_TYPE_LIGHT = 'light'; + const THEME_TYPE_DARK = 'dark'; + const THEME_TYPE_SYSTEM = 'system'; var themes_map = { + 'theme-system': { + text: locale.txtThemeSystem || 'Auto', + type: THEME_TYPE_SYSTEM, + source: 'static', + }, 'theme-light': { text: locale.txtThemeLight || 'Light', type: 'light', @@ -261,6 +270,21 @@ define([ } }; + const is_theme_type_system = id => themes_map[id].type == THEME_TYPE_SYSTEM; + const get_system_theme_type = () => window.matchMedia('(prefers-color-scheme: dark)').matches ? THEME_TYPE_DARK : THEME_TYPE_LIGHT; + const get_system_default_theme = () => { + const id = get_system_theme_type() == THEME_TYPE_DARK ? + id_default_dark_theme : id_default_light_theme; + + return {id: id, info: themes_map[id]}; + }; + + const on_system_theme_dark = function (mql) { + if ( Common.localStorage.getBool('ui-theme-use-system', false) ) { + this.setTheme('theme-system'); + } + }; + return { init: function (api) { var me = this; @@ -313,6 +337,7 @@ define([ obj.name = theme_name; api.asc_setSkin(obj); + window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', on_system_theme_dark.bind(this)); Common.NotificationCenter.on('document:ready', on_document_ready.bind(this)); }, @@ -333,6 +358,9 @@ define([ }, currentThemeId: function () { + if ( Common.localStorage.getBool('ui-theme-use-system', false) ) + return 'theme-system'; + var t = Common.localStorage.getItem('ui-theme') || Common.localStorage.getItem('ui-theme-id'); var id = get_ui_theme_name(t); return !!themes_map[id] ? id : id_default_light_theme; @@ -346,8 +374,9 @@ define([ return themes_map[this.defaultThemeId(type)] }, - isDarkTheme: function () { - return themes_map[this.currentThemeId()].type == 'dark'; + isDarkTheme: function (id) { + !id && (id = this.currentThemeId()); + return (is_theme_type_system(id) ? get_system_default_theme().info.type : themes_map[id].type) == THEME_TYPE_DARK; }, isContentThemeDark: function () { @@ -384,6 +413,14 @@ define([ if ( !obj ) return; var id = get_ui_theme_name(obj); + + if ( is_theme_type_system(id) ) { + Common.localStorage.setBool('ui-theme-use-system', true); + id = get_system_default_theme().id; + } else { + Common.localStorage.setBool('ui-theme-use-system', false); + } + if ( (this.currentThemeId() != id || force) && !!themes_map[id] ) { document.body.className = document.body.className.replace(/theme-[\w-]+\s?/gi, '').trim(); document.body.classList.add(id, 'theme-type-' + themes_map[id].type); diff --git a/apps/common/main/lib/util/themeinit.js b/apps/common/main/lib/util/themeinit.js index 6b3ea3839..665e33407 100644 --- a/apps/common/main/lib/util/themeinit.js +++ b/apps/common/main/lib/util/themeinit.js @@ -1,5 +1,9 @@ +function init_themes() { + if ( localStorage.getItem("ui-theme-use-system") == '1' ) { + localStorage.removeItem("ui-theme-id"); + } + var objtheme = localStorage.getItem("ui-theme"); if ( typeof(objtheme) == 'string' && objtheme.startsWith("{") && objtheme.endsWith("}") ) diff --git a/apps/documenteditor/main/app/view/FileMenuPanels.js b/apps/documenteditor/main/app/view/FileMenuPanels.js index 2937c60ee..7400c57a5 100644 --- a/apps/documenteditor/main/app/view/FileMenuPanels.js +++ b/apps/documenteditor/main/app/view/FileMenuPanels.js @@ -679,7 +679,7 @@ define([ dataHintDirection: 'bottom', dataHintOffset: 'big' }).on('selected', function(combo, record) { - me.chDarkMode.setDisabled(record.themeType!=='dark'); + me.chDarkMode.setDisabled(!Common.UI.Themes.isDarkTheme(record.value)); }); this.chDarkMode = new Common.UI.CheckBox({ diff --git a/apps/documenteditor/main/locale/en.json b/apps/documenteditor/main/locale/en.json index 9b771f458..eb4859215 100644 --- a/apps/documenteditor/main/locale/en.json +++ b/apps/documenteditor/main/locale/en.json @@ -188,6 +188,7 @@ "Common.UI.Themes.txtThemeClassicLight": "Classic Light", "Common.UI.Themes.txtThemeDark": "Dark", "Common.UI.Themes.txtThemeLight": "Light", + "Common.UI.Themes.txtThemeSystem": "Auto", "Common.UI.Window.cancelButtonText": "Cancel", "Common.UI.Window.closeButtonText": "Close", "Common.UI.Window.noButtonText": "No", From 11ee072e85a8e5d892f3184ea6b68437097a08ea Mon Sep 17 00:00:00 2001 From: Maxim Kadushkin Date: Wed, 13 Apr 2022 15:44:36 +0300 Subject: [PATCH 2/2] [PE SSE] update translations --- apps/presentationeditor/main/locale/en.json | 1 + apps/spreadsheeteditor/main/locale/en.json | 1 + 2 files changed, 2 insertions(+) diff --git a/apps/presentationeditor/main/locale/en.json b/apps/presentationeditor/main/locale/en.json index 44305f7e9..955e4aa22 100644 --- a/apps/presentationeditor/main/locale/en.json +++ b/apps/presentationeditor/main/locale/en.json @@ -275,6 +275,7 @@ "Common.UI.Themes.txtThemeClassicLight": "Classic Light", "Common.UI.Themes.txtThemeDark": "Dark", "Common.UI.Themes.txtThemeLight": "Light", + "Common.UI.Themes.txtThemeSystem": "Auto", "Common.UI.Window.cancelButtonText": "Cancel", "Common.UI.Window.closeButtonText": "Close", "Common.UI.Window.noButtonText": "No", diff --git a/apps/spreadsheeteditor/main/locale/en.json b/apps/spreadsheeteditor/main/locale/en.json index 999f838a2..47b14a380 100644 --- a/apps/spreadsheeteditor/main/locale/en.json +++ b/apps/spreadsheeteditor/main/locale/en.json @@ -133,6 +133,7 @@ "Common.UI.Themes.txtThemeClassicLight": "Classic Light", "Common.UI.Themes.txtThemeDark": "Dark", "Common.UI.Themes.txtThemeLight": "Light", + "Common.UI.Themes.txtThemeSystem": "Auto", "Common.UI.Window.cancelButtonText": "Cancel", "Common.UI.Window.closeButtonText": "Close", "Common.UI.Window.noButtonText": "No",