HighContrastDark.js 4.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211
  1. /* *
  2. *
  3. * (c) 2010-2021 Highsoft AS
  4. *
  5. * Author: Øystein Moseng
  6. *
  7. * License: www.highcharts.com/license
  8. *
  9. * Accessible high-contrast dark theme for Highcharts. Specifically tailored
  10. * towards 3:1 contrast against black/off-black backgrounds. Neighboring
  11. * colors are tested for color blindness.
  12. *
  13. * !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
  14. *
  15. * */
  16. 'use strict';
  17. import H from '../../Core/Globals.js';
  18. import U from '../../Core/Utilities.js';
  19. var setOptions = U.setOptions;
  20. var textBright = '#F0F0F3';
  21. H.theme = {
  22. colors: [
  23. '#a6f0ff',
  24. '#70d49e',
  25. '#e898a5',
  26. '#007faa',
  27. '#f9db72',
  28. '#f45b5b',
  29. '#1e824c',
  30. '#e7934c',
  31. '#dadfe1',
  32. '#a0618b'
  33. ],
  34. chart: {
  35. backgroundColor: '#1f1f20',
  36. plotBorderColor: '#606063'
  37. },
  38. title: {
  39. style: {
  40. color: textBright
  41. }
  42. },
  43. subtitle: {
  44. style: {
  45. color: textBright
  46. }
  47. },
  48. xAxis: {
  49. gridLineColor: '#707073',
  50. labels: {
  51. style: {
  52. color: textBright
  53. }
  54. },
  55. lineColor: '#707073',
  56. minorGridLineColor: '#505053',
  57. tickColor: '#707073',
  58. title: {
  59. style: {
  60. color: textBright
  61. }
  62. }
  63. },
  64. yAxis: {
  65. gridLineColor: '#707073',
  66. labels: {
  67. style: {
  68. color: textBright
  69. }
  70. },
  71. lineColor: '#707073',
  72. minorGridLineColor: '#505053',
  73. tickColor: '#707073',
  74. title: {
  75. style: {
  76. color: textBright
  77. }
  78. }
  79. },
  80. tooltip: {
  81. backgroundColor: 'rgba(0, 0, 0, 0.85)',
  82. style: {
  83. color: textBright
  84. }
  85. },
  86. plotOptions: {
  87. series: {
  88. dataLabels: {
  89. color: textBright
  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. map: {
  105. nullColor: '#353535'
  106. }
  107. },
  108. legend: {
  109. backgroundColor: 'transparent',
  110. itemStyle: {
  111. color: textBright
  112. },
  113. itemHoverStyle: {
  114. color: '#FFF'
  115. },
  116. itemHiddenStyle: {
  117. color: '#606063'
  118. },
  119. title: {
  120. style: {
  121. color: '#D0D0D0'
  122. }
  123. }
  124. },
  125. credits: {
  126. style: {
  127. color: textBright
  128. }
  129. },
  130. labels: {
  131. style: {
  132. color: '#707073'
  133. }
  134. },
  135. drilldown: {
  136. activeAxisLabelStyle: {
  137. color: textBright
  138. },
  139. activeDataLabelStyle: {
  140. color: textBright
  141. }
  142. },
  143. navigation: {
  144. buttonOptions: {
  145. symbolStroke: '#DDDDDD',
  146. theme: {
  147. fill: '#505053'
  148. }
  149. }
  150. },
  151. rangeSelector: {
  152. buttonTheme: {
  153. fill: '#505053',
  154. stroke: '#000000',
  155. style: {
  156. color: '#eee'
  157. },
  158. states: {
  159. hover: {
  160. fill: '#707073',
  161. stroke: '#000000',
  162. style: {
  163. color: textBright
  164. }
  165. },
  166. select: {
  167. fill: '#303030',
  168. stroke: '#101010',
  169. style: {
  170. color: textBright
  171. }
  172. }
  173. }
  174. },
  175. inputBoxBorderColor: '#505053',
  176. inputStyle: {
  177. backgroundColor: '#333',
  178. color: textBright
  179. },
  180. labelStyle: {
  181. color: textBright
  182. }
  183. },
  184. navigator: {
  185. handles: {
  186. backgroundColor: '#666',
  187. borderColor: '#AAA'
  188. },
  189. outlineColor: '#CCC',
  190. maskFill: 'rgba(180,180,255,0.2)',
  191. series: {
  192. color: '#7798BF',
  193. lineColor: '#A6C7ED'
  194. },
  195. xAxis: {
  196. gridLineColor: '#505053'
  197. }
  198. },
  199. scrollbar: {
  200. barBackgroundColor: '#808083',
  201. barBorderColor: '#808083',
  202. buttonArrowColor: '#CCC',
  203. buttonBackgroundColor: '#606063',
  204. buttonBorderColor: '#606063',
  205. rifleColor: '#FFF',
  206. trackBackgroundColor: '#404043',
  207. trackBorderColor: '#404043'
  208. }
  209. };
  210. // Apply the theme
  211. setOptions(H.theme);