Customization

1. Changing the color accent

1.a) Locating :root

Open the .theme.css file you downloaded and locate :root.
(If you did not download the theme file yet, visit the Installation Wiki page to learn how to install)
It should be pretty easy to find if you use a programm like Sublime or Notepad++.

:root {
    --main-color: #2780e6;
    --hover-color: #1e63b3;
    --background-blur: 0px;
    --background-brightness: 100%;
}

1.b) Changing Colors

Change both color values to change the color accent of the theme.
You can use hex, rgb(a) or hsl(a) color values.
(I suggest using this tool to pick your colors: http://www.hexcolortool.com)

    --main-color: #yourmaincolorhere;
    --hover-color: #yourhovercolorhere;

---

2. Changing the background image

2.a) Locating the background image link

Open the .theme.css file you downloaded and locate the background image link.
(If you did not download the theme file yet, visit the Installation Wiki page to learn how to install)
It should be pretty easy to find if you use a programm like Sublime or Notepad++.

body::after,
.callout-backdrop,
.user-popout::before,
#user-profile-modal .header::before,
#pubs-container::before,
.auth-background,
.auth-tiling-bg,
.invite-modal .invite-splash,
.radio-theme.light label,
.radio-theme.dark label{
    background-image: url(https://cdn.rawgit.com/Zerthox/ClearVision/master/images/sapphire.jpg) !important;
}

2.b) Changing the background image

Change the image link to change the background image of the theme.
Make sure the link starts with https:// instead of http:// and ends with an image file extension like .png or .jpg.
(You can use Imgur if your image hosting service doesnt support HTTPS connections)

    background-image: url(https://i.imgur.com/yourimagehere.png) !important;

---

3. Adjusting background image filters

3.a) Locating :root

Open the .theme.css file you downloaded and locate :root.
(If you did not download the theme file yet, visit the Installation Wiki page to learn how to install)
It should be pretty easy to find if you use a programm like Sublime or Notepad++.

:root {
    --main-color: #2780e6;
    --hover-color: #1e63b3;
    --background-blur: 0px;
    --background-brightness: 100%;
}

3.b) Changing the filters

Change the filter values to blur or darken/lighten the background of the theme.
Blur allows length values.
(Examples: 0px is no blur, 10px is a lot of blur)
Brightness allows percentage values.
(Examples: 0% is completetly black, 100% is normal brightness, 200% is 2x brighter than original)

    --background-blur: 3px;
    --background-brightness: 70%;

---