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. }

QingJ © 2025

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