There are already a few theme options available in the Theme tab of System Settings, but you might want to have a few other color schemes available for users to choose from. To look at the themes currently available in your instance, navigate to System UI | Themes. If you're in a Geneva or later instance, you'll notice quite a few themes that are not listed in System Settings: the additional themes are for UI15 or UI11. Here's how you can tell: Each theme has a field labeled Device that identifies the UI version that the theme applies to. A device value of Browser indicates a UI11 theme, while Doctype indicates a UI15 theme, and Concourse indicates a UI16 theme.
I know that sounds very odd, so I'll re-state it another way:
- If the Device field on a given Theme record is set to Browser, then that theme only applies to UI11
- If the Device field is set to Doctype, then that theme applies to UI15
- If the Device field is set to Concourse, the theme applies to UI16
Let's get hands-on with theme building, and make ourselves a new UI16 theme. Start by navigating to System UI | Themes, and opening up the Blimey theme from the list. Once there, change the name to My Custom Theme, then right-click the form header, and select Insert and Stay. This will create a copy of the Blimey theme, but with the name My Custom Theme.
A UI16 theme uses CSS variables to set color values. Now that we have a new theme record, customizing this theme consists of changing the color values in the CSS field to suit the company, or personal taste. Go ahead and do that now. If you're not sure what to change, find some values that are white (#fff) and set them to a neon green color (#76EE00). This way, you can play around and experiment with different properties to see exactly what they correspond to!
After altering the colors and saving the record, refresh the whole page.
You can test the new theme by opening System Settings, going to the Theme tab on the left, and selecting My Custom Theme:
Look through all of the tabs in the application navigator, to ensure that all headings and text are still legible with the new color scheme; it can be easy to accidentally set things like background hover color ($nav-highlight-main) and text hover color ($navpage-nav-app-text-hover, $navpage-nav-mod-text-hover) to the same value, resulting in a solid color bar when hovered over, which is generally not desirable.