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

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

سوالات کاربران تمرین ها کوئیزها

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

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

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

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

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

👨‍💻 7 ساعت قبل User 5851 این تمرین رو مشاهده کرد
👨‍💻 1 ساعت قبل کاربر ناشناس این تمرین رو مشاهده کرد
👨‍💻 23 ساعت قبل User 5846 این تمرین رو مشاهده کرد
👨‍💻 3 ساعت قبل Macsepehri این تمرین رو مشاهده کرد
تمرین جدید

12 جواب

مرتب سازی
این جواب فقط برای مشترکین ویژه قابل مشاهده است
این جواب فقط برای مشترکین ویژه قابل مشاهده است
این جواب فقط برای مشترکین ویژه قابل مشاهده است
let msg = 'error'
alert(msg)
این جواب فقط برای مشترکین ویژه قابل مشاهده است
این جواب فقط برای مشترکین ویژه قابل مشاهده است

برای مشاهده این جواب باید اشتراک داشته باشی

دریافت اشتراک
Afra.alr JavaScript HTML & CSS
این جواب فقط برای مشترکین ویژه قابل مشاهده است
این جواب فقط برای مشترکین ویژه قابل مشاهده است
این جواب فقط برای مشترکین ویژه قابل مشاهده است
let msg = 'error'
alert(msg)
این جواب فقط برای مشترکین ویژه قابل مشاهده است
این جواب فقط برای مشترکین ویژه قابل مشاهده است

برای مشاهده این جواب باید اشتراک داشته باشی

دریافت اشتراک
Amirrz JavaScript HTML & CSS
این جواب فقط برای مشترکین ویژه قابل مشاهده است
این جواب فقط برای مشترکین ویژه قابل مشاهده است
این جواب فقط برای مشترکین ویژه قابل مشاهده است
let msg = 'error'
alert(msg)
این جواب فقط برای مشترکین ویژه قابل مشاهده است
این جواب فقط برای مشترکین ویژه قابل مشاهده است

برای مشاهده این جواب باید اشتراک داشته باشی

دریافت اشتراک
Mostafa JavaScript HTML & CSS 
<!DOCTYPE html>
<html lang="fa">
<head>
  <meta charset="UTF-8">
  <title>حالت شب و روز</title>
  <style>
    body {
      margin: 0;
      padding: 0;
      height: 100vh;
      background-color: white;
      color: black;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      font-family: Tahoma, sans-serif;
      transition: background-color 0.3s, color 0.3s;
    }
    button {
      margin-top: 20px;
      padding: 10px 20px;
      font-size: 16px;
      cursor: pointer;
      border: none;
      border-radius: 5px;
      background-color: #444;
      color: white;
      transition: background-color 0.3s;
    }
    button:hover {
      background-color: #666;
    }
    .dark-mode {
      background-color: black;
      color: white;
    }
  </style>
</head>
<body>
  <div id="text">سلام دادا! این یه متن وسط صفحه‌ست
Amir.code HTML & CSS 
from tkinter import *

tkinter = Tk()
tkinter.geometry("900x500")
tkinter.title("dark & light")
tkinter.config(background="white")

def click(mode):
    if mode == 'dark':
        tkinter.config(background="black")
        label.config(bg="black", fg="white")

    else:
        tkinter.config(background="white")
        label.config(bg="white", fg="black")

label = Label(tkinter, text='Click' , font=("impact", 60) , fg='black' , width=6 , border=19 , bg='white')
label.pack()

btn = Button(tkinter, text="Dark mode" , border=20 , font=('Courier New' , 18), bg='black' , fg='white' , command=lambda:click('dark'))
btn.pack()

btn2 = Button(tkinter, text="Ligth mode" , border=20 , font=('Courier New' , 16) , bg='white' , fg='black' , command=lambda:click('light'))
btn2.pack()


tkinter.mainloop()
Shayan.fm Python 
from tkinter import *

win = Tk()
win.title('dark')
win.geometry('500x500')
win.resizable(False,False)
win.config(background="white")

def click(color):
    win.config(background=color)

win_lable = Label(win,text='hello',font=('arial',60),fg='black',width=6,border=19,bg='white')
win_lable.pack()

win_btn = Button(win,text="off",border=20,font=('arial',16),bg='white',fg='blue',command=lambda:click('black'))
win_btn.pack()

win_btn2 = Button(win,text="on",border=20,font=('arial',16),bg='white',fg='blue',command=lambda:click('white'))
win_btn2.pack()

win.mainloop()
Sumy.amiri Python 
<!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>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>
Programmer 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 {
            background-color: white;
            color: black;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            transition: background-color 0.5s, color 0.5s;
        }
        .dark-mode {
            background-color: black;
            color: white;
        }
        button {
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <div>
        <p>متن دلخواه در وسط صفحه</p>
        <button id="toggleButton">تغییر به حالت شب</button>
    </div>
    <script>
        const button = document.getElementById('toggleButton');
        let isDarkMode = false;

        button.addEventListener('click', () => {
            isDarkMode = !isDarkMode;
            document.body.classList.toggle('dark-mode', isDarkMode);
            button.textContent = isDarkMode ? 'تغییر به حالت روز' : 'تغییر به حالت شب';
        });
    </script>
</body>
</html>
Ai JavaScript HTML & CSS 
<!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>
User 4497 HTML & CSS
<< صفحه قبل 1 2 صفحه بعد >>

ارسال جواب

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

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

×

حساب کاربری

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

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