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="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 *
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>
HTML & CSS
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.