Encountering numerous challenges while attempting to create a switch theme button with the help of JavaScript's localStorage and CSS variables

Question

Encountering numerous challenges while attempting to create a switch theme button with the help of JavaScript's localStorage and CSS variables

It's frustrating that despite all my efforts, I'm still stuck on implementing a small feature for the past 5-6 hours. I need assistance with storing a single variable in the user's localStorage, initially set to 1. When the user clicks a button, the localStorage value switches between 0 and 1, toggling between light and dark mode on the website. The code for the button can be found in the second try or my previous StackOverflow post.

Here are some of my attempts at implementation:

Code working without local storage, initial value 0:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8>
    ... (remaining code)
</body>

</html>

... (more content) The original idea was: A CSS variable is set to 1 initially and should change to 0 on button click. Even after refreshing the page, it should remain at 0. Thanks.

EDIT:

Integration of solution into project:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8>
    ... (updated content)
</body>

</html>

javascript html css dom dom-manipulation

Answer 1

Answer №1

It seems like brushing up on your JavaScript skills might be beneficial, especially considering the syntax errors present.

Consider checking out these resources for further learning:

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
      :root {
        --numvar: 0;
      }

      html {
        filter: invert(var(--numvar));
      }

    </style>
  </head>

  <body>
    <button id="res" onclick="change()">hi</button>
    <script>
      if (!localStorage.getItem('thisvarisgood')) {
         localStorage.setItem("thisvarisgood", "1")
      }

      function change() {
        if (localStorage.getItem('thisvarisgood') == '1') {
          localStorage.setItem("thisvarisgood", '0')
        } else {
          localStorage.setItem("thisvarisgood", '1')
        }

        var num = Number(localStorage.getItem('thisvarisgood'));
        let root = document.documentElement;
        root.style.setProperty("--numvar", num);
      }
      var num = Number(localStorage.getItem('thisvarisgood'));
      let root = document.documentElement;
      root.style.setProperty("--numvar", num);

    </script>
  </body>

</html>

Answer 2

It seems like brushing up on your JavaScript skills might be beneficial, especially considering the syntax errors present.

Consider checking out these resources for further learning:

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
      :root {
        --numvar: 0;
      }

      html {
        filter: invert(var(--numvar));
      }

    </style>
  </head>

  <body>
    <button id="res" onclick="change()">hi</button>
    <script>
      if (!localStorage.getItem('thisvarisgood')) {
         localStorage.setItem("thisvarisgood", "1")
      }

      function change() {
        if (localStorage.getItem('thisvarisgood') == '1') {
          localStorage.setItem("thisvarisgood", '0')
        } else {
          localStorage.setItem("thisvarisgood", '1')
        }

        var num = Number(localStorage.getItem('thisvarisgood'));
        let root = document.documentElement;
        root.style.setProperty("--numvar", num);
      }
      var num = Number(localStorage.getItem('thisvarisgood'));
      let root = document.documentElement;
      root.style.setProperty("--numvar", num);

    </script>
  </body>

</html>

Answer 3

Answer №2

The main issue with the recent attempt is that the variable was defined as "thisvarisgood" but accessed as "thisvarisgud."

To fix this, you should adjust how the CSS is modified. The script itself cannot handle this task since it only runs once. Instead, make sure to set the style within the function that updates the local storage value and also on page load.

Additionally, the other response has already provided a solution for you by correcting the localStorage variable name and setting the style within the function (lines 35-37). The styling for "on page load" can be found in lines 40-41.

Answer 4

The main issue with the recent attempt is that the variable was defined as "thisvarisgood" but accessed as "thisvarisgud."

To fix this, you should adjust how the CSS is modified. The script itself cannot handle this task since it only runs once. Instead, make sure to set the style within the function that updates the local storage value and also on page load.

Additionally, the other response has already provided a solution for you by correcting the localStorage variable name and setting the style within the function (lines 35-37). The styling for "on page load" can be found in lines 40-41.

Encountering numerous challenges while attempting to create a switch theme button with the help of JavaScript's localStorage and CSS variables

Answer №1

Answer №2

Similar questions

javascript selecting window location strings

Retrieving registered components dynamically in Vue.js

Implementing automatic token refreshing and automatic logout features in Vue

Which phase is affected by the stopPropagation method?

Developing with node and express: optimizing your workflow

"Enhancing the user experience: Triggering a window resize event in jQuery before page load on Magento

(angular 8) Error occurred when converting a file or image to FormData due to an invalid value (Note: FormData object printed as Object Form{})

What is the best way to convert my query for use with MongoDB in a Node.js application?

Create a new tab that is active and use ng-repeat in the uib-tab directive

Animating the dimensions of objects in THREEjs

Sorting technique failing to reorganize list

Utilizing the variable $this outside of an object context within an Ajax function

Loading images in advance using jCarousel

I am working with Vue.js 2.0 and attempting to send an event from a `child component`

What is the best way to align geometry at the bottom of the screen in Three.js while still preserving its aspect

What impact does setting everything to position:relative have on a webpage?

The Javascript code is not running due to the XSS security measures in place

transforming JSON into CSV structure

Is there a way to seamlessly integrate a PDF file into a KnockoutJS template without triggering any warnings from PDF plugins?

Issue in Jquery: Unable to load the corresponding pages when toggling the checkbox on and off