How to toggle between two css files using js or jquery?

Viewed 295

I have 2 css files for light mode & dark mode of the website
light.css & dark.css in the same directory.

<nav class="nav-menu">
      <ul>
        <li class="active"><a href="#intro"><i class="bx bx-home"></i> <span>Home</span></a></li>
        <li><a href="#button"><i class="bx bx-button"></i> <span>Toggle</span></a></li>
      </ul>
    </nav>

I have already integrated the light mode css file in the HTML. How can I use the

<li><a href="#button"><i class="bx bx-button"></i> <span>Toggle</span></a></li>

toggle icon to switch to dark mode css file in my website ?

1 Answers

Add a specific id for the css link and change the value of the attribute href when trigger your selected button using javascript/jQuery.

Related