From fa48188c4fd7799d0f5d7695df201471e6bc48b1 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 6bb1c28..3eca5a6 100755 --- a/newtab.html +++ b/newtab.html @@ -64,6 +64,8 @@
Colors + + diff --git a/newtab.js b/newtab.js index f3f41a3..51197a4 100755 --- a/newtab.js +++ b/newtab.js @@ -1060,6 +1060,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 4da5efbd43f0b0d4525dc5c68e9f526d4bbde08b 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 3eca5a6..819f356 100755 --- a/newtab.html +++ b/newtab.html @@ -64,8 +64,12 @@
Colors - - + + diff --git a/newtab.js b/newtab.js index 51197a4..c705e32 100755 --- a/newtab.js +++ b/newtab.js @@ -1060,8 +1060,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 942993b1b19c1dc941b313413875ca376f40e650 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 819f356..dd22f0d 100755 --- a/newtab.html +++ b/newtab.html @@ -63,13 +63,13 @@
Colors - - + + From 044bc2719562e380d51e215fb0513965d3275b09 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 c705e32..ef533ed 100755 --- a/newtab.js +++ b/newtab.js @@ -1060,8 +1060,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', @@ -1143,7 +1143,7 @@ var themes = { highlight_font_color: '#ffff80', shadow_color: '#ff80c0' }, - Midnight: { + Middark: { font_color: '#bfdfff', background_color: '#101827', highlight_color: '#000000', @@ -1179,7 +1179,7 @@ var themes = { shadow_color: '#d98764' } }; -var theme = {}; +var theme = themes['Default']; // default theme // get config value or default function getConfig(key) { @@ -1190,6 +1190,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) @@ -1201,7 +1217,21 @@ function setConfig(key, value) { // special case settings if (key == 'lock' || key == 'newtab' || key == 'show_root' || 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) { @@ -1358,7 +1388,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') @@ -1536,15 +1566,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 a2642ac70f8b378dee4b3f7799e99e586105ab29 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 ef533ed..4d0bc46 100755 --- a/newtab.js +++ b/newtab.js @@ -1194,6 +1194,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 12df190945819a7ddede65b58c6ff8cbab5692c3 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 4d0bc46..46b97b1 100755 --- a/newtab.js +++ b/newtab.js @@ -1194,11 +1194,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 98e1160835774bae5ad8b62ce9b734fc98c52c8d 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 46b97b1..ea55175 100755 --- a/newtab.js +++ b/newtab.js @@ -1192,7 +1192,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'); @@ -1215,22 +1214,12 @@ function setConfig(key, value) { // special case settings if (key == 'lock' || key == 'newtab' || key == 'show_root' || 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 45646501f82ccf4e6d1d41981fe2c3d49fdd808a 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 ea55175..cc1bcce 100755 --- a/newtab.js +++ b/newtab.js @@ -1143,7 +1143,7 @@ var themes = { highlight_font_color: '#ffff80', shadow_color: '#ff80c0' }, - Middark: { + Midnight: { font_color: '#bfdfff', background_color: '#101827', highlight_color: '#000000',