☰

Darkmode User

Darkmode for the websites.

目前為 2021-02-09 提交的版本，檢視 最新版本。

  1. // ==UserScript==
  2. //
  3. // @name         Darkmode User
  4. // @version      1.5
  5. // @namespace    https://github.com/Purfview/Darkmode-User
  6. // @description  Darkmode for the websites.
  7. // @icon         https://i.imgur.com/ZftAaI6.png
  8. // @license      MIT
  9. //
  10. //
  11. // @require      https://cdn.jsdelivr.net/npm/darkmode-js@1.5.7/lib/darkmode-js.min.js
  12. //
  13. // @include      https://karagarga.in/*
  14. // @include      https://secret-cinema.pw/*
  15. // @include      https://forum.doom9.org/*
  16. // @include      https://greasyfork.org/*
  17. //
  18. // @run-at       document-start
  19. //
  20. // ==/UserScript==
  21. //
  22. /*=========================  Version History  ==================================
  23.  
  24. 1.0   -   First public release, only one site added.
  25.  
  26. 1.1   -   Added SC site.
  27.       -   Added basic func for the "unknown" sites at @include.
  28.       -   Sites' specific code was split to separate functions.
  29.       -   Much faster switching to darkmode (no waiting for external images/resources).
  30.       -   Return original background in white mode.
  31.  
  32. 1.2   -   Fixed few SC icons.
  33.  
  34. 1.3   -   Added Doom9 site.
  35.  
  36. 1.4   -   Added Greasyfork site. Some tweaks for SC and Doom9.
  37.  
  38. 1.5   -   Script wasn't working with Tampermonkey from v1.1. Fixed!
  39.  
  40. ==============================================================================*/
  41.  
  42.  
  43. //==============================================================================
  44. //    Sites' specific funcs.
  45. //==============================================================================
  46.  
  47. function siteKG() {
  48.   const urlPath = window.location.pathname;
  49.   if (urlPath == '/browse.php'     ||
  50.       urlPath == '/current.php'    ||
  51.       urlPath == '/history.php'    ||
  52.       urlPath == '/friends.php'    ||
  53.       urlPath == '/bookmarks.php'  ||
  54.       urlPath == '/mytorrents.php' ||
  55.       urlPath == '/userdetails.php' ) {
  56.     addGlobalStyles('img {mix-blend-mode: screen}');
  57.     addGlobalStyles('a div img {mix-blend-mode: normal}');
  58.     addGlobalStyles('table .clear {isolation: isolate}');
  59.   } else {
  60.     addGlobalStyles('img {mix-blend-mode: screen}');
  61.     addGlobalStyles('table .main {isolation: isolate}');
  62.     addGlobalStyles('table .main img {mix-blend-mode: difference}');
  63.     addGlobalStyles('.spoiler {isolation: isolate}');
  64.     addGlobalStyles('.spoiler img {mix-blend-mode: difference}');
  65.     addGlobalStyles('table .clear {isolation: isolate}');
  66.   }
  67. }
  68.  
  69. function siteSC() {
  70.   addGlobalStyles('img {mix-blend-mode: screen}');
  71.   addGlobalStyles('#header {mix-blend-mode: screen}');
  72.   addGlobalStyles('.colhead_dark {mix-blend-mode: difference}');
  73.   addGlobalStyles('.fronttab {mix-blend-mode: exclusion}');
  74.   addGlobalStyles('.colhead {mix-blend-mode: difference}');
  75.   addGlobalStyles('.settings_sidebar {isolation: isolate}');
  76.   addGlobalStyles('#textarea_wrap_0 {isolation: isolate}');
  77.   addGlobalStyles('.widethin .header .topbar {mix-blend-mode: difference}');
  78.   addGlobalStyles('.torrent_description table tbody tr {mix-blend-mode: difference}');
  79.   addGlobalStyles('#covers #cover_div_0 .brackets {mix-blend-mode: normal}');
  80.   addGlobalStyles('.wrapicon {mix-blend-mode: normal}');
  81.   addGlobalStyles('.potwicon {mix-blend-mode: normal}');
  82.   addGlobalStyles('iframe {mix-blend-mode: screen}');
  83. }
  84.  
  85. function siteDoom9() {
  86.   addGlobalStyles('img {mix-blend-mode: screen}');
  87.   addGlobalStyles('#vB_Editor_QR_cmd_removeformat img, \
  88.                    #vB_Editor_QR_cmd_bold img, \
  89.                    #vB_Editor_QR_cmd_italic img, \
  90.                    #vB_Editor_QR_cmd_underline img, \
  91.                    #vB_Editor_QR_color_out img \
  92.                    {mix-blend-mode: normal}');
  93.   addGlobalStyles('#vB_Editor_001_controls img {mix-blend-mode: normal}');
  94.   addGlobalStyles('#vB_Editor_001_popup_smilie img, \
  95.                    #vB_Editor_001_cmd_createlink img, \
  96.                    #vB_Editor_001_cmd_unlink img, \
  97.                    #vB_Editor_001_cmd_email img, \
  98.                    #vB_Editor_001_cmd_insertimage img, \
  99.                    #vB_Editor_001_cmd_wrap0_quote img, \
  100.                    #vB_Editor_001_cmd_wrap0_php img \
  101.                    {mix-blend-mode: screen}');
  102. }
  103.  
  104. function siteGreasyfork() {
  105.   addGlobalStyles('img {mix-blend-mode: screen}');
  106.   addGlobalStyles('#main-header {mix-blend-mode: difference}');
  107.   addGlobalStyles('#site-name a img {mix-blend-mode: normal}');
  108.   addGlobalStyles('#site-name img {mix-blend-mode: normal}');
  109.   addGlobalStyles('#install-area {mix-blend-mode: difference}');
  110.   addGlobalStyles('.script-list-ratings span span {mix-blend-mode: difference}');
  111.   addGlobalStyles('.current {color: #bfbfbf}');
  112.   addGlobalStyles('#about-user {background-color: transparent}');
  113.   addGlobalStyles('#about-user h2 {color: #bfbfbf}');
  114.   addGlobalStyles('#about-user h3 {color: #bfbfbf}');
  115.   addGlobalStyles('tezt {mix-blend-mode: screen}');
  116. }
  117.  
  118. function siteUnknown() {
  119.   addGlobalStyles('img {mix-blend-mode: screen}');
  120. }
  121.  
  122. //==============================================================================
  123. //   Toggle/Add/Remove funcs.
  124. //==============================================================================
  125.  
  126. function addGlobalStyles(css) {
  127.   var head, style;
  128.   head = document.getElementsByTagName('head')[0];
  129.   if (!head) { return; }
  130.   style = document.createElement('style');
  131.   style.className = 'DarkmodeUser';
  132.   style.innerHTML = css;
  133.   head.appendChild(style);
  134. }
  135.  
  136. function removeGlobalStyles() {
  137.   var removeEl = [].slice.apply(document.getElementsByClassName("DarkmodeUser"));
  138.   for (var i = 0; i < removeEl.length; i++) {
  139.     removeEl[i].remove();
  140.   }
  141. }
  142.  
  143. function toggleGlobalStyles() {
  144.   var modestate = window.localStorage['darkmode'];
  145.   if (modestate == "true") {
  146.     addBackground();
  147.     const urlHost = window.location.hostname;
  148.     if (urlHost == 'karagarga.in') {
  149.       siteKG();
  150.     } else if (urlHost == 'secret-cinema.pw') {
  151.       siteSC();
  152.     } else if (urlHost == 'forum.doom9.org') {
  153.       siteDoom9();
  154.     } else if (urlHost == 'greasyfork.org') {
  155.       siteGreasyfork();
  156.     } else {
  157.       siteUnknown();
  158.     }
  159.   } else {
  160.     removeGlobalStyles();
  161.     removeBackground();
  162.   }
  163. }
  164.  
  165. function removeBackground() {
  166.   document.getElementsByClassName('darkmode-background')[0].remove();
  167. }
  168.  
  169. function addBackground() {
  170.   if (document.querySelector('.darkmode-background') !== null) { return; }
  171.   var backgroundDiv = document.createElement('div');
  172.   backgroundDiv.setAttribute('class', 'darkmode-background');
  173.   document.body.insertBefore(backgroundDiv, document.body.firstChild);
  174. }
  175.  
  176. //==============================================================================
  177. //    Darkmode.js
  178. //==============================================================================
  179.  
  180. function addDarkmodeWidget() {
  181.   const options = {
  182.     bottom: '32px',
  183.     right: '32px',
  184.     left: 'unset',
  185.     time: '0.0s',
  186.     mixColor: '#fff',
  187.     backgroundColor: '#fff',
  188.     buttonColorDark: '#100f2c',
  189.     buttonColorLight: '#fff',
  190.     saveInCookies: true,
  191.     label: '',
  192.     autoMatchOsTheme: false
  193.   };
  194.   new Darkmode(options).showWidget();
  195.   // Add func to the widged button to toggle styles on click.
  196.   document.getElementsByClassName('darkmode-toggle')[0].onclick = function () {toggleGlobalStyles()};
  197.   // Add styles on the page load.
  198.   const darkmode = window.localStorage['darkmode'];
  199.   if (darkmode == "true") {
  200.     toggleGlobalStyles();
  201.   } else {
  202.     // Remove custom white background.
  203.     removeBackground();
  204.   }
  205. }
  206.  
  207. window.addEventListener('DOMContentLoaded', addDarkmodeWidget);