My portfolio but in dark mode

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

Blog

My portfolio but in dark mode

Melvin Jones Repol

Join Our Newsletter. No Spam, Only the good stuff.

Related