Building for the Splunk Platform

Is there any way to get Splunk to choose the right CSS depending on the user's theme preference?


I have HTML sections relying on some custom CSS in a dashboard and I can make them look great in either dark or light mode like so:

<form version="1.1" stylesheet="foobar_light.css" theme="light">


<form version="1.1" stylesheet="foobar_dark.css" theme="dark">

I would ideally like not to specify in which mode the dashboard should be seen and leave it to whatever the user's preference is. The problem is dark mode with the light CSS looks awful/unreadable and vice-versa.

Is there any way I can get splunk to choose the right CSS depending on the user's theme preference?

Labels (1)
0 Karma


Hi @gabriel_vasseur 

You can achieve this in JavaScript - the following will test to see if the theme is dark mode or not, and use that to determine which CSS to dynamically load.

Here's the Javascript&colon;

require(['jquery', 'api/SplunkVisualizationUtils'], function($, vizUtils) {
	// Splunk Answers:
        var isSplunkDarkMode = false;
        function addCss(fileName) {
                 var link = $("<link />",{rel: "stylesheet", type: "text/css", href: fileName})

        if (typeof vizUtils.getCurrentTheme === "function") {
                // safe to use the function
                isSplunkDarkMode = (vizUtils.getCurrentTheme()=="dark");
                //version 6.x, 7.0
                isSplunkDarkMode = false;
        //Update to point to your app / stylesheets here:
        var stylesheet = (isSplunkDarkMode) ? "/static/app/search/dark.css" : "/static/app/search/light.css"

You need to update the links to point to your stylesheets as this one assumes they are in the search app.

Create the files in $SPLUNK_HOME/etc/apps/<appname>/appserver/static/

Then update the app name above changing "search" to the actual app name.


0 Karma
Get Updates on the Splunk Community!

Build Scalable Security While Moving to Cloud - Guide From Clayton Homes

 Clayton Homes faced the increased challenge of strengthening their security posture as they went through ...

Mission Control | Explore the latest release of Splunk Mission Control (2.3)

We’re happy to announce the release of Mission Control 2.3 which includes several new and exciting features ...

Cloud Platform | Migrating your Splunk Cloud deployment to Python 3.7

Python 2.7, the last release of Python 2, reached End of Life back on January 1, 2020. As part of our larger ...