Auto update
|
Before Width: | Height: | Size: 76 KiB After Width: | Height: | Size: 106 KiB |
|
Before Width: | Height: | Size: 52 KiB After Width: | Height: | Size: 62 KiB |
|
Before Width: | Height: | Size: 68 KiB After Width: | Height: | Size: 89 KiB |
|
Before Width: | Height: | Size: 60 KiB After Width: | Height: | Size: 65 KiB |
|
Before Width: | Height: | Size: 71 KiB After Width: | Height: | Size: 101 KiB |
|
Before Width: | Height: | Size: 74 KiB After Width: | Height: | Size: 108 KiB |
|
Before Width: | Height: | Size: 66 KiB After Width: | Height: | Size: 72 KiB |
|
Before Width: | Height: | Size: 228 KiB After Width: | Height: | Size: 111 KiB |
|
Before Width: | Height: | Size: 210 KiB After Width: | Height: | Size: 120 KiB |
|
Before Width: | Height: | Size: 262 KiB After Width: | Height: | Size: 131 KiB |
|
Before Width: | Height: | Size: 162 KiB After Width: | Height: | Size: 102 KiB |
|
Before Width: | Height: | Size: 183 KiB After Width: | Height: | Size: 97 KiB |
|
Before Width: | Height: | Size: 238 KiB After Width: | Height: | Size: 149 KiB |
|
Before Width: | Height: | Size: 258 KiB After Width: | Height: | Size: 121 KiB |
|
Before Width: | Height: | Size: 190 KiB After Width: | Height: | Size: 90 KiB |
|
|
@ -12,6 +12,44 @@ document.addEventListener('DOMContentLoaded', () => {
|
|||
// Theme Switcher Event Listeners
|
||||
const themeToggles = document.querySelectorAll('.theme-toggle');
|
||||
|
||||
function updateThemeImages(isLight) {
|
||||
const updateUrl = (url) => {
|
||||
if (!url) return url;
|
||||
const isTarget = url.includes('desk-') || url.includes('phone-');
|
||||
if (!isTarget) return url;
|
||||
|
||||
if (isLight) {
|
||||
if (!url.includes('-light.png')) {
|
||||
return url.replace('.png', '-light.png');
|
||||
}
|
||||
} else {
|
||||
if (url.includes('-light.png')) {
|
||||
return url.replace('-light.png', '.png');
|
||||
}
|
||||
}
|
||||
return url;
|
||||
};
|
||||
|
||||
document.querySelectorAll('img').forEach(img => {
|
||||
const src = img.getAttribute('src');
|
||||
if (src) {
|
||||
const newSrc = updateUrl(src);
|
||||
if (newSrc !== src) img.setAttribute('src', newSrc);
|
||||
}
|
||||
});
|
||||
|
||||
document.querySelectorAll('.ui-shot').forEach(shot => {
|
||||
const largeSrc = shot.getAttribute('data-large');
|
||||
if (largeSrc) {
|
||||
const newSrc = updateUrl(largeSrc);
|
||||
if (newSrc !== largeSrc) shot.setAttribute('data-large', newSrc);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Initial call to set correct images based on current theme
|
||||
updateThemeImages(document.documentElement.classList.contains('light-theme'));
|
||||
|
||||
themeToggles.forEach(toggle => {
|
||||
toggle.addEventListener('click', () => {
|
||||
document.documentElement.classList.add('theme-transitioning');
|
||||
|
|
@ -26,6 +64,7 @@ document.addEventListener('DOMContentLoaded', () => {
|
|||
|
||||
const isLight = document.documentElement.classList.contains('light-theme');
|
||||
localStorage.setItem('theme', isLight ? 'light' : 'dark');
|
||||
updateThemeImages(isLight);
|
||||
});
|
||||
});
|
||||
|
||||
|
|
|
|||