Neler yeni
XenForo Bannerlar
Modern AdBlock Uyarısı

Foruma hoş geldin, Ziyaretçi

Forum içeriğine ve tüm hizmetlerimize erişim sağlamak için foruma kayıt olmalı ya da giriş yapmalısınız. Foruma üye olmak tamamen ücretsizdir.

Giriş yap Şimdi kayıt ol
✦ Reklam Bilgi ve İletişim İçin Tıklayın

Web geliştirme Karanlık Tema Tasarımı: HTML + CSS Kod Örnekleri

Fatih Bulut

Fatih Bulut

Süper Üye
Katılım
6 Kas 2021
Mesajlar
3,276
Tepkime puanı
4,783
Puanları
113
Yaş
31
Konum
Türkiye
Dc
fatihbulut

Karanlık Tema Tasarımı: HTML ve CSS ile Modern Uygulama​

Karanlık tema (dark mode), son yıllarda hem kullanıcı deneyimini iyileştiren hem de enerji tasarrufu sağlayan bir trend haline geldi. Bu kapsamlı rehberde, HTML ve CSS kullanarak nasıl profesyonel düzeyde karanlık tema uygulayabileceğinizi adım adım ele alacağız.

1. Temel Karanlık Tema Uygulaması​

CSS Değişkenleri ile Tema Yönetimi​

HTML: 
<!DOCTYPE html>
<html lang="tr" data-theme="light">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Karanlık Tema Örneği</title>
    <style>
        :root {
            /* Light Theme Vars */
            --bg-color: #ffffff;
            --text-color: #333333;
            --primary-color: #4a6fa5;
            --secondary-color: #f8f9fa;
            --border-color: #e0e0e0;
        }

        [data-theme="dark"] {
            /* Dark Theme Vars */
            --bg-color: #121212;
            --text-color: #e0e0e0;
            --primary-color: #6a8fc7;
            --secondary-color: #1e1e1e;
            --border-color: #333333;
        }

        body {
            background-color: var(--bg-color);
            color: var(--text-color);
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            line-height: 1.6;
            margin: 0;
            padding: 20px;
            transition: background-color 0.3s ease, color 0.3s ease;
        }

        button {
            background-color: var(--primary-color);
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

        .card {
            background-color: var(--secondary-color);
            border: 1px solid var(--border-color);
            border-radius: 8px;
            padding: 20px;
            margin: 20px 0;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }

        .theme-switcher {
            position: fixed;
            bottom: 20px;
            right: 20px;
        }
    </style>
</head>
<body>
    <div class="card">
        <h1>Karanlık Tema Örneği</h1>
        <p>Bu bir karanlık tema uygulama örneğidir. CSS değişkenleri ve data attribute'ları kullanılarak oluşturulmuştur.</p>
    </div>

    <button class="theme-switcher" onclick="toggleTheme()">Temayı Değiştir</button>

    <script>
        function toggleTheme() {
            const currentTheme = document.documentElement.getAttribute('data-theme');
            const newTheme = currentTheme === 'light' ? 'dark' : 'light';
            document.documentElement.setAttribute('data-theme', newTheme);
            
            // Kullanıcı tercihini localStorage'a kaydet
            localStorage.setItem('theme', newTheme);
        }

        // Sayfa yüklendiğinde kullanıcı tercihini kontrol et
        document.addEventListener('DOMContentLoaded', () => {
            const savedTheme = localStorage.getItem('theme') || 'light';
            document.documentElement.setAttribute('data-theme', savedTheme);
        });
    </script>
</body>
</html>

2. Sistem Tema Tercihine Göre Otomatik Ayarlama​

Kullanıcının işletim sistemi veya tarayıcı tercihine göre otomatik tema seçimi:
CSS: 
@media (prefers-color-scheme: dark) {
    :root {
        --bg-color: #121212;
        --text-color: #e0e0e0;
        --primary-color: #6a8fc7;
        --secondary-color: #1e1e1e;
        --border-color: #333333;
    }
}

@media (prefers-color-scheme: light) {
    :root {
        --bg-color: #ffffff;
        --text-color: #333333;
        --primary-color: #4a6fa5;
        --secondary-color: #f8f9fa;
        --border-color: #e0e0e0;
    }
}
JavaScript ile sistem temasını algılama ve senkronize etme:
JavaScript: 
// Sistem teması değişikliklerini dinle
const systemThemeQuery = window.matchMedia('(prefers-color-scheme: dark)');

function updateSystemTheme(e) {
    const newTheme = e.matches ? 'dark' : 'light';
    document.documentElement.setAttribute('data-theme', newTheme);
    localStorage.setItem('theme', newTheme);
}

// İlk yüklemede ve değişikliklerde tetikle
systemThemeQuery.addListener(updateSystemTheme);
updateSystemTheme(systemThemeQuery);

3. Profesyonel Karanlık Tema Renk Paleti​

Doğru renk seçimi karanlık tema için kritik öneme sahiptir:
CSS: 
:root {
    /* Light Theme */
    --bg-color: #ffffff;
    --surface-color: #f8f9fa;
    --primary-color: #4a6fa5;
    --primary-variant: #3a5a8f;
    --secondary-color: #6c757d;
    --text-color: #212529;
    --text-secondary: #495057;
    --error-color: #dc3545;
    --border-color: #dee2e6;
    --shadow-color: rgba(0, 0, 0, 0.1);
}

[data-theme="dark"] {
    /* Dark Theme - Material Design Guidelines */
    --bg-color: #121212;                 /* Background */
    --surface-color: #1e1e1e;            /* Surface/Cards */
    --primary-color: #bb86fc;            /* Primary */
    --primary-variant: #3700b3;          /* Primary Variant */
    --secondary-color: #03dac6;          /* Secondary */
    --text-color: #e1e1e1;               /* On Background */
    --text-secondary: #a1a1a1;           /* Secondary Text */
    --error-color: #cf6679;              /* Error */
    --border-color: #333333;             /* Borders */
    --shadow-color: rgba(0, 0, 0, 0.5);  /* Shadows */
}

4. Bileşen Bazlı Karanlık Tema Örnekleri​

Navigation Bar​

HTML: 
<nav class="navbar">
    <div class="navbar-brand">Logo</div>
    <ul class="navbar-nav">
        <li><a href="#">Anasayfa</a></li>
        <li><a href="#">Hakkımızda</a></li>
        <li><a href="#">İletişim</a></li>
    </ul>
</nav>
CSS: 
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 2rem;
    background-color: var(--surface-color);
    box-shadow: 0 2px 4px var(--shadow-color);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.navbar-brand {
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--primary-color);
}

.navbar-nav {
    display: flex;
    list-style: none;
    gap: 1.5rem;
}

.navbar-nav a {
    text-decoration: none;
    color: var(--text-color);
    transition: color 0.3s ease;
}

.navbar-nav a:hover {
    color: var(--primary-color);
}

Kart Bileşeni​

HTML: 
<div class="card">
    <img src="https://via.placeholder.com/400x200" alt="Örnek Resim" class="card-img">
    <div class="card-body">
        <h3 class="card-title">Kart Başlığı</h3>
        <p class="card-text">Bu bir kart bileşeni örneğidir. Karanlık temada otomatik olarak renkleri değişir.</p>
        <button class="card-btn">Detaylar</button>
    </div>
</div>
CSS: 
.card {
    width: 100%;
    max-width: 400px;
    background-color: var(--surface-color);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 6px var(--shadow-color);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 12px var(--shadow-color);
}

.card-img {
    width: 100%;
    height: auto;
    display: block;
}

.card-body {
    padding: 1.5rem;
}

.card-title {
    margin-top: 0;
    color: var(--text-color);
}

.card-text {
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
}

.card-btn {
    background-color: var(--primary-color);
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.card-btn:hover {
    background-color: var(--primary-variant);
}

Form Elementleri​


HTML: 
<form class="custom-form">
    <div class="form-group">
        <label for="email">E-posta Adresi</label>
        <input type="email" id="email" placeholder="ornek@mail.com">
    </div>
    <div class="form-group">
        <label for="password">Şifre</label>
        <input type="password" id="password" placeholder="Şifrenizi girin">
    </div>
    <button type="submit" class="form-submit">Giriş Yap</button>
</form>
CSS: 
.custom-form {
    max-width: 500px;
    margin: 2rem auto;
    padding: 2rem;
    background-color: var(--surface-color);
    border-radius: 8px;
    box-shadow: 0 2px 10px var(--shadow-color);
}

.form-group {
    margin-bottom: 1.5rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    color: var(--text-color);
    font-weight: 500;
}

.form-group input {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 5px;
    background-color: var(--bg-color);
    color: var(--text-color);
    font-size: 1rem;
    transition: border-color 0.3s ease;
}

.form-group input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(74, 111, 165, 0.2);
}

.form-submit {
    width: 100%;
    padding: 0.75rem;
    background-color: var(--primary-color);
    color: white;
    border: none;
    border-radius: 5px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.form-submit:hover {
    background-color: var(--primary-variant);
}

5. Geçiş Animasyonları ve Mikro Etkileşimler​

CSS: 
/* Temel geçişler */
body, button, input, .card, .navbar {
    transition:
        background-color 0.3s ease,
        color 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease;
}

/* Buton hover efekti */
button {
    position: relative;
    overflow: hidden;
}

button::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 5px;
    height: 5px;
    background: rgba(255, 255, 255, 0.5);
    opacity: 0;
    border-radius: 100%;
    transform: scale(1, 1) translate(-50%, -50%);
    transform-origin: 50% 50%;
}

button:focus:not(:active)::after {
    animation: ripple 0.6s ease-out;
}

@keyframes ripple {
    0% {
        transform: scale(0, 0);
        opacity: 0.5;
    }
    100% {
        transform: scale(20, 20);
        opacity: 0;
    }
}

/* Input focus efekti */
input:focus {
    transition:
        border-color 0.3s ease,
        box-shadow 0.3s ease;
}

/* Kart hover efekti */
.card {
    transform: perspective(1000px) translateZ(0);
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.card:hover {
    transform: perspective(1000px) translate(50px);
}

6. Karanlık Tema için Önemli İpuçları​

  1. Renk Kontrastı: Metin ve arkaplan arasında yeterli kontrast sağlayın (minimum 4.5:1)
  2. Doygunluk Azaltma: Parlak renkler yerine daha az doygun renkler kullanın
CSS: 
[data-theme="dark"] {
    --primary-color: hsl(215, 50%, 65%); /* Daha az doygun mavi */
}

Gölgeler: Karanlık temada daha yumuşak gölgeler kullanın

CSS: 
[data-theme="dark"] {
    --shadow-color: rgba(0, 0, 0, 0.3);
}
Görseller: Karanlık temada daha açık görseller kullanmayı düşünün

CSS: 
[data-theme="dark"] img {
    opacity: 0.9;
    filter: brightness(0.9);
}
  1. Sistem Kaynakları: prefers-color-scheme medya sorgularını kullanarak sistem temasıyla senkronize olun
  2. Kullanıcı Kontrolü: Temayı değiştirme seçeneğini kullanıcıya bırakın ve tercihini hatırlayın

7. Tam Örnek: Karanlık Tema Destekli Portfolio Sayfası​

HTML: 
<!DOCTYPE html>
<html lang="tr" data-theme="light">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Portfolio - Karanlık Tema</title>
    <style>
        :root {
            /* Light Theme */
            --bg-color: #f8f9fa;
            --surface-color: #ffffff;
            --primary-color: #4a6fa5;
            --primary-variant: #3a5a8f;
            --secondary-color: #6c757d;
            --text-color: #212529;
            --text-secondary: #495057;
            --error-color: #dc3545;
            --border-color: #dee2e6;
            --shadow-color: rgba(0, 0, 0, 0.1);
        }

        [data-theme="dark"] {
            /* Dark Theme */
            --bg-color: #121212;
            --surface-color: #1e1e1e;
            --primary-color: #6a8fc7;
            --primary-variant: #4a6fa5;
            --secondary-color: #8e8e8e;
            --text-color: #e0e0e0;
            --text-secondary: #a1a1a1;
            --error-color: #cf6679;
            --border-color: #333333;
            --shadow-color: rgba(0, 0, 0, 0.3);
        }

        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        body {
            background-color: var(--bg-color);
            color: var(--text-color);
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            line-height: 1.6;
            transition: background-color 0.3s ease, color 0.3s ease;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }

        /* Header Styles */
        header {
            background-color: var(--surface-color);
            box-shadow: 0 2px 10px var(--shadow-color);
            position: sticky;
            top: 0;
            z-index: 1000;
        }

        .navbar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 1rem 0;
        }

        .logo {
            font-size: 1.5rem;
            font-weight: bold;
            color: var(--primary-color);
            text-decoration: none;
        }

        .nav-links {
            display: flex;
            list-style: none;
            gap: 1.5rem;
        }

        .nav-links a {
            text-decoration: none;
            color: var(--text-color);
            transition: color 0.3s ease;
        }

        .nav-links a:hover {
            color: var(--primary-color);
        }

        /* Hero Section */
        .hero {
            padding: 5rem 0;
            text-align: center;
        }

        .hero h1 {
            font-size: 3rem;
            margin-bottom: 1rem;
        }

        .hero p {
            font-size: 1.2rem;
            color: var(--text-secondary);
            max-width: 700px;
            margin: 0 auto 2rem;
        }

        .btn {
            display: inline-block;
            background-color: var(--primary-color);
            color: white;
            padding: 0.75rem 1.5rem;
            border-radius: 5px;
            text-decoration: none;
            font-weight: 600;
            transition: background-color 0.3s ease;
        }

        .btn:hover {
            background-color: var(--primary-variant);
        }

        /* Portfolio Grid */
        .portfolio {
            padding: 3rem 0;
        }

        .section-title {
            text-align: center;
            margin-bottom: 3rem;
            font-size: 2rem;
        }

        .portfolio-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 2rem;
        }

        .portfolio-item {
            background-color: var(--surface-color);
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 4px 6px var(--shadow-color);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .portfolio-item:hover {
            transform: translateY(-5px);
            box-shadow: 0 6px 12px var(--shadow-color);
        }

        .portfolio-img {
            width: 100%;
            height: 200px;
            object-fit: cover;
        }

        .portfolio-content {
            padding: 1.5rem;
        }

        .portfolio-title {
            margin-bottom: 0.5rem;
            color: var(--text-color);
        }

        .portfolio-description {
            color: var(--text-secondary);
            margin-bottom: 1rem;
        }

        /* Footer */
        footer {
            background-color: var(--surface-color);
            padding: 2rem 0;
            text-align: center;
            margin-top: 3rem;
            box-shadow: 0 -2px 10px var(--shadow-color);
        }

        .footer-text {
            color: var(--text-secondary);
        }

        /* Theme Switcher */
        .theme-switcher {
            position: fixed;
            bottom: 20px;
            right: 20px;
            background-color: var(--primary-color);
            color: white;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            box-shadow: 0 2px 10px var(--shadow-color);
            border: none;
            transition: background-color 0.3s ease;
        }

        .theme-switcher:hover {
            background-color: var(--primary-variant);
        }

        /* Responsive */
        @media (max-width: 768px) {
            .navbar {
                flex-direction: column;
                gap: 1rem;
            }
            
            .nav-links {
                gap: 1rem;
            }
            
            .hero h1 {
                font-size: 2.5rem;
            }
        }
    </style>
</head>
<body>
    <header>
        <div class="container">
            <nav class="navbar">
                <a href="#" class="logo">Portfolio</a>
                <ul class="nav-links">
                    <li><a href="#">Anasayfa</a></li>
                    <li><a href="#">Projeler</a></li>
                    <li><a href="#">Hakkımda</a></li>
                    <li><a href="#">İletişim</a></li>
                </ul>
            </nav>
        </div>
    </header>

    <section class="hero">
        <div class="container">
            <h1>Yaratıcı Tasarımlar</h1>
            <p>Modern ve responsive web tasarımlarıyla markanızı bir sonraki seviyeye taşıyın. Karanlık tema desteğiyle göz yormayan bir deneyim sunuyoruz.</p>
            <a href="#" class="btn">Projeleri İncele</a>
        </div>
    </section>

    <section class="portfolio">
        <div class="container">
            <h2 class="section-title">Son Projeler</h2>
            <div class="portfolio-grid">
                <div class="portfolio-item">
                    <img src="https://source.unsplash.com/random/600x400/?webdesign" alt="Web Tasarımı" class="portfolio-img">
                    <div class="portfolio-content">
                        <h3 class="portfolio-title">E-ticaret Sitesi</h3>
                        <p class="portfolio-description">Modern ve kullanıcı dostu bir e-ticaret çözümü.</p>
                        <a href="#" class="btn">Detaylar</a>
                    </div>
                </div>
                <div class="portfolio-item">
                    <img src="https://source.unsplash.com/random/600x400/?mobileapp" alt="Mobil Uygulama" class="portfolio-img">
                    <div class="portfolio-content">
                        <h3 class="portfolio-title">Mobil Uygulama</h3>
                        <p class="portfolio-description">iOS ve Android için kullanıcı dostu mobil uygulama.</p>
                        <a href="#" class="btn">Detaylar</a>
                    </div>
                </div>
                <div class="portfolio-item">
                    <img src="https://source.unsplash.com/random/600x400/?dashboard" alt="Dashboard" class="portfolio-img">
                    <div class="portfolio-content">
                        <h3 class="portfolio-title">Yönetim Paneli</h3>
                        <p class="portfolio-description">Veri analitiği için gelişmiş yönetim paneli.</p>
                        <a href="#" class="btn">Detaylar</a>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <footer>
        <div class="container">
            <p class="footer-text">© 2023 Portfolio. Tüm hakları saklıdır.</p>
        </div>
    </footer>

    <button class="theme-switcher" onclick="toggleTheme()">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <circle cx="12" cy="12" r="5"></circle>
            <path d="M12 1v2"></path>
            <path d="M12 21v2"></path>
            <path d="M4.22 4.22l1.42 1.42"></path>
            <path d="M18.36 18.36l1.42 1.42"></path>
            <path d="M1 12h2"></path>
            <path d="M21 12h2"></path>
            <path d="M4.22 19.78l1.42-1.42"></path>
            <path d="M18.36 5.64l1.42-1.42"></path>
        </svg>
    </button>

    <script>
        function toggleTheme() {
            const currentTheme = document.documentElement.getAttribute('data-theme');
            const newTheme = currentTheme === 'light' ? 'dark' : 'light';
            document.documentElement.setAttribute('data-theme', newTheme);
            localStorage.setItem('theme', newTheme);
        }

        // Sayfa yüklendiğinde tema kontrolü
        document.addEventListener('DOMContentLoaded', () => {
            const savedTheme = localStorage.getItem('theme') || 'light';
            document.documentElement.setAttribute('data-theme', savedTheme);
            
            // Sistem teması tercihini dinle
            const systemThemeQuery = window.matchMedia('(prefers-color-scheme: dark)');
            
            function updateSystemTheme(e) {
                const newTheme = e.matches ? 'dark' : 'light';
                if (!localStorage.getItem('theme')) {
                    document.documentElement.setAttribute('data-theme', newTheme);
                }
            }
            
            systemThemeQuery.addListener(updateSystemTheme);
        });
    </script>
</body>
</html>

Sonuç​

Karanlık tema uygularken dikkat edilmesi gereken temel noktalar:
  1. CSS Değişkenleri Kullanın: Renk yönetimini kolaylaştırır ve tutarlılık sağlar
  2. Geçiş Efekti Ekleyin: Tema değişikliklerinde animasyon kullanın
  3. Kullanıcı Tercihini Hatırlayın: localStorage ile tema tercihini saklayın
  4. Sistem Tema Ayarlarını Destekleyin: prefers-color-scheme medya sorgularını kullanın
  5. Renk Kontrastına Dikkat Edin: Okunabilirliği asla gözden kaçırmayın
  6. Bileşenleri Tema Desteğiyle Tasarlayın: Her bileşenin her temada iyi göründüğünden emin olun
Karanlık tema, modern web tasarımının vazgeçilmez bir parçası haline gelmiştir. Doğru uygulandığında hem kullanıcı deneyimini iyileştirir hem de uygulamanızın profesyonelliğini artırır.
 
Cevap yazmak için giriş yap yada kayıt ol.

Forumdan daha fazla yararlanmak için giriş yapın yada üye olun!

Forumdan daha fazla yararlanmak için giriş yapın veya kayıt olun!

Kayıt ol

Forumda bir hesap oluşturmak tamamen ücretsizdir.

Şimdi kayıt ol
Giriş yap

Eğer bir hesabınız var ise lütfen giriş yapın

Giriş yap
2.9K
Konular
8.9K
Mesajlar
3K
Kullanıcılar
riva2
Son üye

Tema düzenleyici

Tema özelletirmeleri

Karanlık mod

Temanızın bütününde uygulanan koyu renk kullanım için tercih edile bilir.

Izgara görünüm

Forumlar listelenme yapısını değiştirerek ızgara görünüme geçe bilirsiniz.

Resimli ızgara görünüm

Izgara görünümde forumlar için atanmış arka plan resimlerini açıp/kapata bilirsiniz.

Kenar çubuğunu kapat/aç

Forum kenar çubuğu kapatarak kalabalık görünümden kurtula bilirsiniz.

Kenar çubuğunu yapıştır

Scroll bar hareketlerine duyarlı olarak yapışkan bir kenar çubuğu kullanımı sağlar.

Header alanı animasyonu

Header alanında bulunan hareketli parçacıları açıp/kapata bilirsiniz.

Grafik arka planlar

Granit arka planlar