Upgrade to Bootstrap 5.3.2

src/OrchardCore.Modules/OrchardCore.Admin/Views/AdminBranding.cshtml

@@ -3,7 +3,7 @@
 
 <a class="ta-navbar-brand" href="@Url.Content("~/" + AdminOptions.Value.AdminUrlPrefix)">
     <div class="d-flex align-items-center">
-        <img src="@Url.Content("~/OrchardCore.Admin/logo.png")" alt="@Site.SiteName" />
+        <img src="@Url.Content("~/OrchardCore.Admin/logo.png")" alt="@Site.SiteName" class="pe-2" />
         <span>@Site.SiteName</span>
     </div>
 </a>

src/OrchardCore.Modules/OrchardCore.AdminDashboard/Assets/scss/dashboard.scss

@@ -1,6 +1,7 @@
 @import '../../node_modules/bootstrap/scss/_functions';
 @import '../../node_modules/bootstrap/scss/_variables';
 @import '../../node_modules/bootstrap/scss/mixins/_breakpoints';
+@import '../../node_modules/bootstrap/scss/mixins/_color-mode';
 
 // Small devices (landscape phones, 576px and up)
 @include media-breakpoint-only(sm) {
@@ -79,7 +80,7 @@
     }
 }
 
-:root[data-theme="default"] {
+@include color-mode(light) {
     & .dashboard-wrapper {
         & .card {
             & .card-header {
@@ -93,7 +94,7 @@
     }
 }
 
-:root[data-theme="darkmode"] {
+@include color-mode(dark) {
     & .dashboard-wrapper {
         & .card {
             & .card-header {

src/OrchardCore.Modules/OrchardCore.AdminDashboard/package.json

@@ -2,6 +2,6 @@
   "name": "orchardcore.admindashboard",
   "version": "1.0.0",
   "dependencies": {
-    "bootstrap": "5.1.3"
+    "bootstrap": "5.3.2"
   }
 }

src/OrchardCore.Modules/OrchardCore.AdminDashboard/wwwroot/Styles/dashboard.css

@@ -58,17 +58,17 @@
   padding-top: 12px;
 }
 
-:root[data-theme=default] .dashboard-wrapper .card .card-header {
+[data-bs-theme=light] .dashboard-wrapper .card .card-header {
   background-color: #fff !important;
 }
-:root[data-theme=default] .dashboard-wrapper .card .card-footer {
+[data-bs-theme=light] .dashboard-wrapper .card .card-footer {
   background-color: #fff !important;
 }
 
-:root[data-theme=darkmode] .dashboard-wrapper .card .card-header {
+[data-bs-theme=dark] .dashboard-wrapper .card .card-header {
   background-color: rgb(24, 26, 27) !important;
 }
-:root[data-theme=darkmode] .dashboard-wrapper .card .card-footer {
+[data-bs-theme=dark] .dashboard-wrapper .card .card-footer {
   background-color: rgb(24, 26, 27) !important;
 }
 

src/OrchardCore.Modules/OrchardCore.AdminMenu/Assets/scss/admin-menu-icon-picker.scss

@@ -1,57 +1,21 @@
-:root[data-theme='default'] {
+@import "fontawesome-iconpicker";
 
-    @import "../../../../OrchardCore.Themes/TheAdmin/Assets/scss/modules/theme/default/_variables.scss";
-    @import "../../node_modules/bootstrap/scss/functions";
-    @import "../../node_modules/bootstrap/scss/variables";
+#iconPickerModal {
 
-    #iconPickerModal {
-
-        .iconpicker-popover.popover {
-            width: 100%;
-            border: none;
-        }
-
-        .iconpicker-items {
-            min-height: 258px;
-        }
-
-        .iconpicker-item {
-            background-color: $body-bg;
-        }
-    }
-
-    .remove-icon, .sample-icon {
-        width: 40px;
+    .iconpicker-item {
+        background-color: var(--bs-body-bg, #fff);
     }
 
-    @import "fontawesome-iconpicker.scss";
-}
-
-:root[data-theme='darkmode'] {
-
-    @import "../../../../OrchardCore.Themes/TheAdmin/Assets/scss/modules/theme/darkmode/_variables.scss";
-    @import "../../node_modules/bootstrap/scss/functions";
-    @import "../../node_modules/bootstrap/scss/variables";
-
-    #iconPickerModal {
-
-        .iconpicker-popover.popover {
-            width: 100%;
-            border: none;
-        }
-
-        .iconpicker-items {
-            min-height: 258px;
-        }
-
-        .iconpicker-item {
-            background-color: $body-bg;
-        }
+    .iconpicker-popover.popover {
+        width: 100%;
+        border: none;
     }
-    
-    .remove-icon, .sample-icon {
-        width: 40px;
+
+    .iconpicker-items {
+        min-height: 258px;
     }
+}
 
-    @import "fontawesome-iconpicker.scss";
+.remove-icon, .sample-icon {
+    width: 40px;
 }

src/OrchardCore.Modules/OrchardCore.AdminMenu/Assets/scss/admin-menu-permission-picker.scss

@@ -1,5 +1,5 @@
 .vue-multiselect .multiselect--active {
-    z-index: 1000; // bootstrap's default for dropdowns
+    z-index: var(--bs-dropdown-zindex, 1000);
 }
 
 [v-cloak] {

src/OrchardCore.Modules/OrchardCore.AdminMenu/Assets/scss/admin-menu.scss

@@ -4,13 +4,11 @@
     -moz-transition: opacity 0.2s 0.2s;
     -webkit-transition: opacity 0.2s 0.2s;
     -o-transition: opacity 0.2s 0.2s;
-    -ms-transition: opacity 0.2s 0.2s;
-    -khtml-transition: opacity 0.2s 0.2s;
 }
 
 .disabled-tree {
     background-color: #f5f5f5;
-    
+
     .tree-name-link {
         color: #808080;
     }
@@ -44,7 +42,6 @@
     }
 }
 
-
 @media only screen and ( min-width: 768px ) {
     .card-columns {
         column-count: 2;
@@ -55,4 +52,4 @@
             }
         }
     }
-}
+}