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>
Option Type Defaults Description
phoenixIsNavbarVerticalCollapsed Boolean false Set true to make the vertical navbar stay collapsed when the page loads.
phoenixTheme string light This option is for setting up the default color mode (light, dark or auto) for your project. Set dark to make the default color mode dark.
phoenixNavbarTopStyle string default Set darker to make the top navbar darker when the page loads.
phoenixNavbarVerticalStyle string default Set darker to make the vertical navbar darker when the page loads.
phoenixNavbarPosition string vertical This option is for changing the navigation type. Available values:
  • vertical
  • horizontal
  • combo
phoenixNavbarTopShape string default Set slim to make the top navbar slim when the page loads.
phoenixIsRTL Boolean false Use true to make the whole layout RTL (Right to Left). Recommended for languages such as Arabic, Hebrew, or other RTL languages.
phoenixSupportChat Boolean true This option is for showing the chat widget. Set false to hide the chat widget when the page loads.

Thank you for creating with Phoenix|
2024 ©Themewagon

v1.16.0

Theme Customizer

Explore different styles according to your preferences

Color Scheme
RTL

Change text direction

Support Chat

Toggle support chat

Navigation Type
Vertical Navbar Appearance
Horizontal Navbar Shape
Horizontal Navbar Appearance
Purchase template
customize