Theme

A theme file is composed of images plus XCSS files. While default themes are compressed when provided, you must decompress them if you want to apply them to a project.

To open the Theme Editor, you should double-click a theme, which is located under Theme in the Resource Explorer. Otherwise, open the context menu from the theme and select the menu [Edit].

Image

The images used in a theme are provided in a tree. You can add or delete images while you can see the visual of an image through the preview pane.

Those images can be applied by writing the images' URLs in the source code of the related CSS file.

XCSS

You can edit a XCSS file that defines the style of a theme.

XCSS

The XCSS here means a feature to design the elements of a screen in Nexacro. The selectors to which a XCSS style can applies include components, Forms, frames, title bars, status bars, and scrollbars.

You can open the XCSS editor by double-clicking an XCSS file after selecting the file in the Project Explorer or Resource Explorer. Otherwise, open a context menu from the XCSS file and then select [Edit].

The XCSS editor presents a selector list in a tree form.

When you choose a selector in a tree, Nexacro Studio will display the codes of the relevant XCSS file, native CSS file and preview image. Moreover, you can edit the attributes of the selector through the Properties pane.

You can open a context menu by right-clicking a select in the tree, and this context menu provides a function to remove unused attributes.

If there are errors in XCSS scripts, the editor will count the number of errors and mark the erroneous selectors.

Adding Selector

You can add type selectors by clicking Add Selector in the toolbar of the CSS editor. To this end, check the desired selectors from the "Components" list.

You can style various statuses of a selector through Status. The "enabled" status is a default value so you do not need to designate it separately.

Adding Class Selector

Check Class Selector in the Add Selector window and then enter a class name. Check a component if you want to combine a class selector with a component.

Adding Child Selector

You can add a child selector by going to the tree, choosing a selector that has its children and then clicking the Add Child Selector button on the toolbar.

NavigatorBar

This feature allows you to go directly to a certain component or its sub-element. Clicking the [♦] button will open a list of the elements that you can access. If you click one of them, you will move to the code of the relevant element.

Clicking the drop-down button of a selector or child selector will open the list of the sub-elements. If you select one of them, you will move to the code of the selected sub-element.

If a selected element does not exist, the [+] button will appear, which you can click to add the relevant element.

Editing XCSS Code

If you type few letters in the editor, Nexacro Studio will automatically present a list of the properties that begin with the input text. After you select one of them by pressing the Enter key, the editor will display the related syntax.

If the syntax involves multiple patterns, you can navigate them with the Up/Down arrow keys. After you select a certain pattern by pressing the Enter key, the editor will display a related sample code.

You can collapse or expand the Style Quick Editor field to provide more room to the Text Edit field.

If you click the Text tap at the bottom of the XCSS Editor, you can edit the entire code of a certain XCSS file.

Defining Styles Based on the Screen

You can apply different styles to certain selectors depending on the value of the screen type property. When editing the theme or XCSS, you can select type and add a style property or specify a different value.

Declaring a variable and using it as a property value (Predefine)

When editing XCSS, you can declare a value that is repeatedly used as a variable in advance and designate it as the variable (id) instead of directly specifying the property value. When you need to modify the property value, you can quickly reflect the property value by modifying the value of the desired item among the Predefine items without directly finding and changing the property value.

Declare a variable

Select the Predefine tab in the XCSS editor window. Add a Group item and an Item item to be used as a variable.

Variables (Item) declared in the Predefine tab can be used when editing XCSS property values.

Using declared variables as property values (XCSS Editor)

When editing XCSS, you can use the IntelliSense function to check and select items declared in the Predefine tab.

When an item is selected, it is automatically converted into the format shown below and set as a property value.

Using a declared variable as a property value (property window)

To select an item declared in the Predefine tab in the property window, click the 'Predefine' button in each item of the property window to switch the state, then click the 'Predefine List' button to open the window and select the item.

Check the generate result

The value using the Predefine function is converted to the corresponding value during the generate process and reflected. When editing XCSS, you can check the converted value in the Component Preview window or the Computed Style tab of the property window.

Sharing Predefine Settings

Predefine settings are applied only within the XCSS or XCSS files within the theme. If you want to share the values you set, you can open the XCSS file in an external text editor and copy the entries inside the Predefines tags.

<?xml version="1.0" encoding="utf-8"?>
<XCSS version="1.1">
  <Predefines>
    <Group id="Color">
      <Define id="main_color" value="blue"/>
      <Define id="font_color" value="yellow"/>
      <Define id="sub_color" value="red"/>
    </Group>
  </Predefines>
  <CSSData><![CDATA[.Button
{
	background : -nexa-define(--main_color);
}
]]></CSSData>
</XCSS>

Usage example: Changing the gray theme color

In the gray theme, the color for the selected item is defined in the Predefine item as shown below.

maincolor: #BBAAFF
subcolor: #EEEBFF

If you change the Predefine item value to the desired value (blue series) and save it, you can see that the changed value is reflected.

maincolor: #3E86FF
subcolor: #DEF1FE