When the checkbox is not selected, the content on the page will revert back to its original state

Question

When the checkbox is not selected, the content on the page will revert back to its original state

Is there a way to dynamically change content on a page when a checkbox is checked, and revert it back when the checkbox is unchecked? I don't want to manually set each element's value to default in JavaScript and CSS.

<div class="switch">
    <input type="checkbox" name="checkbox" id="checkbox" onchange="darkmode(this)" />
</div>

<section id="section">
    <p>This is a line</p>
</section>

<script>
    function darkmode(checkboxElem) {
        if (checkboxElem.checked) {
            document.body.style.backgroundColor = "black";
            document.getElementById("checkbox").style.borderColor = "white";
            document.getElementById("section").style.color ="white"; 
        } else {
            document.body.style.backgroundColor = "white";
            document.getElementById("checkbox").style.borderColor = "black";
            document.getElementById("section").style.color ="black"; 
        }
    }   
</script>

If you have a solution for resetting all elements to their defaults without specifying individual values in CSS and JavaScript, please share. Thank you!

javascript html css checkbox onchange

Answer 1

Answer №1

If you're looking for a simple and effective solution, consider designing your dark mode style tied to a body css class and toggling that class using the onchange event directly.

I hope this solution proves helpful for you.

body.dark-mode{
  background-color:black;
}
  body.dark-mode>h1{
    color:red;
  }
  body.dark-mode>p{
    color:white;
  }

<body>
 <input type='checkbox' onchange='document.body.classList.toggle("dark-mode");'>
 <h1>Heading 1</h1>
 <p>Paragraph 1</p>
 ...
</body>

Answer 2

If you're looking for a simple and effective solution, consider designing your dark mode style tied to a body css class and toggling that class using the onchange event directly.

I hope this solution proves helpful for you.

body.dark-mode{
  background-color:black;
}
  body.dark-mode>h1{
    color:red;
  }
  body.dark-mode>p{
    color:white;
  }

<body>
 <input type='checkbox' onchange='document.body.classList.toggle("dark-mode");'>
 <h1>Heading 1</h1>
 <p>Paragraph 1</p>
 ...
</body>

Answer 3

Answer №2

The simplest approach would involve toggling a class on the body element, as demonstrated in the code snippet below. By defining all the dark mode styles within the CSS and ensuring it's placed after the normal styling, you can easily implement a dark mode feature for your website.

function toggleDarkMode(checkboxElem) {
  var body = document.body;
  if (checkboxElem.checked) {
    body.classList.add("dark-mode");
  } else {
    body.classList.remove("dark-mode");
  }
}

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

<body>
  <div class="switch">
    <input type="checkbox" name="checkbox" id="checkbox" onchange="toggleDarkMode(this)" />
  </div>

  <section id="section">
    <p>This is a line</p>
  </section>
</body>

Answer 4

The simplest approach would involve toggling a class on the body element, as demonstrated in the code snippet below. By defining all the dark mode styles within the CSS and ensuring it's placed after the normal styling, you can easily implement a dark mode feature for your website.

function toggleDarkMode(checkboxElem) {
  var body = document.body;
  if (checkboxElem.checked) {
    body.classList.add("dark-mode");
  } else {
    body.classList.remove("dark-mode");
  }
}

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

<body>
  <div class="switch">
    <input type="checkbox" name="checkbox" id="checkbox" onchange="toggleDarkMode(this)" />
  </div>

  <section id="section">
    <p>This is a line</p>
  </section>
</body>

When the checkbox is not selected, the content on the page will revert back to its original state

Answer №1

Answer №2

Similar questions

Error caused by the shouldDisableDate prop in MUI DatePicker's functionality

New React Component Successfully Imported but Fails to Render

When the enter key is pressed, the form will be automatically submitted

Ensuring form accuracy upon submission in AngularJS 1.5: Understanding the $invalid state in relation to $pristine field

Submitting a Yii 2 form automatically when it loads

Regular expression for identifying a specific attribute paired with its corresponding value in a JSON object

`The problem of div width error``

Can the installation of Canvas be done on a device with the M1 chip?

Using ng-options with the Add New feature is not compatible with the select statement

Upon attempting to add a new component, an error was encountered: Uncaught SyntaxError: Unexpected token export

Understanding the implementation of setters in JavaScript: How are they utilized in Angular controllers?

Steer clear of displaying the latest model directly

Elusive Essence: Mysterious Origins of the

Unable to start store from localStorage during App initialization

Setting up parameters and arguments in Vuex mutations: A guide

Hapi/Node.js Reference Error for Request: Troubleshooting the Issue

Looking to develop a dynamic JSON preview feature using AngularJS

How can we compress videos on an Android device prior to uploading them through a web browser?

AngularJS: The delay in updating variable bindings following a REST API call

Leveraging the html-webpack-plugin for creating an index.html file within Webpack (specifically in a project based on the vue-simple boiler