Can I Customize JS API Esri Themes ?

Question

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.

ReneRubalcava · Answer

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.

ArianaBernal · Answer

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;
}

ReneRubalcava · Answer

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