Select to view content in your preferred language

Can I Customize JS API Esri Themes ?

647
3
05-10-2022 11:34 AM
ArianaBernal
Occasional Contributor

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.

0 Kudos
3 Replies
ReneRubalcava
Honored Contributor

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

0 Kudos
ArianaBernal
Occasional Contributor

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

 

0 Kudos
ReneRubalcava
Honored Contributor

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.

0 Kudos