Multiple Bootstrap 5 Themes Customization

Wappler General Need Help
,
1

I see that in 2020 Wappler team had a plan to enable Multiple Themes customization feature. How about its state now?

I wish to edit Bootstrap 5 dark and light themes for my project in parallel, but do not see a convenient way to edit in one place neither custom SCSS variables directly nor edit them (only default theme available) with the Theme Manager.

If you can advise me how to organize Bootstrap 5 light and dark themes with SCSS directly, I would appreciate.

1 Like
2

There is no need for that when you follow:

If you still want to use SASS, then have a look at this 5-year-old video:

3

Hi, @ben! Thanks for the response. I see that I can add the Theme Manager component and Theme Switch on my page. That's actually great! However, what I can't get is the ability to customize the dark theme similarly as the default one. How can I organize it? In the provided tutorial, I see only the explanation of changing some styles conditionally, but I wish to customize the entire dark theme (background colors, primary color, secondary etc.).

UPD:

Here, I read that since the dark theme is generated by Bootstrap automatically, there is no need for changes. Why? Actually, as a UI/UX developer I would not rush with such a conclusion. It is actually not true, I rarely rely on something automatically generated by any framework.

And if you really want to change some settings you can always use the advanced options in the theme manager.

How can I change the dark theme variables there? I could not find something like: dark theme background.

4

I will be coming with a video tutorial on the subject, but will have to wait until after the festivities.

As a primer, copy and paste this into an HTML document

<!doctype html>
<html lang="en" class="h-100">

<head>
  <base href="/">
  <meta charset="UTF-8">
  <meta name="description" content="Test site for Wappler 7 Beta">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <title>Test Document</title>

  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous" />
  <link rel="stylesheet" href="/bootstrap/5/css/bootstrap.min.css" />
  <link rel="stylesheet" href="/css/style.css" />

  <script src="/dmxAppConnect/dmxAppConnect.js"></script>
  <script src="/dmxAppConnect/dmxRouting/dmxRouting.js" defer></script>
  <script src="/dmxAppConnect/dmxBootstrap5Navigation/dmxBootstrap5Navigation.js" defer></script>
  <script src="/dmxAppConnect/dmxBootstrap5Theme/dmxBootstrap5Theme.js" defer></script>
  <style>
    [data-bs-theme=dark] {
      --bs-body-bg: midnightblue;
    }
  </style>
</head>

<body is="dmx-app" id="main" class="d-flex flex-column h-100">
  <div is="dmx-bs5-theme" id="bs5theme1" theme="dark"></div>
  <nav class="navbar navbar-expand-lg bg-primary-subtle">
    <div class="container">
      <a class="navbar-brand" href="#">Navbar</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#collapse1" aria-controls="collapse1" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div id="collapse1" class="collapse navbar-collapse">
        <div class="navbar-nav w-100 justify-content-end">
          <a class="nav-item nav-link" href="#">Link</a>
          <a class="nav-item nav-link" href="#">Link</a>
          <a class="nav-item nav-link" href="#">Link</a>
          <div class="nav-item" is="dmx-bs5-theme-switch" id="bs5themeswitch1" icons="fa" manager="bs5theme1"></div>
        </div>
      </div>
    </div>
  </nav>
  <main is="dmx-view" id="content" class="flex-grow-1">
    <div class="container mt-4">
      <div class="row justify-content-center">
        <div class="col-8">
          <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cumque illum recusandae hic beatae quod deleniti maxime. <span class="text-danger fw-bold fst-italic">Vero dolore dolorem nobis?</span> Similique provident atque corrupti culpa repellendus. Similique, modi! Doloremque, nihil.</p>
          <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cumque illum recusandae hic beatae quod deleniti maxime. <b>
              <span>This is the text inside the span</span>Similique provident atque corrupti culpa repellendus. </b>Similique, modi! Doloremque, nihil.</p>
        </div>
      </div>
    </div>
  </main>
  <footer class="bg-primary-subtle">
    <div class="container pt-2 pb-2">
      <p class="text-center mb-0"><i class="far fa-copyright"></i>&nbsp;Copyright 2024</p>
    </div>
  </footer>
  <script src="/bootstrap/5/js/bootstrap.bundle.min.js"></script>
</body>

</html>

Result for light mode:

image
image1566×838 18.2 KB

and dark mode:

image
image1566×838 17.6 KB

2 Likes
5

Thanks a lot, @ben! That's the thing I was looking for. My issue was that I was making a silly mistake by placing my dark theme css before the bootstrap.min.css line. Placing my dark-theme.css after the bootstrap.min.css fixed the thing. Now, with the combination of customizable variables from BS5 docs in the way you show, I can adjust everything as needed. Many thanks!

1 Like