How to make a HTML page view in dark mode on default?

Question

   <div>
      <div class='flex fdcr aic mt-5 mr-13'>
        <label class='modeSwitch'>
          <input Onclick='darkMode()' class='check flex' type='checkbox'/>
          <span class='toggleSwitch'/>
        </label>
        <div>

This is a part of my HTML code. When the page is loaded it should be in dark mode on default. Is there a way to fix this without using `onClick.

I have even tried replacing onclick to default but it wasn't working. I am new to HTML and please help me with this.

Answer 1

You can define the styles you need for the dark mode and light mode.

<style>
  body {
    padding: 25px;
    background-color: black;
    color: white;
    font-size: 25px;
  }
  .dark-mode {
    background-color: black;
    color: white;
  }
  .light-mode {
    background-color: white;
    color: black;
  }
</style>

And then you can create JS functions that call the styles when you click the button.

<script>
  function darkMode() {
    var element = document.body;
    var content = document.getElementById("DarkModetext");
    element.className = "dark-mode";
    content.innerText = "Dark Mode is ON";
  }
  function lightMode() {
    var element = document.body;
    var content = document.getElementById("DarkModetext");
    element.className = "light-mode";
    content.innerText = "Dark Mode is OFF";
  }
</script>

Check this It shows a clear way to how to enable dark mode when you click.