From efa0aeb2c669446f0ce277287bd092e1e6d730cb Mon Sep 17 00:00:00 2001 From: Pavel Djundik Date: Mon, 22 Jul 2019 19:50:04 +0300 Subject: [PATCH] Allow themes to change theme-color --- client/js/options.js | 17 ++++++++++-- client/js/socket-events/configuration.js | 6 +++- client/views/windows/settings.tpl | 2 +- src/plugins/packages/themes.js | 35 ++++++++++++++---------- src/server.js | 17 ++++++++++-- 5 files changed, 55 insertions(+), 22 deletions(-) diff --git a/client/js/options.js b/client/js/options.js index b935ebc8..140272b0 100644 --- a/client/js/options.js +++ b/client/js/options.js @@ -30,6 +30,8 @@ const noSync = ["syncSettings"]; // to the server regardless of the clients sync setting. const alwaysSync = ["highlights"]; +const defaultThemeColor = document.querySelector('meta[name="theme-color"]').content; + // Process usersettings from localstorage. let userSettings = JSON.parse(storage.get("settings")) || false; @@ -95,10 +97,19 @@ function applySetting(name, value) { $syncWarningOverride.hide(); $forceSyncButton.hide(); } else if (name === "theme") { - value = `themes/${value}.css`; + const themeUrl = `themes/${value}.css`; - if ($theme.attr("href") !== value) { - $theme.attr("href", value); + if ($theme.attr("href") !== themeUrl) { + $theme.attr("href", themeUrl); + + const newTheme = $settings.find("#theme-select option[value='" + value + "']"); + let themeColor = defaultThemeColor; + + if (newTheme.length > 0 && newTheme[0].dataset.themeColor) { + themeColor = newTheme[0].dataset.themeColor; + } + + document.querySelector('meta[name="theme-color"]').content = themeColor; } } else if (name === "userStyles" && !noCSSparamReg.test(window.location.search)) { $userStyles.html(value); diff --git a/client/js/socket-events/configuration.js b/client/js/socket-events/configuration.js index c9609de0..94fd1647 100644 --- a/client/js/socket-events/configuration.js +++ b/client/js/socket-events/configuration.js @@ -59,8 +59,12 @@ socket.on("configuration", function(data) { // If localStorage contains a theme that does not exist on this server, switch // back to its default theme. - if (!data.themes.map((t) => t.name).includes(options.settings.theme)) { + const currentTheme = data.themes.find((t) => t.name === options.settings.theme); + + if (currentTheme === undefined) { options.processSetting("theme", data.defaultTheme, true); + } else if (currentTheme.themeColor) { + document.querySelector('meta[name="theme-color"]').content = currentTheme.themeColor; } function handleFormSubmit() { diff --git a/client/views/windows/settings.tpl b/client/views/windows/settings.tpl index 6ca7a46c..c23bd718 100644 --- a/client/views/windows/settings.tpl +++ b/client/views/windows/settings.tpl @@ -104,7 +104,7 @@