--- --- export default class ThemeColors { constructor() { // this.theme set in initThemeColors(); this.favicon = document.querySelector('[rel="icon"]'); this.navBonsai = document.getElementById('nav-bonsai'); this.navBase = document.getElementById('nav-base'); this.themeColorBtns = document.querySelectorAll('a[data-theme-id]'); // logo this.homeLogo = document.getElementById('home-logo'); this.rootLogo = document.getElementById('root-logo'); this.init(); } init() { this.initThemeColors(); this.bindEvents(); } bindEvents() { Array.prototype.forEach.call(this.themeColorBtns, (btn) => { btn.addEventListener('click', (event) => { this.updateThemeColors(event); }); }); } initThemeColors() { this.theme = localStorage.getItem("theme-colors"); if (!this.theme) { this.theme = '{{ site.bonsai.default_theme }}' !== "" ? '{{ site.bonsai.default_theme }}' : '{{ site.data.themes[0].id }}'; } this.updateThemeColors(); } updateThemeColors (event) { if (event) { this.theme = event.target.dataset.themeId; } // update theme color data document.documentElement.setAttribute('data-theme', this.theme); // update icons and images this.favicon.setAttribute('href', `{{site.baseurl}}${getComputedStyle(document.documentElement).getPropertyValue('--favicon-src')}`.replaceAll(/\s/g,'')); this.navBase.setAttribute('src', `{{site.baseurl}}${getComputedStyle(document.documentElement).getPropertyValue('--nav-burger-base')}`.replaceAll(/\s/g,'')); this.navBonsai.setAttribute('src', `{{site.baseurl}}${getComputedStyle(document.documentElement).getPropertyValue('--nav-burger-bonsai')}`.replaceAll(/\s/g,'')); if (this.homeLogo) { this.homeLogo.setAttribute('src', `{{site.baseurl}}${getComputedStyle(document.documentElement).getPropertyValue('--logo-src')}`.replaceAll(/\s/g,'')); } if (this.rootLogo) { this.rootLogo.setAttribute('src', `{{site.baseurl}}${getComputedStyle(document.documentElement).getPropertyValue('--logo-src')}`.replaceAll(/\s/g,'')); } // save to local storage window.localStorage.setItem('theme-colors', this.theme); } }