VueJS ile Dynamic Theme

Published in

SDTR

2 min readOct 22, 2020

Merhabalar,

iOS tarafında yayınlanan ve bazı websiteleri üzerinde de gördüğümüz, o tatlı dynamic theme’lar nasıl yapılır konusu hakkında konuşuyor olucaz.

ilk olarak Dynamic Theme Nedir ile başlayalım;

Adından da anlaşıldığı gibi bir görsel yardımı ile sitede ki renklerin bir buton veya farklı bir yapı ile çok fazla kod karmaşası olmadan değiştirilebilir hale getirilmesi olarak adlandırabiliriz.

Light mode üzerinde kullanacağımız stilleri VueJs tarafında colors isimli dosyamızda tutalım.

:root {  --color__bg: white;  --color__text: black;}

Yukarıda tanımladığımız değişkenleri oluşturucamız yeni stil dosyamız içerisinden var( — color__bg) şeklinde erişebiliriz.

Şimdi index html dosyamızı oluşturalım ve örnek html kodlarımızı yazalım.

<body>
  <div class="container" id="app">
    <button @click="toggleTheme">Toggle theme</button>
    <p class="text">
    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Corrupti minus in beatae tempore, excepturi, sed voluptas suscipit quas porro dolorem sequi et nesciunt voluptates debitis accusantium. Et, omnis porro? Sit.
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero quidem sequi distinctio atque, eligendi consectetur corporis, voluptas pariatur quasi blanditiis voluptate totam rem. Exercitationem minus consequuntur eius numquam impedit voluptatibus.
    </p>
  </div>
</body>

Yukarıda hazırlamış olduğumuz yapıda butona tıklanması durumunda mevcutta bulunan kapsayıcı div’in arkaplan rengini ve paragraf elemanının yazı rengini değiştiriyor olucaz.

index için hazırladığımız scss dosyamızın içerisine bir bakalım;

$color__bg: var(--color__bg);
$color__text: var(--color__text);body {
  background-color: $color__bg;
  color: $color__text;
}
.container {
  margin: 10px auto;
  padding-bottom: 10px;
  width: 500px;
}

Yukarıda ki scss dosyasında light mode için tanımlamalarımızı tamamlamadık. Arkaplan olarak ve yazı regi olarak ise siyah kullandık.

<button @click="toggleTheme">Toggle theme</button>

Yukarıda ki butonun tıklanması durumu üzerinden devam edelim.

Vue dosyamızı hazırlayarak renkleri dinamik değişecek şekilde yeniden düzenleyelim.

var app = new Vue({
  el: "#app",
  data: {
    theme: "light"
  },
  watch: {
    theme(theme) {
      document.documentElement.dataset.theme = theme;
    }
  },
  methods: {
    toggleTheme() {
      this.theme = this.theme === "light" ? "dark" : "light";
    }
  }
});

Yukarıda ki kod ile kapsayıcı divimize ulaştık ve Vue için tanımlamamızı yaptık. Bura da theme adında bir değişken oluşturarak style dosyamız içerisinden bu değişkenin durumuna göre dark mode veya light mode aktiflik işlemlerini yapıcaz.

Kodu biraz açıklamak gerekirse; theme değişkenin durumunu dinleyerek document.tdocumentElement.dataset yardımı ile stil tarafından ulaşacağımız değişken atamasını yaptık.

toggleTheme()

Yukarı daki method her tetiklendiğinde watch methodu ile tekrar değeri stil dosyamız için theme üzerine aktardık.

şimdi ise uygulamamızda ki bütün renkleri tuttuğumuz. Colors dosyamızı güncelleyerek devam edelim.

:root {
  --color__bg: white;
  --color__text: black;   @media screen {
    &[data-theme="dark"] {
      --color__bg: black;
      --color__text: white;
    }
  }}

Yukarıda ki kodlamada fark ettiğiniz gibi media screen altında tanımlamış olduğumuz theme değişkeninin durumunu kontrol ederek renk kodlarımızı güncelledik.

Dikkat etmemiz gereken nokta ise;

watch: {
    theme(theme) {
      document.documentElement.dataset.theme = theme;
    }
  }

yukarıda dataset.theme altında atadığımız değişkene aşağıda ki gibi style altından ulaşabiliyoruz.

&[data-theme="dark"]

Son durumda ise toggleTheme fonksiyonu çağrıldığında dataset.theme ile değişken durumu güncellenerek dynamic olarak renklerin değişme durumu sağlanmış olduk

Konuyla ilgili önerileriniz ve sorularınız varsa yorumlarınızı bekliyorum. Okuduğunuz için teşekkür ederim..

VueJS ile Dynamic Theme

Written by Emre Vatansever