diff --git a/index.html b/index.html
index 09fa3d2..77217da 100644
--- a/index.html
+++ b/index.html
@@ -24,8 +24,10 @@
if (theme === 'dark' || (theme === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
document.documentElement.classList.add('dark');
+ document.body.classList.remove('light-mode-animated');
} else {
document.documentElement.classList.remove('dark');
+ document.body.classList.add('light-mode-animated');
}
};
applyTheme();
@@ -34,6 +36,20 @@
-
+
+
@@ -270,9 +323,35 @@
if (isDarkMode && isCurrentlyNight) {
createStars();
startShootingStars();
+ toggleSun(false);
+ } else if (!isDarkMode) {
+ removeStars();
+ stopShootingStars();
+ toggleSun(true);
} else {
removeStars();
stopShootingStars();
+ toggleSun(false);
+ }
+ };
+
+ // --- SUN LOGIC ---
+ const toggleSun = (show) => {
+ const sunContainer = document.getElementById('sun-container');
+ let sunElement = document.getElementById('animated-sun');
+
+ if (show) {
+ if (!sunElement) {
+ sunElement = document.createElement('div');
+ sunElement.id = 'animated-sun';
+ sunElement.className = 'sun';
+ sunContainer.appendChild(sunElement);
+ }
+ sunElement.classList.add('visible');
+ } else {
+ if (sunElement) {
+ sunElement.classList.remove('visible');
+ }
}
};
@@ -361,9 +440,22 @@
updateThemeButtons(savedTheme);
// Call applyTheme and createStars/ShootingStars initially based on savedTheme and time
applyTheme();
- if (document.documentElement.classList.contains('dark') && isNightTime()) {
+ // Initial check for stars, shooting stars, and sun based on current theme and time
+ const isDarkModeInitial = document.documentElement.classList.contains('dark');
+ const isCurrentlyNightInitial = isNightTime();
+
+ if (isDarkModeInitial && isCurrentlyNightInitial) {
createStars();
startShootingStars();
+ toggleSun(false);
+ } else if (!isDarkModeInitial) {
+ removeStars();
+ stopShootingStars();
+ toggleSun(true);
+ } else {
+ removeStars();
+ stopShootingStars();
+ toggleSun(false);
}
// Add event listeners
@@ -374,7 +466,26 @@
document.getElementById('theme-system').addEventListener('click', () => setTheme('system'));
// Listen for system theme changes
- window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', applyTheme);
+ window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
+ if (localStorage.getItem('theme') === 'system') {
+ applyTheme();
+ const isDarkMode = document.documentElement.classList.contains('dark');
+ const isCurrentlyNight = isNightTime();
+ if (isDarkMode && isCurrentlyNight) {
+ createStars();
+ startShootingStars();
+ toggleSun(false);
+ } else if (!isDarkMode) {
+ removeStars();
+ stopShootingStars();
+ toggleSun(true);
+ } else {
+ removeStars();
+ stopShootingStars();
+ toggleSun(false);
+ }
+ }
+ });
// Update time every minute
setInterval(updateTimeDisplay, 60000);