Home/ Questions/Q 5950463
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-22T17:23:49+00:00

I am working on a webpage for an embedded device where the server storage

  • 0

I am working on a webpage for an embedded device where the server storage space is very limited. I want the user to be able to switch between day mode and night mode viewing of the webpages. To do so I would like to just load the page using a different webpage with a button is clicked. I don’t want to have two copies of every page because I don’t have enough space. Is there a way to switch to a different css page or load the css dynamically somehow? I can only use html and javascript. No PHP or asp.net.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Let me argue for something even simpler:

    1: One CSS:

    .day {
  color: black;
  background-color: white;
}

.night {
  color: white;
  background-color: black;
}

.day #content {
  color: blue;
}

.night #content{
  color: red;
}

    2: One HTML:

    <html>
  <head>
    <link rel="stylesheet" type="text/css" href="dayornight.css">
  </head>
  <body class="day">
    <div id="content">
        <a>Hello World!</a>
    </div>
  </body>
</html>

    3: A small piece of JavaScript or jQuery code tied to the button that toggles the class on the body tag from day to night.

    As you can see if you bring this example up in your browser, changing the class not only changes the CSS style of the body, it can also shift the contained items as well because their selectors match differently now.

    • 0