Stylesheets are written with LESS, which is a dynamic preprocessor stylesheet language that can be compiled into Qt stylesheets.
Although any LESS compiler will work fine, here is a recommended setup.
- Install Visual Studio Code by Microsoft.
- Add the Easy LESS extension from the marketplace which will be used as the compiler.
- In VSCode, navigate to your Tahoma2D stuff folder and open
config/qss/Default/less
.
A settings.json
file is already included to ensure developers work to the same standards located in .vscode
. If the file must be created manually then the following should apply.
"editor.tabSize": 2,
"less.compile": {
"compress": true,
"sourceMap": false,
"out": false
}
ℹ️ How to Change Settings in Visual Studio Code.
On Linux you will need a command-line compiler lessc
.
Ubuntu:
$ apt install node-less
Fedora:
$ dnf install nodejs-less
Easy LESS uses a compile on save feature, so the theme files must be saved to generate an output.
Default.less
themes/Blue.less
themes/Dark.less
themes/Light.less
From Tahoma2D source directory root execute the following commands:
$ lessc -x stuff/config/qss/Default/less/Default.less stuff/config/qss/Default/Default.qss
$ lessc -x stuff/config/qss/Default/less/themes/Blue.less stuff/config/qss/Blue/Blue.qss
$ lessc -x stuff/config/qss/Default/less/themes/Dark.less stuff/config/qss/Dark/Dark.qss
$ lessc -x stuff/config/qss/Default/less/themes/Light.less stuff/config/qss/Light/Light.qss
The stylesheets are designed into a component, wire-frame and palette structure similar to web design that exploits the cascade of the LESS language to generate multiple theme colors from a single layout. This method was used to prevent duplication.
The include pathway is important as components
need to be included before layouts
. The cascade order is defined in the main.less
file.
// Base
@import 'base/colors';
@import 'base/mixins';
// Components
@import 'components/all';
// Layouts
@import 'layouts/all';
Then import the main.less
file into the theme file which will add values to every variable in Default.less
.
There are many variables, for a full list look at Default.less
, below is a list of the core variables.
@bg
is the main background color for the interface, almost all other color variables use it as their base color and instead use color functions to either lighten or darken the value.
@text-color
is the main text color for the interface.
@accent
is used for accenting, such as borders, separators, boxes, wrappers, think of it as secondary.
@hl-bg-color
changes the color for highlighted items and focused text fields, think of it as tertiary.
This is an example of how to add new features into the layout files.
#NewWindow {
background-color: @bg;
border: 1 solid @accent;
& QPushButton#OK {
background-color: @button-bg-color;
border-color: @button-border-color;
color: @button-text-color;
padding: 3;
&:hover {
border-color: @hl-bg-color;
}
}
}
To call components, use the LESS extend function.
#NewWindow {
&:extend(#ComponentName all);
}
It's possible to create custom themes.
- Navigate to your Tahoma2D stuff directory, and create a new folder in
config/qss
. - Create a new text file in the new folder, give it the same name as the folder and save it with the
.less
extension. - Open the LESS file and add the following line at the top.
// out: filename.qss
- Which will control where Easy LESS outputs the compiled file on save.
- Next, choose which theme you want to base from, in this example the base will be Default.
- Add this line under the Easy LESS line but above everything else.
@import '../Default/less/Default.less'
- Now the theme file is a clone of Default, so variables can be overridden.
//out: filename.qss
@import '../Default/less/Default.less';
@bg: red;
@text-color: white;
@hl-bg-color: yellow;
// etc
Base: Contains generic color palettes, legacy code, mixins and functions. It's fine to place junk code here.
Components: Anything re-usable is here, such as multiple tab structures, button styles, icon layouts, frames, wrappers and folder trees.
Layouts: The core wire-frame, every window, widget and control is designed here.
Themes: Alternate theme colors that inherit the Default theme, it is only necessary to override variable values unique to the theme.