Curious about bootstrap 5.3 changes

[Sorry_Duh]

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

[George]

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!

[JonL]

@George

Initially we were planning to extend the theme manager to allow global theming based on css variables only.

CSS variables as being able to import custom themes created outside of Wappler?

So you would be able to handle json based(Current theme manager) and CSS variables?

[George]

@JonL

CSS variables as being able to import custom themes created outside of Wappler?

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.

[Sorry_Duh]

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.

Embed content pages and partials in layouts in internal browser

@George with the new design modes this is now basically a must. Is it feasible without a big redesign on how the internal browser works?

[George]

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

[Sorry_Duh]

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

[Sorry_Duh]

Just updated to latest version

@George

Actually content pages that are linked to a main page now inherit automatically all the styles from the main page

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:

<!doctype html>
<html lang="en" data-bs-theme="dark">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
  </head>
  <body>
    <h1>Hello, world!</h1>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script>
  </body>
</html>

[Teodor]

Dark mode switcher is now available in Wappler:

Using Bootstrap 5.3 Dark Mode

Intro Bootstrap now embraces color modes, introducing the much-awaited dark mode. With version 5.3 you have the flexibility to integrate a custom color mode switcher. Our support extends to both light mode (the default setting) and the newly introduced dark mode. We developed a special Bootstrap Theme Switch component that you can add on your pages and allow users to switch between light, dark or auto mode. Switch Themes We designed a pretty simple page, which includes a navbar, some text co…