Themed Icons for Choosing Bootstrap 4 Theme

Bootstrap-4-themed-icons.zip (1.2 MB)

When you add the Bootstrap 4 Framework to a page, it gives you the option to add different built-in themes rather than just Local or CDN. It would be helpful, I think, if it showed a themed icon instead. This would allow people to easily preview the colors of that theme, and make a decision based off of that. Even if they are going to change the colors themselves - they might see a theme that only needs 1 or 2 colors changed. I think this would be useful to web designers and graphic designers - as color is important to these fields.

Here is a preview of what I have in mind. I’ve also created the icons for every theme, and they are at the top of this post in a zip. If you guys decide to do this - then the icon creation part is done. :smiley: The icons show the 6 main color options, the heading in the correct font and color, the correct page color, and the button shape.

Ha that is a good idea!

From the very first integration of bootswatch we struggled with how to give a good preview in such small space. That’s why we haven’t done it yet.

And eventually is all about the base colors - so I love the idea!

1 Like

Awesome, glad I could help! I can give you guys the PSD if you want.

1 Like

sure send the PSD file over

BS4Themes.zip (1.6 MB)
The PSD file is above.
I also was playing with a format for the header colors to be in the graphic. Only did Cerulean though, but the folder is in the PSD if you guys want to go that route.

That looks like this:

header

3 Likes

The color is wrong on that header test graphic above btw. I just put in boxes for what the header might look like. That isn’t the actual colors though for that test image.

Nice job! That is a very helpful accessory.

1 Like

Thank you! I appreciate it and I agree.

This has been integrated in version 1.4.0, please update :slight_smile:

1 Like