ایجاد حالت شب (دارک مود)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Practice</title>
</head>
<body id="bg">
  <h1 id="text1">Practices</h1>

  <button id="buttonChangeMode" onclick="changeMode()">Dark Mode</button>
  <script>

    let BG = document.getElementById("bg")
    let text = document.getElementById("text1")
    let button = document.getElementById("buttonChangeMode")
    let lightMode = false

    let changeMode = () => {

      if (lightMode == false) {
        BG.style.backgroundColor = "rgb(0, 0, 0)"
        text.style.color = "white"
        button.innerText = "Light Mode"
        lightMode = true
      }else{
        BG.style.backgroundColor = "white"
        text.style.color = "black"
        button.innerText = "Dark Mode"
        lightMode = false
      }
    }
  </script>
</body>
</html>

<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Night Mode Switch</title>
  <link href="https://fonts.googleapis.com/css2?family=Vazirmatn:wght@400;600&display=swap" rel="stylesheet">
  <style>
    :root {
      --light-bg: #f4f6f8;
      --light-text: #1b1f23;
      --light-accent: #10b981;
      --dark-bg: #0e141b;
      --dark-text: #e5e7eb;
      --dark-accent: #38bdf8;

      --transition-speed: 0.6s;
    }

    body {
      margin: 0;
      padding: 0;
      height: 100vh;
      font-family: "Vazirmatn", sans-serif;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      background-color: var(--light-bg);
      color: var(--light-text);
      transition: background-color var(--transition-speed) ease, color var(--transition-speed) ease;
    }

    h1 {
      font-size: 2rem;
      margin-bottom: 40px;
      transition: color var(--transition-speed);
    }

    button {
      padding: 12px 30px;
      font-size: 1.1rem;
      font-weight: bold;
      border: none;
      border-radius: 30px;
      background: linear-gradient(135deg, var(--light-accent), #3b82f6);
      color: white;
      cursor: pointer;
      box-shadow: 0 4px 12px rgba(0,0,0,0.2);
      transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        background 0.6s ease;

    }

    button:hover {
      transform: scale(1.05);
      box-shadow: 0 6px 16px rgba(0,0,0,0.25);
    }

    /* Dark mode styles */
    .dark-mode {
      background-color: var(--dark-bg);
      color: var(--dark-text);
    }

    .dark-mode h1 {
      color: var(--dark-text);
    }

    .dark-mode button {
      background: linear-gradient(135deg, var(--dark-accent), #6366f1);
    }
  </style>
</head>
<body id="bod">
  <button onclick="change()">تغییر حالت</button>

  <script>
    const change = () => {
      document.body.classList.toggle("dark-mode");
    };
  </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Light Mode / Dark Mode</title>

    <style>
        * {
            font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
        }

        body {
            text-align: center;
            margin: auto;
        }

        #hr {
            width: 500px;
            height: 1px;
            margin: auto;
            background: rgb(127, 127, 127);
        }
    </style>
</head>

<body>

    <div class="header">
        <header>
            <h1 id="header-title">DarkMode | LightMode</h1>
            <p>
                <ins id="header-p">A small website on local to test dark mode and light mode</ins>
            </p>
        </header>
    </div>

    <div class="hr" id="hr"></div>
    <br>

    <div class="outer-button">
        <button id="one-button" onclick="change_status()">change status</button>
    </div>

    <script>
        var one_button = document.getElementById("one-button");
        var header_title = document.getElementById("header-title");
        var header_p = document.getElementById("header-p");
        var hr = document.getElementById("hr");
        var button = document.getElementById("one-button");
        var current_state = "light";

        const change_status = () => {
            if (current_state === "light") {
                header_title.style.color = "white";
                header_p.style.color = "white";
                hr.style.color = "white";
                one_button.style.color = "black";
                document.body.style.background = "black"
                current_state = "dark";
            }

            else {
                header_title.style.color = "black";
                header_p.style.color = "black";
                hr.style.color = "black";
                one_button.style.color = "black";
                document.body.style.background = "white"
                current_state = "light";
            }
        }
    </script>
</body>

</html>

<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>حالت روز و شب</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: Tahoma, Arial, sans-serif;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            background-color: white;
            color: black;
            transition: background-color 0.3s, color 0.3s;
        }

        body.dark {
            background-color: black;
            color: white; 
        }

        #toggleBtn {
            margin-top: 40px;
            padding: 12px 28px;
            font-size: 18px;
            border: 2px solid currentColor;
            background: transparent;
            border-radius: 30px;
            cursor: pointer;
            transition: all 0.25s;
            background-color: rgba(0, 0, 0, 0.05);
        }

        body.dark #toggleBtn {
            background-color: rgba(255, 255, 255, 0.1);
        }

        #toggleBtn:hover {
            transform: scale(1.05);
        }

        .content {
            font-size: 2.2rem;
            text-align: center;
            padding: 0 20px;
        }
    </style>
</head>
<body>
    <div class="content">
         به حالت روز خوش آمدید.
    </div>
    <button id="toggleBtn">تغییر به شب</button>

    <script>
        const toggleBtn = document.getElementById('toggleBtn');
        const body = document.body;
        const contentText = document.querySelector('.content');

        let isDark = false;

        toggleBtn.addEventListener('click', function() {
            isDark = !isDark;

            if (isDark) {
                body.classList.add('dark');
                toggleBtn.textContent = 'تغییر به روز';
                contentText.textContent = ' در حالت شب هستید.';
                toggleBtn.style.color = 'white'
            } else {
                body.classList.remove('dark');
                toggleBtn.textContent = 'تغییر به شب';
                contentText.textContent = ' به حالت روز خوش آمدید.';
                toggleBtn.style.color = 'black'
            }
        });
    </script>
</body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>codebezan</title>
    <style>
      html {
        font-size: 1.5em;
        transition: all 1s;
      }
      #my-text {
        display: block;
        text-align: center;
      }
      #bu {
        display: block;
        margin: auto;
        font-size: 20px;
      }
    </style>
  </head>
  <body>
    <h1 id="my-text">hello javascript</h1>
    <button id="bu" onclick="them()">تغییر تم</button>
    <script>
      let bool = true;
      const html = document.querySelector("html");
      const text = document.getElementById("my-text");
      const them = () => {
        if (bool == true) {
          bool = false;
          html.style.backgroundColor = "#000000";
          text.style.color = "#ffffff";
        } else {
          bool = true;
          html.style.backgroundColor = "#ffffff";
          text.style.color = "#000000";
        }
      };
    </script>
  </body>
</html>