Customize style colors and fonts
Description
Customize the style colors and fonts. This provides a simpler way to customize colors than editing the style for the entire project.
The 'Customize style colors and fonts' property presents an alternative to using the Style Builder in order to create individual customized styles. One of the advantages of using this property is that, unlike the Style Builder, you will not have manually update any CSS classes that are added to Alpha Anywhere after your style is created. Because the styles defined in the Style Builder, whether local or global, are all built off of a copy of a 'System' style (ex. iOS7, MobBlue, Alpha, etc...), once that copy is made, any CSS class updates that occur to the original 'System' style will not appear in the copied version. One of the potential downsides of the 'Customize style colors and fonts' property is that changes made to it will be applied to all of the components in a project that use that style.
This property works with Sass styles (e.g. iOS7, AndroidDark, AndroidLight, Alpha), which use SASS variables to define the colors and fonts used in the stylesheet.
For a explanation of this property watch this video, 'Adjusting Colors and Fonts in a Stylesheet', or follow the guide below.
Font
In order to change the font for all of the components using this style, simply type the name of the font you want to use next to the 'Family' textbox.
Family
Sets the font for the component.
Colors
To edit colors and fonts, click the smart field for the Customize style colors and fonts property. When you edit the colors and fonts using this builder, you are not editing the base style sheet. Instead you are storing your adjustments to the style in a separate file called 'styleTweaks.json'. This means that if the style sheet is changed by Alpha, you will get all of the edits applied to the style by Alpha, and you will still get your color and font changes. Be aware that not all settings are available across styles. The 'Alpha' style was the first to be designed implement the 'Customize style colors and fonts'.
Primary Foreground color
The main foreground color in the style.
Primary Background color
The main background color in the style
Error
The error color.
Accent
The accent color in the style. In the 'Alpha' style this setting will set the color of the cursor background for a selected row in a list control or a selected date in a calendar control. In the 'iOS7' style this feature of the calendar control is set uses the 'Calendar on Background' setting. In 'iOS7' the 'Accent' property sets the color of certain defined controls, like the record navigation buttons.
Accent Foreground
The accent foreground color to use in the style. This setting is available in the 'Alpha' style. The accent foreground color is displayed when a row is selected or hovered over on a list. One calander controls this will also set the foreground color for the selected date, as well as the date that the mouse is hovering over.
Confirm
The confirm color in the style.
Deny
The deny color in the style.
Slider
The color of the slider range bar. The color appears behind the slider when it is moved.
Switch On Foreground
The color of the switch foreground of active text if you have a switch control. You can add text on top of a switch control by highlighting the switch control on the UX Controls page, going to 'Switch Properties', and typing in text next to the 'Text for on state' and 'Text for off state' properties. Note that this setting will only change the color of the 'on state' text. This property appears in the iOS7 style.
Switch On Background
The color of the switch background, if you have a switch control.
Calendar On Foreground
The color of the calendar foreground for all calendar controls. In the calendar control this color is visible on top of the highlighted date, in case the second of December. The rest of the foreground is set by the 'Primary Foreground color' setting. If you are using the 'Alpha' style, then this color can be sent using the 'Accent Foreground' property.
Calendar On Background
The color of the background for all calendar controls. If using the 'Alpha' style this property can be set by using the 'Accent' style.
Icons
Normal
This setting adjusts the size of regular sized icons. These are not the icons that you define for individual controls using the 'Specify Image' dialog, like a custom selected SVG icon for a button control. Rather, this setting changes the size of the system icons that are added automatically. For example, this will change the size of the icons on 'Record Navigation Buttons' if you add these defined controls to a list. Some other examples might be the 'Reset' and 'Undo Edits' icons for a list control's detail view or the 'Delete Record' icon.
Small
The size for small icons.
Using the Edit Style SASS Variables dialog
Deleting Edits
Clicking the Manage files hyperlink, at the bottom of the dialog, displays the styleTweaks.json file where your edits are stored. To delete the custom colors you have defined delete the styleTweaks.json file.
What is SASS?
Sass, or 'Syntactically Awesome Style Sheets', is a scripting language that, when parsed, looks like CSS or cascading style sheets. Unlike CSS, SASS also allows for the definition of variables. These variables can be tied to blocks of code in the SASS file that are easily converted into CSS. When you adjust color settings in the 'Customize style colors and fonts' property, you are updating SASS variables. These values are stored in the styleTweaks.json file in the project's folder. Meanwhile, the original unaltered SASS file for the style is stored in the selected style's executable folder together with a CSS file that is composed of all of the CSS that the SASS file for that style generates. When a component is published the information from the original CSS file is sent to a 'root' folder. Some internal code checks the styleTweaks.json file to discover what changes, if any, have been made. It then determines which SASS variables have changed and uses this to update the CSS root file accordingly.
Videos
Adjusting Colors and Fonts in a Stylesheet
Alpha Anywhere has always allowed you to edit a stylesheet used by a component to change any of the CSS defined in the stylesheet. But when you simply want to change some colors in a stylesheet, using the style editor may be more than you need.
In this video, we show how you can easily adjust colors and fonts in a style.