Menu
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.
666
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.
70
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
