Theme your web & mobile apps
A JS Theme allows you to apply a consistent set of colors to all forms and controls throughout your library. Omnis provides a number of themes which you can use to style your JS web & mobile applications: a default theme, which provides an effective and pleasing UI across all JS controls and devices, and a number of other light and dark themes, to provide a pleasing color scheme for different types of application, such as health or a professional style. (Note you should not confuse JS Themes with IDE themes which control the colors used in the Code Editor and are set in the Studio Browser.)
- You can change the current theme by pressing Ctrl/Cmnd + J from a remote form design form.
- Changing the design-mode theme updates all open design forms immediately and sets the theme for all the remote forms & JS components in your library. The following image shows the JS Theme selector (on the left) and the JS Split button example library (found in the Hub in the Studio Browser) and the ‘ICE’ theme is selected – note the use of SVG icons on some of the buttons
A theme contains a set of standard colors that are applied the controls and text in a remote form. For example, you can apply a theme color to the $backcolor and $bordercolor properties of a Split button control (as above) – and as the theme is changed in design mode the color of the Split button is changed automatically.
Setting the theme in the JS client
The JS theme can be set in design mode but you can also set the theme in the client using the “settheme” client command.
- New $clientcommand – “settheme”
- Do $cinst.$clientcommand(“settheme”, row ( “dark”))
- Changes the theme for this client, and requires a reload of the page to take (we plan to make this instant in the future)
- Client’s current theme comes through to the form’s ‘$construct’ row parameter.
The theme is set in the HTML file containing the remote form:
- A page’s HTML file includes a data-themename attribute, specifying the default theme
- (Replaces “_JT_” in the jsctempl.htm file)
Check out the online docs for more information about editing JS Themes and using them in your web & mobile applications: https://omnis.net/developers/resources/onlinedocs/WebDev/03jscomps.html#js-themes
Using SVG images for Icons
The style and usability of your applications is greatly enhanced by the colors and graphics you use, including the icons you use for the buttons, controls, toolbars and navigation. Omnis Studio 10.2 supports SVG icons for JS client controls (and window class controls), so they can be scaled to any size (therefore only one icon file is needed for all icon sizes), and for the JS client SVG icons can be “themed”, that is, the icons can be colored using the current JS theme and will change automatically as the theme changes.
- A single icon can be rendered in any color (and scaled to any size).
- Themeable icons are matched to the hex color.
- There is a tool (in Add-ons>Web client tools) to convert standard SVGs to our ‘Themed’ format.
- We provide an iconset of over 100 ‘material’ icons that have been ‘themed’ which you can use in the JS client (subject to the relevant license terms)
- A SVG icon is added to a control as before by specifying the $iconid property and selecting an icon from the Select Icon dialog
- The ‘material’ icons can be scaled to ‘fit’ the standard sizes (16×16, 32×32, 48×48) and any other sizes can be added
Read more about using SVG icons in your web & mobile apps here: https://omnis.net/developers/resources/onlinedocs/WebDev/03jscomps.html#svg-icons
More information about Omnis Studio 10.2
For more information about the Omnis Studio 10.2 release, see our website: https://www.omnis.net/platform/omnis-studio-10/