DarkUnica.js 5.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218
  1. /* *
  2. *
  3. * (c) 2010-2021 Torstein Honsi
  4. *
  5. * License: www.highcharts.com/license
  6. *
  7. * Dark theme for Highcharts JS
  8. *
  9. * !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
  10. *
  11. * */
  12. 'use strict';
  13. import H from '../../Core/Globals.js';
  14. import O from '../../Core/Options.js';
  15. var setOptions = O.setOptions;
  16. import U from '../../Core/Utilities.js';
  17. var createElement = U.createElement;
  18. // Load the fonts
  19. createElement('link', {
  20. href: 'https://fonts.googleapis.com/css?family=Unica+One',
  21. rel: 'stylesheet',
  22. type: 'text/css'
  23. }, null, document.getElementsByTagName('head')[0]);
  24. H.theme = {
  25. colors: ['#2b908f', '#90ee7e', '#f45b5b', '#7798BF', '#aaeeee', '#ff0066',
  26. '#eeaaee', '#55BF3B', '#DF5353', '#7798BF', '#aaeeee'],
  27. chart: {
  28. backgroundColor: {
  29. linearGradient: { x1: 0, y1: 0, x2: 1, y2: 1 },
  30. stops: [
  31. [0, '#2a2a2b'],
  32. [1, '#3e3e40']
  33. ]
  34. },
  35. style: {
  36. fontFamily: '\'Unica One\', sans-serif'
  37. },
  38. plotBorderColor: '#606063'
  39. },
  40. title: {
  41. style: {
  42. color: '#E0E0E3',
  43. textTransform: 'uppercase',
  44. fontSize: '20px'
  45. }
  46. },
  47. subtitle: {
  48. style: {
  49. color: '#E0E0E3',
  50. textTransform: 'uppercase'
  51. }
  52. },
  53. xAxis: {
  54. gridLineColor: '#707073',
  55. labels: {
  56. style: {
  57. color: '#E0E0E3'
  58. }
  59. },
  60. lineColor: '#707073',
  61. minorGridLineColor: '#505053',
  62. tickColor: '#707073',
  63. title: {
  64. style: {
  65. color: '#A0A0A3'
  66. }
  67. }
  68. },
  69. yAxis: {
  70. gridLineColor: '#707073',
  71. labels: {
  72. style: {
  73. color: '#E0E0E3'
  74. }
  75. },
  76. lineColor: '#707073',
  77. minorGridLineColor: '#505053',
  78. tickColor: '#707073',
  79. tickWidth: 1,
  80. title: {
  81. style: {
  82. color: '#A0A0A3'
  83. }
  84. }
  85. },
  86. tooltip: {
  87. backgroundColor: 'rgba(0, 0, 0, 0.85)',
  88. style: {
  89. color: '#F0F0F0'
  90. }
  91. },
  92. plotOptions: {
  93. series: {
  94. dataLabels: {
  95. color: '#F0F0F3',
  96. style: {
  97. fontSize: '13px'
  98. }
  99. },
  100. marker: {
  101. lineColor: '#333'
  102. }
  103. },
  104. boxplot: {
  105. fillColor: '#505053'
  106. },
  107. candlestick: {
  108. lineColor: 'white'
  109. },
  110. errorbar: {
  111. color: 'white'
  112. }
  113. },
  114. legend: {
  115. backgroundColor: 'rgba(0, 0, 0, 0.5)',
  116. itemStyle: {
  117. color: '#E0E0E3'
  118. },
  119. itemHoverStyle: {
  120. color: '#FFF'
  121. },
  122. itemHiddenStyle: {
  123. color: '#606063'
  124. },
  125. title: {
  126. style: {
  127. color: '#C0C0C0'
  128. }
  129. }
  130. },
  131. credits: {
  132. style: {
  133. color: '#666'
  134. }
  135. },
  136. labels: {
  137. style: {
  138. color: '#707073'
  139. }
  140. },
  141. drilldown: {
  142. activeAxisLabelStyle: {
  143. color: '#F0F0F3'
  144. },
  145. activeDataLabelStyle: {
  146. color: '#F0F0F3'
  147. }
  148. },
  149. navigation: {
  150. buttonOptions: {
  151. symbolStroke: '#DDDDDD',
  152. theme: {
  153. fill: '#505053'
  154. }
  155. }
  156. },
  157. // scroll charts
  158. rangeSelector: {
  159. buttonTheme: {
  160. fill: '#505053',
  161. stroke: '#000000',
  162. style: {
  163. color: '#CCC'
  164. },
  165. states: {
  166. hover: {
  167. fill: '#707073',
  168. stroke: '#000000',
  169. style: {
  170. color: 'white'
  171. }
  172. },
  173. select: {
  174. fill: '#000003',
  175. stroke: '#000000',
  176. style: {
  177. color: 'white'
  178. }
  179. }
  180. }
  181. },
  182. inputBoxBorderColor: '#505053',
  183. inputStyle: {
  184. backgroundColor: '#333',
  185. color: 'silver'
  186. },
  187. labelStyle: {
  188. color: 'silver'
  189. }
  190. },
  191. navigator: {
  192. handles: {
  193. backgroundColor: '#666',
  194. borderColor: '#AAA'
  195. },
  196. outlineColor: '#CCC',
  197. maskFill: 'rgba(255,255,255,0.1)',
  198. series: {
  199. color: '#7798BF',
  200. lineColor: '#A6C7ED'
  201. },
  202. xAxis: {
  203. gridLineColor: '#505053'
  204. }
  205. },
  206. scrollbar: {
  207. barBackgroundColor: '#808083',
  208. barBorderColor: '#808083',
  209. buttonArrowColor: '#CCC',
  210. buttonBackgroundColor: '#606063',
  211. buttonBorderColor: '#606063',
  212. rifleColor: '#FFF',
  213. trackBackgroundColor: '#404043',
  214. trackBorderColor: '#404043'
  215. }
  216. };
  217. // Apply the theme
  218. setOptions(H.theme);