Hay varias formas de hacerlo, requires 3 elementos: HTML con el contenido de la página, que no vas a cambiar, estilos CSS para el tema claro y para el tema oscuro y javascript para realizar el cambio entre temas.
Si no hay mucho CSS relacionado con el cambio de tema de color puedes usar el método de añadir / quitar una clase a un elemento contenedor y hacer que uno de los dos esquemas de color dependa de esta clase, por ejemplo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Day And NightMode</title>
<style type="text/css">
* {
margin : 0;
padding : 0;
box-sizing: border-box;
-moz-box-sizing : border-box;
-webkit-box-sizing: border-box;
}
article {
border-radius: 5px;
margin-top: 1em;
padding: 2% 5%;
}
article div {
margin-top : 50px;
padding : 1em;
}
button {
padding: 5px;
}
ul {
margin-left: 2em;
margin-top : 1em;
}
.center {
text-align: center;
}
.content {
border : 1px solid grey;
border-radius: 5px;
margin : 2em 7em;
padding : 2em;
}
.contrastable {
border-radius: 5px 5px 0 0;
}
.grid {
border : none;
margin : 1em auto;
padding: 0;
width : 312px;
}
.grid div {
border-radius: 5px;
border : none;
display : inline-block;
height : 150px;
margin : 0.1em;
width : 150px;
}
</style>
</head>
<body>
<div class="content" id="content">
<div class="center">
<button onclick="swapDayAndNight()">Cambiar colores</button>
</div>
<article>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque, harum nemo fugit corrupti sequi alias odit mollitia a nesciunt ipsa vero, saepe repellendus voluptas, debitis laborum dicta! Nobis quo, fuga.</p>
</div>
<div class="contrastable">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<ul>
<li>Uno</li>
<li>Dos</li>
<li>Tres</li>
<li>Cuatro</li>
</ul>
</div>
<div class="grid">
<div class="red-bg"></div>
<div class="blue-bg"></div>
<div class="blue-bg"></div>
<div class="red-bg"></div>
</div>
</article>
</div>
<link rel='stylesheet' href='public/css/light-theme.css' type='text/css'>
<link rel='stylesheet' href='public/css/dark-theme.css' type='text/css'>
<script type="text/javascript">
function swapDayAndNight()
{
var element = document.getElementById('content');
element.classList.toggle('dark-theme');
}
</script>
</body>
</html>
Ahora los ficheros con los estilos (puedes poner todos en uno si usas esta técnica):
/**********************************************************************/
/*** light-theme ******************************************************/
article div {
border-bottom: 1px solid grey;
}
.blue-bg {
background: blue;
}
.contrastable {
background: #D9EC87;
}
.contrastable * {
color: #740100;
}
.red-bg {
background: red;
}
/**********************************************************************/
/*** dark-theme ******************************************************/
.dark-theme article div {
border-color: white;
}
.dark-theme article {
background: black;
color : white;
}
.dark-theme .blue-bg {
background: darkblue;
}
.dark-theme .contrastable {
background: #740100;
}
.dark-theme .contrastable * {
color: #D9EC87;
}
.dark-theme .red-bg {
background: darkred;
}
También y siguiendo lo que creo que querías hacer, puedes cambiar la hoja de estilo que se carga, para lo que debes quitar la clase .dark-theme
de dark-theme.css:
<!DOCTYPE html>
<html>
<head>
<title>Cambiar tema de color</title>
</head>
<body>
<div class="content">
<div class="center">
<button onclick="swapDayAndNight()">Cambiar colores</button>
</div>
<article class="contrastable">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis, esse, suscipit! Suscipit aspernatur, cupiditate quasi commodi blanditiis reiciendis quae quod aliquam natus omnis saepe voluptas deleniti, necessitatibus ipsum praesentium expedita!</p>
</article>
</div>
<link id="color-theme" rel='stylesheet' href='public/css/light-theme.css' type='text/css'>
<script>
var element = document.getElementById('color-theme');
var light_styles = 'public/css/light-theme.css';
var dark_styles = 'public/css/dark-theme.css';
var theme = 'light';
function swapDayAndNight()
{
if (theme == 'light') {
theme = 'dark';
element.setAttribute('href', dark_styles);
} else {
theme = 'light';
element.setAttribute('href', light_styles);
}
}
</script>
</body>
</html>
Nota: esto último funciona perfectamente en local, pero si cargas los estilos remotamente, que será lo normal, solo cargas la primera hoja porque con javascript estás editando el DOM, no recargando la página, con lo que tienes que hackear el método que te indico, por ejemplo, cargas ambas hojas de estilo, mismos selectores y debajo la que debe aparecer por defecto (sera la que mande). Así ambas se descargan y solo tendrás que intercambiar su orden cuando toque cambiar el tema.
modoninja
al body y que el css del nightmode dependa de eso