更好的ChatGPT暗色主题

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