یادگیری برنامه نویسی با 60% تخفیف + هدیه ویژه در جشنواره نوروزی کلیک کنید

تمرین برنامه نویسی؛ با کدبزن!

منبع جامع سوالات و تمرینات برنامه نویسی

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

تمرین آسان 222/ دانلود 1160 بازدید

صفحه ای طراحی کنید که یک متن دلخواه در وسط صفحه قرار داشته باشد (رنگ پس زمینه سفید و رنگ متن مشکی باشد)

سپس دکمه ای طراحی کنید که وقتی کاربر روی آن کلیک کرد صفحه به حالت شب (دارک مود) تغییر پیدا کند. (در حالت شب، رنگ پس زمینه مشکی و رنگ متن سفید باشد)

با کلیک مجدد روی دکمه باید سایت به حالت روز (لایت مود) برگردد

👨‍💻 4 ساعت قبل کاربر ناشناس این تمرین رو مشاهده کرد
👨‍💻 5 ساعت قبل Sajjad.coding این تمرین رو مشاهده کرد
افزودن تمرین جدید

5 جواب

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            padding: 0;
            margin: 0;
            display: flex;
            text-align: center;
            flex-direction: column;
        }
        button{
            width: 200px;
        }
        .dark-mode {
        background-color: black;
        color: white;
        }
    </style>
</head>
<body id="bod">
    <h1>
        switch between light mode and night mode
    </h1>
    <div>
    <button onclick="change()">change</button>
    </div>
    <script>
        let change = () => {
            var element = document.body;
            element.classList.toggle("dark-mode");
        }
    </script>    
</body>
</html>
Afra.alr دانلود JavaScript HTML & CSS 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Light/Dark Mode Toggle</title>
    <style>
       
        body {
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: white;
            color: black;
            font-family: Arial, sans-serif;
            transition: background-color 0.3s ease, color 0.3s ease;
        }

        .container {
            text-align: center;
        }

        button {
            margin-top: 20px;
            padding: 10px 20px;
            font-size: 16px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            background-color: #007bff;
            color: white;
            transition: background-color 0.3s ease;
        }

        button:hover {
            background-color: #0056b3;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1 id="text">This is a sample text</h1>
        <button id="toggleButton">Switch to Dark Mode</button>
    </div>
    <script>
        const body = document.body;
        const toggleButton = document.getElementById("toggleButton");
        toggleButton.addEventListener("click", () => {
            const isDarkMode = body.style.backgroundColor === "black";
            
            if (isDarkMode) {
                body.style.backgroundColor = "white";
                body.style.color = "black";
                toggleButton.textContent = "Switch to Dark Mode";
            } else {
                body.style.backgroundColor = "black";
                body.style.color = "white";
                toggleButton.textContent = "Switch to Light Mode";
            }
        });
    </script>
</body>
</html>
Amirrz دانلود JavaScript HTML & CSS 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      body {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100vh;
        margin: 0;
        transition: background-color 0.5s, color 0.5s;
      }

      .container {
        text-align: center;
      }

      #change {
        background-color: #2eb5eb;
        outline: none;
        border: none;
        padding: 10px 20px;
        border-radius: 6px;
        color: rgb(250, 250, 250);
        cursor: pointer;
        font-weight: 700;
        transition: background-color 0.3s;
      }

      #change:hover {
        background-color: #95d6f0;
      }

      @keyframes buttonPluse {
        0% {
          transform: scale(1);
        }
        50% {
          transform: scale(1.1);
        }
        100% {
          transform: scale(1);
        }
      }

      .pluse {
        animation: buttonPluse 0.3s ease-in-out;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <h1 id="textChange">change dark mode</h1>
      <button id="change">OFF Dark</button>
    </div>
    <script>
      const btn = document.getElementById("change");
      const body = document.body;

      btn.addEventListener("click", () => {
        const isDark = body.style.backgroundColor === "black";

        if (isDark) {
          body.style.backgroundColor = "white";
          body.style.color = "black";
          btn.textContent = "ON Dark";
        } else {
          body.style.backgroundColor = "black";
          body.style.color = "white";
          btn.textContent = "OFF Dark";
        }

        btn.classList.add("pluse");
        setTimeout(() => {
          btn.classList.remove("pluse");
        }, 3000);
      });
    </script>
  </body>
</html>
User 112 دانلود JavaScript HTML & CSS 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Theme Toggle</title>
    <style>
      body, html {
        height: 100%;
        margin: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        transition: background-color 0.8s ease, color 0.8s ease;
      }

      #h1 {
        font-size: 30px;
        transition: color 0.8s ease;
      }


      #button {
        background: #2563eb;
        border: none;
        width: 80px;
        height: 40px;
        box-sizing: border-box;
        margin: 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        cursor: pointer;
        border-radius: 20px;
        transition: all 0.8s ease; 
      }

      .icon {
        font-size: 40px;
        margin: 0;
        padding: 0;
        transition: color 0.8s ease, text-shadow 0.8s ease; 
      }

      /* حالت تاریک */
      .dark #h1 {
        color: white;
      }

      .dark {
        background: black;
      }

      .dark #moon {
        color: white;
        text-shadow: 1px 1px 5px white;
      }

      .dark #sun {
        color: #4074e3;
      }

      /* حالت روشن */
      .light #h1 {
        color: black;
      }

      .light {
        background: white;
      }

      .light #moon {
        color: #4074e3;
      }

      .light #sun {
        color: rgb(255, 255, 255);
        text-shadow: 1px 1px 5px white;
      }

    </style>
</head>
<body class="light">

    <h1 id="h1">hello world</h1>
    <button id="button">
        <span id="sun" class="icon">☀</span> <!-- نماد خورشید -->
        <span id="moon" class="icon">☽</span> <!-- نماد ماه -->
    </button>

<script>
  document.getElementById('button').addEventListener('click', function() {
    const body = document.body;
    const isLight = body.classList.contains('light');

    if (isLight) {
      body.classList.remove('light');
      body.classList.add('dark');
    } else {
      body.classList.remove('dark');
      body.classList.add('light');
    }
  });
</script>
</body>
</html>
Unun..ali..nunu دانلود JavaScript HTML & CSS 
<!DOCTYPE html>
<html lang="fa">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>تغییر حالت شب و روز</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: white; /* رنگ پس زمینه روز */
            color: black; /* رنگ متن روز */
            transition: background-color 0.3s, color 0.3s; /* انیمیشن تغییر رنگ */
        }

        .dark-mode {
            background-color: black; /* رنگ پس زمینه شب */
            color: white; /* رنگ متن شب */
        }

        .container {
            text-align: center;
        }

        button {
            padding: 10px 20px;
            font-size: 16px;
            margin-top: 20px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>متن دلخواه شما در اینجا قرار دارد</h1>
        <button id="toggleButton">تغییر به حالت شب</button>
    </div>

    <script>
        const toggleButton = document.getElementById('toggleButton');
        let isDarkMode = false;

        toggleButton.addEventListener('click', () => {
            isDarkMode = !isDarkMode; // تغییر حالت
            document.body.classList.toggle('dark-mode', isDarkMode); // تغییر کلاس بدنه
            toggleButton.textContent = isDarkMode ? 'تغییر به حالت روز' : 'تغییر به حالت شب'; // تغییر متن دکمه
        });
    </script>
</body>
</html>
Mma123 دانلود JavaScript HTML & CSS

ارسال جواب

  • قبل از ارسال جواب ویدیو زیر رو ببین تا کار کردن با markdown رو یاد بگیری
  • لطفا جواب های تکراری ارسال نکن
  • سعی کن داخل کدت از کلمات فارسی یا فینگلیش (فارسی با حروف انگلیسی) استفاده نکنی و کدت تماما انگلیسی باشه
  • لطفا داخل جواب از ایموجی یا کاراکترهای خاص استفاده نکن
  • ارسال جواب حق مادی یا معنوی برای ارسال کننده ایجاد نمیکند و تمام حقوق برای سایت کدبزن محفوظ است

راهنمای ارسال جواب 👇

مطالب مرتبط

تشخیص با استفاده از هوش مصنوعی
×

حساب کاربری

برای استفاده از این بخش باید وارد حساب کاربریت بشی

ورود/ثبت نام
×

نمیتونم این تمرین رو حل کنم 😞

اگه متوجه تمرین نمیشی یا به هر دلیلی نمیتونی حلش کنی، کاملا طبیعیه، اشکالی نداره؛ ناراحت نشو 😊
سعی کن تمرینات آسون تر رو ببینی و جواب های مختلفی که دیگران ارسال کرده اند رو بررسی کنی و یواش یواش به سراغ تمرینات سخت تر بری. همچنین ممکنه جوابت درست باشه ولی با سایر جواب ها متفاوت باشه
اگه برنامه نویسی رو هنوز شروع نکردی یا خوب یاد نگرفتی، میتونی از طریق لینک زیر یاد بگیری

یادگیری برنامه نویسی
بستن