Theming Kibana with a Plugin

Elastic Stack Kibana
1

So I attempted to explore the path of theming Kibana with a plugin and the results were a bit sad :frowning:

LESS is a great language for pre-processors of CSS and I actually prefer it compared to SCSS. But unfortunately what makes it great doesn't allow us to override variables with a plugin.

Right now the colors of Kibana are determined mostly by a file called colors.less (surprise). LESS then uses the variables set there to compile the next files:
colors.less
something-else.less
etc...

Which means if you try to override the variables later, it will only affect the files that use that variable after that point:
colors.less
something-else.less
my-colors.less
my-custom-items.less
etc...

So if you want to change the colors in something-else you are forced to edit colors.less. This may seem like it makes a lot of sense given a programming background, but if you compare it to SCSS it's quite a bit different.

--- For those interested
SCSS runs through ALL variables, assigns them, then starts rendering the other files. Meaning whatever you set your variables to LAST is what will apply across the board.

--- To theme Kibana with a plugin
If you wish to theme Kibana with a plugin, you are forced to step into the specificity and !important realm of overriding vanilla CSS. I will not personally do this since it creates a pile of bloated CSS and is difficult to maintain. I'll continue to fork Kibana to alter the colors.

2

Hi Chris,

The ability to theme Kibana is a common request, and one that's definitely on our radar. Currently, this isn't supported, which explains the difficulty you're having. We're currently working on replacing our existing LESS styles with an SCSS-driven UI Framework. The long-term goal is a (S)CSS codebase that you can other plugin developers can depend upon, so theming will be a much more pleasant and stable process.

Here are some relevant resources:

Thanks,
CJ

3

Yeah the post was not really a question as much as documentation for people looking to theme. Thanks for the response. I and anyone else interested in theming Kibana can follow that issue.

I have qualms with the "nav-bar__link" style CSS, I personally like nesting with LESS (or SCSS). But I'm willing to see and use what you have :slight_smile:

4

This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.