22-avgust, 2026 · 3 daqiqa
Mavzu almashganda saytning yarmi nega eski rangda qoldi
Saytga ikki mavzu kerak bo'ldi: sukut bo'yicha yorug' va tugma orqali qorong'i. Oddiy qurilma — html elementidagi CSS o'zgaruvchilari, data-theme="dark" belgisi ularning qiymatlarini almashtiradi.
Almashtirgich darrov ishladi. Fon, chegaralar, tugmalar — hammasi o'zgardi. Loyiha kartochkalarining sarlavhalari esa qora fonda deyarli qora bo'lib qoldi. Sahifani qayta yuklash hammasini tuzatardi.
Sabab boshqa joyda. Sarlavhalarda transition-colors turgan. Oddiy xususiyat o'zgarsa, brauzer o'tishni halol o'ynatadi. Bu yerda esa xususiyat emas, u o'qiydigan o'zgaruvchi o'zgargan. Bog'lanmagan foydalanuvchi o'zgaruvchisi uchun Chrome buni animatsiyalanadigan xususiyatni qayta hisoblash uchun sabab deb bilmaydi.
Yechim — almashtirish vaqtiga o'tishlarni olib tashlash. Asosiy qator: void root.offsetHeight — o'lchamni o'qish brauzerni uslublarni shu yerda qayta hisoblashga majbur qiladi, o'tishlar hali o'chirilgan holda.
Nega requestAnimationFrame emas: fon oynachasida kadrlar chizilmaydi, ishlov beruvchi chaqirilmaydi va sinf abadiy osilib qoladi.
function toggle() { const next = theme === "dark" ? "light" : "dark"; const root = document.documentElement; root.classList.add("theme-switching"); if (next === "dark") { root.setAttribute("data-theme", "dark"); } else { root.removeAttribute("data-theme"); } // Чтение offsetHeight заставляет пересчитать стили прямо здесь, // пока переходы выключены. Именно так, а не через // requestAnimationFrame: в фоновой вкладке кадры не рисуются, // обработчик бы не вызвался, и класс завис бы навсегда. void root.offsetHeight; root.classList.remove("theme-switching"); localStorage.setItem("ithub:theme", next); setTheme(next);}