☰

Stylus Dark Theme [Fixed 11-24-25]

A dark theme for Stylish. It also includes a code section for recoloring the default syntax highlighting theme. [Fixed 11-24-25]

  1. /* ==UserStyle==
  2. @name         Stylus Dark Theme [Fixed 11-24-25]
  3. @namespace    typpi.online
  4. @author       Paul Stevenson [Fixed by Nick2bad4u]
  5. @description  A dark theme for Stylish. It also includes a code section for recoloring the default syntax highlighting theme. [Fixed 11-24-25]
  6. @version      20241224.6.22
  7. @license      CC-BY-SA-4.0
  8. @homepageURL  https://github.com/Nick2bad4u/UserStyles
  9. @supportURL   https://github.com/Nick2bad4u/UserStyles/issues
  10. @preprocessor uso
  11. ==/UserStyle== */
  12. @-moz-document regexp("chrome-extension://clngdbkpkpeebahjckkjfobafhncgmne/.*")
  13. {
  14. 	body {
  15. 		background: #111111;
  16. 		color: #ccccff;
  17. 	}
  18.  
  19. 	#stylish-popup {
  20. 		background: #ffffff;
  21. 		color: #000000;
  22. 	}
  23.  
  24. 	a,
  25. 	a:visited,
  26. 	a:active {
  27. 		color: #00ccff;
  28. 	}
  29.  
  30. 	a:hover {
  31. 		color: #99ffff;
  32. 	}
  33.  
  34. 	input,
  35. 	#name,
  36. 	.applies-value,
  37. 	select {
  38. 		border-color: #0099ff;
  39. 		background: #000000;
  40. 		color: #00ffff;
  41. 	}
  42.  
  43. 	button {
  44. 		border-color: #5555ff;
  45. 		background: #222222;
  46. 		color: #9999ff;
  47. 	}
  48.  
  49. 	button:hover {
  50. 		background: #000000;
  51. 		color: #99ccff;
  52. 	}
  53.  
  54. 	input[type='checkbox'] {
  55. 		display: none;
  56. 	}
  57.  
  58. 	label {
  59. 		cursor: pointer;
  60. 	}
  61.  
  62. 	#header {
  63. 		border-right: 1px dashed #0099ff;
  64. 	}
  65.  
  66. 	input[type='checkbox'] + label::before {
  67. 		display: inline-block;
  68. 		vertical-align: top;
  69. 		margin: 0 0.25em 0 0;
  70. 		border: 1px solid #0099ff;
  71. 		padding: 0;
  72. 		width: 16px;
  73. 		height: 16px;
  74. 		content: '\00a0';
  75. 		font: 16px/1em sans-serif;
  76. 	}
  77.  
  78. 	input[type='checkbox']:checked + label::before {
  79. 		background: #000000;
  80. 		content: '\2713';
  81. 		color: #ccccff;
  82. 		text-align: center;
  83. 	}
  84.  
  85. 	input[type='checkbox']:checked + label::after {
  86. 		font-weight: bold;
  87. 	}
  88.  
  89. 	#help-popup {
  90. 		background: rgb(0 0 0 / 80%);
  91. 	}
  92.  
  93. 	#help-popup .close-icon {
  94. 		background:
  95. 			linear-gradient(
  96. 					-45deg,
  97. 					transparent 5px,
  98. 					white 5px,
  99. 					white 6px,
  100. 					transparent 6.5px
  101. 				)
  102. 				no-repeat,
  103. 			linear-gradient(
  104. 					45deg,
  105. 					transparent 5px,
  106. 					white 5px,
  107. 					white 6px,
  108. 					transparent 6.5px
  109. 				)
  110. 				no-repeat;
  111. 	}
  112.  
  113. 	::-webkit-scrollbar {
  114. 		width: 10px;
  115. 	}
  116.  
  117. 	::-webkit-scrollbar-track {
  118. 		-webkit-box-shadow: inset 0 0 6px
  119. 			rgb(0 0 0 / 30%);
  120. 		-webkit-border-radius: 8px;
  121. 		border-radius: 8px;
  122. 	}
  123.  
  124. 	::-webkit-scrollbar-thumb {
  125. 		-webkit-box-shadow: inset 0 0 6px
  126. 			rgb(0 0 0 / 50%);
  127. 		-webkit-border-radius: 8px;
  128. 		border-radius: 8px;
  129. 		background: rgb(0 100 255 / 80%);
  130. 	}
  131.  
  132. 	::-webkit-scrollbar-thumb:window-inactive {
  133. 		background: rgb(0 100 255 / 40%);
  134. 	}
  135. }
  136.  
  137. @-moz-document regexp("chrome-extension://fjnbnpbmkenffdnngjfgmeleoegfcffe/.*")
  138. {
  139. 	@-moz-keyframes blink {
  140. 		50% {
  141. 			background-color: transparent;
  142. 		}
  143. 	}
  144. 	@-webkit-keyframes blink {
  145. 		50% {
  146. 			background-color: transparent;
  147. 		}
  148. 	}
  149. 	@keyframes blink {
  150. 		50% {
  151. 			background-color: transparent;
  152. 		}
  153. 	}
  154. 	/* BASICS */
  155.  
  156. 	.CodeMirror {
  157. 		height: 300px;
  158. 		color: #ffffff;
  159. 		/* Set height, width, borders, and global font properties here */
  160. 		font-family: monospace;
  161. 	}
  162.  
  163. 	/* PADDING */
  164.  
  165. 	.CodeMirror-lines {
  166. 		padding: 4px 0;
  167. 		/* Vertical padding around content */
  168. 	}
  169.  
  170. 	.CodeMirror pre {
  171. 		padding: 0 4px;
  172. 		/* Horizontal padding of content */
  173. 	}
  174.  
  175. 	.CodeMirror-scrollbar-filler,
  176. 	.CodeMirror-gutter-filler {
  177. 		background-color: black;
  178. 		/* The little square between H and V scrollbars */
  179. 	}
  180.  
  181. 	/* GUTTER */
  182.  
  183. 	.CodeMirror-gutters {
  184. 		border-right: 1px solid #0099ff;
  185. 		background-color: #000000;
  186. 		white-space: nowrap;
  187. 	}
  188.  
  189. 	.CodeMirror-linenumbers {
  190. 		background: none;
  191. 	}
  192.  
  193. 	.CodeMirror-linenumber {
  194. 		padding: 0 3px 0 5px;
  195. 		min-width: 20px;
  196. 		color: #5599ff;
  197. 		text-align: right;
  198. 		white-space: nowrap;
  199. 	}
  200.  
  201. 	.CodeMirror-guttermarker {
  202. 		color: #ffffff;
  203. 	}
  204.  
  205. 	.CodeMirror-guttermarker-subtle {
  206. 		color: #fff;
  207. 	}
  208.  
  209. 	/* CURSOR */
  210.  
  211. 	.CodeMirror div.CodeMirror-cursor {
  212. 		border-left: 1px solid #fff;
  213. 	}
  214.  
  215. 	/* Shown when moving in bi-directional text */
  216. 	.CodeMirror div.CodeMirror-secondarycursor {
  217. 		border-left: 1px solid silver;
  218. 	}
  219.  
  220. 	.CodeMirror.cm-fat-cursor
  221. 		div.CodeMirror-cursor {
  222. 		border: 0;
  223. 		background: #7e7;
  224. 		width: auto;
  225. 	}
  226.  
  227. 	.CodeMirror.cm-fat-cursor
  228. 		div.CodeMirror-cursors {
  229. 		z-index: 1;
  230. 	}
  231.  
  232. 	.cm-animate-fat-cursor {
  233. 		-webkit-animation: blink 1.06s steps(1)
  234. 			infinite;
  235. 		-moz-animation: blink 1.06s steps(1) infinite;
  236. 		animation: blink 1.06s steps(1) infinite;
  237. 		border: 0;
  238. 		background-color: #7e7;
  239. 		width: auto;
  240. 	}
  241.  
  242. 	/* Can style cursor different in overwrite (non-insert) mode */
  243. 	div.CodeMirror-overwrite div.CodeMirror-cursor {
  244. 		color: #ffffff;
  245. 	}
  246.  
  247. 	.cm-tab {
  248. 		display: inline-block;
  249. 		text-decoration: inherit;
  250. 	}
  251.  
  252. 	.CodeMirror-ruler {
  253. 		position: absolute;
  254. 		border-left: 1px solid #ccc;
  255. 	}
  256.  
  257. 	/* DEFAULT THEME */
  258.  
  259. 	.cm-s-default .cm-header {
  260. 		color: #00f;
  261. 	}
  262.  
  263. 	.cm-s-default .cm-quote {
  264. 		color: #7e7;
  265. 	}
  266.  
  267. 	.cm-negative {
  268. 		color: #f00;
  269. 	}
  270.  
  271. 	.cm-positive {
  272. 		color: #7e7;
  273. 	}
  274.  
  275. 	.cm-header,
  276. 	.cm-strong {
  277. 		font-weight: bold;
  278. 	}
  279.  
  280. 	.cm-em {
  281. 		font-style: italic;
  282. 	}
  283.  
  284. 	.cm-link {
  285. 		text-decoration: underline;
  286. 	}
  287.  
  288. 	.cm-strikethrough {
  289. 		text-decoration: line-through;
  290. 	}
  291.  
  292. 	.cm-s-default .cm-keyword {
  293. 		color: #ffac3f;
  294. 	}
  295.  
  296. 	.cm-s-default .cm-atom {
  297. 		color: #9b8dff;
  298. 	}
  299.  
  300. 	.cm-s-default .cm-number {
  301. 		color: #00dfff;
  302. 	}
  303.  
  304. 	.cm-s-default .cm-def {
  305. 		color: #9999ff;
  306. 	}
  307.  
  308. 	.cm-s-default .cm-variable,
  309. 	.cm-s-default .cm-punctuation,
  310. 	.cm-s-default .cm-property,
  311. 	.cm-s-default .cm-operator {
  312. 		color: #ff00ff;
  313. 	}
  314.  
  315. 	.cm-s-default .cm-variable-2 {
  316. 		color: #62b0ff;
  317. 	}
  318.  
  319. 	.cm-s-default .cm-variable-3 {
  320. 		color: #88ffd3;
  321. 	}
  322.  
  323. 	.cm-s-default .cm-comment {
  324. 		color: #00ff2e;
  325. 	}
  326.  
  327. 	.cm-s-default .cm-string {
  328. 		color: #ff9500;
  329. 	}
  330.  
  331. 	.cm-s-default .cm-string-2 {
  332. 		color: #f50;
  333. 	}
  334.  
  335. 	.cm-s-default .cm-meta {
  336. 		color: #c3c3c3;
  337. 	}
  338.  
  339. 	.cm-s-default .cm-qualifier {
  340. 		color: #dddddd;
  341. 	}
  342.  
  343. 	.cm-s-default .cm-builtin {
  344. 		color: #97b6ff;
  345. 	}
  346.  
  347. 	.cm-s-default .cm-bracket {
  348. 		color: #fff;
  349. 	}
  350.  
  351. 	.cm-s-default .cm-tag {
  352. 		color: #5599ff;
  353. 	}
  354.  
  355. 	.cm-s-default .cm-attribute {
  356. 		color: #7d7dff;
  357. 	}
  358.  
  359. 	.cm-s-default .cm-hr {
  360. 		color: #ff9f9f;
  361. 	}
  362.  
  363. 	.cm-s-default .cm-link {
  364. 		color: #00ffd6;
  365. 	}
  366.  
  367. 	.cm-s-default .cm-error {
  368. 		color: #ff7474;
  369. 	}
  370.  
  371. 	.cm-invalidchar {
  372. 		color: #ff7a7a;
  373. 	}
  374.  
  375. 	.CodeMirror-composing {
  376. 		border-bottom: 2px solid;
  377. 	}
  378.  
  379. 	div.CodeMirror span.CodeMirror-matchingbracket {
  380. 		color: #fdff00;
  381. 	}
  382.  
  383. 	div.CodeMirror
  384. 		span.CodeMirror-nonmatchingbracket {
  385. 		color: #f22;
  386. 	}
  387.  
  388. 	.CodeMirror-matchingtag {
  389. 		background: rgb(255 150 0 / 30%);
  390. 	}
  391.  
  392. 	.CodeMirror-activeline-background {
  393. 		background: #0c0c0c;
  394. 	}
  395.  
  396. 	.CodeMirror {
  397. 		background: #0c0c0c;
  398. 	}
  399.  
  400. 	.CodeMirror-selected {
  401. 		background: #000000;
  402. 	}
  403.  
  404. 	.CodeMirror-focused .CodeMirror-selected {
  405. 		background: #000000;
  406. 	}
  407.  
  408. 	.CodeMirror-crosshair {
  409. 		cursor: crosshair;
  410. 	}
  411.  
  412. 	.CodeMirror-line::selection,
  413. 	.CodeMirror-line > span::selection,
  414. 	.CodeMirror-line > span > span::selection {
  415. 		background: #000000;
  416. 	}
  417.  
  418. 	.CodeMirror-line::selection,
  419. 	.CodeMirror-line > span::selection,
  420. 	.CodeMirror-line > span > span::selection {
  421. 		background: #000000;
  422. 	}
  423.  
  424. 	.cm-searching {
  425. 		border-bottom: 1px solid #ff9900;
  426. 		background: #00ff00;
  427. 		background: rgb(0 255 0 / 50%);
  428. 	}
  429. }