Highcharts是一款純JavaScript編寫的圖表庫，為你的Web網站、Web應用程序提供直觀、交互式圖表。當前支持折線、曲線、區域、區域曲線圖、柱形圖、條形圖、餅圖、散點圖、角度測量圖、區域排列圖、區域曲線排列圖、柱形排列圖、極坐標圖等幾十種圖表類型。

點擊下載Highcharts最新試用版

我不討厭黑暗模式，但是…

也許我的時機很糟糕。因為2019年是Dark Mode的一年，所以我認為我想在iPhone上測試新功能，并在日落之后啟用Dark Mode。那是在一月份，在黑暗的北歐冬季，我的大腦已經為白天而尖叫。在觀察了令人沮喪的OS和網站和應用程序的黑色實現幾周后，在雨水從上面陰暗的天空傾瀉而下的時候，我得出結論，深色設計是我最后需要的東西。 

我什至將網站重新設計為淺色主題，取消了長達20年的深色設計歷史，以突出圖像。

快進到五月，燦爛的北歐夏天即將到來。我發現一個暗黑的OS設計可以幫助大腦在夜間安頓下來并促進褪黑激素的產生。

因此，我著手尋找使網站服從OS的顏色模式設置的最佳方法，并找到了一篇不錯的博客文章，即Darks模式，它使用preferreds-color-scheme規則和CSS變量。CSS變量是一個很棒的功能，所有現代瀏覽器（不包括IE11）都支持它們。另外，我的網站已經使用了它們，因此通過添加@media (prefers-color-scheme: dark)帶有一些替代顏色的媒體查詢（）輕松實現了暗模式。 

我的網站上也有很多圖表。使用Highcharts樣式模式，所有顏色均由CSS設置，因此我以與網站其余部分相同的方式使圖表服從顏色方案：

1. 在:root選擇器中定義了圖表顏色。
2. 在媒體查詢中定義了深色圖表顏色。

最終結果可以在www.vikjavev.no/ver上看到。如果您使用的是Mac，請依次轉到設置，常規，然后在頂部切換外觀。 

我還在下面的jsFiddle中提取了要點（請注意，jsFiddle UI本身始終是黑暗的）：

一個不錯的小技巧是將文本元素應用于調整對比度，而不是使用其自身的“暗模式”替代定義一個單獨的顏色變量。在jsFiddle中，例如可以看到副標題，它應該比主標題稍微暗一些。請注意，在提琴中，僅定義了一些fill-opacity適用于Highcharts的CSS類，以避免使演示過大。