Design a page that has a custom text in the middle of the page(White background color and black text color)
Then design a button to change the page to the night mode when the user clicks it.(In the night mode, the background color of the black and the color of the text is white)
By clicking on the button must return to the day (Lightweight) mode
let msg = 'error' alert(msg)This answer is only visible to premium members
This answer is only visible to premium members
let msg = 'error' alert(msg)This answer is only visible to premium members
This answer is only visible to premium members
let msg = 'error' alert(msg)This answer is only visible to premium members
This answer is only visible to premium members
Front-End
JavaScript
<!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">سلام دادا! این یه متن وسط صفحهست
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()
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()
<!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>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">
<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>
<!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>
Submitting answers is currently unavailable.
You must be logged in to access this section.
Login/Sign up If you don’t understand the exercise or can’t solve it for any reason, that’s completely
normal—don’t worry 😊
Try checking out easier exercises and reviewing different answers
submitted by others. Gradually, you can move on to more challenging exercises. Also, your answer
might be correct even if it’s different from others.