Greasy Fork 还支持 简体中文。

Hackread Dark Switcher

Adds a smooth light/dark mode toggle to Hackread with theme memory.

  1. // ==UserScript==
  2. // @name Hackread Dark Switcher
  3. // @namespace https://hackread.com/
  4. // @version 1.0
  5. // @description Adds a smooth light/dark mode toggle to Hackread with theme memory.
  6. // @author Ghosty-Tongue
  7. // @license MIT
  8. // @match https://hackread.com/*
  9. // @grant GM_addStyle
  10. // ==/UserScript==
  11.  
  12. (function () {
  13. 'use strict';
  14.  
  15. const toggle = document.createElement('div');
  16. toggle.id = 'darkModeToggle';
  17. toggle.innerHTML = '🌙';
  18. document.body.appendChild(toggle);
  19.  
  20. GM_addStyle(`
  21. #darkModeToggle {
  22. position: fixed;
  23. bottom: 20px;
  24. right: 20px;
  25. background-color: #333;
  26. color: white;
  27. padding: 10px 15px;
  28. border-radius: 30px;
  29. font-size: 20px;
  30. cursor: pointer;
  31. z-index: 9999;
  32. box-shadow: 0 0 10px rgba(0,0,0,0.4);
  33. transition: background-color 0.3s, color 0.3s;
  34. }
  35.  
  36. #darkModeToggle.light {
  37. background-color: #f0f0f0;
  38. color: #111;
  39. }
  40. `);
  41.  
  42. const darkStyles = `
  43. body, html {
  44. background-color: #121212 !important;
  45. color: #e0e0e0 !important;
  46. }
  47.  
  48. a {
  49. color: #90caf9 !important;
  50. }
  51.  
  52. a:hover {
  53. color: #bbdefb !important;
  54. }
  55.  
  56. header, footer, .site-header, .site-footer, .widget, .entry-footer, .post-meta, .cs-entry__meta {
  57. background-color: #1e1e1e !important;
  58. color: #ccc !important;
  59. }
  60.  
  61. .post, .entry-content, .cs-entry__title, article, .content-area, .cs-content, .entry-title {
  62. background-color: #181818 !important;
  63. color: #e0e0e0 !important;
  64. }
  65.  
  66. code, pre, blockquote {
  67. background-color: #252525 !important;
  68. color: #eee !important;
  69. }
  70.  
  71. img {
  72. filter: brightness(0.9) contrast(1.05);
  73. }
  74.  
  75. input, textarea, select, button {
  76. background-color: #2c2c2c !important;
  77. color: #ffffff !important;
  78. border: 1px solid #444 !important;
  79. }
  80.  
  81. .widget, .sidebar, .powerkit-widget, .comments-area, .comment, .related-posts {
  82. background-color: #1a1a1a !important;
  83. color: #ccc !important;
  84. }
  85.  
  86. .entry-title a, .widget-title {
  87. color: #ffffff !important;
  88. }
  89.  
  90. ::selection {
  91. background: #333333;
  92. color: #ffffff;
  93. }
  94.  
  95. .entry-meta a, .entry-footer a, .post-meta a {
  96. color: #bbbbbb !important;
  97. }
  98. `;
  99.  
  100. let styleTag = null;
  101.  
  102. function enableDarkMode() {
  103. styleTag = document.createElement('style');
  104. styleTag.id = 'darkModeStyles';
  105. styleTag.innerHTML = darkStyles;
  106. document.head.appendChild(styleTag);
  107. toggle.innerHTML = '☀️';
  108. toggle.classList.remove('light');
  109. }
  110.  
  111. function disableDarkMode() {
  112. if (styleTag) styleTag.remove();
  113. toggle.innerHTML = '🌙';
  114. toggle.classList.add('light');
  115. }
  116.  
  117. const mode = localStorage.getItem('hackread-darkmode');
  118. if (mode === 'on') enableDarkMode();
  119.  
  120. toggle.addEventListener('click', () => {
  121. if (document.getElementById('darkModeStyles')) {
  122. disableDarkMode();
  123. localStorage.setItem('hackread-darkmode', 'off');
  124. } else {
  125. enableDarkMode();
  126. localStorage.setItem('hackread-darkmode', 'on');
  127. }
  128. });
  129. })();