How to change a theme's primary color?

Bootstrap Studio Help
1

Hi, I'm just beginning to learn CSS and bought Bootstrap Studio to build and to learn about the code of its components.

I opened a multi-page template (Clean Sky) and could not find an easy way to change the primary color from blue to orange. The goal is to change the headings, icons, buttons, lines, background and any other element that has blue to another color. What would be the best way to do it?

Thank you!

2

The best way would be to finish learning CSS and HTML and Bootstrap so that you will know how to overwrite these things.

3

Not to discourage you, but you pretty much need to understand CSS if you want to customize the Bootstrap framework. Bootstrap studio does allow you to change the colors on certain elements that you place, but with pre-designed templates, many of the colored elements are set in the Bootstrap CSS file and are "locked", meaning they cannot be changed through the visual editing controls. In some cases, the !important modifier is also used.

You have to copy the specific CSS rules you want to change to a new CSS file which will then override the Bootstrap CSS rules via the "cascade."

4

I knew how to modify the theme color through SASS. But it's good to have in the the editor as a feature. Building a theme, after that go and modify in the SASS may not be a good idea. In that case, Anyone can design without editor.

5

hi @lud
I know this is a really old post but in case if anyone else is looking for it, all you need to do is create a new SASS file and add following in it, change colors as needed

:root {
  --bs-primary: #00ffff;
  --bs-secondary: #6c757d;
  --bs-success: #198754;
  --bs-info: #0dcaf0;
  --bs-warning: #ffc107;
  --bs-danger: #dc3545;
  --bs-light: #f8f9fa;
  --bs-dark: #212529;
}
6

You can do this right from the Appearance panel. Appearance > Bootstrap Theme

1 Like