JSFiddle - React, Tailwind, and code Playground

by Ali Uygur

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <link rel="stylesheet" href="main.css"> <!-- Dark mode stilini içeren CSS dosyası -->
  <title>Anasayfa</title>
</head>
<body>

<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href=" https://www.mintik.com/css-gece-modu-ta…mi-nasil-yapilir.html">Anasayfa</a>
  <ul class="custom-control custom-switch mt-3">
  <input type="checkbox" class="custom-control-input" id="darkModeToggle">
  <label class="custom-control-label" for="darkModeToggle">Gece Modu</label>
</ul>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="icon">
      <svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 448 512"><path d="M0 96C0 78.3 14.3 64 32 64H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H32C14.3 128 0 113.7 0 96zM0 256c0-17.7 14.3-32 32-32H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H32c-17.7 0-32-14.3-32-32zM448 416c0 17.7-14.3 32-32 32H32c-17.7 0-32-14.3-32-32s14.3-32 32-32H416c17.7 0 32 14.3 32 32z"/></svg>
    </span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav ml-auto">
      <li class="nav-item active">
        <a class="nav-link" href=" https://www.mintik.com/css-gece-modu-ta…mi-nasil-yapilir.html">Anasayfa</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Hakkımızda</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">İletişim</a>
      </li>
    </ul>
  </div>
</nav>

<!-- Ana İçerik -->
<div class="container mt-5">
  <h1>Merhaba, Ziyaretçi!</h1>
    <p class="lead">Dark mode & Light mode diğer bir adıyla gece & gündüz modu</p>
 ...

CSS

body.dark-mode {
  background-color: #1a1a1a;
  color: #ffffff;
}
body.dark-mode nav a {
    color: #fff !important;
}

body.dark-mode .navbar-dark .navbar-toggler-icon  {

}
body.dark-mode .icon  {
    display: inline-block;
    width: 1.5em;
    height: 1.5em;
    vertical-align: middle;
    content: "";
    background: no-repeat center center;
    background-size: 100% 100%;
    fill:#fff
}
body.dark-mode .icon:hover {
    fill:#585858
}

body.dark-mode .navbar-toggler:focus,
body.dark-mode.navbar-toggler:active,
body.dark-mode .navbar-toggler-icon:focus {
  outline-color: #ffffff;
}

body.dark-mode .navbar-toggler:hover {
  background-color: #ffffff;
}

body.dark-mode .navbar-nav .nav-link {
  color: #ffffff;
}

body.dark-mode .navbar-nav .nav-link:hover {
  color: #f8f9fa;
}
body.dark-mode .navbar-nav li.nav-item.active a {
    color: #fff;
}
body.dark-mode nav {
    background-color: #000 !important;
}

JavaScript

// Kullanıcı tercihini yerel depolama üzerinde saklamak için bir fonksiyon
  function setDarkModePreference(isDarkMode) {
    localStorage.setItem("darkMode", isDarkMode);
  }

  // Sayfa yüklendiğinde kullanıcının tercihini kontrol etmek için bir fonksiyon
  function checkDarkModePreference() {
    const darkModeToggle = document.getElementById('darkModeToggle');
    const prefersDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;

    // Eğer kullanıcının tercihi yoksa, tarayıcı tercihini kullan
    if (localStorage.getItem("darkMode") === null) {
      darkModeToggle.checked = prefersDarkMode;
      setDarkModePreference(prefersDarkMode);
    } else {
      darkModeToggle.checked = localStorage.getItem("darkMode") === "true";
    }

    // Dark mode tercihi değiştiğinde sayfaya dark mode class'ını ekle/çıkar
    function updateDarkMode() {
      document.body.classList.toggle('dark-mode', darkModeToggle.checked);
      setDarkModePreference(darkModeToggle.checked);
    }

    darkModeToggle.addEventListener('change', updateDarkMode);

    // Sayfa yüklendiğinde kullanıcının tercihini kontrol et
    updateDarkMode();
  }

  // Sayfa yüklendiğinde kullanıcının tercihini kontrol et
  checkDarkModePreference();