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.

When run in Live Preview.

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.

The 'Text for on state' property setting.

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.

Normal icons set to 48px.
Normal icons set to the default size, 24px.

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.

The Manage files hyperlink

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.