Nexacro provides basic themes appropriate for each operating system. However, the appropriate design task according to the operating environment is required for the application development. You can specify and reflect style property value appropriate to each component.
Modifying Default Theme
Oops, you can't modify the default theme under the NexacroTheme entry.
In Resource Explorer, you can only modify or use themes that are under the Theme entry. Double-clicking a theme under the NexacroTheme entry displays a dialog box asking if you want to import that theme.
Copying Default Theme to Create My Theme
You can also create a new theme. However, creating a theme from scratch is not an easy task because there are so many properties that you need to specify to create the theme. In this case, you can copy the default theme and modify the necessary items based on it.
1
Click the Resource Explorer tab at the bottom in the Project Explorer window of Nexacro Studio.
2
Double-click the default theme you want to copy.
If you double-click on a theme under NexacroTheme, you'll see a dialog asking if you want to import that theme.
3
A gray theme has been copied under the Theme folder. You can use it as is, but rename it as it can be confusing if it has the same filename as the default theme. Right-click it, select the [Rename] item from the context menu, and rename it to "test".
The gray.xtheme file is not copied as-is, but the image file and the XCSS file are copied unzipped.
4
Return to [Project Explorer], select the "Environment" item, and change the themeid property value to the copied theme under the Theme folder in the property window.
The design screen may not change after changing themeid. In this case, right-click the project in [Project Explorer] and select the "Refresh" item from the context menu.
Changing Button Component Background Color in My Theme
1
Double-click the theme file copied to the Theme folder with the mouse. The editor is opened as the file opens where you can edit the theme.xcss file.
2
Find the Button in the [Nexacro Style Sheet] list and double-click it with the mouse. In [Xcss Editor], the code of the .Button selector is shown, and in [Preview], the preview screen of the Button component is shown.
3
You can modify the code displayed in [Xcss Editor] or you can select the desired item from the top toolbar to modify it. Here, select the "Color" item from the top toolbar.
Select the desired background color.
You can check that the color property value and the text color of the Button component displayed in [Preview] have changed in the code.
4
Place the Button component on the design screen. Check that the background color modified in the theme is reflected. The color of the Button component previously placed is also changed.