UPD: Langht and dark color themes

Author: howbizarre

src/App.vue

@@ -1,3 +1,9 @@
 <template>
   <RouterView />
-</template>
+</template>
+
+<style lang="scss">
+.box {
+  background-color: var(--bs-tertiary-bg);
+}
+</style>

src/components/Heads.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="p-5 mb-4 bg-light rounded-3">
+    <div class="box p-5 mb-4 rounded-3">
         <div class="container-fluid py-5">
             <h1 class="display-5 fw-bold"><slot></slot></h1>
             <p class="col-md-8 fs-4">The point of it all is beyond the grasp of human intelligence. Be humble. Be grateful simply knowing that you, we, all are taking part in this One big story called The Universe. Thankfully, we have the tools to acknowledge that fact in wonder and awe.</p>

src/views/About.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="p-5 mb-4 bg-light rounded-3">
+  <div class="p-5 mb-4 box rounded-3">
       <div class="container-fluid py-5">
           <h1 class="display-5 fw-bold">About ternary operator</h1>
           <p class="col-md-8 fs-4">The conditional (ternary) operator is the only JavaScript operator that takes three operands: a condition followed by a question mark (?), then an expression to execute if the condition is truthy followed by a colon (:), and finally the expression to execute if the condition is falsy. This operator is frequently used as an alternative to an if...else statement.</p>

src/views/Contacts.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="p-5 mb-4 bg-light rounded-3">
+  <div class="p-5 mb-4 box rounded-3">
       <div class="container-fluid py-5">
           <h1 class="display-5 fw-bold">Contact Picker API</h1>
           <p class="col-md-8 fs-4">Access to contacts has long been a feature available within native applications. The Contacts Picker API brings that functionality to web applications.</p>

src/views/Home.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="row align-items-md-stretch">
     <div class="col-md-6 mb-4">
-      <div class="h-100 p-5 text-white bg-dark rounded-3">
+      <div class="h-100 p-5 text-white bg-dark border rounded-3">
         <h2>{{ msg }}</h2>
         <p>Before getting started with Bootstrap’s modal component, be sure to read the following as our menu options have recently changed.</p>
         <ul>
@@ -42,7 +42,7 @@
           <div class="modal-dialog">
             <div class="modal-content">
               <div class="modal-header">
-                <h5 class="modal-title text-dark" id="infoModalLabel">How many clicks you've passed?!</h5>
+                <h5 id="infoModalLabel">How many clicks you've passed?!</h5>
                 <button type="button" class="btn-close" @click="modal.hide()" aria-label="Close"></button>
               </div>
               <div class="modal-body">
@@ -57,7 +57,7 @@
       </div>
     </div>
     <div class="col-md-6 mb-4">
-      <div class="p-5 bg-light border rounded-3 mb-4">
+      <div class="p-5 box border rounded-3 mb-4">
         <h2>Bootstrap Toast</h2>
         <p>Toasts are lightweight notifications designed to mimic the push notifications that have been popularized by mobile and desktop operating systems. They’re built with flexbox, so they’re easy to align and position.</p>
 
@@ -70,11 +70,11 @@
               <small>Some times ago</small>
               <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
             </div>
-            <div class="toast-body bg-light">Hello, world! This is a toast message.</div>
+            <div class="toast-body box">Hello, world! This is a toast message.</div>
           </div>
         </div>
       </div>
-      <div class="p-5 bg-light border rounded-3">
+      <div class="p-5 box border rounded-3">
         <h2>Bootstrap Grid</h2>
         <p>
           Bootstrap’s grid system uses a series of containers, rows, and columns to layout and align content. It’s built with
@@ -99,7 +99,7 @@
           </div>
         </div>
       </div>
-      <div class="p-5 bg-light border rounded-3 mt-4 d-flex justify-content-between">
+      <div class="p-5 box border rounded-3 mt-4 d-flex justify-content-between">
         <i class="bi bi-house-fill"></i>
         <i class="bi bi-boxes"></i>
         <i class="bi bi-car-front-fill"></i>
@@ -129,4 +129,8 @@ onMounted(() => {
   modal.value =  new Modal(infoModal.value);
   toast.value = new Toast(bsToast.value);
 });
-</script>
+</script>
+
+<style lang="scss" scoped>
+#infoModalLabel { color: var(--bs-body-color); }
+</style>