dark-unica.js 4.8 KB

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