Dark Mode Toggle

Toggle dark mode on any website.

目前為 2024-09-09 提交的版本,檢視 最新版本

  1. // ==UserScript==
  2. // @name Dark Mode Toggle
  3. // @namespace http://violentmonkey.net/
  4. // @version 1.3
  5. // @description Toggle dark mode on any website.
  6. // @match *://*/*
  7. // @user InariOkami
  8. // @icon https://static.thenounproject.com/png/3359489-200.png
  9. // @grant GM_addStyle
  10. // @grant GM_registerMenuCommand
  11. // @grant GM_getValue
  12. // @grant GM_setValue
  13. // ==/UserScript==
  14.  
  15. (function() {
  16. 'use strict';
  17.  
  18. function applyDarkMode() {
  19. GM_addStyle(`
  20. /* General styles */
  21. body {
  22. background-color: #121212;
  23. color: #e0e0e0;
  24. }
  25. a {
  26. color: #bb86fc;
  27. }
  28. /* Headers and footers */
  29. header, footer, .navbar, .sidebar, .card, .modal, .dropdown, .banner, .container {
  30. background-color: #1e1e1e !important;
  31. }
  32. /* Forms and inputs */
  33. .input, .textarea, .button, .form-control, .select, .checkbox, .radio {
  34. background-color: #333 !important;
  35. color: #e0e0e0 !important;
  36. border-color: #444 !important;
  37. }
  38. .input:focus, .textarea:focus, .button:focus, .form-control:focus, .select:focus {
  39. border-color: #bb86fc !important;
  40. box-shadow: 0 0 0 1px #bb86fc !important;
  41. }
  42. /* Code blocks */
  43. .code, pre, .terminal {
  44. background-color: #2d2d2d;
  45. color: #e0e0e0;
  46. border: 1px solid #444;
  47. }
  48. /* Muted and light text */
  49. .text-muted, .text-light, .placeholder {
  50. color: #b0b0b0 !important;
  51. }
  52. /* Light backgrounds */
  53. .bg-light, .btn-light {
  54. background-color: #1e1e1e !important;
  55. color: #e0e0e0 !important;
  56. }
  57. .bg-white, .text-white {
  58. background-color: #333 !important;
  59. color: #e0e0e0 !important;
  60. }
  61. /* Alerts and notifications */
  62. .alert, .notification, .toast {
  63. background-color: #2d2d2d !important;
  64. color: #e0e0e0 !important;
  65. }
  66. /* Tables */
  67. table, th, td {
  68. background-color: #1e1e1e !important;
  69. color: #e0e0e0 !important;
  70. border: 1px solid #444 !important;
  71. }
  72. /* Links and buttons */
  73. button, .link, .nav-link {
  74. background-color: #333 !important;
  75. color: #e0e0e0 !important;
  76. border-color: #444 !important;
  77. }
  78. button:hover, .link:hover, .nav-link:hover {
  79. background-color: #444 !important;
  80. }
  81. /* Scrollbars */
  82. ::-webkit-scrollbar {
  83. width: 12px;
  84. }
  85. ::-webkit-scrollbar-thumb {
  86. background: #333;
  87. border-radius: 6px;
  88. }
  89. ::-webkit-scrollbar-track {
  90. background: #121212;
  91. }
  92. `);
  93. }
  94.  
  95. function removeDarkMode() {
  96. GM_addStyle(`
  97. /* General styles */
  98. body {
  99. background-color: #ffffff;
  100. color: #000000;
  101. }
  102. a {
  103. color: #0000ee;
  104. }
  105. /* Headers and footers */
  106. header, footer, .navbar, .sidebar, .card, .modal, .dropdown, .banner, .container {
  107. background-color: #f0f0f0 !important;
  108. }
  109. /* Forms and inputs */
  110. .input, .textarea, .button, .form-control, .select, .checkbox, .radio {
  111. background-color: #ffffff !important;
  112. color: #000000 !important;
  113. border-color: #cccccc !important;
  114. }
  115. .input:focus, .textarea:focus, .button:focus, .form-control:focus, .select:focus {
  116. border-color: #0000ee !important;
  117. box-shadow: 0 0 0 1px #0000ee !important;
  118. }
  119. /* Code blocks */
  120. .code, pre, .terminal {
  121. background-color: #f5f5f5;
  122. color: #000000;
  123. border: 1px solid #cccccc;
  124. }
  125. /* Muted and light text */
  126. .text-muted, .text-light, .placeholder {
  127. color: #6c757d !important;
  128. }
  129. /* Light backgrounds */
  130. .bg-light, .btn-light {
  131. background-color: #f8f9fa !important;
  132. color: #000000 !important;
  133. }
  134. .bg-white, .text-white {
  135. background-color: #ffffff !important;
  136. color: #000000 !important;
  137. }
  138. /* Alerts and notifications */
  139. .alert, .notification, .toast {
  140. background-color: #e2e3e5 !important;
  141. color: #000000 !important;
  142. }
  143. /* Tables */
  144. table, th, td {
  145. background-color: #f0f0f0 !important;
  146. color: #000000 !important;
  147. border: 1px solid #cccccc !important;
  148. }
  149. /* Links and buttons */
  150. button, .link, .nav-link {
  151. background-color: #ffffff !important;
  152. color: #000000 !important;
  153. border-color: #cccccc !important;
  154. }
  155. button:hover, .link:hover, .nav-link:hover {
  156. background-color: #e0e0e0 !important;
  157. }
  158. /* Scrollbars */
  159. ::-webkit-scrollbar {
  160. width: 12px;
  161. }
  162. ::-webkit-scrollbar-thumb {
  163. background: #cccccc;
  164. border-radius: 6px;
  165. }
  166. ::-webkit-scrollbar-track {
  167. background: #ffffff;
  168. }
  169. `);
  170. }
  171.  
  172. function toggleDarkMode() {
  173. const darkMode = !GM_getValue('darkMode', false);
  174. GM_setValue('darkMode', darkMode);
  175. if (darkMode) {
  176. applyDarkMode();
  177. } else {
  178. removeDarkMode();
  179. }
  180. }
  181.  
  182. if (GM_getValue('darkMode', false)) {
  183. applyDarkMode();
  184. }
  185.  
  186. GM_registerMenuCommand('Toggle Dark Mode', toggleDarkMode, 'd');
  187. })();