Custom theming: What is the recomended approach?

[petterhoel]

I know there are some nice pre-made themes. But if I need to use specific colors or fonts, what is the recommended approach?

[netil]

Hi @petterhoel, we don't provide any documentation about it, but it isn't difficult to make your own.

If you check one of the theme css file, can find every comments what element or part is belong to.

• https://unpkg.com/browse/[email protected]/dist/theme/insight.css

My recommendation about styling is,

• Render the chart from the browser and open devtool to check dom structure and its elements with class names
• Basically, each class is the key to specify/define the style you need.
  • So, take one of the theme css file as a basis to construct own one.
• Add or update class rules as your needs. And some keys are:
  • Common style rules are defined at the top of the file, so it'll be easier to make some updates.
  • Below class will be utilized as default color set. Update hex color pattern with url("...") for default colors

    .bb-color-pattern {
        background-image: url("#00c73c;#fa7171;#2ad0ff;#7294ce;#e3e448;#cc7e6e;#fb6ccf;#c98dff;#4aea99;#bbbbbb;");
    }

[petterhoel]

That sounds very doable. Many thanks ☺️