50 lines
1.6 KiB
JavaScript
50 lines
1.6 KiB
JavaScript
/**
|
|
* -----------------------
|
|
* Color themes
|
|
* -----------------------
|
|
*/
|
|
function toggleColorTheme() {
|
|
const currentTheme = document.documentElement.getAttribute('data-theme');
|
|
const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
|
|
document.documentElement.setAttribute('data-theme', newTheme);
|
|
localStorage.setItem('color-theme', newTheme);
|
|
}
|
|
|
|
function updateButtonText() {
|
|
const currentTheme = document.documentElement.getAttribute('data-theme');
|
|
const button = document.querySelector('.color-theme-toggle');
|
|
button.textContent = currentTheme === 'dark' ? '𖤓' : '🌙';
|
|
}
|
|
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
const savedTheme = localStorage.getItem('color-theme');
|
|
if (savedTheme) {
|
|
document.documentElement.setAttribute('data-theme', savedTheme);
|
|
} else {
|
|
const prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
|
|
document.documentElement.setAttribute('data-theme', prefersDark ? 'dark' : 'light');
|
|
}
|
|
updateButtonText();
|
|
|
|
const button = document.querySelector('.color-theme-toggle');
|
|
button.addEventListener('click', () => {
|
|
toggleColorTheme();
|
|
updateButtonText();
|
|
});
|
|
});
|
|
|
|
/**
|
|
* -----------------------
|
|
* Sidebar toggle
|
|
* -----------------------
|
|
*/
|
|
|
|
function toggleSidebar() {
|
|
const sidebar = document.querySelector('.sidebar');
|
|
sidebar.classList.toggle('collapsed');
|
|
}
|
|
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
const button = document.querySelector('.sidebar-toggle');
|
|
button.addEventListener('click', toggleSidebar);
|
|
}); |