What are the different types of built-in Popup themes other than dark and light?
var fill = new SimpleFillSymbol("solid", null, new Color("#A4CE67"));
var popup = new Popup({
fillSymbol: fill,
titleInBody: false
}, domConstruct.create("div"));
domClass.add(popup.domNode, "dark");
Solved! Go to Solution.
The Popup page in the API reference has a link to the css for that widget. If you search the css for the widget you can see that there are the light and dark themes and also a blueTheme.
https://developers.arcgis.com/javascript/3/jsapi/css/esri/dijit/css/Popup.css
Reviewing the css can also be helpful if you'd like to create your own theme. Just copy/paste the light or dark theme css to your app stylesheet and modify the colors to suit your needs. For example if I wanted to create a new theme called 'redTheme' that has a red title bar with white text I could add this to my app stylesheet.
.esriPopup.light .titlePane,
.dj_ie7 .esriPopup.light .titlePane .title,
.esriPopup.light .contentPane,
.esriPopup.light .actionsPane {
background-color: #ff0000;
color: #fff;
}
The Popup page in the API reference has a link to the css for that widget. If you search the css for the widget you can see that there are the light and dark themes and also a blueTheme.
https://developers.arcgis.com/javascript/3/jsapi/css/esri/dijit/css/Popup.css
Reviewing the css can also be helpful if you'd like to create your own theme. Just copy/paste the light or dark theme css to your app stylesheet and modify the colors to suit your needs. For example if I wanted to create a new theme called 'redTheme' that has a red title bar with white text I could add this to my app stylesheet.
.esriPopup.light .titlePane,
.dj_ie7 .esriPopup.light .titlePane .title,
.esriPopup.light .contentPane,
.esriPopup.light .actionsPane {
background-color: #ff0000;
color: #fff;
}
Saroj,
The esri.css file only has light, dark and blueTheme. The blueTheme is a very limited theme.