# Design

To change the design, you can go to `client\html\index.html` and follow the easy instructions at the top. There you can choose from 6 predefined designs.

If you want your own colors, you can follow tutorial below.

You can also change the whole design, if you edit `index.html` and `main.css`, but we **can't provide any support with that**.

### Custom color design

To add your own design, simply create a new *.css* file at `client\html\style\themes\` and paste this inside:

```css
:root {
    --color-white:      ?
    --color-black:      ?
    --color-primary:    ?
    --color-secondary:  ?
    --color-light:      ?
    --color-border:     ?
    --color-accent:     ?
    --color-success:    ?
    --color-error:      ?
    --color-text:       ?
    --color-highlight:  ?
    --slider-dot-color: ?
}
```

Then you can replace the "?" with colors you want your design to have.

* for example: `#000, red, rgb(255, 123, 321)` and more [here 🔗](https://www.w3schools.com/colors/default.asp)

If you want some inspiration, you can look at `client\html\style\themes\dark.css`