Changing Themes in Splunk

This page provides information on skinning the existing Splunk UI. If you are writing an application against Splunk, and wish to link into the Splunk UI as a part of the application flow, you can change the Splunk UI to match the look and feel of your application.

Getting Started

Splunk provides some good information on changing the Splunk UI theme:

• Skinning Documentation - reference for applying a theme to Splunk
• Nick's theme video - Splunk's UI master walks you through a simple skinning example

Implementing a Custom Theme

If you are familiar with CSS, it will be a snap to create a new theme for Splunk.

The Splunk UI logically separates the CSS into several files. The more structural and more complex CSS is hidden in a file called default.css, and the purely presentational aspects of the CSS are then provided by a different CSS file called the skin. The CSS for a skin contains text-color, border-color, background-color, and background-image styles.

Switching skins is basically switching out the colors and optionally the images, but not really moving or changing the functionality on screen.

Switching Themes/Skins in Splunk's UI

You can switch between themes in the UI by clicking the 'preferences' link, then switching to the 'general' tab, then choosing a 'theme'.

Copying an Existing Theme

The existing CSS files are located in:

$SPLUNK_HOME/share/splunk/search_oxiclean/static/css/skins/

Pick a name for your skin like 'foo', then make a copy of one of the existing skins and call it foo.css. If you're thinking about using white or light-colored backgrounds, it's recommend to copy the 'basic' theme. If you're going for a darker theme, it's recommend starting from the 'black' theme.

Once you've copied a theme over, you will need to restart splunkweb:

$SPLUNK_HOME/bin/splunk restart splunkweb

Once you restart, you'll need to refresh your browser and login again. You should see your newly named theme in the the 'Themes' pulldown.

It's recommended to follow convention and create a directory for your skin's images:

$SPLUNK_HOME/share/splunk/search_oxiclean/images/skins/

Time for Coffee

Below is a link to a theme called 'coffee'. Coffee has some elements against lighter backgrounds, and some elements against darker backgrounds. No specific images were created for this example, and it reuses images from basic and black.

http://splunk-labs.googlecode.com/files/coffee.css