43 lines
1.4 KiB
JavaScript
43 lines
1.4 KiB
JavaScript
|
export function setTheme(theme) {
|
||
|
|
document.body.classList.remove('dark-theme', 'light-theme');
|
||
|
|
document.body.classList.add(theme + '-theme');
|
||
|
|
|
||
|
|
const themeIcon = document.querySelector('#theme-toggle i');
|
||
|
|
if (themeIcon) {
|
||
|
|
themeIcon.className = theme === 'dark'
|
||
|
|
? 'bi bi-moon-stars-fill'
|
||
|
|
: 'bi bi-sun-fill';
|
||
|
|
}
|
||
|
|
|
||
|
|
updateThemeColors(theme);
|
||
|
|
}
|
||
|
|
|
||
|
|
function updateThemeColors(theme) {
|
||
|
|
const primaryColor = theme === 'dark' ? '#1a2e1a' : '#f8f9fa';
|
||
|
|
const textColor = theme === 'dark' ? '#f5f5f5' : '#212529';
|
||
|
|
const accentColor = '#d4af37';
|
||
|
|
|
||
|
|
document.body.style.backgroundColor = primaryColor;
|
||
|
|
document.body.style.color = textColor;
|
||
|
|
|
||
|
|
const links = document.querySelectorAll('a, .btn');
|
||
|
|
links.forEach(link => {
|
||
|
|
link.style.color = accentColor;
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
document.addEventListener('DOMContentLoaded', function() {
|
||
|
|
const savedTheme = localStorage.getItem('theme') || 'dark';
|
||
|
|
setTheme(savedTheme);
|
||
|
|
|
||
|
|
const themeToggle = document.getElementById('theme-toggle');
|
||
|
|
if (themeToggle) {
|
||
|
|
themeToggle.addEventListener('click', function() {
|
||
|
|
const currentTheme = document.body.classList.contains('dark-theme') ? 'dark' : 'light';
|
||
|
|
const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
|
||
|
|
setTheme(newTheme);
|
||
|
|
localStorage.setItem('theme', newTheme);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
});
|