DarkUnica.js 4.9 KB

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