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
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.
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.
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
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.
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.
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.
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.production-template.yml configuration files.
After the changes have been loaded, you can see them by re-loading the page in the browser.