58 lines
1.9 KiB
JavaScript
58 lines
1.9 KiB
JavaScript
// Theme switching functionality
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
const themeToggle = document.getElementById('theme-toggle');
|
|
const body = document.body;
|
|
const DARK_THEME = 'dark-theme';
|
|
const LIGHT_THEME = 'light-theme';
|
|
const THEME_KEY = '7sys-theme-preference';
|
|
|
|
// Initialize stars background
|
|
createStars();
|
|
|
|
// Load saved theme preference
|
|
const savedTheme = localStorage.getItem(THEME_KEY);
|
|
if (savedTheme) {
|
|
body.className = savedTheme;
|
|
}
|
|
|
|
// Theme toggle handler
|
|
themeToggle.addEventListener('click', () => {
|
|
const newTheme = body.classList.contains(DARK_THEME) ? LIGHT_THEME : DARK_THEME;
|
|
body.className = newTheme;
|
|
localStorage.setItem(THEME_KEY, newTheme);
|
|
});
|
|
|
|
// Create animated stars background
|
|
function createStars() {
|
|
const starsContainer = document.querySelector('.stars-background');
|
|
const STARS_COUNT = 50;
|
|
|
|
for (let i = 0; i < STARS_COUNT; i++) {
|
|
const star = document.createElement('div');
|
|
star.className = 'star';
|
|
star.style.cssText = `
|
|
position: absolute;
|
|
width: ${Math.random() * 3}px;
|
|
height: ${Math.random() * 3}px;
|
|
background: ${body.classList.contains(DARK_THEME) ? '#fff' : '#1a365d'};
|
|
left: ${Math.random() * 100}%;
|
|
top: ${Math.random() * 100}%;
|
|
opacity: ${Math.random()};
|
|
border-radius: 50%;
|
|
animation: twinkle ${2 + Math.random() * 3}s infinite ease-in-out;
|
|
`;
|
|
starsContainer.appendChild(star);
|
|
}
|
|
}
|
|
|
|
// Add twinkling animation to stylesheet
|
|
const style = document.createElement('style');
|
|
style.textContent = `
|
|
@keyframes twinkle {
|
|
0%, 100% { opacity: 0.2; }
|
|
50% { opacity: 1; }
|
|
}
|
|
`;
|
|
document.head.appendChild(style);
|
|
});
|