The company is redeveloping Superset, because superset does not have a nice dark background mode, and the current trend is dark BI large screen kanban, so we need to adjust the kanban style, so here comes the tutorial

version

superset1.3

Implementation steps

  • Modify the template using the CSS template

You will notice that when you change it, the kanban will look black below, and you will always feel something strange, because the text on the chart is still black.Then you start scrolling through the documentation and realize that two parameters, the color scheme and label_colors, might do the trick 😀When you use these two parameters to match a wave, the result is 👇, the text color is unchanged, the graphic color is changed…Summing up the above, you’ll see that only itemStyle patterns in the graphs can be changed using CSS templates

  • Next, we’ll have to scratch the code…

By examining the primary color elements, you can see that the rendering of the diagram is rendered by SVG and Canvas 👇

SVG direct CSS templates can be easily implemented with the fill attribute

.nvd3 text{
  fill: #fff;
}
Copy the code

Here comes the headache… How to change canvas… We dig the front-end code can find the rendering chart from 👇 below, and then we can find that it is called@superset-ui/coreDepend on the packageIf you dig a little deeper, you’ll see that it ends up with Echart

If you dig a little deeper, you can see the code to configure the echart parameter file. Then compare the EChart official website API, you can find that it is ok to change the color of the label and add the color of the Legend to the textStyleThe final result is shown as 👇

  • The last

While this approach achieves a large dark screen effect, there are two problems:

  • Change isnode_modulesPackage deployment is directnpm iSo emMM… At present, it is only local, and if you need to implement it online, you can either pull out the dependency package, or pull out your own release adjustment… Also, if the dependency package surperset is updated, emMM… Another wave of…
  • Currently, the colors are coded dead, unless you render all the colors dark, then you can change them directly, if not, then you need to let the user choose, so it is better to expose the properties to the front-end code to control the colors, and then let the user configure them

At present, I am still in the research stage and only realized this effect today. If there is a better way to realize it later, I will also share it with my friends. If you have a better plan, you are welcome to add it, I hope we can learn and communicate together 😜