Setting up configuration
Phoenix has a global configuration system. You can change the theme settings with a single global javascript object.
Setting configuration
<h5>For Gulp based workflow</h5>
<p>Edit the <code>src/js/config.js</code> file.</p>
<h5>If you are not using Gulp based workflow</h5>
<p>Edit the <code>public/assets/js/config.js</code> file.</p>
<h5 class="fs-8">Configuration object:</h5><pre><code class="lang-js">const initialConfig = {
phoenixIsNavbarVerticalCollapsed: false,
phoenixTheme: 'light',
phoenixNavbarTopStyle: 'default',
phoenixNavbarVerticalStyle: 'default',
phoenixNavbarPosition: 'vertical',
phoenixNavbarTopShape: 'default',
phoenixIsRTL: false,
phoenixSupportChat: true
};
</code></pre>For Gulp based workflow
Edit the src/js/config.js file.
If you are not using Gulp based workflow
Edit the public/assets/js/config.js file.
Configuration object:
const initialConfig = {
phoenixIsNavbarVerticalCollapsed: false,
phoenixTheme: 'light',
phoenixNavbarTopStyle: 'default',
phoenixNavbarVerticalStyle: 'default',
phoenixNavbarPosition: 'vertical',
phoenixNavbarTopShape: 'default',
phoenixIsRTL: false,
phoenixSupportChat: true
};
Available Options
<div class="table-responsive scrollbar">
<table class="table table-bordered border border-translucent fs-9 mb-0">
<thead class="bg-body-secondary text-body">
<tr>
<th class="white-space-nowrap">Option</th>
<th class="white-space-nowrap">Type</th>
<th class="white-space-nowrap">Defaults</th>
<th class="white-space-nowrap" style="min-width: 20rem">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="ps-2 white-space-nowrap">phoenixIsNavbarVerticalCollapsed</td>
<td class="white-space-nowrap" style="min-width: 7rem"><code>Boolean</code></td>
<td class="white-space-nowrap" style="min-width: 7rem"><code>false</code></td>
<td class="pe-2">Set <code>true</code> to make the vertical navbar stay collapsed when the page loads. </td>
</tr>
<tr>
<td class="ps-2 white-space-nowrap">phoenixTheme</td>
<td><code>string </code></td>
<td class="white-space-nowrap"> <code>light </code></td>
<td class="pe-2">This option is for setting up the default color mode (<code>light</code>, <code>dark</code> or <code>auto</code>) for your project. Set <code>dark</code> to make the default color mode dark.</td>
</tr>
<tr>
<td class="ps-2 white-space-nowrap">phoenixNavbarTopStyle</td>
<td><code>string </code></td>
<td class="white-space-nowrap"> <code>default </code></td>
<td class="pe-2">Set <code>darker </code>to make the top navbar darker when the page loads.</td>
</tr>
<tr>
<td class="ps-2 white-space-nowrap">phoenixNavbarVerticalStyle</td>
<td><code>string </code></td>
<td class="white-space-nowrap"> <code>default </code></td>
<td class="pe-2">Set <code>darker </code>to make the vertical navbar darker when the page loads.</td>
</tr>
<tr>
<td class="ps-2 white-space-nowrap">phoenixNavbarPosition</td>
<td><code>string </code></td>
<td class="white-space-nowrap"> <code>vertical </code></td>
<td class="pe-2">This option is for changing the navigation type. Available values:<ul class="mb-0">
<li><code>vertical</code></li>
<li><code>horizontal</code></li>
<li><code>combo</code></li>
</ul>
</td>
</tr>
<tr>
<td class="ps-2 white-space-nowrap">phoenixNavbarTopShape</td>
<td><code>string </code></td>
<td class="white-space-nowrap"> <code>default </code></td>
<td class="pe-2">Set <code>slim </code>to make the top navbar slim when the page loads.</td>
</tr>
<tr>
<td class="ps-2 white-space-nowrap">phoenixIsRTL</td>
<td><code>Boolean</code></td>
<td><code>false</code></td>
<td class="pe-2">Use <code>true</code> to make the whole layout RTL (Right to Left). Recommended for languages such as Arabic, Hebrew, or other RTL languages.</td>
</tr>
<tr>
<td class="ps-2 white-space-nowrap">phoenixSupportChat</td>
<td class="white-space-nowrap"> <code>Boolean </code></td>
<td class="white-space-nowrap"> <code>true</code></td>
<td class="pe-2">This option is for showing the chat widget. Set <code>false </code>to hide the chat widget when the page loads.</td>
</tr>
</tbody>
</table>
</div>