☰

Darkmode User

Darkmode for the websites.

目前为 2021-10-19 提交的版本，查看 最新版本。

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