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 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 açıklamıştım.

Live Demo:

GitHub Repo:

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 ="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.

--

--

Yazılım geliştiririm, kısa film yönetirim ve yazılar yazarım.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Safa Gayret

Yazılım geliştiririm, kısa film yönetirim ve yazılar yazarım.