How to Edit SCSS/JavaScript Variables in Your Bootstrap 5 Phoenix Template’s ‘src’ Directory

Learn how to customize your Bootstrap 5 Phoenix template by editing SCSS and JavaScript variables in the ‘src’ directory. This guide walks you through the process of modifying theme colors, navigation widths, and more to tailor your admin dashboard to your specific needs. Perfect for developers looking to enhance their web applications with personalized styling and functionality.

in Node.JS, AWS

Skip to section:

  1. What are the 'src' and 'public' files used for?
  2. Javscript example
  3. SCSS example
Using Phoenix v1.18

themes.getbootstrap.com/phoenix - You can buy the Phoenix theme from the Bootstrap website or directly from themewagon.com (the creators of this theme). Theme Wagon also offers free Bootstrap 5 templates. Setting Up Your Template

After purchasing and downloading your template, unzip/unpack the files. Your folder structure should look like this:


What are the 'src' and 'public' folders used for?

The 'src' folder contains the Javascript and CSS code that you can edit.

The 'public' folder contains the HTML template files.


Javascript variables

As an example, I will show you the config.js file (located in the directory phoenix-v1.9.0/src/js/config.js):

Circled in RED is variable for the initial light/dark configuration. So if you changed the value circled in RED to 'dark' instead of 'light'. When the user opens your web page. They will automatically have the dark theme.


SCSS variables

Here are some useful SCSS variables located in the folder pheonix-v1.9.0/src/scss/theme/_variables.scss

Changing these 2 variables cicled above(in GREEN) to the color "teal". Will change the color of the pagination items(like shown bellow)


We can also add our own custom SCSS variables(as shown above in GREEN) as show on the pagination page on Bootstrap 5.3 documentation. I have added these variables which seem to work well changing them to my website color teal


We can also change these 2 variables (as shown above in GREEN) to the color teal. This will chnage the color when hovering over a sidnav item link.


Changing the vertical nav variable(circled in GREEN bellow) to make it a little bit wider. So that we can fit more text for each navigation item. Like shown bellow:

Now that we have edited our Javascript and SCSS variables. We can now build our code to compile the SCSS and Javascript files into our HTML files that we can edit

Please note that after we have built our code, we will not be able to edit these variables again unless we go back into the 'src' folder and complete the process again.

Next page: Building the code with npm