Themes consist of basic **css** located in **www/html/_assets/themes**. The css folder names represent the themes.
Each folder should have the following files :
<div class="border border-round" style="display:grid; grid-template-columns:auto auto; gap:4px; width:96%; text-transform:capitalize">
<div class="bold border-bottom" style="background-color:#f3f3f3; padding:4px;">Files (.css extensions)</div><div class="border-bottom bold" style="background-color:#f3f3f3; padding:4px;">Description</div>
<div>borders</div><div> styling of borders (top,bottom,right,left,round)</div>
<div>footer</div><div>styling the footer</div>
<div>header</div><div>styling the footer</div>
<div>layout</div><div>The general layout for a site and how to organize different panes</div>
<div>menu</div><div>styling the menu</div>
<div>pane</div><div>styling secondary pane, it's position and visibility depends on the theme</div>
</div>

### Setup themes

**QCMS** CLI interface allows to query the backend to determine available themes, in three simple phases described below

<div class="source-code">
    #1. Listing available themes<br>
    $ qcms list-themes
</div>

<div class="source-code">#2. Selecting and applying theme<br>
$ qcms set-theme magazine</div>

<div class="source-code"># Verifying themes set<br>$ ls www/html/_assets/themes </div>


### Custom Themes

**QCMS** supports custom themes or user-defined themes. Build custom theme manually in three simple steps:

<div class="source-code">
# 1. copy default theme to new folder (www/html/_assets/theme/mytheme)<br>
$ cp -r www/html/_assets/themes/default www/html/_assets/themes/mytheme
</div>

<div class="source-code">
# 2. update configuration file to enable configuration<br>
{
    "system":{
        "theme":"mytheme"
        ...
    }
}</div>

<div class="source-code">
# 3. set the theme and reload the your app (from the app folder)<br>
$ qcms set-theme magazine
</div>