Kotlin docs dark theme

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

  1. // ==UserScript==
  2. // @name Kotlin docs dark theme
  3. // @namespace https://greasyfork.org/en/users/10848-sergio91pt
  4. // @version 1.0.1
  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.  
  55. /*API declarations*/
  56. .page-content .declarations
  57. {
  58. background: #313335;
  59. }
  60.  
  61. .page-content .declarations a
  62. {
  63. color: #87A7CD !important;
  64. }
  65.  
  66. /*keywords in the body*/
  67. .page-content .keyword
  68. {
  69. color: #CC7832;
  70. }
  71. /*code expressions in the body*/
  72. .page-content li>code,
  73. .page-content p>code
  74. {
  75. color: #A9D7E6;
  76. background-color: #2B2B2B;
  77. }
  78.  
  79. .page-content table td, .page-content table th
  80. {
  81. background-color: #2B2B2B;
  82. }
  83.  
  84. .page-content blockquote,
  85. .page-content blockquote.note
  86. {
  87. background-color: #2B2B2B;
  88. }
  89.  
  90. /*navigation buttons*/
  91. .docs-nav .nav-item-text
  92. {
  93. color: #B7D6F5;
  94. background-color: #252525;
  95. border-color: #EEE;
  96. }
  97.  
  98. /*selected navigation button*/
  99. .docs-nav .nav-item.is_active .nav-item-text
  100. {
  101. color: #252525;
  102. background-color: #EEF;
  103. border-color: #EEE;
  104. }
  105. /*triangle under navigation button*/
  106. .docs-nav .nav-item-text:after
  107. {
  108. border-top-color: #EEF;
  109. }
  110.  
  111. .docs-nav .nav-item-text:before
  112. {
  113. border-top-color: #EEE;
  114. }
  115.  
  116. /*navigation panel on the left*/
  117. .tree-branch-title
  118. {
  119. background-color: #222;
  120. color: #B7D6F5;
  121. }
  122.  
  123. .tree-branch-title:hover
  124. {
  125. background-color: #222;
  126. color: #FFF;
  127. }
  128.  
  129. .tree-branch-title.is_active
  130. {
  131. background-color: #222;
  132. color: #B7D6F5;
  133. }
  134.  
  135. .tree-branch-title.is_active:hover
  136. {
  137. background-color: #222;
  138. color: #FFF;
  139. }
  140.  
  141. .tree-branch._opened
  142. {
  143. background-color: #252525;
  144. }
  145.  
  146. .tree-leaf-title.is_active
  147. {
  148. color: #EEE;
  149. }
  150.  
  151. .tree-branch.js-item.js-branch._opened a,
  152. a
  153. {
  154. color: #87A7CD;
  155. }
  156.  
  157. .tree-branch.js-item.js-branch._opened a:hover,
  158. a:hover
  159. {
  160. color: #EEE;
  161. }
  162.  
  163. /*code blocks*/
  164. .page-content .code._highlighted,
  165. .page-content .code._highlighted span.cm-def, .cm-s-default .cm-def,
  166. .page-content .code._highlighted span.cm-variable, .cm-s-default .cm-variable,
  167. .page-content .code._highlighted span.cm-variable-2, .cm-s-default .cm-variable-2,
  168. .page-content .code._highlighted span.cm-variable-3, .cm-s-default .cm-variable-3,
  169. .page-content .code._highlighted span.cm-operator, .cm-s-default .cm-operator,
  170. .page-content .code._highlighted span.cm-property, .cm-s-default .cm-property
  171. .page-content .code._highlighted span.cm-qualifier,
  172. .page-content .signature
  173. {
  174. color: #A9B7C6;
  175. background: #2B2B2B;
  176. }
  177.  
  178. .page-content .code._highlighted span.cm-keyword, .cm-s-default .cm-keyword
  179. {
  180. color: #CB772F;
  181. }
  182.  
  183. .page-content .code._highlighted span.cm-string, .cm-s-default .cm-string
  184. {
  185. color: #A5C25C;
  186. }
  187.  
  188. .page-content .code._highlighted span.cm-comment, .cm-s-default .cm-comment
  189. {
  190. color: #808080;
  191. }
  192.  
  193. .page-content .code._highlighted span.cm-number, .cm-s-default .cm-number
  194. {
  195. color: #6897BB;
  196. }
  197.  
  198. .page-content .code._highlighted span.cm-atom, .cm-s-default .cm-atom
  199. {
  200. color: #9876AA;
  201. }
  202.  
  203. .page-content .code._highlighted span.cm-tag
  204. {
  205. color: #E8BF6A;
  206. }
  207.  
  208. .page-content .code._highlighted span.cm-attribute
  209. {
  210. color: #BABABA;
  211. }
  212.  
  213. .page-content .code._highlighted span.cm-meta
  214. {
  215. color: #E8BF6A;
  216. }
  217.  
  218. .standard-output
  219. {
  220. color: #EEE!important;
  221. }
  222.  
  223. .error-output
  224. {
  225. color: #CD3524!important;
  226. }
  227. /*dropdowns*/
  228. .dropdown-items
  229. {
  230. background: #2B2B2B!important;
  231. }
  232.  
  233. .dropdown.js-dropdown
  234. {
  235. background: #252525!important;
  236. }
  237.  
  238. .dropdown-selected-value
  239. {
  240. background: #313335 !important;
  241. }
  242.  
  243. .dropdown-item:hover
  244. {
  245. background-color: #555555;
  246. }
  247. `;
  248.  
  249. const style = document.createElement('style');
  250. style.type = 'text/css';
  251. style.innerHTML = css;
  252. document.body.appendChild(style);
  253. })();