Can anyone give me an easy way of making a darkMode and lightMode on a HTML page using Javascript?-CodePudding

I'm trying to make a website but I'm having trouble making a dark/light theme using JS. Does anyone know an easy way to make a dark/light theme?

My idea is fetching elements with a certain style and changing it's CSS color property.

I tried using document.getElementsByClassName() but it made too much of a hassle. It's also really inefficient.

CodePudding user response：

Define your colours using custom properties.

(You will want more colours than this example)

body {
    --main-bg-color: yellow;
    --main-fg-color: black;
}

Then override them in a dark mode stylesheet:

@media (prefers-color-scheme: dark) {
    body {
        --main-bg-color: black;
        --main-fg-color: yellow;
    }
}

Then, if you want the user to be able to toggle with your own UI as well as using their system wide choice, define them again with a class:

body.lightMode {
    --main-bg-color: yellow;
    --main-fg-color: black;
}

body.darkMode {
    --main-bg-color: black;
    --main-fg-color: yellow;
}

Then just use those variables when you want color name:

h1 {
    color: --main-bg-color;
}

If you want the UI to change the style then:

function eventHandler() {
    const b = document.body;
    if (b.classList.contains("darkMode")) {
         b.classList.remove("darkMode");
         b.classList.add("lightMode");
    } else {
         b.classList.remove("lightMode");
         b.classList.add("darkMode");
    }
};

CodePudding user response：

You can use this example from w3schools

function myFunction() {
   var element = document.body;
   element.classList.toggle("dark-mode");
}

body {
  padding: 25px;
  background-color: white;
  color: black;
  font-size: 25px;
}

.dark-mode {
  background-color: black;
  color: white;
}

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">

</head>
<body>

<h2>Toggle Dark/Light Mode</h2>
<p>Click the button to toggle between dark and light mode for this page.</p>

<button onclick="myFunction()">Toggle dark mode</button>



</body>
</html>

CodePudding user response：

example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0">
    <title>Dark Mode</title>
    
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js">
    </script>
    
    <style>
        body{
        padding:10% 3% 10% 3%;
        text-align:center;
        }
        img{
            height:140px;
                width:140px;
        }
        h1{
        color: #32a852;
        }
        .mode {
            float:right;
        }
        .change {
            cursor: pointer;
            border: 1px solid #555;
            border-radius: 40%;
            width: 20px;
            text-align: center;
            padding: 5px;
            margin-left: 8px;
        }
        .dark{
            background-color: #222;
            color: #e6e6e6;
        }
    </style>
</head>

<body>
    <div >
        Dark mode:          
        <span >OFF</span>
    </div>
    
    <div>
        <h1>GeeksforGeeks</h1>
        
<p><i>A Computer Science Portal for Geeks</i></p>

        <h3>Light and Dark Mode</h3>
        
        <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200122115631/GeeksforGeeks210.png">
        
<p>
            Click on the switch on top-right
            to move to dark mode.
        </p>

    </div>
    
    <script>
        $( ".change" ).on("click", function() {
            if( $( "body" ).hasClass( "dark" )) {
                $( "body" ).removeClass( "dark" );
                $( ".change" ).text( "OFF" );
            } else {
                $( "body" ).addClass( "dark" );
                $( ".change" ).text( "ON" );
            }
        });
    </script>
</body>

</html>

CodePudding user response：

I think you might have a header, where a switch-button is listed to switch between dark and light mode. The header should be consequently displayed on each route of your website.

Lets assume your switch-button looks like this:

HTML:

<button> (click)="changeAmbientColor()" </button>

JS:

  changeAmbientColor(event: any){
    let a = document.getElementsByTagName("body")
    if(a[0].style.backgroundColor == "Gray"){
      a[0].style.backgroundColor="white"
    } else {
      a[0].style.backgroundColor="gray"
    }
  }

I just wrote the minimum you might need.

CodePudding user response：

If you can, try to add tailwind in your project. Pretty easy and good documentation