☰

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.

  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. 		/* Background Colors */
  64. 		--bg-dark: var(bg-dark);
  65. 		--bg-light: var(bg-light);
  66. 		--bg-accent: var(bg-accent);
  67. 		--bg-popup: var(bg-popup);
  68.  
  69. 		/* Text Colors */
  70. 		--text-primary: var(text-primary);
  71. 		--text-secondary: var(text-secondary);
  72. 		--text-highlight: var(text-highlight);
  73. 		--text-hover: var(text-hover);
  74. 		--text-selected: var(--text-selected);
  75.  
  76. 		/* Input Colors */
  77. 		--input-border: var(input-border);
  78. 		--input-bg: var(input-bg);
  79. 		--input-text: var(input-text);
  80.  
  81. 		/* Button Colors */
  82. 		--button-border: var(button-border);
  83. 		--button-bg: var(button-bg);
  84. 		--button-text: var(button-text);
  85. 		--button-hover-bg: var(button-hover-bg);
  86. 		--button-hover-text: var(button-hover-text);
  87.  
  88. 		/* Scrollbar Colors */
  89. 		--scrollbar-thumb: var(scrollbar-thumb);
  90. 		--scrollbar-thumb-inactive: var(
  91. 			scrollbar-thumb-inactive
  92. 		);
  93. 		--scrollbar-track: var(scrollbar-track);
  94.  
  95. 		/* Gutter Colors */
  96. 		--gutter-border: var(gutter-border);
  97. 		--gutter-bg: var(gutter-bg);
  98. 		--line-number: var(line-number);
  99.  
  100. 		/* Cursor and Bracket Colors */
  101. 		--cursor: var(cursor);
  102. 		--secondary-cursor: var(secondary-cursor);
  103. 		--matching-bracket: var(matching-bracket);
  104. 		--nonmatching-bracket: var(nonmatching-bracket);
  105. 		--activeline-bg: var(activeline-bg);
  106.  
  107. 		/* Syntax Highlighting */
  108. 		--keyword: var(keyword);
  109. 		--atom: var(atom);
  110. 		--number: var(number);
  111. 		--definition: var(definition);
  112. 		--variable: var(variable);
  113. 		--variable-2: var(variable-2);
  114. 		--variable-3: var(variable-3);
  115. 		--comment: var(comment);
  116. 		--string: var(string);
  117. 		--string-2: var(string-2);
  118. 		--meta: var(meta);
  119. 		--builtin: var(builtin);
  120. 		--tag: var(tag);
  121. 		--attribute: var(attribute);
  122. 		--error: var(error);
  123. 		--highlight-match: var(highlight-match);
  124. 		--bottom-border: var(bottom-border);
  125. 		--green1: var(green1);
  126. 		--green2: var(green2);
  127. 	}
  128.  
  129. 	body {
  130. 		background: var(--bg-dark);
  131. 		color: var(--text-primary);
  132. 	}
  133.  
  134. 	#stylish-popup {
  135. 		background: var(--bg-light);
  136. 		color: var(--input-bg);
  137. 	}
  138.  
  139. 	a,
  140. 	a:visited,
  141. 	a:active {
  142. 		color: var(--text-highlight);
  143. 	}
  144.  
  145. 	a:hover {
  146. 		color: var(--text-hover);
  147. 	}
  148.  
  149. 	input,
  150. 	#name,
  151. 	.applies-value,
  152. 	select {
  153. 		border-color: var(--input-border);
  154. 		background: var(--input-bg);
  155. 		color: var(--input-text);
  156. 	}
  157.  
  158. 	button {
  159. 		border-color: var(--button-border);
  160. 		background: var(--button-bg);
  161. 		color: var(--button-text);
  162. 	}
  163.  
  164. 	button:hover {
  165. 		background: var(--button-hover-bg);
  166. 		color: var(--button-hover-text);
  167. 	}
  168.  
  169. 	::-webkit-scrollbar {
  170. 		width: 10px;
  171. 	}
  172.  
  173. 	::-webkit-scrollbar-track {
  174. 		-webkit-box-shadow: inset 0 0 6px var(--scrollbar-track);
  175. 		background: var(--scrollbar-track);
  176. 	}
  177.  
  178. 	::-webkit-scrollbar-thumb {
  179. 		-webkit-box-shadow: inset 0 0 6px var(--scrollbar-thumb);
  180. 		background: var(--scrollbar-thumb);
  181. 	}
  182.  
  183. 	::-webkit-scrollbar-thumb:window-inactive {
  184. 		background: var(--scrollbar-thumb-inactive);
  185. 	}
  186. }
  187.  
  188. /* Syntax highlighting with variables */
  189. @-moz-document regexp("chrome-extension://fjnbnpbmkenffdnngjfgmeleoegfcffe/.*")
  190. {
  191. 	.cm-s-default .cm-keyword {
  192. 		color: var(--keyword);
  193. 	}
  194.  
  195. 	.cm-s-default .cm-atom {
  196. 		color: var(--atom);
  197. 	}
  198.  
  199. 	.cm-s-default .cm-number {
  200. 		color: var(--number);
  201. 	}
  202.  
  203. 	.cm-s-default .cm-def {
  204. 		color: var(--definition);
  205. 	}
  206.  
  207. 	.cm-s-default .cm-variable {
  208. 		color: var(--variable);
  209. 	}
  210.  
  211. 	.cm-s-default .cm-variable-2 {
  212. 		color: var(--variable-2);
  213. 	}
  214.  
  215. 	.cm-s-default .cm-variable-3 {
  216. 		color: var(--variable-3);
  217. 	}
  218.  
  219. 	.cm-s-default .cm-comment {
  220. 		color: var(--comment);
  221. 	}
  222.  
  223. 	.cm-s-default .cm-string {
  224. 		color: var(--string);
  225. 	}
  226.  
  227. 	.cm-s-default .cm-string-2 {
  228. 		color: var(--string-2);
  229. 	}
  230.  
  231. 	.cm-s-default .cm-meta {
  232. 		color: var(--meta);
  233. 	}
  234.  
  235. 	.cm-s-default .cm-builtin {
  236. 		color: var(--builtin);
  237. 	}
  238.  
  239. 	.cm-s-default .cm-tag {
  240. 		color: var(--tag);
  241. 	}
  242.  
  243. 	.cm-s-default .cm-attribute {
  244. 		color: var(--attribute);
  245. 	}
  246.  
  247. 	.cm-s-default .cm-error {
  248. 		color: var(--error);
  249. 	}
  250.  
  251. 	.CodeMirror-matchingbracket {
  252. 		color: var(--matching-bracket);
  253. 	}
  254.  
  255. 	.CodeMirror-activeline-background {
  256. 		background: var(--activeline-bg);
  257. 	}
  258.  
  259. 	.CodeMirror {
  260. 		background: var(--activeline-bg);
  261. 	}
  262.  
  263. 	.CodeMirror-selected {
  264. 		background: var(--text-selected);
  265. 	}
  266.  
  267. 	.CodeMirror-focused .CodeMirror-selected {
  268. 		background: var(--text-selected);
  269. 	}
  270.  
  271. 	.CodeMirror-crosshair {
  272. 		cursor: crosshair;
  273. 	}
  274.  
  275. 	.CodeMirror-line::selection,
  276. 	.CodeMirror-line > span::selection,
  277. 	.CodeMirror-line > span > span::selection {
  278. 		background: var(--input-bg);
  279. 	}
  280.  
  281. 	.CodeMirror-line::selection,
  282. 	.CodeMirror-line > span::selection,
  283. 	.CodeMirror-line > span > span::selection {
  284. 		background: var(--input-bg);
  285. 	}
  286.  
  287. 	.cm-searching {
  288. 		border-bottom: 1px solid var(--bottom-border);
  289. 		background: var(--green1);
  290. 		background: var(--green2);
  291. 	}
  292. }