Reference in html/css

Question

I am wondering how you can reference a particular folder/file in HTML so that it goes through the CSS, js, and HTML.

Basically, I have this code:

<input onclick="setTimeout(function(){location.href='Darkmode';}, 500);" type="checkbox"/>
    <label></label>

I have a folder called Darkmode and inside that folder, I have darkmode.html, css, and js

I am using this as a subsite for my main site. For example, I have my main website, and inside that, I want to refer to the Darkmode files so that when I click the toggle button (I have that already) in my website, the site switches to the Darkmode.

Problem: How can I refer to all the Darkmode files at once so it refers to the HTML, css, and also the js.

If I change location.href='Darkmode'; to location.href='darkmode.html';, it only refers to the HTML and not the css of it neither the js. Is there a way, I can refer to all those files at once so the computer runs through the css, js and the HTML of the Darkmode?

if you html is changing, you just need to have right references in your darkmode.html file i.e. its css, js references should point to your darkmode folder files. And these files will automatically load. — Rahul R.
– Rahul R., Commented Feb 27, 2021 at 18:20

symlink · Accepted Answer · 2021-02-27 18:19:37Z

2

If the HTML is different, you would want to just refer to the html file darkmode.html and in that html file, reference the proper CSS and JS files. But unless the design is a lot different, it's better practice to just change the CSS. You can do this without even changing the page by changing a single class in the body tag:

const btn = document.getElementById("darkmode")

btn.addEventListener("click", ()=>{
  document.body.classList.toggle("darkmode")
})

body.darkmode{
  background: #222;
  color: #fff;
}

<button id="darkmode">Click to switch light/dark</button>
<h1>This is my webpage</h1>
<p>Here is a paragraph</p>
<ul>
  <li>This</li>
  <li>is</li>
  <li>an</li>
  <li>unordered</li>
  <li>list</li>
</ul>

answered Feb 27, 2021 at 18:19

symlink

12.2k7 gold badges31 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Reference in html/css

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related