☰

更好的ChatGPT暗色主题

为ChatGPT设置更友好的暗色主题

  1. // ==UserScript==
  2. // @name         Better ChatGPT Dark Theme
  3. // @name:zh-CN   更好的ChatGPT暗色主题
  4. // @namespace    http://tampermonkey.net/
  5. // @version      1.6
  6. // @license      MIT
  7. // @author       izumiChan16
  8. // @match        https://chatgpt.com/*
  9. // @icon         https://www.google.com/s2/favicons?sz=64&domain=openai.com
  10. // @grant        none
  11. // @description  Set a more friendly dark theme for ChatGPT
  12. // @description:zh-cn 为ChatGPT设置更友好的暗色主题
  13. // @run-at document-idle
  14. // ==/UserScript==
  15.  
  16. (function() {
  17.     'use strict';
  18.  
  19.     // Define custom dark theme styles
  20.     const customDarkStyles = `
  21.     html {
  22.     --main-surface-primary: #eff1f5;
  23.     --sidebar-surface-primary: #e7e9ee;
  24.     --sidebar-surface-secondary: #cdd0d9;
  25.     }
  26.     
  27.     .dark {
  28.         --text-primary: #acb2be !important;
  29.         --text-secondary: #c0c0c0 !important;
  30.         --text-tertiary: #a9a9a9 !important;
  31.         --text-quaternary: #808080 !important;
  32.  
  33.         --border-light: hsla(0, 0%, 100%, 0.05) !important;
  34.         --border-medium: hsla(0, 0%, 100%, 0.1) !important;
  35.         --border-heavy: hsla(0, 0%, 100%, 0.15) !important;
  36.         --border-xheavy: hsla(0, 0%, 100%, 0.2) !important;
  37.  
  38.         --main-surface-primary: #21232f !important;
  39.         --main-surface-secondary: #3c4054 !important;
  40.         --main-surface-tertiary: #808080 !important;
  41.  
  42.         --sidebar-surface-primary: #2d2f41 !important;
  43.         --sidebar-surface-secondary: #373a4d !important;
  44.         --sidebar-surface-tertiary: #696969 !important;
  45.  
  46.         --link: #7ab7ff !important;
  47.         --link-hover: #5e83b3 !important;
  48.     }
  49.  
  50.     .bg-gray-950 {
  51.         background-color: rgba(13, 13, 13, var(--tw-bg-opacity));
  52.     }
  53.  
  54.     :root .bg-gray-950 {
  55.         --tw-bg-opacity: 1;  // More opaque in light theme for better readability
  56.     }
  57.  
  58.     .dark .bg-gray-950 {
  59.         --tw-bg-opacity: 0.5;  // As originally defined, semi-transparent in dark theme
  60.     }
  61.     `;
  62.  
  63.     // Function to add styles to the page
  64.     function addCustomStyles() {
  65.         const styleSheet = document.createElement("style");
  66.         styleSheet.type = "text/css";
  67.         styleSheet.innerText = customDarkStyles;
  68.         document.head.appendChild(styleSheet);
  69.     }
  70.  
  71.     // Add custom styles when the script runs
  72.     addCustomStyles();
  73.  
  74.     // Function to modify CSS variables for eye comfort
  75.     function modifyThemeColors() {
  76.         // Additional style modifications
  77.         const styleSheet = document.createElement('style');
  78.         document.head.appendChild(styleSheet);
  79.         styleSheet.sheet.insertRule('.hljs-bullet, .hljs-link, .hljs-selector-id, .hljs-symbol, .hljs-title { color: #91acee; }', 0);
  80.         styleSheet.sheet.insertRule('.hljs-doctag, .hljs-formula, .hljs-keyword, .hljs-literal { color: #c0a1f0; }', 1);
  81.         styleSheet.sheet.insertRule('.hljs-addition, .hljs-attribute, .hljs-meta-string, .hljs-regexp, .hljs-string { color: #b1d99c; }', 2);
  82.         styleSheet.sheet.insertRule('.hljs-attr, .hljs-number, .hljs-selector-attr, .hljs-selector-class, .hljs-selector-pseudo, .hljs-template-variable, .hljs-type, .hljs-variable { color: #e29da1; }', 3);
  83.         styleSheet.sheet.insertRule(`code.hljs, code[class*=language-], pre[class*=language-] { color: #ccd3f2; }`, 0);
  84.     }
  85.  
  86.  
  87.  
  88.     // Call the function to modify theme colors after the page loads
  89.     window.addEventListener('load', modifyThemeColors);
  90. })();