Jul 7, 2022
VueJS’te TailwindCSS ile Dark Mode ayarı nasıl yapılır
Web uygulamalarına eklenen renk değiştirme opsiyonu son zamanlarda kullanıcı deneyimi (UX) standartlarının bir parçası haline geldi. Eğer projenizde Tailwind CSS Framework’ü kullanıyorsanız bunu ayarlamak çok kolay.
Bir VueJS projesine Tailwind CSS’in nasıl install edileceğini önceki yazılarımda açıklamıştım. Tailwind CSS ve GitHub Copilot’u birlikte kullanarak kendi UI standartlarınızı yapay zekadan yardım alarak nasıl kısa sürede tanımlayacağınızı da yine başka bir yazımda açıklamıştım.
Live Demo: https://tailwind-css-vuejs-dark-mode.netlify.app/
GitHub Repo: https://github.com/gayret/tailwind-css-vuejs-dark-mode
Hadi başlayalım
Bilindiği üzere Tailwind CSS, reserved class’larla UI tasarımı yönetmemizi sağlayan bir CSS Framework. Dolayısıyla Dark Mode yönetimini de yine class’larla yapacağız.
Öncelikle Dark Mode yönetimini class ile yapacağımızı tailwind.config.js içerisinde belirtelim.
tailwind.config.jsmodule.exports = {
darkMode: 'class',
}
Dark Mode’a geçildiğindebody arka planının tamamına koyu bir gri rengi atamak istediğimizde aşağıdaki gibi uygulayabiliriz.
index.html<body class="bg-white dark:bg-gray-800">
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
Böylece projemizin varsayılan arka plan rengini white olarak atadık. Dark Mode’a geçildikten sonraki arka plan rengini ise gray-800 diye kodlanan koyu bir gri yaptık.
Ayarladığımız bu geçişi görmek için yapmamız gereken tek şey, geçişi tetiklemek. Bunun için toggleTheme adlı bir method oluşturalım.
const toggleTheme = () => {
state.theme = state.theme === 'light' ? 'dark' : 'light'
if (state.theme === 'dark') {
document.documentElement.classList.add('dark')
} else {
document.documentElement.classList.remove('dark')
}
}İsteğe bağlı olarak theme bilgisini localStorage’da da tutabiliriz, bunu yaparsak kullanıcının sonraki oturumunda Theme Mode bilgisi hatırlanır ve kullanıcı bıraktığı gibi bulur.
Bu method’u bir button ile tetikleyebiliriz.
<button @click="toggleTheme">
{{ state.theme === 'light' ? 'Dark' : 'Light' }}
</button>Hepsi bu kadar. Artık dark: ön ekiyle birlikte ekleyeceğiniz tüm Tailwind CSS özellikleri, kullanıcı Dark Mode’a geçtiğinde aktif olacak.
