☰

Revert dark to light

Apply a smart color revert on selected websites. If the site was dark, it's now light. If it was light, it's now dark.

  1. // ==UserScript==
  2. // @name        Revert dark to light
  3. // @namespace   gqqnbig
  4. // @match       https://forums.totalwar.com/*
  5. // @include     /theverge\.com\D*\/?$/
  6. // @grant       GM_addStyle
  7. // @version     1.2
  8. // @author      gqqnbig
  9. // @description Apply a smart color revert on selected websites. If the site was dark, it's now light. If it was light, it's now dark.
  10. // @license     GNU General Public License v3.0
  11. // ==/UserScript==
  12.  
  13.  
  14. (function(){
  15.  
  16.   // The following rules are from the smart invert option of the chrome extension SUPER DARK MODE
  17.   // (https://chrome.google.com/webstore/detail/super-dark-mode/nlgphodeccebbcnkgmokeegopgpnjfkc).
  18.   // Scroll bar rules are removed.
  19.   GM_addStyle(`
  20. :root{
  21.     --bg-color: rgb(15, 15, 15);
  22.     --input-border-color: rgba(211,211,211,0.2);
  23. }
  24.  
  25. html{
  26.   background: #000 !important;
  27. }
  28.  
  29. body {
  30.   background-color: #FFF !important;
  31.   filter: invert(.95) sepia(.1) brightness(.99) !important;
  32.   -moz-filter: invert(.95) sepia(.1) brightness(.99) !important;
  33.   -webkit-filter: invert(.95) sepia(.1) brightness(.99) !important;
  34. }
  35.  
  36. em, img, svg, image, video, audio, embed, iframe, object, button, canvas, figure:empty, *[style*="background-image"], *[class*=icon], *[class*=Icon], *[class=button], *[style*="background-position"], *[style*=background-repeat], *[style*="url("]{
  37.   filter: invert(1) brightness(.99) saturate(1.2) !important;
  38.   -moz-filter: invert(1) brightness(.99) saturate(1.2) !important;
  39.   -webkit-filter: invert(1) brightness(.99) saturate(1.2) !important;
  40. }
  41.  
  42. /*google*/
  43. #lst-ib.gsfi, #gs_taif0.gsfi, #gs_htif0.gsfi{
  44. 	color:gray !important;
  45. }
  46.  
  47. /*vnexpress*/
  48. #wrap-main-nav .main-nav{background-color: white;}
  49.  
  50. /* Apple.com */
  51. main.main div[data-analytics-section-engagement] .module-content{filter:invert(1);}
  52. #ac-globalnav{filter:invert(1);}
  53.  
  54. /*salesforce*/
  55. #oneHeader .oneTrialHeader.trial-header, #oneHeader .oneTrialHeader .trial-menu-list .slds-dropdown{
  56.   background: #ffc3bf;
  57. }
  58. #main .columns-wrapper.column-container-image.lazy.bg-center-bottom.bg-cover{
  59.   background-image: none !important;
  60. }
  61. #sf-chat .embeddedServiceHelpButton .helpButton .uiButton .agent-img img{filter:invert(0) !important;}
  62. footer.bottom .page-footer{background-color: #ffc799 !important;}
  63. /*trello*/
  64. #board .list.js-list-content, #chrome-container .card-detail-window, #content-wrapper .board-menu{
  65.   filter:invert(1);
  66. }
  67. #chrome-container .card-detail-window{
  68.   background:#e9e9e9 !important
  69. }
  70. /*cnn*/
  71. #nav__plain-header.nav--plain-header{
  72.   filter: invert(.8) sepia(.5);
  73. }
  74. #intl_homepage3-zone-4{
  75.   background-color:#ff9696 !important;
  76. }
  77. div#footer-wrap footer#footer-nav-container{
  78.   background-color:rgb(250, 250, 250) !important;
  79. }
  80. div#footer-wrap footer#footer-nav-container *{
  81.   color:rgb(31, 31, 31) !important;
  82. }
  83. /*vnexpress*/
  84. .swiper-slide .box-info-news{filter:invert(1);}
  85. .vjs-control-bar{filter:invert(0);}
  86. #player_playing.detail_left{filter:invert(1) !important;}
  87. video#vne_vod_html5_api{filter:invert(0) !important;}
  88. /*wiki*/
  89. .vector-toc-pinned #vector-toc-pinned-container .vector-toc:after{background:none !important;}
  90. a.mw-logo span.mw-logo-container{filter:invert(1);}
  91. /*paypal*/
  92. #federated-mep-footer-container.css-zdxt0i{filter:invert(1);}
  93. #merchant-header-main-wrapper-internal{filter:invert(0) !important;}
  94. /*cnn*/
  95. .header__wrapper-outer{filter:invert(1);}
  96. .layout__bottom.layout-with-rail__bottom{filter:invert(1);}
  97. /*discord*/
  98. .grid-3d2PVT.footer-gguAio.brand-1AbNp3, footer.footerContainer-1IvXQc{filter:invert(1) saturate(1.5);}
  99. /*firefox*/
  100. #react-view .Page-amo .Header, #react-view .Page-amo footer.Footer{filter:invert(1);}
  101. /*docs*/
  102. .docs-material-colorpalette-body{filter:invert(1);}
  103. .goog-menu.goog-menu-vertical.docs-material{filter:invert(0) !important;}
  104. canvas.kix-canvas-tile-content, #docs-editor-container #waffle-grid-container{opacity:.8;}
  105. #workspace #pages svg image{filter:invert(0) !important;}
  106. /*amazon.com*/
  107. header#navbar-main.nav-opt-sprite.nav-flex, #navFooter.navLeftFooter.nav-sprite-v1, #nav-progressive-subnav, #nav-flyout-iss-anchor #nav-flyout-searchAjax{filter:invert(1);}
  108. header#navbar-main.nav-opt-sprite.nav-flex{position:relative; z-index:9999;}
  109. #hmenu-container #hmenu-canvas-background.hmenu-dark-bkg-color {
  110.     background-color: rgb(200 200 200 / 80%);
  111. }
  112. header#navbar-main.nav-opt-sprite.nav-flex .nav-coreFlyout.nav-flyout{filter:invert(1);}
  113. header#navbar-main.nav-opt-sprite.nav-flex .nav-search-field{opacity:.8;}
  114. .DesktopImmersiveExpanded-module__elementContainer_QbhBlMOnTIIsJ59Hkl7ti{filter:invert(1);}
  115.   `);
  116.  
  117.  
  118. })();