Gray.js 6.5 KB

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