DEV Community

Cover image for My portfolio but in dark mode
Melvin Jones Repol
Melvin Jones Repol

Posted on

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:
My site header in light mode
My site footer in light mode

This is what my site looks like when user tripple click to turned on the force dark mode:
My site header in dark mode
My site footer in 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);
  }
());
  }
});
Enter fullscreen mode Exit fullscreen mode

my website: https://mrepol742.github.io

Top comments (0)