First, welcome to the group for everything related to theme customization for WAB.
For those who got a chance to come to my talk on Mar 9th, 2016, here is the source code of the sample styles I demoed.
And for those who wasn't there, here is the what the styles are about:
Because customizing themes for WAB may vary dramatically from requirements to requirements. Some only need to update the colors, some need also to create custom layouts, widgets, or panels, and some require deep customization on the dijits from Dojo framework, ArcGIS API for JS, as well as Jimu components. I created three styles for the "JewelryBoxTheme" to show how a theme (or style in this case) can:
only change the colors (background colors, text colors, etc.)
change color, and import a different theme for Dojo framework other than claro
all above, and override styles of some WAB widgets such as:
Zoom slider from WAB
Locate button from WAB
How to use:
Extract the attached .zip file
Drop the "JewelryBoxTheme" folder to path/to/your/WAB/client/stemapp/themes. Replace all files.
Open WAB and create a new app, pick "JewelryBoxTheme", and last layout
switch between 3 new styles added to test
Overview of custom changes:
main.js: logic added to switch between Claro and Calcite Dojo themes between WAB themes and styles (only "demo_adcanved" and "demo_adcanved" should use Calcite in the demos)
style.css in "demo" style: mainly to add styles to make the header to have a white look and feel.
style.css in "demo_adcanved" style: Calcite theme (details) for Dojo dijits and part of ArcGIS API widgets is imported
style.css in "demo_adcanved2" style: more css styles added to override default styles of the followwing Jimu widgets: