Skip to content
On this page

Customize GUIs

SCSS variables must be found in the theme.scss file.

These variables are used by the GUIs of your game. You can change the color of a window, the font, etc.

    Window StyleSheet
$window-background: linear-gradient(148deg, rgba(79, 82, 136, 0.7) 0%, rgba(42, 43, 73, 0.7) 100%);
$window-border: 2.5px solid white;
$window-border-radius: 5px;
$window-arrow-color: white;
$window-font-size: 25px;
$window-font-color: white;
$window-font-family: 'Arial';

$cursor-background: #7782ab;
$cursor-border: 1px solid #9db0c6;

$hero-face: url('@/config/client/assets/face.png');

@mixin window-content {
    // add extra style stylesheet

Create your own variable

Imagine that you create a GUI, you can put your own variable:

In *.vue file:

<style lang="scss">
$my-var: #fff !default;

.my-element {
    color: $my-var;

So that the game creator can put in theme.scss file:

$my-var: red;
// ... others variables

If you put paths to images, start the path with "@":

$hero-face: url('@/config/client/assets/face.png');