By default, Experience Builder Developer Edition publishes the index.html file with the following:
<style>
Solved! Go to Solution.
Generally speaking, I would advise against messing with the CSS for the HTML/body tag as that will affect everything in your application. If you are going to do it, the Experience Builder way would be to create a custom theme and make your modifications in there.
https://developers.arcgis.com/experience-builder/guide/theme-development/
Generally speaking, I would advise against messing with the CSS for the HTML/body tag as that will affect everything in your application. If you are going to do it, the Experience Builder way would be to create a custom theme and make your modifications in there.
https://developers.arcgis.com/experience-builder/guide/theme-development/
Thanks @JeffreyThompson2 . As always, spot-on advice. For whatever reason, I struggled with following the theme-development guide - I found it vague and I think it's missing a few steps. I will paste below the steps I went through to create my own custom theme for anyone else who has landed on this discussion looking for a solution.
Because I floundered when following the ESRI help doc Theme Development, I have documented the steps I had to use to create my own custom theme in Experience Builder Developer Edition. Of note, when you create a custom theme, you are essentially just setting the properties that you want to be different from the default theme.
To sum, you need to add a folder to a very specific location (explained below) and that folder must have very specific files in it (explained below) and those files must have very specific language in them. The easiest way to this (explained below) is to use the sample theme that contains all the necessary junk in it and then modify that to your liking.
I found that the instructions for Sample Theme here provided the necessary material to achieve success (for me anyway) rather than the piecemeal stuff offered on Theme Development.
I will try to recreate those steps here:
{"darkTheme": true}
{
"darkTheme": false,
"colors": {"primary": "red" }
}
{
"darkTheme": false,
"colors": {"primary": "#ca0b0b" }
}
I hope someone will find this helpful.
@PLadd You could copy this and make call it A Developer's Guide to Theme Development as a full Blog post.
Yeah I've experienced that theme 'development' pain, its not for the faint of heart. Before I got to this post in the thread, i was wondering if there would be a way to make CSS that would be more specific and override the behavior you were initially concerned about, but I suspect with the way react works, it might not make a difference.