From e9efe8559c7760161f99a99b5ec59f81ba208496 Mon Sep 17 00:00:00 2001 From: Dmitrii Orlov Date: Thu, 23 Nov 2023 19:56:34 +0100 Subject: [PATCH 1/8] feat: add dark theme and mode settings --- newtab.html | 2 ++ newtab.js | 2 ++ 2 files changed, 4 insertions(+) diff --git a/newtab.html b/newtab.html index 4851dd8..d4036ff 100755 --- a/newtab.html +++ b/newtab.html @@ -70,6 +70,8 @@
Colors + + diff --git a/newtab.js b/newtab.js index 0c84b53..6016a20 100755 --- a/newtab.js +++ b/newtab.js @@ -1030,6 +1030,8 @@ var config = { font_size: 16, font_weight: 400, theme: 'Default', + dark_theme: 'Default', + theme_mode: 'light', font_color: '#555555', background_color: '#ffffff', highlight_color: '#e4f4ff', From 14a732a7ce8481c49a85130eaf9d551a32eb1b52 Mon Sep 17 00:00:00 2001 From: Dmitrii Orlov Date: Thu, 23 Nov 2023 19:58:54 +0100 Subject: [PATCH 2/8] fix: fix the theme mode terms & selector --- newtab.html | 8 ++++++-- newtab.js | 4 ++-- 2 files changed, 8 insertions(+), 4 deletions(-) diff --git a/newtab.html b/newtab.html index d4036ff..ea4c192 100755 --- a/newtab.html +++ b/newtab.html @@ -70,8 +70,12 @@
Colors - - + + diff --git a/newtab.js b/newtab.js index 6016a20..c5b9cd3 100755 --- a/newtab.js +++ b/newtab.js @@ -1030,8 +1030,8 @@ var config = { font_size: 16, font_weight: 400, theme: 'Default', - dark_theme: 'Default', - theme_mode: 'light', + night_theme: 'Default', + theme_mode: 100, font_color: '#555555', background_color: '#ffffff', highlight_color: '#e4f4ff', From 6fd0df09bcffb85ba9d6c1d32f6b04cb3c3f5ae3 Mon Sep 17 00:00:00 2001 From: Dmitrii Orlov Date: Thu, 23 Nov 2023 20:48:07 +0100 Subject: [PATCH 3/8] fix: adjus the theme selectors --- newtab.html | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/newtab.html b/newtab.html index ea4c192..9044405 100755 --- a/newtab.html +++ b/newtab.html @@ -69,13 +69,13 @@
Colors - - + + From 03b820f1726834473409ac2d1b9666755ecb623f Mon Sep 17 00:00:00 2001 From: Dmitrii Orlov Date: Thu, 23 Nov 2023 20:48:31 +0100 Subject: [PATCH 4/8] feat(wip): setup theme mode control --- newtab.js | 63 ++++++++++++++++++++++++++++++++++++++++++------------- 1 file changed, 48 insertions(+), 15 deletions(-) diff --git a/newtab.js b/newtab.js index c5b9cd3..7be35b7 100755 --- a/newtab.js +++ b/newtab.js @@ -1030,8 +1030,8 @@ var config = { font_size: 16, font_weight: 400, theme: 'Default', - night_theme: 'Default', - theme_mode: 100, + dark_theme: 'Default', + theme_mode: 'light', font_color: '#555555', background_color: '#ffffff', highlight_color: '#e4f4ff', @@ -1112,7 +1112,7 @@ var themes = { highlight_font_color: '#ffff80', shadow_color: '#ff80c0' }, - Midnight: { + Middark: { font_color: '#bfdfff', background_color: '#101827', highlight_color: '#000000', @@ -1148,7 +1148,7 @@ var themes = { shadow_color: '#d98764' } }; -var theme = {}; +var theme = themes['Default']; // default theme // get config value or default function getConfig(key) { @@ -1159,6 +1159,22 @@ function getConfig(key) { return (theme.hasOwnProperty(key) ? theme[key] : config[key]); } +// check if dark theme should be used +function isDarkTheme() { + // get theme mode + var themeMode = getConfig('theme_mode') || 'light'; + return ( + (themeMode === 'auto' && window.matchMedia("(prefers-color-scheme: dark)")) + || themeMode === 'dark' + ); +} + +// retrieve the current theme +function loadActiveTheme() { + var modifier = isDarkTheme() ? 'dark_' : ''; + return themes[getConfig(modifier + 'theme')] || themes['Default']; +} + // set config value function setConfig(key, value) { if (value != null) @@ -1170,7 +1186,21 @@ function setConfig(key, value) { // special case settings if (key == 'lock' || key == 'newtab' || key == 'show_root' || key == 'icon_provider' || key.substring(0,6) == 'number') loadColumns(); - else if (key == 'theme') { + // TODO(clean-up): remove this duplication + else if (key == 'theme_mode') { + theme = loadActiveTheme(); + for (var i in config) { + if (i != key) { + onChange(i); + showConfig(i); + } + } + } + else if ( + (key == 'theme' && !isDarkTheme()) + || + (key == 'dark_theme' && isDarkTheme()) + ) { theme = themes[value]; for (var i in config) { if (i != key) { @@ -1329,7 +1359,7 @@ function onChange(key, value) { // loads config settings function loadSettings() { // load theme - theme = themes[getConfig('theme')] || {}; + theme = loadActiveTheme() // load settings for (var key in config) if (key === 'background_image_file') @@ -1507,15 +1537,18 @@ function initSettings() { loadSettings(); - // load themes - var select = document.getElementById('options_theme'); - if (select.childNodes.length === 0) { - for (var i in themes) { - var option = document.createElement('option'); - option.innerText = i; - if (i == getConfig('theme')) - option.selected = 'selected'; - select.appendChild(option); + // load day & dark themes + var optionKeys = ['theme', 'dark_theme']; + for (var optionKey of optionKeys) { + var select = document.getElementById('options_' + optionKey); + if (select.childNodes.length === 0) { + for (var i in themes) { + var option = document.createElement('option'); + option.innerText = i; + if (i == getConfig(optionKey)) + option.selected = 'selected'; + select.appendChild(option); + } } } From cb6629b28a200bce3524d560291b8a670273a12b Mon Sep 17 00:00:00 2001 From: Dmitrii Orlov Date: Fri, 24 Nov 2023 11:58:10 +0100 Subject: [PATCH 5/8] chore: add a fixme note --- newtab.js | 1 + 1 file changed, 1 insertion(+) diff --git a/newtab.js b/newtab.js index 7be35b7..bb8316d 100755 --- a/newtab.js +++ b/newtab.js @@ -1163,6 +1163,7 @@ function getConfig(key) { function isDarkTheme() { // get theme mode var themeMode = getConfig('theme_mode') || 'light'; + // FIXME: here `window.matchMedia` evaluates to window query and not BOOL return ( (themeMode === 'auto' && window.matchMedia("(prefers-color-scheme: dark)")) || themeMode === 'dark' From e4a381d9e3ba2168056e6cd0a6e6c12100dc5e25 Mon Sep 17 00:00:00 2001 From: Dmitrii Orlov Date: Fri, 24 Nov 2023 22:01:20 +0100 Subject: [PATCH 6/8] fix: fix the media query --- newtab.js | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/newtab.js b/newtab.js index bb8316d..c2c21cc 100755 --- a/newtab.js +++ b/newtab.js @@ -1163,11 +1163,8 @@ function getConfig(key) { function isDarkTheme() { // get theme mode var themeMode = getConfig('theme_mode') || 'light'; - // FIXME: here `window.matchMedia` evaluates to window query and not BOOL - return ( - (themeMode === 'auto' && window.matchMedia("(prefers-color-scheme: dark)")) - || themeMode === 'dark' - ); + var systemPrefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches; + return ((themeMode === 'auto' && systemPrefersDark) || themeMode === 'dark'); } // retrieve the current theme From a07882ff8f9d112d246946345f7d5cb3b3c03f40 Mon Sep 17 00:00:00 2001 From: Dmitrii Orlov Date: Fri, 24 Nov 2023 22:06:17 +0100 Subject: [PATCH 7/8] chore: avoid duplicate code --- newtab.js | 19 ++++--------------- 1 file changed, 4 insertions(+), 15 deletions(-) diff --git a/newtab.js b/newtab.js index c2c21cc..861d5dd 100755 --- a/newtab.js +++ b/newtab.js @@ -1161,7 +1161,6 @@ function getConfig(key) { // check if dark theme should be used function isDarkTheme() { - // get theme mode var themeMode = getConfig('theme_mode') || 'light'; var systemPrefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches; return ((themeMode === 'auto' && systemPrefersDark) || themeMode === 'dark'); @@ -1184,22 +1183,12 @@ function setConfig(key, value) { // special case settings if (key == 'lock' || key == 'newtab' || key == 'show_root' || key == 'icon_provider' || key.substring(0,6) == 'number') loadColumns(); - // TODO(clean-up): remove this duplication - else if (key == 'theme_mode') { - theme = loadActiveTheme(); - for (var i in config) { - if (i != key) { - onChange(i); - showConfig(i); - } - } - } else if ( - (key == 'theme' && !isDarkTheme()) - || - (key == 'dark_theme' && isDarkTheme()) + (key == 'theme_mode') + || (key == 'theme' && !isDarkTheme()) + || (key == 'dark_theme' && isDarkTheme()) ) { - theme = themes[value]; + theme = (key == 'theme_mode') ? loadActiveTheme() : themes[value]; for (var i in config) { if (i != key) { onChange(i); From 4ae81c629d29ad76eb5df82ea8ff4b6e69b6128d Mon Sep 17 00:00:00 2001 From: Mitja O Date: Sat, 25 Nov 2023 11:08:01 +0100 Subject: [PATCH 8/8] fix: rename back to 'Midnight' theme --- newtab.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/newtab.js b/newtab.js index 861d5dd..fc7ee60 100755 --- a/newtab.js +++ b/newtab.js @@ -1112,7 +1112,7 @@ var themes = { highlight_font_color: '#ffff80', shadow_color: '#ff80c0' }, - Middark: { + Midnight: { font_color: '#bfdfff', background_color: '#101827', highlight_color: '#000000',