DarkUnica.js 4.9 KB

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