I've been updating my portfolio today for quite a lot now. So for last changes i wanted to add a dark mode option and i don't have any idea on how to do it in faster way and no idea where do i gonna add the dark mode icon or option.
So i come up with a crazy idea of copying my webvium force dark mode js and paste it on my site and by detecting if the user tripple click it it'll turn on/off dark mode.
This is my site looks like light mode:
This is what my site looks like when user tripple click to turned on the force dark mode:
It's just an inversion of the color but so far it's looks cool.
This is the code i used:
window.addEventListener('click', function (evt) {
if (evt.detail === 3) {
javascript: (
function () {
var css = 'html {-webkit-filter: invert(100%);' +
'-moz-filter: invert(100%);' +
'-o-filter: invert(100%);' +
'-ms-filter: invert(100%);}' +
'img, iframe, video, canvas, svg, picture {-webkit-filter: invert(100%) !important;' +
'-moz-filter: invert(100%) !important;' +
'-o-filter: invert(100%) !important;' +
'-ms-filter: invert(100%) !important;}',
head = document.getElementsByTagName('head')[0], style = document.createElement('style');
if (!window.counter) {
window.counter = 1;
} else {
window.counter ++;
if (window.counter % 2 == 0) {
var css = 'html {-webkit-filter: invert(0%); -moz-filter: invert(0%); -o-filter: invert(0%); -ms-filter: invert(0%); }' +
'img, iframe, video, canvas, svg, picture {-webkit-filter: invert(0%) !important; -moz-filter: invert(0%) !important; -o-filter: invert(0%) !important; -ms-filter: invert(0%) !important;}'
}
};
style.type = 'text/css';
if (style.styleSheet) {
style.styleSheet.cssText = css;
} else {
style.appendChild(document.createTextNode(css));
}
head.appendChild(style);
}
());
}
});
my website: https://mrepol742.github.io
Top comments (0)