dark-blue.js 6.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254
  1. /* *
  2. *
  3. * (c) 2010-2019 Torstein Honsi
  4. *
  5. * License: www.highcharts.com/license
  6. *
  7. * Dark blue theme for Highcharts JS
  8. *
  9. * !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
  10. *
  11. * */
  12. 'use strict';
  13. import Highcharts from '../parts/Globals.js';
  14. Highcharts.theme = {
  15. colors: ['#DDDF0D', '#55BF3B', '#DF5353', '#7798BF', '#aaeeee',
  16. '#ff0066', '#eeaaee', '#55BF3B', '#DF5353', '#7798BF', '#aaeeee'],
  17. chart: {
  18. backgroundColor: {
  19. linearGradient: { x1: 0, y1: 0, x2: 1, y2: 1 },
  20. stops: [
  21. [0, 'rgb(48, 48, 96)'],
  22. [1, 'rgb(0, 0, 0)']
  23. ]
  24. },
  25. borderColor: '#000000',
  26. borderWidth: 2,
  27. className: 'dark-container',
  28. plotBackgroundColor: 'rgba(255, 255, 255, .1)',
  29. plotBorderColor: '#CCCCCC',
  30. plotBorderWidth: 1
  31. },
  32. title: {
  33. style: {
  34. color: '#C0C0C0',
  35. font: 'bold 16px "Trebuchet MS", Verdana, sans-serif'
  36. }
  37. },
  38. subtitle: {
  39. style: {
  40. color: '#666666',
  41. font: 'bold 12px "Trebuchet MS", Verdana, sans-serif'
  42. }
  43. },
  44. xAxis: {
  45. gridLineColor: '#333333',
  46. gridLineWidth: 1,
  47. labels: {
  48. style: {
  49. color: '#A0A0A0'
  50. }
  51. },
  52. lineColor: '#A0A0A0',
  53. tickColor: '#A0A0A0',
  54. title: {
  55. style: {
  56. color: '#CCC',
  57. fontWeight: 'bold',
  58. fontSize: '12px',
  59. fontFamily: 'Trebuchet MS, Verdana, sans-serif'
  60. }
  61. }
  62. },
  63. yAxis: {
  64. gridLineColor: '#333333',
  65. labels: {
  66. style: {
  67. color: '#A0A0A0'
  68. }
  69. },
  70. lineColor: '#A0A0A0',
  71. minorTickInterval: null,
  72. tickColor: '#A0A0A0',
  73. tickWidth: 1,
  74. title: {
  75. style: {
  76. color: '#CCC',
  77. fontWeight: 'bold',
  78. fontSize: '12px',
  79. fontFamily: 'Trebuchet MS, Verdana, sans-serif'
  80. }
  81. }
  82. },
  83. tooltip: {
  84. backgroundColor: 'rgba(0, 0, 0, 0.75)',
  85. style: {
  86. color: '#F0F0F0'
  87. }
  88. },
  89. toolbar: {
  90. itemStyle: {
  91. color: 'silver'
  92. }
  93. },
  94. plotOptions: {
  95. line: {
  96. dataLabels: {
  97. color: '#CCC'
  98. },
  99. marker: {
  100. lineColor: '#333'
  101. }
  102. },
  103. spline: {
  104. marker: {
  105. lineColor: '#333'
  106. }
  107. },
  108. scatter: {
  109. marker: {
  110. lineColor: '#333'
  111. }
  112. },
  113. candlestick: {
  114. lineColor: 'white'
  115. }
  116. },
  117. legend: {
  118. backgroundColor: 'rgba(0, 0, 0, 0.5)',
  119. itemStyle: {
  120. font: '9pt Trebuchet MS, Verdana, sans-serif',
  121. color: '#A0A0A0'
  122. },
  123. itemHoverStyle: {
  124. color: '#FFF'
  125. },
  126. itemHiddenStyle: {
  127. color: '#444'
  128. },
  129. title: {
  130. style: {
  131. color: '#C0C0C0'
  132. }
  133. }
  134. },
  135. credits: {
  136. style: {
  137. color: '#666'
  138. }
  139. },
  140. labels: {
  141. style: {
  142. color: '#CCC'
  143. }
  144. },
  145. navigation: {
  146. buttonOptions: {
  147. symbolStroke: '#DDDDDD',
  148. theme: {
  149. fill: {
  150. linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
  151. stops: [
  152. [0.4, '#606060'],
  153. [0.6, '#333333']
  154. ]
  155. },
  156. stroke: '#000000'
  157. }
  158. }
  159. },
  160. // scroll charts
  161. rangeSelector: {
  162. buttonTheme: {
  163. fill: {
  164. linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
  165. stops: [
  166. [0.4, '#888'],
  167. [0.6, '#555']
  168. ]
  169. },
  170. stroke: '#000000',
  171. style: {
  172. color: '#CCC',
  173. fontWeight: 'bold'
  174. },
  175. states: {
  176. hover: {
  177. fill: {
  178. linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
  179. stops: [
  180. [0.4, '#BBB'],
  181. [0.6, '#888']
  182. ]
  183. },
  184. stroke: '#000000',
  185. style: {
  186. color: 'white'
  187. }
  188. },
  189. select: {
  190. fill: {
  191. linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
  192. stops: [
  193. [0.1, '#000'],
  194. [0.3, '#333']
  195. ]
  196. },
  197. stroke: '#000000',
  198. style: {
  199. color: 'yellow'
  200. }
  201. }
  202. }
  203. },
  204. inputStyle: {
  205. backgroundColor: '#333',
  206. color: 'silver'
  207. },
  208. labelStyle: {
  209. color: 'silver'
  210. }
  211. },
  212. navigator: {
  213. handles: {
  214. backgroundColor: '#666',
  215. borderColor: '#AAA'
  216. },
  217. outlineColor: '#CCC',
  218. maskFill: 'rgba(16, 16, 16, 0.5)',
  219. series: {
  220. color: '#7798BF',
  221. lineColor: '#A6C7ED'
  222. }
  223. },
  224. scrollbar: {
  225. barBackgroundColor: {
  226. linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
  227. stops: [
  228. [0.4, '#888'],
  229. [0.6, '#555']
  230. ]
  231. },
  232. barBorderColor: '#CCC',
  233. buttonArrowColor: '#CCC',
  234. buttonBackgroundColor: {
  235. linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
  236. stops: [
  237. [0.4, '#888'],
  238. [0.6, '#555']
  239. ]
  240. },
  241. buttonBorderColor: '#CCC',
  242. rifleColor: '#FFF',
  243. trackBackgroundColor: {
  244. linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
  245. stops: [
  246. [0, '#000'],
  247. [1, '#333']
  248. ]
  249. },
  250. trackBorderColor: '#666'
  251. }
  252. };
  253. // Apply the theme
  254. Highcharts.setOptions(Highcharts.theme);