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

[gabriel_vasseur]

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">

Or:

<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?

[danspav]

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:

require(['jquery', 'api/SplunkVisualizationUtils'], function($, vizUtils) {
	// Splunk Answers: https://community.splunk.com/t5/Building-for-the-Splunk-Platform/Different-custom-CSS-depending-on-dark-VS-light-mode/m-p/631551#M10940
        var isSplunkDarkMode = false;
        function addCss(fileName) {
                 var link = $("<link />",{rel: "stylesheet", type: "text/css", href: fileName})
                $('head').append(link);
        }

        if (typeof vizUtils.getCurrentTheme === "function") {
                // safe to use the function
                isSplunkDarkMode = (vizUtils.getCurrentTheme()=="dark");
        }else{
                //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"
        addCss(stylesheet);
 });

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.

Cheers,
Daniel