bootstrap-darkmode
Version:
Stylesheet and Scripts for implementing dark mode with Bootstrap 4
36 lines • 3.84 kB
JavaScript
export class ThemeConfig {
constructor() {
this.themeChangeHandlers = [];
}
loadTheme() {
return localStorage.getItem('theme');
}
saveTheme(theme) {
if (theme === null) {
localStorage.removeItem('theme');
}
else {
localStorage.setItem('theme', theme);
}
}
initTheme() {
this.displayTheme(this.getTheme());
}
detectTheme() {
return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
}
getTheme() {
return this.loadTheme() || this.detectTheme();
}
setTheme(theme) {
this.saveTheme(theme);
this.displayTheme(theme);
}
displayTheme(theme) {
document.body.setAttribute('data-theme', theme);
for (let i = 0; i < this.themeChangeHandlers.length; i++) {
this.themeChangeHandlers[i](theme);
}
}
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGhlbWUtY29uZmlnLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vc3JjL2xpYi90aGVtZS1jb25maWcudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsTUFBTSxPQUFPLFdBQVc7SUFBeEI7UUFDSSx3QkFBbUIsR0FBZ0MsRUFBRSxDQUFDO0lBc0MxRCxDQUFDO0lBcENHLFNBQVM7UUFDTCxPQUFPLFlBQVksQ0FBQyxPQUFPLENBQUMsT0FBTyxDQUFDLENBQUM7SUFDekMsQ0FBQztJQUVELFNBQVMsQ0FBQyxLQUFvQjtRQUMxQixJQUFJLEtBQUssS0FBSyxJQUFJLEVBQUU7WUFDaEIsWUFBWSxDQUFDLFVBQVUsQ0FBQyxPQUFPLENBQUMsQ0FBQztTQUNwQzthQUNJO1lBQ0QsWUFBWSxDQUFDLE9BQU8sQ0FBQyxPQUFPLEVBQUUsS0FBSyxDQUFDLENBQUE7U0FDdkM7SUFDTCxDQUFDO0lBRUQsU0FBUztRQUNMLElBQUksQ0FBQyxZQUFZLENBQUMsSUFBSSxDQUFDLFFBQVEsRUFBRSxDQUFDLENBQUM7SUFDdkMsQ0FBQztJQUVELFdBQVc7UUFDUCxPQUFPLE1BQU0sQ0FBQyxVQUFVLENBQUMsOEJBQThCLENBQUMsQ0FBQyxPQUFPLENBQUMsQ0FBQyxDQUFDLE1BQU0sQ0FBQyxDQUFDLENBQUMsT0FBTyxDQUFDO0lBQ3hGLENBQUM7SUFFRCxRQUFRO1FBQ0osT0FBTyxJQUFJLENBQUMsU0FBUyxFQUFFLElBQUksSUFBSSxDQUFDLFdBQVcsRUFBRSxDQUFDO0lBQ2xELENBQUM7SUFFRCxRQUFRLENBQUMsS0FBYTtRQUNsQixJQUFJLENBQUMsU0FBUyxDQUFDLEtBQUssQ0FBQyxDQUFDO1FBQ3RCLElBQUksQ0FBQyxZQUFZLENBQUMsS0FBSyxDQUFDLENBQUM7SUFDN0IsQ0FBQztJQUVELFlBQVksQ0FBQyxLQUFhO1FBQ3RCLFFBQVEsQ0FBQyxJQUFJLENBQUMsWUFBWSxDQUFDLFlBQVksRUFBRSxLQUFLLENBQUMsQ0FBQztRQUNoRCxLQUFLLElBQUksQ0FBQyxHQUFHLENBQUMsRUFBRSxDQUFDLEdBQUcsSUFBSSxDQUFDLG1CQUFtQixDQUFDLE1BQU0sRUFBRSxDQUFDLEVBQUUsRUFBQztZQUNyRCxJQUFJLENBQUMsbUJBQW1CLENBQUMsQ0FBQyxDQUFDLENBQUMsS0FBSyxDQUFDLENBQUM7U0FDdEM7SUFDTCxDQUFDO0NBQ0oiLCJzb3VyY2VzQ29udGVudCI6WyJleHBvcnQgY2xhc3MgVGhlbWVDb25maWcge1xuICAgIHRoZW1lQ2hhbmdlSGFuZGxlcnM6ICgodGhlbWU6IHN0cmluZykgPT4gdm9pZClbXSA9IFtdO1xuXG4gICAgbG9hZFRoZW1lKCk6IHN0cmluZyB8IG51bGwge1xuICAgICAgICByZXR1cm4gbG9jYWxTdG9yYWdlLmdldEl0ZW0oJ3RoZW1lJyk7XG4gICAgfVxuXG4gICAgc2F2ZVRoZW1lKHRoZW1lOiBzdHJpbmcgfCBudWxsKTogdm9pZCB7XG4gICAgICAgIGlmICh0aGVtZSA9PT0gbnVsbCkge1xuICAgICAgICAgICAgbG9jYWxTdG9yYWdlLnJlbW92ZUl0ZW0oJ3RoZW1lJyk7XG4gICAgICAgIH1cbiAgICAgICAgZWxzZSB7XG4gICAgICAgICAgICBsb2NhbFN0b3JhZ2Uuc2V0SXRlbSgndGhlbWUnLCB0aGVtZSlcbiAgICAgICAgfVxuICAgIH1cblxuICAgIGluaXRUaGVtZSgpOiB2b2lkIHtcbiAgICAgICAgdGhpcy5kaXNwbGF5VGhlbWUodGhpcy5nZXRUaGVtZSgpKTtcbiAgICB9XG5cbiAgICBkZXRlY3RUaGVtZSgpOiBzdHJpbmcge1xuICAgICAgICByZXR1cm4gd2luZG93Lm1hdGNoTWVkaWEoJyhwcmVmZXJzLWNvbG9yLXNjaGVtZTogZGFyayknKS5tYXRjaGVzID8gJ2RhcmsnIDogJ2xpZ2h0JztcbiAgICB9XG5cbiAgICBnZXRUaGVtZSgpOiBzdHJpbmcge1xuICAgICAgICByZXR1cm4gdGhpcy5sb2FkVGhlbWUoKSB8fCB0aGlzLmRldGVjdFRoZW1lKCk7XG4gICAgfVxuXG4gICAgc2V0VGhlbWUodGhlbWU6IHN0cmluZyk6IHZvaWQge1xuICAgICAgICB0aGlzLnNhdmVUaGVtZSh0aGVtZSk7XG4gICAgICAgIHRoaXMuZGlzcGxheVRoZW1lKHRoZW1lKTtcbiAgICB9XG5cbiAgICBkaXNwbGF5VGhlbWUodGhlbWU6IHN0cmluZyk6IHZvaWQge1xuICAgICAgICBkb2N1bWVudC5ib2R5LnNldEF0dHJpYnV0ZSgnZGF0YS10aGVtZScsIHRoZW1lKTtcbiAgICAgICAgZm9yIChsZXQgaSA9IDA7IGkgPCB0aGlzLnRoZW1lQ2hhbmdlSGFuZGxlcnMubGVuZ3RoOyBpKyspe1xuICAgICAgICAgICAgdGhpcy50aGVtZUNoYW5nZUhhbmRsZXJzW2ldKHRoZW1lKTtcbiAgICAgICAgfVxuICAgIH1cbn1cbiJdfQ==