How to add dark theme compatibility to custom app?

[chartastic]

We use a custom app in our Splunk Cloud instance to segregate dashboards and searches from other teams. With the recent update to allow dark theme compatibility in Splunk 9 to the search view in "Searching and Reporting" I was wondering if there was a way we could enable that in our custom app as well?

Currently while in this custom app and trying to switch the them to dark I get this error message:

"The Theme setting is not supported by your current app context."

[hettervik]

Anyone else having trouble implementing this? I have an app, it has the following setting in app.conf, but still when users log into the app, they are forced into light mode, even if their user preference is dark mode. We are using Splunk 9.2.2.

[ui]
is_visible = 1
label = MyApp
supported_themes = light,dark

[knc]

(Attaching the updated docs link since my prior comment, as the URL has changed: https://dev.splunk.com/enterprise/docs/developapps/createapps/buildapps/adduithemes)

@hettervik could you please confirm that the search page in your app context is displaying correctly (ex. /en-US/app/MyCustomApp/search)? Also, curious what pages specifically are light mode for your app that you're expecting to be dark? Custom app pages will require additional updates for related files.

[hettervik]

Thanks for the reply. I can confirm that if I set my profile preferences to "theme dark", the the default app pages like "Search", "Alerts", "Reports", etc. in my app becomes dark. So yes, the following link is dark:

https://mysplunk.com/en-GB/app/MyCustomApp/search 

I checked all the 18 different dashboards in the app, and all of then are still in light mode though. I expected all of them to be in dark mode now. There are not custom CSS and such in the dashboards. Is this as intended, do I need to add some setting to all my dashboards to make them dynamically suppoert light and dark mode?

I could of course manually set the dashboards to dark mode, but then they would be stuck in dark mode, if I understand correctly. I want the dashboards to change dynamically between dark and light.

[lindonmorris]

I have the same question and I can see all of the replies are referring to Splunk WEB not Splunk CLOUD.

From what I can tell, the only option is to do this by deploying your private app (requires Victoria Experience)

https://dev.splunk.com/enterprise/docs/releaseapps/manageprivatecloud/

To clarify for all of the other responders;

 - This is Splunk Cloud

 - We have no access to the app.conf of any app

 - We have no access to the file structure on the Search Head

 - We can only use the UI and REST apis (ACS)

[knc]

Hello, https://dev.splunk.com/enterprise/docs/developapps/createapps/adduithemes/ details the guidance for app developers to update their app(s) to support dark theme (in addition to light theme) for their app. App consumers should not make an attempt to support dark theme for an installed app themselves.

Currently if someone installs an app which supports dark theme, they will only see the benefit of this in Splunk Cloud per the above doc. The next Splunk Enterprise release once it is available will support dark theme the same as the current Splunk Cloud release.

[lshatzer]

I am on Classic and was able to modify a app.conf in private app that you can deploy. See https://dev.splunk.com/enterprise/docs/releaseapps/manageprivatecloud/ for some more info as well.

[lshatzer]

I meant to link https://docs.splunk.com/Documentation/SplunkCloud/9.0.2303/Admin/PrivateApps

[knc]

Hello, guidance on adopting the theming framework for your app can be found at: https://dev.splunk.com/enterprise/docs/developapps/createapps/adduithemes/

[lshatzer]

https://docs.splunk.com/Documentation/Splunk/latest/Admin/Appconf#.5Bui.5D suggests you need to add an entry to your app.conf file in the ui stanza of supported_themes.

[ui]
supported_themes=enterprise,dark

[gcusello]

Hi @chartastic,

did you tried to go in the Edit mode of each dashboard and set the Dark Theme?

Ciao.

Giuseppe

[chartastic]

I am not trying to apply dark theme to a dashboard, but to the search ui like I now can in "Search & Reporting". See the screen shot.

[gcusello]

Hi @chartastic,

you should try to copy the CSS that you have in the Search & Reporting App (Dark Theme) App in your custom App.

You should find it in $SPLUNK_HOME/etc/apps/search/appserver/static and copy in $SPLUNK_HOME/etc/apps/<your_app>/appserver/static.

Ciao.

Giuseppe

[yuanliu]

You want to move this question to Dashboards & Visualizations forum and get better answer.

[chartastic]

See my other reply, this is about the search ui and not about a dashboard.