Making a Theme
Let's make our own custom theme. We'll do it in Online/Enterprise Edition first, but I'll comment on Developer Edition at the end.
I am using the JewelryBox Template that defaults to the Violet theme. If I just want to use a different theme, I can change it by hitting the paint palette on the left side of the screen and picking a different choice. But none of the default themes have my color of blue, so I'll go to the bottom of the screen and pick Customize.
It brings up this panel:
From top to bottom the options available to you are:
- Primary - The main color of the application
- Advanced color setting - More color options
- Theme font - The default font of the application
- Font Size Slider - Makes the default text larger or smaller
- Reset - Restores the theme to it's default settings
The Primary color and the Theme Font are the most impactful settings on your theme and I would recommend not touching the default size slider. Don't touch the Reset button unless you mean it. There is no confirmation before it wipes your changes.
Pressing the color circle brings up this menu. You can select your color by clicking in that purple shaded box, messing with the sliders underneath it, or using the color boxes at the bottom of the menu, but I would recommend using the Hex or RGBA options for greater precision.
Quick primer on RGBA & Hex - All of computer color is generated by mixing Red, Green and Blue light in values of 0 to 255. (Why those numbers? It's an 8-bit computer thing. Don't worry about it too much.) With these values, it is possible to make the over two million possible colors your monitor can produce. The A is a measure of opacity with 100 being fully opaque and 0 being fully transparent. Hex is a complicated and confusing way to encode RGB values without the A option.
But what if you don't know what Hex or RGB values to use? Here is a free tool for finding colors that helps finding complementary colors and has accessibility...
The blue I want is hex code #0055fa, so I will put that in and close this window.
The header bar, buttons and the space between the list items have all change colors. Many of the colors in the theme are derived from the primary color, making it lighter or darker.
Now, we will pick a font. Here are the choices. If you want to use something else, you will need Developer Edition.
I picked Georgia and here's how it looks.
Let's go back to the Advanced color setting option. In this panel, you will see a set of 8 colors colors that are used in the application. Clicking the carrot next to the colors will open an additional menu containing sets of complementary colors that can be used to quickly replace all 8 colors.
The colors from left to right are:
- Primary - The main color
- Secondary - An accent color. By default, it is never used. You must ask for it.
- Dark - The "black" color
- Light - The "white" color
- Success - Used for messages like "Form received".
- Info - Rarely used for messages that are not the other three categories.
- Warning - Used for non-critical errors.
- Danger - Used for serious alerts like "This will be permanently deleted." and critical errors.
You should keep 3-8 close to their default values. Messing with the Dark and Light values may make your text very hard to read. And users expect the various warnings to be in certain colors. You can set the Secondary color to anything you want. But why bother setting a value that is never used? Because setting the colors of a theme will change the values in the color picker throughout the Builder mode, so you can find it later and use it somewhere else in your application.
My theme colors are the blue I have already set as my Primary color, a red (#e00053) and a silvery-grey (#888b8d). The grey is too dark to be my Light and too light to be my Dark, so I will make it my Secondary color. And the red is very close to the default Danger red, so I will replace that value. (There is no rule against using Danger as an accent color, but be careful not to confuse your users. They may think a red button is dangerous to click.)
And that's it. My theme is ready. I can even save my project as a template and share it with my organization.
Now, for some quick comments on Developer Edition. I won't go through the whole process as the ESRI Guide is quite good.
- It's ok just to use the tools in build mode. (I won't judge you.)
- CSS for the entire application should go in style.scss. CSS for an individual widget should go in a css file in that widget's folder. (It's the React way.) But remember, that css in any file can target anything in the entire application.
- Properly configured, a custom font will appear as a blank slot in the font dropdowns of the build mode.
- I could not import a font using the @import declaration in the guide. I used a font-face declaration in my styles.scss like:
@font-face {
font-family: 'Relish Pro Medium';
src: url('./assets/fonts/RelishProMedium.otf') format('truetype');
}
- Experience Builder appears to support .otf and .ttf, but not .woff or .woff2.