☰

更好的ChatGPT暗色主题

Set a more friendly dark theme for ChatGPT

当前为 2024-04-13 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name         Better ChatGPT Dark Theme
  3. // @name:zh-CN   更好的ChatGPT暗色主题
  4. // @namespace    http://tampermonkey.net/
  5. // @version      1.3
  6. // @license      MIT
  7. // @author       izumiChan16
  8. // @match        https://chat.openai.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.     }
  25.     
  26.     .dark {
  27.         --text-primary: #ccd3f2 !important;
  28.         --text-secondary: #c0c0c0 !important;
  29.         --text-tertiary: #a9a9a9 !important;
  30.         --text-quaternary: #808080 !important;
  31.  
  32.         --border-light: hsla(0, 0%, 100%, 0.05) !important;
  33.         --border-medium: hsla(0, 0%, 100%, 0.1) !important;
  34.         --border-heavy: hsla(0, 0%, 100%, 0.15) !important;
  35.         --border-xheavy: hsla(0, 0%, 100%, 0.2) !important;
  36.  
  37.         --main-surface-primary: #21232f !important;
  38.         --main-surface-secondary: #3c4054 !important;
  39.         --main-surface-tertiary: #808080 !important;
  40.  
  41.         --sidebar-surface-primary: #2d2f41 !important;
  42.         --sidebar-surface-secondary: #373a4d !important;
  43.         --sidebar-surface-tertiary: #696969 !important;
  44.  
  45.         --link: #7ab7ff !important;
  46.         --link-hover: #5e83b3 !important;
  47.     }
  48.  
  49.     .bg-gray-950 {
  50.         background-color: rgba(13, 13, 13, var(--tw-bg-opacity));
  51.     }
  52.  
  53.     :root .bg-gray-950 {
  54.         --tw-bg-opacity: 1;  // More opaque in light theme for better readability
  55.     }
  56.  
  57.     .dark .bg-gray-950 {
  58.         --tw-bg-opacity: 0.5;  // As originally defined, semi-transparent in dark theme
  59.     }
  60.     `;
  61.  
  62.     // Function to add styles to the page
  63.     function addCustomStyles() {
  64.         const styleSheet = document.createElement("style");
  65.         styleSheet.type = "text/css";
  66.         styleSheet.innerText = customDarkStyles;
  67.         document.head.appendChild(styleSheet);
  68.     }
  69.  
  70.     // Add custom styles when the script runs
  71.     addCustomStyles();
  72.  
  73.     // Function to modify CSS variables for eye comfort
  74.     function modifyThemeColors() {
  75.         // Additional style modifications
  76.         const styleSheet = document.createElement('style');
  77.         document.head.appendChild(styleSheet);
  78.         styleSheet.sheet.insertRule('.hljs-bullet, .hljs-link, .hljs-selector-id, .hljs-symbol, .hljs-title { color: #91acee; }', 0);
  79.         styleSheet.sheet.insertRule('.hljs-doctag, .hljs-formula, .hljs-keyword, .hljs-literal { color: #c0a1f0; }', 1);
  80.         styleSheet.sheet.insertRule('.hljs-addition, .hljs-attribute, .hljs-meta-string, .hljs-regexp, .hljs-string { color: #b1d99c; }', 2);
  81.         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);
  82.         styleSheet.sheet.insertRule(`code.hljs, code[class*=language-], pre[class*=language-] { color: #ccd3f2; }`, 0);
  83.     }
  84.  
  85.  
  86.  
  87.     // Call the function to modify theme colors after the page loads
  88.     window.addEventListener('load', modifyThemeColors);
  89. })();