☰

GitHub night mode with reversed colors

Blindlingly white backgrounds at night? No problem, tiny and futureproof.

  1. // ==UserScript==
  2. // @name        GitHub night mode with reversed colors
  3. // @description Blindlingly white backgrounds at night? No problem, tiny and futureproof.
  4. // @namespace   https://greasyfork.org/users/4813-swyter
  5. // @match       *://github.com/*
  6. // @version     3
  7. // @grant       GM_addStyle
  8. // @run-at      document-start
  9. // ==/UserScript==
  10.  
  11. GM_addStyle
  12. (`
  13.   html
  14.   {
  15.     background-color: white;
  16.     color: black;
  17.     filter: contrast(110%) invert(85%) hue-rotate(90deg);
  18.   }
  19.  
  20.   img
  21.   {
  22.     filter: invert(125%) hue-rotate(-90deg);
  23.   }
  24.  
  25.   /* swy: the header is now dark; so more hacks */
  26.  
  27.   div.header[role=banner]
  28.   {
  29.     filter: invert(85%);
  30.     z-index: 40000;
  31.   }
  32.  
  33.   div.header[role=banner] img
  34.   {
  35.     filter: hue-rotate(265deg);
  36.   }
  37.  
  38.   div.header[role=banner] div.dropdown-menu
  39.   {
  40.     filter: invert(85%);
  41.   }
  42. `)
  43.  
  44. /* swy: fix the weird left cutoff edge in the original page's logo */
  45. document.addEventListener('DOMContentLoaded', function()
  46. {
  47.   if ((logo = document.querySelector("a.header-logo-invertocat svg.octicon-mark-github")))
  48.     logo.viewBox.baseVal.height = 17; /* swy: was 16 */
  49. });