☰

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. })();