UI Themes
This guide is valid for LNP versions starting with 23.10.19.1942.
Lazy Nezumi Pro's main UI and toolbar styles (images, sizes, margins, colors, etc.) are defined by QSS stylesheet files (which are similar to CSS files used for web design). Together, these files define a theme that usually share similar colors and images. This guide will show you how to use custom themes, or even create your own!
Choosing a Theme
LNP's installer will place sample themes in the installation folder, and these will be copied to your user themes folder the first time you run LNP. This folder is usually located here: %LOCALAPPDATA%\Lazy Nezumi Pro\themes\
By default, LNP will load stylesheets from the ClassicOrange theme.
If you would like to use a different theme, simply select it from the [Settings/Theme] menu in LNP. This menu contains an entry for each theme installed in your user themes folder.
Creating a New Theme
If you would like to start working on your own theme, simply copy/paste one of the folders in the themes folder, and rename it to your new theme's name. As long as the folder contains the mainStyle.qss or toolbarStyle.qss files, LNP will add it to the menu list at startup.
When a theme is active, its qss files are monitored and reloaded automatically when changes are detected. Please note that because Qt's parser doesn't provide details about parsing errors, it's recommended to test your work often by saving the file you're working on and checking the UI. If there are any errors in your file, the UI will look broken.
Image Folders
When referencing images in your stylesheets, there are three relative locations they can be loaded from:
- The embedded resource. Example: url(:/images/arrow_right.png);
- The LNP installation folder. Example: url(themes/ClassicBlue/checkmark.png);
- Your LNP user data folder. Example: url(~/themes/ClassicPink/power.png);
If you are working on your own custom theme, it's recommended to only use paths to the internal resource (:/), or to the user data folder (~/). This will make it easier to share the theme with others, as they'll only need to copy the files into their user data folder. (Not all users have admin access to the installation folder, and it's considered good practice to only store program data files there anyways.)
Variables
While the QSS format itself does not support variable definitions, LNP adds partial support for this.
When reading QSS files, LNP will look for a custom <variables> section. If this section is present, it will scan each line within this section, expecting the following format:
@variableName@ = replacementTextIt will then replace all occurrences of [@variableName@] with [replacementText] in the stylesheet string.
This will let you reuse stylesheet code for different themes, as you'll only have to change common variable definitions. Please have a look at the stylesheets in the themes subfolders, to see examples of this in action.
For the toolbarStyle.qss stylesheet, a special variable %1 will be replaced by the current DPI. This is useful in case you want to load different sized images at different scale factors. For example:
QPushButton#buttonClose:hover
{
image: url(@toolbarImages@/closeh%1.png);
}Fonts
While QSS allows you to set fonts and their sizes for elements, you should not do so with LNP's stylesheets.
In LNP, the font and its base size can be chosen by the user for each supported language. These are set in the [Fonts] section of the lazynezumipro.ini file located in your user data folder. LNP then scales the font size for various UI elements up or down, and also does this globally when a window scale factor is selected.
In order for the UI to look similar at different scale factors, you should use the 'em' unit instead of 'px' anywhere you define sizes. This will make the size of your elements automatically scale with the current font size.
Docs
For more information about QSS stylesheets, please consult these pages: