Style sub-theme and CSS 'tweaks'
Define style tweaks, sub-theme, or CSS to augment or override definitions in the web theme.
Web themes, including Inherited Styles, can be enhanced using style tweaks. Tweaks are adjustments to the web theme definition stored in a separate file in the CSS folder for a Web Project. Adjustments can include new sub-themes, CSS, and Sass that add new behaviors or override existing style elements.
When you edit a system web theme, such as Alpha or Alpha-Dark, the web theme must be copied locally before it can be modified. If the system web theme is changed, e.g. to fix a bug or to add support for a new control type, the changes will not be reflected in the local copy of the system themes. The local theme would need to be manually updated with the new changes.
Style tweaks are stored and applied independently from the web theme. If the system web theme is updated for any reason in a future release of Alpha Anywhere, you will receive all of the changes without losing any web theme customizations.
Style tweaks for a particular web theme are stored in the StyleTweaks folder in the css directory for the web project:
<web project folder>\css\StyleTweaks\<style name>\styleTweaks.json
The adjustments made using the Local sub-theme definition properties only apply to the component. This is because the sub-theme definitions are stored in the component. The Style sub-theme and CSS 'tweaks', however, are stored with the web theme. This means any sub-themes and CSS you define in using the Style sub-theme and CSS 'tweaks' property will affect all components that use the web theme.
All Sass styles (i.e. web themes) support style tweaks. This includes the following system web themes:
This list is not exhaustive.
Introduction to Style Tweaks
In order to change the appearance of an app, you can either customize the CSS for individual controls or modify the theme's style sheet. In the past, modifying the web theme style required copying the theme locally. Style tweaks let you change or extend a web theme without needing to copy it.
In this video, we show how to tweak a web theme to change the theme's colors. We also show how to create a sub-theme for a button.
Creating Sub-themes for Inherited Styles
Sub-themes are a way to create different looks for application elements, such as buttons or text boxes. Adding sub-themes using style tweaks was previously not supported for Inherited Styles. With the release of Alpha Anywhere 22.214.171.124, style tweak support has been added for Inherited Styles.
In this video, we show how to create a new sub-theme called 'primaryRounded' for an input control (e.g. text boxes, text areas) using the Alpha-Dark-Green web theme. The new sub-theme will have a rounded border around the input control. Alpha-Dark-Green is an Inherited Style that uses Alpha as it's base theme.