I decided I’d manually add the bootstrap 5.3 alpha tests to my project a few weeks ago and have recently been thinking about how will the Wappler UI change to manage Bootstrap 5.3
For example Bootstrap 5.3 comes with colour modes you have Light, Dark and then you can also create custom ones.
Colour Selections
So lets start with background colours and other areas like this in bootstrap 5.3 will we have some kind of dropdown or selection buttons to change the design view between colour modes (a little like mobile app projects but as there’s more than light and dark might need a drop-down or something) because colours like these for example:
In 5.3 there is now an extra 11 colours bringing us to 22 background colours, on top of this they change depending on the set colour mode.
Would these colours visually change with some kind of design mode colour toggle etc?
Wappler Blocks
Will there be a new set of blocks for Bootstrap 5.3 assuming there might be as the ones for Bootstrap 5.0.2 would have the wrong classes and depreciated classes for example .text-muted is now depreciated in alpha3 and .bg-light and .bg-dark would now want to be .bg-body for better colour mode support.
Theme Manager
Will the theme manager be updated to support colour modes and if so will it be Light and Dark mode only or will we also have the ability to create custom colour modes too?
Extra info
I know this won’t be worked on too much until there is a stable version of Bootstrap 5.3 released as it is currently alpha just me been curious on how it will function when it is
It is indeed a good idea to start discussion about this to come up with more integration ideas as there are indeed so many changes.
Initially we were planning to extend the theme manager to allow global theming based on css variables only. Then you also don’t need to compile anything just saving the css variables in the default site css file.
But there are indeed also many other areas that need integration or adjusting as for the colors, so more ideas and suggestions are very welcome!
In Bootstrap 5.3 all components are styleable with specific css variables. Those can be set and extended on any level you want.
Initially we are planning to present theming choices in the ui grouped per component name and then just generate the values the the root css selectors stored in the site default css styles file
So not fully sure how existing bs 5.3 themes should work but as long as those use global root css variables we should be able to just overwrite those.
Another thing i am thinking about is the actual design view in Node Js because of templating if I set the colour mode on the html tags for example, then when working on a content page you are locked into a certain colour mode in design view (unless you specify the colour mode again on every content page) as the html tags are on the layout page and not rendered I saw a feature request to support this but maybe there is other solutions just noticed this while designing recently.
Actually content pages that are linked to a main page now inherit automatically all the styles from the main page, so everything should be rendered just fine
Ah this is great news I saw a thread about it might be getting supported soon but must have missed the update post that confirmed it, ill be sure to update Wappler and give it a look at
Does this include inline styles and attribues on tags like body or html etc or is it just what’s in the head tags that is inherited?
The way colour mode is specified is data-bs-theme="dark" on the tags like html or body or the tags you want to set the colour mode. It looks like the content page doesn’t recognise the attribute as body is on the layout page maybe I am misunderstanding though?
Here is Bootstrap 5.3 doc example of enabling dark mode:
