LuciadFusion Studio allows developers to customize some aspects of the application, such as colors and fonts.
The theme configuration options for the LuciadFusion Studio UI are available in the config/fusion.theme.yml file.
This configuration file contains properties that are used in the user interface such as background color, font color, button sizes and colors, font sizes, and so on. See the file for the full list of customizable properties and their definitions.
Customizing the static assets
The static assets consist of the logos, images, icons, and fonts used in LuciadFusion Studio. You can make any changes to these files directly on the file system.
You can find the files in the config/studio/static/theme/assets folder in the LuciadFusion distribution.
Changing the fonts
To change the font used in LuciadFusion Studio UI, you must modify the theme configuration file as well as the font.css file under the
config/studio/static/theme/asset directory.
Before you can specify a new font in the fusion.studio.webapp.theme.fonts variables in the
theme configuration file, you must define it in the font.css file. For example, if
you want to use your corporate font in the Studio UI, you need to identify it in the fonts file first: identify its CSS
properties, such as font-family, font-style, src, and unicode-range. Next, you can specify
this font in the theme configuration file, and LuciadFusion Studio UI will start using the new font.
Customizing the icons
The icons used in LuciadFusion Studio UI are images in the SVG format. The icons can be colored differently according to the category they are included in. Several categories have been defined for the icon colors. You can change the category colors through the theme configuration file.
To replace icons with your own icons, go to the icons folder and edit the SVG files. Because SVG files are XML files, you can open them in a text editor and change them.
Changing the images
The images used in the LuciadFusion Studio UI, such as the logo and splash screen, are located under the images folder. When you change these files, LuciadFusion Studio will start using the new files.
Please keep in mind that in order keep the page layout you should use an image which has the same size as the original one.
Automatic re-loading of the theme configuration file
LuciadFusion Studio checks the theme configuration file periodically to determine whether any changes have been made and allows the changes to be re-loaded automatically.
For information on how to activate and configure this feature, see the fusion.studio.webapp.theme section in the application-fusion.development.yml and application-fusion.production-template.yml configuration files.
After the changes have been loaded, you can see them by re-loading the page in the browser.