Style Editor [Chrome] - Dark Theme [Updated][Customizable]

A dark theme for the Stylish style editor chrome extension. It also includes a code section for recoloring the default syntax highlighting theme.

当前为 2025-01-21 提交的版本,查看 最新版本

  1. /* ==UserStyle==
  2. @name Style Editor [Chrome] - Dark Theme [Updated][Customizable]
  3. @namespace typpi.online
  4. @author Paul Stevenson - [Updated by Nick2bad4u]
  5. @description A dark theme for the Stylish style editor chrome extension. It also includes a code section for recoloring the default syntax highlighting theme.
  6. @version 1.1.1
  7. @license CC-BY-SA-4.0
  8. @supportURL https://github.com/Nick2bad4u/UserStyles/issues
  9. @homepageURL https://github.com/Nick2bad4u/UserStyles
  10.  
  11. @var color bg-dark "Background Dark" #111111
  12. @var color bg-light "Background Light" #ffffff
  13. @var color bg-accent "Background Accent" #222222
  14. @var color bg-popup "Background Popup" #000000cc
  15. @var color text-primary "Text Primary" #ccccff
  16. @var color text-secondary "Text Secondary" #9999ff
  17. @var color text-highlight "Text Highlight" #00ccff
  18. @var color text-hover "Text Hover" #99ffff
  19. @var color selected "Selected Text" #000000
  20. @var color input-border "Input Border" #0099ff
  21. @var color input-bg "Input Background" #000000
  22. @var color input-text "Input Text" #00ffff
  23. @var color button-border "Button Border" #5555ff
  24. @var color button-bg "Button Background" #222222
  25. @var color button-text "Button Text" #9999ff
  26. @var color button-hover-bg "Button Hover Background" #000000
  27. @var color button-hover-text "Button Hover Text" #99ccff
  28. @var color scrollbar-thumb "Scrollbar Thumb" #0064ffcc
  29. @var color scrollbar-thumb-inactive "Scrollbar Thumb Inactive" #0064ff66
  30. @var color scrollbar-track "Scrollbar Track" #0000004d
  31. @var color gutter-border "Gutter Border" #0099ff
  32. @var color gutter-bg "Gutter Background" #000000
  33. @var color line-number "Line Number" #5599ff
  34. @var color cursor "Cursor" #ffffff
  35. @var color secondary-cursor "Secondary Cursor" #c0c0c0
  36. @var color matching-bracket "Matching Bracket" #fdff00
  37. @var color nonmatching-bracket "Nonmatching Bracket" #ff7171
  38. @var color activeline-bg "Active Line Background" #0c0c0c
  39. @var color keyword "Keyword" #ffac3f
  40. @var color atom "Atom" #9b8dff
  41. @var color number "Number" #00dfff
  42. @var color definition "Definition" #9999ff
  43. @var color variable "Variable" #ff00ff
  44. @var color variable-2 "Variable 2" #62b0ff
  45. @var color variable-3 "Variable 3" #88ffd3
  46. @var color comment "Comment" #00ff2e
  47. @var color string "String" #ff9500
  48. @var color string-2 "String 2" #ff5500
  49. @var color meta "Meta" #c3c3c3
  50. @var color builtin "Builtin" #97b6ff
  51. @var color tag "Tag" #5599ff
  52. @var color attribute "Attribute" #7d7dff
  53. @var color error "Error" #ff7474
  54. @var color highlight-match "Highlight Match" #ff96004d
  55. @var color bottom-border "Bottom Border" #ff9900
  56. @var color green1 "Green 1" #00ff00
  57. @var color green2 "Green 2" #00ff0080
  58. ==/UserStyle== */
  59. @-moz-document regexp("chrome-extension://fjnbnpbmkenffdnngjfgmeleoegfcffe/.*"),
  60. regexp("chrome-extension://clngdbkpkpeebahjckkjfobafhncgmne/.*")
  61. {
  62. :root
  63. {
  64. /* Background Colors */
  65. --bg-dark: var(bg-dark);
  66. --bg-light: var(bg-light);
  67. --bg-accent: var(bg-accent);
  68. --bg-popup: var(bg-popup);
  69.  
  70. /* Text Colors */
  71. --text-primary: var(text-primary);
  72. --text-secondary: var(text-secondary);
  73. --text-highlight: var(text-highlight);
  74. --text-hover: var(text-hover);
  75. --text-selected: var(--text-selected);
  76.  
  77. /* Input Colors */
  78. --input-border: var(input-border);
  79. --input-bg: var(input-bg);
  80. --input-text: var(input-text);
  81.  
  82. /* Button Colors */
  83. --button-border: var(button-border);
  84. --button-bg: var(button-bg);
  85. --button-text: var(button-text);
  86. --button-hover-bg: var(button-hover-bg);
  87. --button-hover-text: var(button-hover-text);
  88.  
  89. /* Scrollbar Colors */
  90. --scrollbar-thumb: var(scrollbar-thumb);
  91. --scrollbar-thumb-inactive: var( scrollbar-thumb-inactive);
  92. --scrollbar-track: var(scrollbar-track);
  93.  
  94. /* Gutter Colors */
  95. --gutter-border: var(gutter-border);
  96. --gutter-bg: var(gutter-bg);
  97. --line-number: var(line-number);
  98.  
  99. /* Cursor and Bracket Colors */
  100. --cursor: var(cursor);
  101. --secondary-cursor: var(secondary-cursor);
  102. --matching-bracket: var(matching-bracket);
  103. --nonmatching-bracket: var(nonmatching-bracket);
  104. --activeline-bg: var(activeline-bg);
  105.  
  106. /* Syntax Highlighting */
  107. --keyword: var(keyword);
  108. --atom: var(atom);
  109. --number: var(number);
  110. --definition: var(definition);
  111. --variable: var(variable);
  112. --variable-2: var(variable-2);
  113. --variable-3: var(variable-3);
  114. --comment: var(comment);
  115. --string: var(string);
  116. --string-2: var(string-2);
  117. --meta: var(meta);
  118. --builtin: var(builtin);
  119. --tag: var(tag);
  120. --attribute: var(attribute);
  121. --error: var(error);
  122. --highlight-match: var(highlight-match);
  123. --bottom-border: var(bottom-border);
  124. --green1: var(green1);
  125. --green2: var(green2);
  126. }
  127.  
  128. body
  129. {
  130. background: var(--bg-dark);
  131. color: var(--text-primary);
  132. }
  133.  
  134. #stylish-popup
  135. {
  136. background: var(--bg-light);
  137. color: var(--input-bg);
  138. }
  139.  
  140. a,
  141. a:visited,
  142. a:active
  143. {
  144. color: var(--text-highlight);
  145. }
  146.  
  147. a:hover
  148. {
  149. color: var(--text-hover);
  150. }
  151.  
  152. input,
  153. #name,
  154. .applies-value,
  155. select
  156. {
  157. border-color: var(--input-border);
  158. background: var(--input-bg);
  159. color: var(--input-text);
  160. }
  161.  
  162. button
  163. {
  164. border-color: var(--button-border);
  165. background: var(--button-bg);
  166. color: var(--button-text);
  167. }
  168.  
  169. button:hover
  170. {
  171. background: var(--button-hover-bg);
  172. color: var(--button-hover-text);
  173. }
  174.  
  175. ::-webkit-scrollbar
  176. {
  177. width: 10px;
  178. }
  179.  
  180. ::-webkit-scrollbar-track
  181. {
  182. -webkit-box-shadow: inset 0 0 6px var(--scrollbar-track);
  183. background: var(--scrollbar-track);
  184. }
  185.  
  186. ::-webkit-scrollbar-thumb
  187. {
  188. -webkit-box-shadow: inset 0 0 6px var(--scrollbar-thumb);
  189. background: var(--scrollbar-thumb);
  190. }
  191.  
  192. ::-webkit-scrollbar-thumb:window-inactive
  193. {
  194. background: var(--scrollbar-thumb-inactive);
  195. }
  196. }
  197.  
  198. /* Syntax highlighting with variables */
  199. @-moz-document regexp("chrome-extension://fjnbnpbmkenffdnngjfgmeleoegfcffe/.*")
  200. {
  201. .cm-s-default .cm-keyword
  202. {
  203. color: var(--keyword);
  204. }
  205.  
  206. .cm-s-default .cm-atom
  207. {
  208. color: var(--atom);
  209. }
  210.  
  211. .cm-s-default .cm-number
  212. {
  213. color: var(--number);
  214. }
  215.  
  216. .cm-s-default .cm-def
  217. {
  218. color: var(--definition);
  219. }
  220.  
  221. .cm-s-default .cm-variable
  222. {
  223. color: var(--variable);
  224. }
  225.  
  226. .cm-s-default .cm-variable-2
  227. {
  228. color: var(--variable-2);
  229. }
  230.  
  231. .cm-s-default .cm-variable-3
  232. {
  233. color: var(--variable-3);
  234. }
  235.  
  236. .cm-s-default .cm-comment
  237. {
  238. color: var(--comment);
  239. }
  240.  
  241. .cm-s-default .cm-string
  242. {
  243. color: var(--string);
  244. }
  245.  
  246. .cm-s-default .cm-string-2
  247. {
  248. color: var(--string-2);
  249. }
  250.  
  251. .cm-s-default .cm-meta
  252. {
  253. color: var(--meta);
  254. }
  255.  
  256. .cm-s-default .cm-builtin
  257. {
  258. color: var(--builtin);
  259. }
  260.  
  261. .cm-s-default .cm-tag
  262. {
  263. color: var(--tag);
  264. }
  265.  
  266. .cm-s-default .cm-attribute
  267. {
  268. color: var(--attribute);
  269. }
  270.  
  271. .cm-s-default .cm-error
  272. {
  273. color: var(--error);
  274. }
  275.  
  276. .CodeMirror-matchingbracket
  277. {
  278. color: var(--matching-bracket);
  279. }
  280.  
  281. .CodeMirror-activeline-background
  282. {
  283. background: var(--activeline-bg);
  284. }
  285.  
  286. .CodeMirror
  287. {
  288. background: var(--activeline-bg);
  289. }
  290.  
  291. .CodeMirror-selected
  292. {
  293. background: var(--text-selected);
  294. }
  295.  
  296. .CodeMirror-focused .CodeMirror-selected
  297. {
  298. background: var(--text-selected);
  299. }
  300.  
  301. .CodeMirror-crosshair
  302. {
  303. cursor: crosshair;
  304. }
  305.  
  306. .CodeMirror-line::selection,
  307. .CodeMirror-line > span::selection,
  308. .CodeMirror-line > span > span::selection
  309. {
  310. background: var(--input-bg);
  311. }
  312.  
  313. .CodeMirror-line::selection,
  314. .CodeMirror-line > span::selection,
  315. .CodeMirror-line > span > span::selection
  316. {
  317. background: var(--input-bg);
  318. }
  319.  
  320. .cm-searching
  321. {
  322. border-bottom: 1px solid var(--bottom-border);
  323. background: var(--green1);
  324. background: var(--green2);
  325. }
  326. }

QingJ © 2025

镜像随时可能失效,请加Q群300939539或关注我们的公众号极客氢云获取最新地址