Changing theme colours doesn't take effect

Hi, I might be misunderstanding how to use Appearance > Bootstrap Theme.

Screenshot 2023-01-13 at 18.06.54

I assumed that changing these colours would change the primary, secondary colours/buttons throughout the site, but it doesn’t.

Have I misunderstood or am using it wrongly?

@simonclay You are doing it right, it just doesn’t update the buttons.

I have just updated my theme generator to run on bs5.2.2, you can find it here:

It is still a work in progress, In fact I started the update this evening after I saw your post.

Full instructions on the page

1 Like

Thanks very much @richards. I will take a look at that.

So, ‘Appearance > Bootstrap Theme’ doesn’t work as expected?

May I ask, regarding the Appearance > Bootstrap Theme: with which item selected are we supposed to change these colours?

I found that when I changed them when I had a button selected, they reverted back to the original colours when I selected any other element.

Is there a particular element we should have selected when we set these colours?

I must admit it has been a while since I took a look at the built in bootstrap theme. I found it quite unpredictable, if I remember correctly it just added some CSS to the html element of the current page.

I started playing with recompiling the bootstrap sass in bss and then I created the theme generator. There are more advanced generators online, but I just wanted to create something simple based on colour schemes.

1 Like

I think since Bootstrap 5 has started using CSS Variables, you can now style or theme on a component or element basis. The way I understand the Bootstrap Theme Color Pallete you are refering to in the image, is that it does not set the theme colors for the whole project, rather sets the css variables available starting with --bs- for a component or element. You probably only want one of the colors selected (highlighted) on the Bootstrap Theme setting so you will know which one is applied. Hovering over the Name of the color shows a option to reset middle button. You can then choose that above for the button background color. Yes, its very confusing as it does appear like you could have multiple color palletes for each button, but since you are only choosing one, it may make more sense. My mind tells me

logically

that the same variable color pallete should be available to both buttons on my page. I would love to see some kind of video from the devs…

Flatly Theme Bootstrap Studio

1 Like

So far, I am not a fan of these --bs- variables. They seem to overly complicate the CSS in an attempt to give users some sort of Sass-like customizability without having to use Sass.

Maybe on extremely large websites they can be useful, but at least for the kind sites I build, it just makes a ton of extra CSS rules I have to wade through to find the thing I want to change.

1 Like

Thanks all. Very much appreciated. It does seem complicated.

It’s a shame, it would have been a nice and simple feature to be able to change the site colours globally.

It would be great if the devs could provide instruction on how this area should be used.

I was exploring this further and my understanding is that in order to theme with custom css variables you should be on the html element (:root) when setting the Bootstrap Theme in the Appearance. It does handle nicely the setting of both hex and rgb colors. If you were to recreate the :root settings in a stylesheet, it would act the same but would be more difficult to adjust both color pairs…like --bs-primary and -bs-primary-rgb as a example.

This way of customizing is quite different than compiling your own theme using a sass compiler. You would just import a compiled theme in Settings> Application > Themes. Also could just compile your own theme straight up inside using BS sass compiler.

1 Like