css HeiHei - 简单时尚的CSS片段，可以打开夜间模式。

Posted 2021-05-13

@namespace url(http://www.w3.org/1999/xhtml);

/**
HeiHei 2015 - by Andy Pan, 2015/9/12 1AM (UTC+8)
MIT Licensed

WARNING: BUGGY in certain sites
If you are visiting some websites, resulting in a blank page,
please exclude it using the regexp below.

*/

@-moz-document regexp("https?://(?!(?:www?)\\.facebook\\.com)(?!www\\.youtube\\.com)(?!.*\\.simplenote\\.com).*"){
  
  html {
    /* background on root element is not affected by the filter */
    background-color: #222;
  }
  
  html, iframe, img:hover {
    /* simply inverting looks odd. let's do some magic... */
    filter: invert(100%) hue-rotate(180deg);
  }
  
  img {
    /* reveal! */
    transition: filter 200ms;
  }
  
  img:hover {
    /* don't be too heihei to see anything */
    background: white;
  }
}