[matrix] Dark Theme

* Apply width restructions to modals and images

* Dark theme 2.0

* Add webkit scrollbar

* Use Object.keys instead of Object.entries where applicable
This commit is contained in:
Josh
2020-05-29 16:57:00 +10:00
committed by Rapptz
parent 51d76e819b
commit e7c6643730
7 changed files with 154 additions and 20 deletions

View File

@ -28,17 +28,28 @@ function updateSetting(element) {
}
}
function getBodyClassToggle(className) {
function toggleBodyClass(add) {
document.body.classList.toggle(className, add);
function getRootAttributeToggle(attributeName, valueName) {
function toggleRootAttribute(set) {
document.documentElement.setAttribute(`data-${attributeName}`, set ? valueName : null);
}
return toggleBodyClass;
return toggleRootAttribute;
}
const settings = {
useSansFont: getBodyClassToggle('sans')
useSansFont: getRootAttributeToggle('font', 'sans'),
useDarkTheme: getRootAttributeToggle('theme', 'dark')
};
Object.entries(settings).forEach(([name, setter]) => {
let value = JSON.parse(localStorage.getItem(name));
try {
setter(value);
} catch (error) {
console.error(`Failed to apply setting "${name}" With value:`, value);
console.error(error);
}
});
document.addEventListener('DOMContentLoaded', () => {
bottomHeightThreshold = document.documentElement.scrollHeight - 30;
@ -81,18 +92,11 @@ document.addEventListener('DOMContentLoaded', () => {
parent.insertBefore(table, element.nextSibling);
});
Object.entries(settings).forEach(([name, setter]) => {
Object.keys(settings).forEach(name => {
let value = JSON.parse(localStorage.getItem(name));
try {
setter(value);
let element = document.querySelector(`input[name=${name}]`);
if (element) {
element.checked = value === true;
}
} catch (error) {
console.error(`Failed to apply setting "${name}" With value:`, value);
console.error(error);
let element = document.querySelector(`input[name=${name}]`);
if (element) {
element.checked = value === true;
}
});
});