VladPolskiy/postgres-web
1
0
Fork 0
mirror of https://github.com/postgres/pgweb.git synced 2025-08-15 21:34:46 +00:00
Code Issues Packages Projects Releases Wiki Activity

Increase dark mode contrast and add a manual toggle.

Browse Source 
Per discussion on psql-www. This time, CSP compatible!

Reviewed by Jonathan Katz and Magnus Hagander.
This commit is contained in:
Dave Page
2023-01-06 16:14:05 +00:00
parent 1ac963e766
commit 9f22b31ec7
5 changed files with 142 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
media/js/main.js
View File

@ -79,23 +79,14 @@ function copyScript(trigger, elem) {
* families on the Download page
*/
function showDistros(btn, osDiv) {
var default_color = '#FFFFFF';
var active_color = '#e7eae8';
// dark mode
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
default_color = '#212121';
active_color = '#4A4A4A';
}
// Disable everything
document.getElementById('btn-download-bsd').style.background = default_color;
document.getElementById('btn-download-bsd').classList.remove("btn-download-active");;
document.getElementById('download-subnav-bsd').style.display = 'none';
document.getElementById('btn-download-linux').style.background = default_color;
document.getElementById('btn-download-linux').classList.remove("btn-download-active");
document.getElementById('download-subnav-linux').style.display = 'none';
// Enable the one we want
btn.style.background = active_color;
btn.classList.add("btn-download-active");
document.getElementById(osDiv).style.display = 'block';
}
@ -113,3 +104,48 @@ document.querySelectorAll('button[data-confirm]').forEach((button) => {
return false;
});
});
/*
* Theme switching
*/
function theme_apply() {
'use strict';
if (theme === 'light') {
document.getElementById('btn-theme').innerHTML = '<i class="fas fa-moon"></i>';
document.documentElement.setAttribute('data-theme', 'light');
localStorage.setItem('theme', 'light');
} else {
document.getElementById('btn-theme').innerHTML = '<i class="fas fa-lightbulb"></i>';
document.documentElement.setAttribute('data-theme', 'dark');
localStorage.setItem('theme', 'dark');
}
}
theme_apply();
document.getElementById("form-theme").classList.remove("d-none")
function theme_switch() {
'use strict';
if (theme === 'light') {
theme = 'dark';
} else {
theme = 'light';
}
theme_apply();
}
let theme_OS = window.matchMedia('(prefers-color-scheme: light)');
theme_OS.addEventListener('change', function (e) {
'use strict';
if (e.matches) {
theme = 'light';
} else {
theme = 'dark';
}
theme_apply();
});
document.querySelector('#btn-theme').addEventListener('click', function () {
theme_switch();
});

10
media/js/theme.js Normal file
View File

@ -0,0 +1,10 @@
let theme = 'light';
if (localStorage.getItem('theme')) {
if (localStorage.getItem('theme') === 'dark') {
theme = 'dark';
document.documentElement.setAttribute('data-theme', 'dark');
}
} else if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
theme = 'dark';
document.documentElement.setAttribute('data-theme', 'dark');
}