Sayfanın Tamamında Koyu / Açık Renkli Temaya Geçme

Sayfanın Tamamında Koyu / Açık Renkli Temaya Geçme

<!DOCTYPE html>
<html data-bs-theme="light">

<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>Page Title</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <link rel="stylesheet" href="./bootstrap-5.3.3-dist/css/bootstrap.css">
    <script src="./bootstrap-5.3.3-dist/js/bootstrap.js"></script>
</head>

<body>
    <div class="container">
        <button class="btn btn-outline-dark position-fixed" id="koyuTema" style="bottom: 10px;right: 300px;">Koyu Tema</button>
    </div>
</body>
<script>
    document.getElementById("koyuTema").addEventListener("click",function(){
        var html = document.getElementsByTagName("html")[0];
        var buton = document.getElementById("koyuTema");
        // alert();
        if(html.getAttributeNode("data-bs-theme").value == "light"){
            html.setAttribute("data-bs-theme","dark");
            buton.classList.remove("btn-outline-dark");
            buton.classList.add("btn-outline-light");
        }
        else{
            html.setAttribute("data-bs-theme","light");
            buton.classList.remove("btn-outline-light");
            buton.classList.add("btn-outline-dark");
        }
    });
</script>
</html>

 

 

102 Okunma Yorum yapılmamış 07/03/2025 11:37:30 07/03/2025 14:26:24

Yorumunuzu Ekleyin
Görsel Liste
Bootstrap Takvim Seçtiricisi (Datetime Picker)

25,078 okuma, 30/11/2014

Bootstrap Takvim Seçtiricisi (Datetime Picker)
Bootstrap CSS Componentleri

Bootstrap ile kullanılan CSS destekli HTML Componentlerden bazıları..

21,644 okuma, 20/10/2024

Bootstrap CSS Componentleri
Bootstrap Form Elemanları

Bootstrapın temel form mantığı ve bir kaç örnek...

20,060 okuma, 07/03/2025

Bootstrap Form Elemanları
Bootstrap Grid Sistemi

Bildiğiniz gibi Bootstrap ile responsive tasarımlar yapmak çok basit ve hızlı. İstediğimiz her öğe için birer yapılmış ve kopyala yapıştır yaparak hızlıca sitemizi Bootstrap ile şekillendirebiliriz.

19,113 okuma, 14/02/2025

Bootstrap Grid Sistemi
Bootstrap Class Referansı

Bootstrap v4.3.0 Class Listesi

13,489 okuma, 17/04/2019

Bootstrap Class Referansı
Bootstrap 3 JavaScript Componentleri

Bootstrap ile kullanılan Javascript destekli Componentlerden bazıları... Makalenin bazı bölümleri ingilizcedir.

11,678 okuma, 20/02/2017

Bootstrap 3 JavaScript Componentleri
Bootstrap 4 Navbar Menü Örnekleri

Normal bootstrap 4 navabarı ile fare üzerine gelince açılan, yatayda tüm ekranı kaplayan ve zemininde siyah gölgesi olan menü örnek kodları.

5,183 okuma, 04/06/2020

Bootstrap 4 Navbar Menü Örnekleri
Bootstrap 4 Class Referansı

3,970 okuma, 01/03/2019

Bootstrap 4 Class Referansı
Bootstrap 4 Yardımcı Kısa Kodlar

3,410 okuma, 04/06/2020

Bootstrap 4 Yardımcı Kısa Kodlar
Bootstrap 4 ile Ekranı 4 Eşit Parçaya Nasıl Bölebilirsiniz?

Örnekteki uygulama ile Ekranı 4 eşit parçaya bölebilirsiniz.

3,220 okuma, 26/01/2020

Bootstrap 4 ile Ekranı 4 Eşit Parçaya Nasıl Bölebilirsiniz?
Bootstrap Tablo Örnekleri

499 okuma, 28/02/2025

Bootstrap Tablo Örnekleri
Bootstrap Kart (Card) Kullanımı

442 okuma, 28/02/2025

Bootstrap Kart (Card) Kullanımı
Button Kullanımı

278 okuma, 28/02/2025

Button Kullanımı
Uyarı (Alert) Mesajı Sınıf

Alert sınıfı ile primary, success, info, warning, danger, secondary, dark, light arka plan renkle<br />rine sahip, dikkat çekici mesaj kutuları oluşturulabilir (Görsel 4.42). En temel kullanım şekli aşa<br />ğıdaki örnek kodlarda görülmektedir.

243 okuma, 28/02/2025

Uyarı (Alert) Mesajı Sınıf
Kenarlık Sınıfı

241 okuma, 28/02/2025

Kenarlık Sınıfı
Yükleniyor...
    Yükleniyor...