صفحه ای طراحی کنید که یک متن دلخواه در وسط صفحه قرار داشته باشد (رنگ پس زمینه سفید و رنگ متن مشکی باشد)
سپس دکمه ای طراحی کنید که وقتی کاربر روی آن کلیک کرد صفحه به حالت شب (دارک مود) تغییر پیدا کند. (در حالت شب، رنگ پس زمینه مشکی و رنگ متن سفید باشد)
با کلیک مجدد روی دکمه باید سایت به حالت روز (لایت مود) برگردد
<!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>
دانلود
Python - پایتون
PHP - پی اچ پی
C# - سی شارپ
C & C++ - سی و سی پلاس پلاس
Kotlin - کاتلین
Java - جاوا
DataBase - دیتابیس
Matlab - متلب
Rust - راست
Golang - گولنگ
Bash - بش
<!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">سلام دادا! این یه متن وسط صفحهست
<!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>
<!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>
<!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>
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()
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()
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()
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()
@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)
}
}
}
جوابت را با Markdown بنویس و ثبت کن
برای استفاده از این بخش باید وارد حساب کاربریت بشی
ورود/ثبت نامتوضیح کوتاهی بنویسید تا تیم بررسی کند.