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)