Kotlin docs dark theme

Forked from https://userstyles.org/styles/145525/kotlin-site-dark-design-v2017-2

当前为 2020-01-05 提交的版本,查看 最新版本

  1. // ==UserScript==
  2. // @name Kotlin docs dark theme
  3. // @namespace https://greasyfork.org/en/users/10848-sergio91pt
  4. // @version 1.0
  5. // @description Forked from https://userstyles.org/styles/145525/kotlin-site-dark-design-v2017-2
  6. // @author sergio91pt
  7. // @match https://kotlinlang.org/*
  8. // @grant none
  9. // ==/UserScript==
  10.  
  11. (function() {
  12. 'use strict';
  13.  
  14. document.querySelectorAll('.sample').forEach(node => {
  15. node.setAttribute('theme', 'darcula');
  16. });
  17.  
  18. const css = `
  19. /*home page tiles*/
  20. .kotlin-overview-section._get-kotlin .get-kotlin-options-list .option-item,
  21. .kotlin-overview-section._testimonials .testimonial,
  22. .kotlin-overview-section._features .kotlin-features-list .kotlin-feature
  23. {
  24. background-color: #222;
  25. }
  26.  
  27. .kotlin-overview-section._features, .kotlin-overview-section._testimonials
  28. {
  29. background-color: #333;
  30. background-image: none;
  31. }
  32.  
  33. .kotlin-overview-section._features .kotlin-features-list .feature-description
  34. {
  35. color: #B7D6F5;
  36. }
  37.  
  38. .kotlin-overview-section._features .kotlin-features-list .feature-example-link
  39. {
  40. color: #87A7CD;
  41. }
  42.  
  43. .kotlin-overview-section._features .kotlin-features-list .feature-example-link:hover
  44. {
  45. color: #EEE;
  46. }
  47.  
  48. /*main body*/
  49. body
  50. {
  51. color: #EEE;
  52. background-color: #222;
  53. }
  54. /*keywords in the body*/
  55. .page-content .keyword
  56. {
  57. color: #CC7832;
  58. }
  59. /*code expressions in the body*/
  60. .page-content li>code,
  61. .page-content p>code
  62. {
  63. color: #A9D7E6;
  64. background-color: #2B2B2B;
  65. }
  66.  
  67. .page-content table td, .page-content table th
  68. {
  69. background-color: #2B2B2B;
  70. }
  71.  
  72. .page-content blockquote,
  73. .page-content blockquote.note
  74. {
  75. background-color: #2B2B2B;
  76. }
  77.  
  78. /*navigation buttons*/
  79. .docs-nav .nav-item-text
  80. {
  81. color: #B7D6F5;
  82. background-color: #252525;
  83. border-color: #EEE;
  84. }
  85.  
  86. /*selected navigation button*/
  87. .docs-nav .nav-item.is_active .nav-item-text
  88. {
  89. color: #252525;
  90. background-color: #EEF;
  91. border-color: #EEE;
  92. }
  93. /*triangle under navigation button*/
  94. .docs-nav .nav-item-text:after
  95. {
  96. border-top-color: #EEF;
  97. }
  98.  
  99. .docs-nav .nav-item-text:before
  100. {
  101. border-top-color: #EEE;
  102. }
  103.  
  104. /*navigation panel on the left*/
  105. .tree-branch-title
  106. {
  107. background-color: #222;
  108. color: #B7D6F5;
  109. }
  110.  
  111. .tree-branch-title:hover
  112. {
  113. background-color: #222;
  114. color: #FFF;
  115. }
  116.  
  117. .tree-branch-title.is_active
  118. {
  119. background-color: #222;
  120. color: #B7D6F5;
  121. }
  122.  
  123. .tree-branch-title.is_active:hover
  124. {
  125. background-color: #222;
  126. color: #FFF;
  127. }
  128.  
  129. .tree-branch._opened
  130. {
  131. background-color: #252525;
  132. }
  133.  
  134. .tree-leaf-title.is_active
  135. {
  136. color: #EEE;
  137. }
  138.  
  139. .tree-branch.js-item.js-branch._opened a,
  140. a
  141. {
  142. color: #87A7CD;
  143. }
  144.  
  145. .tree-branch.js-item.js-branch._opened a:hover,
  146. a:hover
  147. {
  148. color: #EEE;
  149. }
  150.  
  151. /*code blocks*/
  152. .page-content .code._highlighted,
  153. .page-content .code._highlighted span.cm-def, .cm-s-default .cm-def,
  154. .page-content .code._highlighted span.cm-variable, .cm-s-default .cm-variable,
  155. .page-content .code._highlighted span.cm-variable-2, .cm-s-default .cm-variable-2,
  156. .page-content .code._highlighted span.cm-variable-3, .cm-s-default .cm-variable-3,
  157. .page-content .code._highlighted span.cm-operator, .cm-s-default .cm-operator,
  158. .page-content .code._highlighted span.cm-property, .cm-s-default .cm-property
  159. .page-content .code._highlighted span.cm-qualifier,
  160. .page-content .signature
  161. {
  162. color: #A9B7C6;
  163. background: #2B2B2B;
  164. }
  165.  
  166. .page-content .code._highlighted span.cm-keyword, .cm-s-default .cm-keyword
  167. {
  168. color: #CB772F;
  169. }
  170.  
  171. .page-content .code._highlighted span.cm-string, .cm-s-default .cm-string
  172. {
  173. color: #A5C25C;
  174. }
  175.  
  176. .page-content .code._highlighted span.cm-comment, .cm-s-default .cm-comment
  177. {
  178. color: #808080;
  179. }
  180.  
  181. .page-content .code._highlighted span.cm-number, .cm-s-default .cm-number
  182. {
  183. color: #6897BB;
  184. }
  185.  
  186. .page-content .code._highlighted span.cm-atom, .cm-s-default .cm-atom
  187. {
  188. color: #9876AA;
  189. }
  190.  
  191. .page-content .code._highlighted span.cm-tag
  192. {
  193. color: #E8BF6A;
  194. }
  195.  
  196. .page-content .code._highlighted span.cm-attribute
  197. {
  198. color: #BABABA;
  199. }
  200.  
  201. .page-content .code._highlighted span.cm-meta
  202. {
  203. color: #E8BF6A;
  204. }
  205.  
  206. .standard-output
  207. {
  208. color: #EEE!important;
  209. }
  210.  
  211. .error-output
  212. {
  213. color: #CD3524!important;
  214. }
  215. /*dropdowns*/
  216. .dropdown-items
  217. {
  218. background: #2B2B2B!important;
  219. }
  220.  
  221. .dropdown.js-dropdown
  222. {
  223. background: #252525!important;
  224. }
  225. `;
  226.  
  227. const style = document.createElement('style');
  228. style.type = 'text/css';
  229. style.innerHTML = css;
  230. document.body.appendChild(style);
  231. })();