How To Implement Dark Theme In Splunk Dashboard With The Help Of CSS

How To Implement Dark Theme In Splunk Dashboard With The Help Of CSS

Hi today we are back with another wonderful Splunk trick. We all know that by default Dark mode is available for Splunk version 7.2 and above 7.2, but what if you are using lower than 7.2 then how can you implement dark theme in your Splunk dashboard? If you are looking for that only then you are landed on the exact right page.

So let’s start.
This is as simple as you can get. You don’t need to do anything other than copy paste. We will provide you the CSS code for that below and you just need to paste it in your source code. But you need to keep an eye on one thing, which are you need to assign background color, font color etc separately for each and every dashboard element. Don’t worry we are here to help you out. Click on the below link to download the CSS file.

                                                  CSS

1

In the CSS you can find the numerous dashboard element name, in custom dark mode you need to specify each and every dashboard element separately.

Below box I have mentioned some of the used class names.

Class name -----

dashboard-body
dashboard-row
dashboard-cell
dashboard-panel
panel-head
Panel-body
title
dashboard-header h2
p.description
table th
table td

Or you can find the class name of elements by Inspecting a page.After applying the CSS it will look like this.

2

Also we have attached the source code of this sample dashboard for your reference.

You can also know about :  How to get Month and Year in Calendar sorted format in SPLUNK

                                                  SourceCode

Hope you understand this simple and easy topic of enabling the dark mode with the help of CSS.

Happy Splunking!!

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.