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

Firefox: Support light and dark theme modes #123

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

Firefox: Support light and dark theme modes #123

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
e9efe85
feat: add dark theme and mode settings
dee-me-tree-or-love Nov 23, 2023
14a732a
fix: fix the theme mode terms & selector
dee-me-tree-or-love Nov 23, 2023
6fd0df0
fix: adjus the theme selectors
dee-me-tree-or-love Nov 23, 2023
03b820f
feat(wip): setup theme mode control
dee-me-tree-or-love Nov 23, 2023
cb6629b
chore: add a fixme note
dee-me-tree-or-love Nov 24, 2023
e4a381d
fix: fix the media query
dee-me-tree-or-love Nov 24, 2023
a07882f
chore: avoid duplicate code
dee-me-tree-or-love Nov 24, 2023
4ae81c6
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 @@ -69,7 +69,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 @@ -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',
Expand Down Expand Up @@ -1146,7 +1148,7 @@ var themes = {
shadow_color: '#d98764'
}
};
var theme = {};
var theme = themes['Default']; // default theme

// get config value or default
function getConfig(key) {
Expand All @@ -1157,6 +1159,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 @@ -1168,8 +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();
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 @@ -1327,7 +1346,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 @@ -1505,15 +1524,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