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

تمرین آسان 4267 visibility link download trending_up پربازدید

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

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

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

👨‍💻 12 ساعت قبل User 4451 این تمرین رو مشاهده کرد
👨‍💻 9 ساعت قبل کاربر ناشناس این تمرین رو مشاهده کرد

reply 15

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

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

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

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

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

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

دریافت اشتراک
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>Document</title>
    <style>
        body{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            height: 100vh;
            width: 100%;
            display: grid;
            place-items: center;
        }
        .container{
            width: 500px;
            height: 400px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 20px;
            border-radius: 20px;
            transition: all 0.3s ease-in-out;
        }
        #title{
            text-align: justify;
        }
        .light_mode{
            color: black;
            background-color: white;
        }
        .night_mode{
            color: white;
            background-color: black;
        }
        #display {
            margin: auto;
            width: 150px;
            height: 70px;
            display: flex;
            align-items: center;
            background: linear-gradient(90deg, #4e54c8 0%, #8f94fb 100%);
            border-radius: 50px;
            position: relative;
            cursor: pointer;
            transition: background 0.4s, box-shadow 0.4s, border 0.4s;
            box-shadow: 0 4px 24px rgba(78,84,200,0.18), 0 1.5px 4px rgba(143,148,251,0.10);
            border: 2px solid #4e54c8;
        }
        #display.night {
            background: linear-gradient(90deg, #3a3f51 0%, #6a7b9a 100%);
            box-shadow: 0 4px 24px rgba(106,123,154,0.25);
            border: 2px solid #6a7b9a;
        }
        #btn {
            position: absolute;
            left: 0;
            background: linear-gradient(135deg, #fff 60%, #e0e0e0 100%);
            border-radius: 50%;
            width: 60px;
            height: 60px;
            margin: 0 5px;
            box-shadow: 0 8px 24px rgba(0,0,0,0.22), 0 2px 8px rgba(0,0,0,0.18);
            border: 2px solid #ddd;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: left 0.3s;
        }
        #btn.night {
            left: 80px;
            background: linear-gradient(135deg, #222 60%, #555 100%);
            border: 2px solid #333;
        }
    </style>
</head>
<body>
    <div class="light_mode container">
        <h1 id="title">
        Lorem ipsum dolor, sit amet consectetur adipisicing elit.
         Velit itaque autem porro excepturi eius rem animi volupta
         tibus iure officiis distinctio.
    </h1>
        <div id="display">
            <div id="btn"></div>
        </div>
    </div>


    <script>
        let is_light = true;
        let display = document.getElementById("display");
        let btn = document.getElementById("btn");

        display.addEventListener("click", (e)=>{
            if(e.target.id == "display"){
                if (is_light) {
                    document.querySelector(".container").classList.replace("light_mode", "night_mode");
                    btn.style = "left: 80px;";
                    btn.classList.add("night");
                    display.classList.add("night");
                    is_light = false;
                } else {
                    document.querySelector(".container").classList.replace("night_mode", "light_mode");
                    btn.style = "left: 0;";
                    btn.classList.remove("night");
                    display.classList.remove("night");
                    is_light = true;
                }
            }
        })
  </script>

</body>
</html>
Mostafa JavaScript HTML & CSS 
from tkinter import *
window = Tk()
window.minsize("200", "200")
window.maxsize("500","500")
s = window.config(bg = "white")
def dark():
    color = window.cget("bg")
    if color == "white":
        window.config(bg="black")
        text.config(bg = "black")
        text.config(fg = "white")
    else:
        window.config(bg="white")
        text.config(bg = "white")
        text.config(fg = "black")
click = Button(window, text="cklick", bg="white" ,command = dark)
click.pack()
text = Label(window, text="like", bg="white")
text.pack()
window.mainloop()
Bat.batmany Python 
import customtkinter as ctk
from tkinter import messagebox

app = ctk.CTk()
app.title("T_Color")
app.geometry("220x70")

frame = ctk.CTkFrame(app , corner_radius = 0)
frame.pack(fill = "both" , expand = True)

label = ctk.CTkLabel(frame , text = "تغییر تم برنامه" , font = ("B nazanin" , 17))
label.pack(pady = 1)

def changecolor(color):
     if color == "روشن":
          ctk.set_appearance_mode("Light")
     elif color == "تیره":
          ctk.set_appearance_mode("Dark")
     elif color == "سیستم":
          ctk.set_appearance_mode("System")

menu_color = ctk.CTkOptionMenu(frame , values = ["سیستم" , "روشن" , "تیره"] , command = changecolor , font = ("B nazanin" , 15))
menu_color.pack(pady = 1)


app.mainloop()
Shayancoder Python 
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()
Shayancoder 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

@Composable
fun DarkModeExample(){

var isDark by remember { mutableStateOf(false) }
val backgroundColor = if (isDark) Color.Black else Color.White
val textColor = if (isDark) Color.White else Color.Black
val buttonText = if(isDark) "Light" else "Dark"
Column (
    modifier = Modifier
        .fillMaxSize()
        .background(backgroundColor)
        .padding(16.dp),
    horizontalAlignment = Alignment.CenterHorizontally,
    verticalArrangement = Arrangement.Center
){
    Text(
        "DarkModeExample",
        fontSize = 25.sp,
        color = textColor

    )

    Spacer(Modifier.height(15.dp))

    Button(onClick = { isDark = !isDark}) {
        Text(buttonText)
    }
}

}

User 5575 Kotlin
<< صفحه قبل 1 2 صفحه بعد >>

reply ارسال جواب

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

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

×

حساب کاربری

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

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