diff --git a/doc/how_to_stylesheet.md b/doc/how_to_stylesheet.md index 4fd1b750..1e892a31 100644 --- a/doc/how_to_stylesheet.md +++ b/doc/how_to_stylesheet.md @@ -4,6 +4,8 @@ Stylesheets are written with [LESS](http://lesscss.org/), which is a dynamic pre ℹ️ [LESS Functions](http://lesscss.org/functions/) ## Recommended Setup + +### Windows Although any LESS compiler will work fine, here is a recommended setup. - Install [Visual Studio Code](https://code.visualstudio.com/) by Microsoft. @@ -20,9 +22,27 @@ A `settings.json` file is already included to ensure developers work to the same "out": false } ``` + ℹ️ [How to Change Settings in Visual Studio Code](https://code.visualstudio.com/docs/getstarted/settings). +### Linux + +On Linux you will need a command-line compiler `lessc`. + +Ubuntu: + + $ apt install node-less + +Fedora: + + $ dnf install nodejs-less + + + ## How To Compile + +### Windows + Easy LESS uses a compile on save feature, so the theme files must be saved to generate an output. ``` @@ -32,6 +52,15 @@ themes/Dark.less themes/Light.less ``` +### Linux +From opentoonz 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 +``` + ## How They Work 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. @@ -131,4 +160,4 @@ It's possible to create custom themes. **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. \ No newline at end of file +**Themes:** Alternate theme colors that inherit the Default theme, it is only necessary to override variable values unique to the theme.