topic Can I Customize JS API Esri Themes ? in ArcGIS JavaScript Maps SDK Questions

Can I Customize JS API Esri Themes ?

ArianaBernal — Tue, 10 May 2022 18:34:57 GMT

Hello,

I am working on creating a custom application using the JS API and Calcite. I am using the esri light and dark themes and using a toggle to switch between them. I ideally would like to have custom colors and fonts atleast on the main light theme.

Is it possible to modify certain elements on the js api light and dark themes? would I need to create custom css files for each theme and just reference these in the toggle?

Here is my current app and I can share the source code as well.

Re: Can I Customize JS API Esri Themes ?

ReneRubalcava — Tue, 10 May 2022 18:53:15 GMT

You can try a custom theme using the source SASS files. This utility might be able to help with that https://github.com/Esri/arcgis-js-cli#author-a-custom-theme

Re: Can I Customize JS API Esri Themes ?

ArianaBernal — Fri, 01 Jul 2022 13:58:05 GMT

Hi Rene,

I got around to configuring this in my app but noticed when testing my app in mobile, the font settings disappear and either reset to Avenir Next or change to Times New Roman. Here is some of what I have configured in my css file. Is there a limitation to this method or is there something I may be missing?

*Sass ESRI API Theme*/ .sassy-theme .esri-widget, .sassy-theme .esri-widget--button, .sassy-theme .esri-menu, .sassy-theme .esri-popup__main-container, .sassy-theme .esri-popup__pointer-direction, .sassy-theme .esr-popup__button, .sassy-theme .esri-input, .sassy-theme .esri-button, .sassy-theme .esri-widget a { background-color: #fff; color: #036; font: { family: 'Montserrat', style: 'normal', weight: 'normal' } } .sassy-theme .esri-widget--button:focus, .sassy-theme .esri-widget--button:hover, .sassy-theme .esri-menu li:focus, .sassy-theme .esri-menu li:hover { background-color: #f3f3f3; color: #036; }

Re: Can I Customize JS API Esri Themes ?

ReneRubalcava — Fri, 01 Jul 2022 16:07:05 GMT

Sorry, I'm not sure. CSS is not my expertise. Could be you there are some additional classes on certain widgets on small screen sizes. Might need some inspection and trial and error.