In order to be valid, the root folder of a theme must contain a desc.json file. If not, it won't be shown when refreshing the available themes.
Creating a theme
When creating a new theme in the devkit, the devkit must not be running. If it is running, open PowerShell (or the Command prompt, if you used it to start the devkit) and digit CTRL+C to stop the process and restart it when you have added the theme to the themes folder (<DEVIKIT FOLDER>/themes).
In order to create a theme, we recommend to copy one of the existing ones (either Blue or Black theme, do not select the default/Green one because other themes are inherited from it, and it might cause issues with future updates) from your devkit themes folder (<DEVKIT FOLDER>/themes) or your Portal themes folder (<NEWIRED PORTAL FOLDER>/themes).
Rename the theme folder as you want. Its name is used as a theme-id and must follow these two rules:
- Only alphabetical characters (white characters like space or tabs are not allowed)
- Maximum length of 50 characters
A theme is defined by the following file structure:
theme-id/
less/
variables.less
bubble.less
launcher.less
_feedback.less
_fonts.less
...
fonts/
*.ttf, *.woff, etc.
desc.json
preview.png
Once you have copied and renamed the theme, open the file "desc.json" (shown below) inside the theme, and change the data according to the new theme specs.
Now you can add fonts to the fonts folder and edit the LESS files in the less folder.
To adjust the basic properties (parameters) of a theme, you can change the values in the "variables.less" file.
If you need to edit other parts of the theme, you can modify the "_custom.less" file (recommended) or the other .less modules (not recommended but possible).
Keep in mind that the additional themes will be inherited from the default one (Newired Green), therefore we suggest not to delete it because it will break the other themes.
Here is a complete list of the files you can edit (or add, if the copied theme doesn't contain them):
| bubble.less | Entry point for the styles of the bubble |
| launcher.less | Entry point for the styles of the launcher |
| variables.less | Definition of variables that are used to customize the theme |
| _bubble.less | Style definition of the bubble module |
| _custom.less | Custom style definition - used when the variables provided are not sufficient |
| _feedback.less | Style definition of the feedback module |
| _fonts.less | Definition of the fonts that are used in the theme |
| _global.less | Basic style definition |
| _handle.less | Style definition of the handle module |
| _progress.less | Style definition of the progress module |
| _spotlight.less | Style definition of the spotlight module |
| _window.less | Style definition of the launcher module - Journey list, settings, ... |
Editing a theme
To modify a theme, access its root folder inside the themes folder in the devkit (<DEVKIT>/themes) or in the portal server (<NEWIRED PORTAL FOLDER>/themes). From here, you can add fonts edit all the .less files in order to change the theme as you want.
Changes applied to themes inside the devkit, can be seen instantly by visiting http://localhost:8000.
Changing preview image
To change the preview image of a theme, you need the theme devkit. If you have it installed and running, visit http://localhost:8000/preview.html, select the theme you want to generate a preview for and take a snapshot of the generated image. Then, replace the current one with the new image (remember to keep the same name).
Uploading/updating a theme
If you need to know more about uploading/updating a theme in the Portal, please check this article.