## 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.

##### On this page

##### Demo widget

I need help with something

I can’t reorder a product I previously ordered

How do I place an order?

My payment method not working

##### Eric

Ask us anything – we’ll get back to you here or by email within 24 hours.

##### Theme Customizer

Explore different styles according to your preferences

##### Color Scheme

Light
Dark
Auto

##### RTL

Change text direction

##### Support Chat

Toggle support chat

##### Navigation Type

Vertical
Horizontal
Combo
Dual nav

##### Vertical Navbar Appearance

Default Default
Darker Lighter

##### Horizontal Navbar Shape

Default
Slim

##### Horizontal Navbar Appearance

Default
Darker Lighter
Purchase template
customize