# Theming Kibana with a Plugin **URL:** \ **Category:** Kibana\ **Created:** [March 21, 2017, 2:15pm UTC](https://discuss.elastic.co/t/theming-kibana-with-a-plugin/79431 "2017-03-21T14:15:48Z")\ **Posts on this page:** 4\ **Page:** 1
**Author:** ![Kikketer](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/kikketer/32/13813_2.png) [@Kikketer](https://discuss.elastic.co/u/Kikketer)\ **Post date:** [March 21, 2017, 2:15pm UTC](https://discuss.elastic.co/t/theming-kibana-with-a-plugin/79431/1 "2017-03-21T14:15:48Z")
So I attempted to explore the path of theming Kibana with a plugin and the results were a bit sad ☹ 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. ---
**Author:** ![cjcenizal](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/cjcenizal/32/11216_2.png) [@cjcenizal](https://discuss.elastic.co/u/cjcenizal)\ **Post date:** [March 23, 2017, 7:11pm UTC](https://discuss.elastic.co/t/theming-kibana-with-a-plugin/79431/2 "2017-03-23T19:11:49Z")
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: - You can track [this issue](https://github.com/elastic/kibana/issues/9708) for progress. - [UI Framework documentation](https://github.com/elastic/kibana/tree/master/ui_framework) - [Blog post](https://www.elastic.co/blog/componentizing-the-kibana-ui-css-that-scales) on our approach for writing CSS that scales Thanks, CJ ---
**Author:** ![Kikketer](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/kikketer/32/13813_2.png) [@Kikketer](https://discuss.elastic.co/u/Kikketer)\ **Post date:** [March 24, 2017, 2:17pm UTC](https://discuss.elastic.co/t/theming-kibana-with-a-plugin/79431/3 "2017-03-24T14:17:24Z")
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 🙂 ---
**Author:** ![system](https://us1.discourse-cdn.com/elastic/original/3X/1/a/1ac57faf039f6b580b3f104ef42a2a89e41014de.png) [@system](https://discuss.elastic.co/u/system)\ **Post date:** [April 21, 2017, 2:18pm UTC](https://discuss.elastic.co/t/theming-kibana-with-a-plugin/79431/4 "2017-04-21T14:18:04Z")
This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.