KoDemi

Proje Detayları

Bu projede, CSS değişkenlerini kullanarak tema değiştirilebilir bir dashboard oluşturacaksınız. Bu alıştırma, öğrendiğiniz CSS değişken özelliklerini gerçek bir web uygulaması projesinde uygulamanıza yardımcı olacaktır.

Proje Adımları:

Bir HTML dosyası oluşturun ve dashboard için temel yapıyı hazırlayın (header, sidebar, main content, cards).
Bir CSS dosyası oluşturun ve kapsamlı bir CSS değişken sistemi tanımlayın (renkler, boyutlar, boşluklar).
En az üç farklı tema oluşturun (açık, koyu, renkli) ve her tema için değişken değerlerini belirleyin.
Dashboard bileşenlerini CSS değişkenleri kullanarak stilleyin (tüm renkler, boyutlar değişken olmalı).
Tema değiştirme butonları ekleyin ve JavaScript ile tema değiştirme fonksiyonunu oluşturun.
Kullanıcının tema tercihini localStorage'a kaydedin ve sayfa yenilendiğinde geri yükleyin.
Hover efektleri ve geçişler için de CSS değişkenlerini kullanın.
Responsive tasarım için farklı ekran boyutlarında değişken değerlerini ayarlayın.
Tema değişikliklerinin tüm bileşenlerde tutarlı şekilde uygulandığını test edin.

Başlangıç HTML Kodu:

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tema Değiştirilebilir Dashboard</title>
    <link rel="stylesheet" href="dashboard.css">
</head>
<body>
    <div class="dashboard">
        <header class="header">
            <h1>Dashboard</h1>
            <div class="theme-switcher">
                <button onclick="changeTheme('light')">Açık</button>
                <button onclick="changeTheme('dark')">Koyu</button>
                <button onclick="changeTheme('colorful')">Renkli</button>
            </div>
        </header>
        
        <aside class="sidebar">
            <nav>
                <ul>
                    <li><a href="#">Ana Sayfa</a></li>
                    <li><a href="#">Analitik</a></li>
                    <li><a href="#">Raporlar</a></li>
                    <li><a href="#">Ayarlar</a></li>
                </ul>
            </nav>
        </aside>
        
        <main class="main-content">
            <div class="stats-grid">
                <div class="stat-card">
                    <h3>Toplam Kullanıcı</h3>
                    <div class="stat-number">1,234</div>
                </div>
                <div class="stat-card">
                    <h3>Aylık Gelir</h3>
                    <div class="stat-number">₺45,678</div>
                </div>
                <div class="stat-card">
                    <h3>Aktif Projeler</h3>
                    <div class="stat-number">23</div>
                </div>
                <div class="stat-card">
                    <h3>Tamamlanan</h3>
                    <div class="stat-number">156</div>
                </div>
            </div>
            
            <div class="content-section">
                <h2>Son Aktiviteler</h2>
                <div class="activity-list">
                    <div class="activity-item">Yeni kullanıcı kaydı</div>
                    <div class="activity-item">Proje tamamlandı</div>
                    <div class="activity-item">Ödeme alındı</div>
                </div>
            </div>
        </main>
    </div>
    
    <script src="dashboard.js"></script>
</body>
</html>

Bu HTML dosyasını ve boş dashboard.css ve dashboard.js dosyalarını oluşturun, ardından dosyaları yukarıdaki adımlara göre doldurun.