diff --git a/JAVASCRIPT/1.js b/JAVASCRIPT/1.js index 24b4bed..02beab0 100644 --- a/JAVASCRIPT/1.js +++ b/JAVASCRIPT/1.js @@ -1,19 +1,37 @@ /*CHANGE THEME*/ // Darkmode instance'ını oluştur const darkmode = new Darkmode(); +const metaTheme = document.getElementById("themeMeta"); +// Dark mode değiştiğinde çalışacak fonksiyon +function updateThemeColor(isDark) { + metaTheme.setAttribute("content", isDark ? "#100f2c" : "#F8F6E3"); +} + +// Toggle butonu dinleyicisi document.getElementById("darkmode-toggle").addEventListener("click", function () { darkmode.toggle(); // Dark mode'u aç/kapat - let metaTheme = document.getElementById("themeMeta"); - - // Karanlık modun aktif olup olmadığını localStorage'dan al + // Kendi dark mode'umuzu tarayıcıdaki dark mode gibi algılat const isDarkMode = darkmode.isActivated(); + updateThemeColor(isDarkMode); - // Doğrudan theme color'ı değiştir - metaTheme.setAttribute("content", isDarkMode ? "#100f2c" : "#F8F6E3"); + // Tarayıcıya "sistem teması değişti" gibi davranması için event gönder + window.matchMedia('(prefers-color-scheme: dark)').dispatchEvent(new Event('change')); }); +// Tarayıcının sistem teması değişirse güncelle +if (window.matchMedia) { + const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)'); + mediaQuery.addEventListener('change', function (e) { + updateThemeColor(e.matches); + }); + + // Sayfa ilk yüklendiğinde de kontrol et + updateThemeColor(mediaQuery.matches); +} + + /*SERVICES VISIBILITY*/ const boxes = document.querySelectorAll('.services_id');