CodeSolved

Solved Programming Questions & Exercises

Create Night Mode (Dark Mood)

Practice Easy 222/ Download 2194 Views

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

9 Answers

<!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>
Afra.alr Download JavaScript HTML & CSS

I think this is: Button {Border-Radius: 20px; Text-align: left; Background-Color: Blue; Color: White; Transition: ALL 2S; } Button: Focus {Background-Color: Red; Color: White; Text-align: right; Transition: ALL 2S; } Mohammad.mahdi88 

<!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>
User 4957 Download 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 Download HTML & CSS 
<!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>
Amirrz Download JavaScript HTML & CSS 
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 Download 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 Download 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 Download HTML & CSS 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Theme Toggle</title>
    <style>
      body, html {
        height: 100%;
        margin: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        transition: background-color 0.8s ease, color 0.8s ease;
      }

      #h1 {
        font-size: 30px;
        transition: color 0.8s ease;
      }


      #button {
        background: #2563eb;
        border: none;
        width: 80px;
        height: 40px;
        box-sizing: border-box;
        margin: 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        cursor: pointer;
        border-radius: 20px;
        transition: all 0.8s ease; 
      }

      .icon {
        font-size: 40px;
        margin: 0;
        padding: 0;
        transition: color 0.8s ease, text-shadow 0.8s ease; 
      }

      # Dark state
      .dark #h1 {
        color: white;
      }

      .dark {
        background: black;
      }

      .dark #moon {
        color: white;
        text-shadow: 1px 1px 5px white;
      }

      .dark #sun {
        color: #4074e3;
      }

      # Bright mode
      .light #h1 {
        color: black;
      }

      .light {
        background: white;
      }

      .light #moon {
        color: #4074e3;
      }

      .light #sun {
        color: rgb(255, 255, 255);
        text-shadow: 1px 1px 5px white;
      }

    </style>
</head>
<body class="light">

    <h1 id="h1">hello world</h1>
    <button id="button">
        <span id="sun" class="icon">☀</span> <!-- نماد خورشید -->
        <span id="moon" class="icon">☽</span> <!-- نماد ماه -->
    </button>

<script>
  document.getElementById('button').addEventListener('click', function() {
    const body = document.body;
    const isLight = body.classList.contains('light');

    if (isLight) {
      body.classList.remove('light');
      body.classList.add('dark');
    } else {
      body.classList.remove('dark');
      body.classList.add('light');
    }
  });
</script>
</body>
</html>
Unun..ali..nunu Download 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 {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: white; # The color of the day
            color: black; # The color of the text of the day
            transition: background-color 0.3s, color 0.3s; # Animation of color change
        }

        .dark-mode {
            background-color: black; # The color of the night
            color: white; # The color of the night text
        }

        .container {
            text-align: center;
        }

        button {
            padding: 10px 20px;
            font-size: 16px;
            margin-top: 20px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>متن دلخواه شما در اینجا قرار دارد</h1>
        <button id="toggleButton">تغییر به حالت شب</button>
    </div>

    <script>
        const toggleButton = document.getElementById('toggleButton');
        let isDarkMode = false;

        toggleButton.addEventListener('click', () => {
            isDarkMode = !isDarkMode; # Change mode
            document.body.classList.toggle('dark-mode', isDarkMode); # Change the body class
            toggleButton.textContent = isDarkMode ? 'تغییر به حالت روز' : 'تغییر به حالت شب'; # Change button text
        });
    </script>
</body>
</html>
Mma123 Download JavaScript HTML & CSS

Submit answer

Submitting answers is currently unavailable.

Related content

Detection using AI
×

Account

You must be logged in to access this section.

Login/Sign up
×

I can't solve this exercise 😞

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.

Close