Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Support light and dark theme modes #116

Open
wants to merge 8 commits into
base: master
Choose a base branch
from
Open

Support light and dark theme modes #116

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
fa48188
feat: add dark theme and mode settings
dee-me-tree-or-love Nov 23, 2023
4da5efb
fix: fix the theme mode terms & selector
dee-me-tree-or-love Nov 23, 2023
942993b
fix: adjus the theme selectors
dee-me-tree-or-love Nov 23, 2023
044bc27
feat(wip): setup theme mode control
dee-me-tree-or-love Nov 23, 2023
a2642ac
chore: add a fixme note
dee-me-tree-or-love Nov 24, 2023
12df190
fix: fix the media query
dee-me-tree-or-love Nov 24, 2023
98e1160
chore: avoid duplicate code
dee-me-tree-or-love Nov 24, 2023
4564650
fix: rename back to 'Midnight' theme
dee-me-tree-or-love Nov 25, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions newtab.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,13 @@
</fieldset>
<fieldset>
<legend>Colors</legend>
<label><span>Theme mode</span><select id="options_theme_mode">
<option value="light">light</option>
<option value="dark">dark</option>
<option value="auto">auto</option>
</select></label>
<label><span>Theme</span><select id="options_theme"></select></label>
<label><span>Dark theme</span><select id="options_dark_theme"></select></label>
<label><span>Text</span><input id="options_font_color" type="color"/></label>
<label><span>Background</span><input id="options_background_color" type="color"/></label>
<label><span>Highlight</span><input id="options_highlight_color" type="color"/></label>
Expand Down
48 changes: 35 additions & 13 deletions newtab.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down Expand Up @@ -1177,7 +1179,7 @@ var themes = {
shadow_color: '#d98764'
}
};
var theme = {};
var theme = themes['Default']; // default theme

// get config value or default
function getConfig(key) {
Expand All @@ -1188,6 +1190,19 @@ function getConfig(key) {
return (theme.hasOwnProperty(key) ? theme[key] : config[key]);
}

// check if dark theme should be used
function isDarkTheme() {
var themeMode = getConfig('theme_mode') || 'light';
var systemPrefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
return ((themeMode === 'auto' && systemPrefersDark) || 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)
Expand All @@ -1199,8 +1214,12 @@ 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') {
theme = themes[value];
else if (
(key == 'theme_mode')
|| (key == 'theme' && !isDarkTheme())
|| (key == 'dark_theme' && isDarkTheme())
) {
theme = (key == 'theme_mode') ? loadActiveTheme() : themes[value];
for (var i in config) {
if (i != key) {
onChange(i);
Expand Down Expand Up @@ -1356,7 +1375,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')
Expand Down Expand Up @@ -1534,15 +1553,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);
}
}
}

Expand Down