0

I am a beginner coder trying to build a website with multiple styles for the user to choose from for the site. I got the stylesheet-swap button working on the page of the button's location, but it just resets to the default "style.css" whenever I exit that page or refresh. Is there a way to fix this or a better way to create swappable themes I should be using? I've included my code below.

HTML

<link id='style' rel="stylesheet" href="style.css"/>

<button onclick="swapStyleSheet('styleOD.css')">
        <h4 id="fontChangeButton">Change to "Open Dyslexic" Font</h4>
      </button>
      <button onclick="swapStyleSheet('style.css')">
        <h4 id="fontChangeButton">Change to Default Font</h4>
      </button>

JavaScript

function swapStyleSheet(sheet) {
            document.getElementById('style').setAttribute('href',sheet);
        }
Elsa
  • 23
  • 3
  • On refresh or on a new page load your browser reads the site in the initial state of your code as it's written above, so `` is always loaded. You need to persist state. Look into [local storage](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage) as a way to manage state. – Porter Jul 07 '21 at 14:03

0 Answers0