In recent years the dark mode has established itself in the web graphics market in a decisive way, but i have noticed through feedback from users and different companies that not everyone appreciates this display mode, hence the idea of not excluding the classic white mode for the more nostalgic users or for those who prefer it in terms of reading and use.
In this article the basic steps to create a web system with a differentiated graphic theme (even more than two) will be explained in a simple and linear way.
The first thing to do is to create and include in our JS folder the JavaScript that takes care of switching from one css to another and setting cookies to avoid losing the selected theme preference.
var style = "default";
var cookiename = "Layout";
var days = 30;
function switchStyle(s) {
if (!document.getElementsByTagName) return;
var el = document.getElementsByTagName("link");
for (var i = 0; i < el.length; i++ ) { if (el[i].getAttribute("rel").indexOf("style") != -1 && el[i].getAttribute("title")) { el[i].disabled = true; if (el[i].getAttribute("title") == s) el[i].disabled = false; } } } function loadStyle() { var c = getStyleCookie(); if (c && c != style) { switchStyle(c); style = c; } } function setStyle(s) { if (s != style) { switchStyle(s); style = s; setStyleCookie(); } } window.onload = loadStyle; function setCookie(name, value, expdays) { var now = new Date(); var exp = new Date(now.getTime() + (1000*60*60*24*expdays)); document.cookie = name + "=" + escape(value) + ";" + "expires=" + exp.toGMTString() + ";" + "path=/"; } function delCookie(name) { var now = new Date(); var exp = new Date(now.getTime() - 1); document.cookie = name + "=;" + "expires=" + exp.toGMTString() + ";" + "path=/"; } function getCookie(name) { var cname = name + "="; var dc = document.cookie; if (dc.length > 0) {
var start = dc.indexOf(cname);
if (start != -1) {
start += cname.length;
var stop = dc.indexOf(";", start);
if (stop == -1) stop = dc.length;
return unescape(dc.substring(start,stop));
}
}
return null;
}
function setStyleCookie() {
setCookie(cookiename, style, days);
}
function getStyleCookie() {
return getCookie(cookiename);
}
function delStyleCookie() {
delCookie(cookiename);
}
The second thing to do is to create our two or more CSS with theme differences and the button classes, in this case they are default.css and light.css.
Button classes for the default (dark) css:
.lamp {
background: url(https://yourdomain/themes/images/lamp.png) transparent no-repeat center center !important;
-webkit-filter: drop-shadow(0px 0px 15px rgba(0,0,0,1)) !important;
filter: drop-shadow(0px 0px 15px rgba(0,0,0,1)) !important;
-webkit-box-shadow: 0px 0px 10px 1px transparent !important;
-moz-box-shadow: 0px 0px 10px 1px transparent !important;
-o-box-shadow: 0px 0px 10px 1px transparent !important;
box-shadow: 0px 0px 10px 1px transparent !important;
border-radius:30px;
}
.lamp:hover {
background: url(https://yourdomain/themes/images/lamp_hover.png) transparent no-repeat center center !important;
-webkit-filter: drop-shadow(0px -3px 12px rgba(255,255,255,1)) !important;
filter: drop-shadow(0px -3px 12px rgba(255,255,255,1)) !important;
-webkit-box-shadow: 0px 0px 10px 1px transparent !important;
-moz-box-shadow: 0px 0px 10px 1px transparent !important;
-o-box-shadow: 0px 0px 10px 1px transparent !important;
box-shadow: 0px 0px 10px 1px transparent !important;
border-radius:30px;
}
.lamp {
-webkit-filter: drop-shadow(0px 0px 15px rgba(0,0,0,1)) !important;
filter: drop-shadow(0px 0px 15px rgba(0,0,0,1)) !important;
}
.lamp:hover {
-webkit-filter: drop-shadow(0px -3px 12px rgba(255,255,255,1)) !important;
filter: drop-shadow(0px -3px 12px rgba(255,255,255,1)) !important;
}
.lampdark {
display: none !important;
}
Button classes for the light css:
.lamp {
background: url(https://yourdomain/themes/images/lamp_hover.png) transparent no-repeat center center !important;
border-radius: 30px !important;
-webkit-filter: (0px -3px 12px rgba(255,255,0,1)) !important;
filter: drop-shadow(0px -3px 12px rgba(255,255,0,1)) !important;
}
.lamp:hover {
background: url(https://yourdomain/themes/images/lamp.png) transparent no-repeat center center !important;
border-radius: 30px !important;
filter: invert(100%) !important;
}
.lamplight {
display: none !important;
}
The last thing to do is to add in the Head of our PHP the simple instructions to call up the JS and the CSS necessary for the operation and to include the switch buttons in the header, in this case, being only two css. I used buttons in overlap with hover effect.
This goes into the head:
<head>
<link rel="stylesheet" type="text/css" href="https://yourdomain/themes/css/default.css" title="default">
<link rel="alternate stylesheet" type="text/css" href="https://yourdomain/themes/css/light.css" title="light">
<script type="text/javascript" src="https://yourdomain/themes/js/switch.js">
</head>
</code>This goes into the header instead:
<div id="styleswitch" class="lamp">
<ul>
<p class="lampdark">
<p class="lamplight">
</ul>
</div>And now we will have our switch with a personalized theme very simply and functional.
By connecting to the link below you can see the switch at work.
