tutorials

Stylesheet changing (javascript)

Ok, you learned about HTML and CSS. it's time to go to Javascript.

JavaScript, often abbreviated as JS, is a programming language and core technology of a website, alongside HTML and CSS. Not to be confused with Java (programming language), Javanese script, or ECMAScript.

(taken from wikipedia)

99% of websites have Javascript for interactive funsies and stuff.

Ok, time to get back. We first need a .js or any JavaScript file.

And you also have to have like, two or more css stylesheets.

On your .js file, add this line of code:

  function toggleTheme() {
            // Select the link element
            let theme = document.getElementById('theme');

            // Toggle between light.css and dark.css
            if (theme.getAttribute('href') = 'css 1') {
                theme.setAttribute('href', 'css 2');
            } else {
                theme.setAttribute('href', 'css 1');
            }
        }

then add this in your index.html or whatever you want:

 <h2>Changing Style Sheets</h2>
    <br />
    Click the button below to switch 
      between light and dark themes.<br />

    <button onclick="toggleTheme()">Switch</button>

 <link id="theme" rel="stylesheet" 
          type="text/css" href="INSERT ACTIVE CSS FILE" />

output:

Go back?