admin-lte 4.0.0-rc7 → 4.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (102) hide show
  1. package/CHANGELOG.md +48 -0
  2. package/README.md +43 -17
  3. package/dist/UI/general.html +303 -126
  4. package/dist/UI/icons.html +303 -126
  5. package/dist/UI/timeline.html +303 -126
  6. package/dist/css/adminlte.css +2798 -1167
  7. package/dist/css/adminlte.css.map +1 -1
  8. package/dist/css/adminlte.min.css +2 -2
  9. package/dist/css/adminlte.min.css.map +1 -1
  10. package/dist/css/adminlte.rtl.css +2798 -1167
  11. package/dist/css/adminlte.rtl.css.map +1 -1
  12. package/dist/css/adminlte.rtl.min.css +2 -2
  13. package/dist/css/adminlte.rtl.min.css.map +1 -1
  14. package/dist/docs/browser-support.html +261 -397
  15. package/dist/docs/color-mode.html +242 -382
  16. package/dist/docs/components/main-header.html +238 -374
  17. package/dist/docs/components/main-sidebar.html +253 -389
  18. package/dist/docs/customization.html +1056 -0
  19. package/dist/docs/deployment.html +1121 -0
  20. package/dist/docs/faq.html +857 -409
  21. package/dist/docs/getting-started.html +967 -0
  22. package/dist/docs/how-to-contribute.html +335 -462
  23. package/dist/docs/index.html +16 -0
  24. package/dist/docs/integrations.html +1207 -0
  25. package/dist/docs/introduction.html +453 -446
  26. package/dist/docs/javascript/accessibility.html +361 -491
  27. package/dist/docs/javascript/card-widget.html +446 -450
  28. package/dist/docs/javascript/direct-chat.html +324 -421
  29. package/dist/docs/javascript/fullscreen.html +348 -416
  30. package/dist/docs/javascript/layout.html +345 -436
  31. package/dist/docs/javascript/plugins-overview.html +1120 -0
  32. package/dist/docs/javascript/pushmenu.html +485 -492
  33. package/dist/docs/javascript/treeview.html +466 -400
  34. package/dist/docs/layout-blueprint.html +1063 -0
  35. package/dist/docs/layout.html +287 -415
  36. package/dist/docs/license.html +252 -387
  37. package/dist/docs/migration.html +1125 -0
  38. package/dist/docs/recipes.html +1161 -0
  39. package/dist/docs/rtl.html +933 -0
  40. package/dist/examples/lockscreen.html +65 -1
  41. package/dist/examples/login-v2.html +65 -1
  42. package/dist/examples/login.html +65 -1
  43. package/dist/examples/register-v2.html +65 -1
  44. package/dist/examples/register.html +65 -1
  45. package/dist/forms/{general.html → elements.html} +489 -463
  46. package/dist/forms/layout.html +1243 -0
  47. package/dist/forms/validation.html +1251 -0
  48. package/dist/forms/wizard.html +1386 -0
  49. package/dist/generate/theme.html +134 -4
  50. package/dist/index.html +303 -126
  51. package/dist/index2.html +306 -126
  52. package/dist/index3.html +303 -126
  53. package/dist/js/adminlte.js +5 -5
  54. package/dist/js/adminlte.js.map +1 -1
  55. package/dist/js/adminlte.min.js +2 -2
  56. package/dist/js/adminlte.min.js.map +1 -1
  57. package/dist/layout/collapsed-sidebar-without-hover.html +303 -126
  58. package/dist/layout/collapsed-sidebar.html +303 -126
  59. package/dist/layout/fixed-complete.html +303 -126
  60. package/dist/layout/fixed-footer.html +303 -126
  61. package/dist/layout/fixed-header.html +303 -126
  62. package/dist/layout/fixed-sidebar.html +303 -126
  63. package/dist/layout/layout-custom-area.html +303 -126
  64. package/dist/layout/layout-rtl.html +303 -126
  65. package/dist/layout/logo-switch.html +134 -4
  66. package/dist/layout/sidebar-mini.html +303 -126
  67. package/dist/layout/unfixed-sidebar.html +303 -126
  68. package/dist/mailbox/compose.html +1127 -0
  69. package/dist/mailbox/inbox.html +1477 -0
  70. package/dist/mailbox/read.html +1178 -0
  71. package/dist/pages/404.html +213 -0
  72. package/dist/pages/500.html +201 -0
  73. package/dist/pages/calendar.html +1242 -0
  74. package/dist/pages/chat.html +1403 -0
  75. package/dist/pages/faq.html +1359 -0
  76. package/dist/pages/file-manager.html +1811 -0
  77. package/dist/pages/invoice.html +1175 -0
  78. package/dist/pages/kanban.html +1415 -0
  79. package/dist/pages/maintenance.html +204 -0
  80. package/dist/pages/pricing.html +1255 -0
  81. package/dist/pages/profile.html +1358 -0
  82. package/dist/pages/projects.html +1620 -0
  83. package/dist/pages/settings.html +1363 -0
  84. package/dist/tables/data.html +1295 -0
  85. package/dist/tables/simple.html +303 -126
  86. package/dist/widgets/cards.html +303 -126
  87. package/dist/widgets/info-box.html +303 -126
  88. package/dist/widgets/small-box.html +303 -126
  89. package/netlify.toml +16 -0
  90. package/package.json +29 -23
  91. package/src/scss/_app-header.scss +27 -0
  92. package/src/scss/_app-sidebar.scss +24 -30
  93. package/src/scss/_bootstrap-variables.scss +11 -4
  94. package/src/scss/_docs.scss +816 -0
  95. package/src/scss/_table.scss +4 -4
  96. package/src/scss/adminlte.scss +4 -1
  97. package/src/ts/adminlte.ts +1 -1
  98. package/src/ts/fullscreen.ts +8 -4
  99. package/src/ts/push-menu.ts +66 -5
  100. package/.claude/settings.local.json +0 -37
  101. package/CLAUDE.md +0 -79
  102. package/release.md +0 -75
package/dist/forms/{general.html → elements.html} RENAMED
@@ -1,9 +1,8 @@
1
1
  <!doctype html>
2
2
  <html lang="en">
3
- <!--begin::Head-->
4
3
  <head>
5
4
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
6
- <title>AdminLTE 4 | General Form Elements</title>
5
+ <title>AdminLTE 4 | Form Elements</title>
7
6
 
8
7
  <!--begin::Accessibility Meta Tags-->
9
8
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
@@ -13,7 +12,7 @@
13
12
  <!--end::Accessibility Meta Tags-->
14
13
 
15
14
  <!--begin::Primary Meta Tags-->
16
- <meta name="title" content="AdminLTE 4 | General Form Elements" />
15
+ <meta name="title" content="AdminLTE 4 | Form Elements" />
17
16
  <meta name="author" content="ColorlibHQ" />
18
17
  <meta
19
18
  name="description"
@@ -62,10 +61,7 @@
62
61
  <link rel="stylesheet" href="../css/adminlte.css" />
63
62
  <!--end::Required Plugin(AdminLTE)-->
64
63
  </head>
65
- <!--end::Head-->
66
- <!--begin::Body-->
67
64
  <body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
68
- <!--begin::App Wrapper-->
69
65
  <div class="app-wrapper">
70
66
  <!--begin::Header-->
71
67
  <nav class="app-header navbar navbar-expand bg-body">
@@ -78,11 +74,18 @@
78
74
  <i class="bi bi-list"></i>
79
75
  </a>
80
76
  </li>
77
+
81
78
  <li class="nav-item d-none d-md-block">
82
- <a href="#" class="nav-link">Home</a>
79
+ <a href="../index.html" class="nav-link">
80
+ <i class="bi bi-grid-1x2 me-1" aria-hidden="true"></i>
81
+ Live preview
82
+ </a>
83
83
  </li>
84
84
  <li class="nav-item d-none d-md-block">
85
- <a href="#" class="nav-link">Contact</a>
85
+ <a href="../docs/introduction.html" class="nav-link">
86
+ <i class="bi bi-book me-1" aria-hidden="true"></i>
87
+ Documentation
88
+ </a>
86
89
  </li>
87
90
  </ul>
88
91
  <!--end::Start Navbar Links-->
@@ -220,11 +223,70 @@
220
223
  <li class="nav-item">
221
224
  <a class="nav-link" href="#" data-lte-toggle="fullscreen">
222
225
  <i data-lte-icon="maximize" class="bi bi-arrows-fullscreen"></i>
223
- <i data-lte-icon="minimize" class="bi bi-fullscreen-exit" style="display: none"></i>
226
+ <i data-lte-icon="minimize" class="bi bi-fullscreen-exit d-none"></i>
224
227
  </a>
225
228
  </li>
226
229
  <!--end::Fullscreen Toggle-->
227
230
 
231
+ <!--begin::Color Mode Toggle (#6010)-->
232
+ <li class="nav-item dropdown">
233
+ <a
234
+ class="nav-link"
235
+ href="#"
236
+ id="bd-theme"
237
+ aria-label="Toggle color scheme"
238
+ data-bs-toggle="dropdown"
239
+ aria-expanded="false"
240
+ >
241
+ <i class="bi bi-sun-fill" data-lte-theme-icon="light"></i>
242
+ <i class="bi bi-moon-fill d-none" data-lte-theme-icon="dark"></i>
243
+ <i class="bi bi-circle-half d-none" data-lte-theme-icon="auto"></i>
244
+ </a>
245
+ <ul
246
+ class="dropdown-menu dropdown-menu-end"
247
+ aria-labelledby="bd-theme"
248
+ style="--bs-dropdown-min-width: 8rem"
249
+ >
250
+ <li>
251
+ <button
252
+ type="button"
253
+ class="dropdown-item d-flex align-items-center"
254
+ data-bs-theme-value="light"
255
+ aria-pressed="false"
256
+ >
257
+ <i class="bi bi-sun-fill me-2"></i>
258
+ Light
259
+ <i class="bi bi-check-lg ms-auto d-none"></i>
260
+ </button>
261
+ </li>
262
+ <li>
263
+ <button
264
+ type="button"
265
+ class="dropdown-item d-flex align-items-center"
266
+ data-bs-theme-value="dark"
267
+ aria-pressed="false"
268
+ >
269
+ <i class="bi bi-moon-fill me-2"></i>
270
+ Dark
271
+ <i class="bi bi-check-lg ms-auto d-none"></i>
272
+ </button>
273
+ </li>
274
+ <li>
275
+ <button
276
+ type="button"
277
+ class="dropdown-item d-flex align-items-center active"
278
+ data-bs-theme-value="auto"
279
+ aria-pressed="true"
280
+ >
281
+ <i class="bi bi-circle-half me-2"></i>
282
+ Auto
283
+ <i class="bi bi-check-lg ms-auto d-none"></i>
284
+ </button>
285
+ </li>
286
+ </ul>
287
+ </li>
288
+ <!--end::Color Mode Toggle-->
289
+
228
290
  <!--begin::User Menu Dropdown-->
229
291
  <li class="nav-item dropdown user-menu">
230
292
  <a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">
@@ -465,7 +527,7 @@
465
527
  </a>
466
528
  <ul class="nav nav-treeview">
467
529
  <li class="nav-item">
468
- <a href="../UI/general.html" class="nav-link active">
530
+ <a href="../UI/general.html" class="nav-link">
469
531
  <i class="nav-icon bi bi-circle"></i>
470
532
  <p>General</p>
471
533
  </a>
@@ -484,6 +546,36 @@
484
546
  </li>
485
547
  </ul>
486
548
  </li>
549
+ <li class="nav-item">
550
+ <a href="#" class="nav-link">
551
+ <i class="nav-icon bi bi-envelope"></i>
552
+ <p>
553
+ Mailbox
554
+ <i class="nav-arrow bi bi-chevron-right"></i>
555
+ </p>
556
+ </a>
557
+ <ul class="nav nav-treeview">
558
+ <li class="nav-item">
559
+ <a href="../mailbox/inbox.html" class="nav-link">
560
+ <i class="nav-icon bi bi-circle"></i>
561
+ <p>Inbox</p>
562
+ </a>
563
+ </li>
564
+ <li class="nav-item">
565
+ <a href="../mailbox/read.html" class="nav-link">
566
+ <i class="nav-icon bi bi-circle"></i>
567
+ <p>Read Message</p>
568
+ </a>
569
+ </li>
570
+ <li class="nav-item">
571
+ <a href="../mailbox/compose.html" class="nav-link">
572
+ <i class="nav-icon bi bi-circle"></i>
573
+ <p>Compose</p>
574
+ </a>
575
+ </li>
576
+ </ul>
577
+ </li>
578
+
487
579
  <li class="nav-item menu-open">
488
580
  <a href="#" class="nav-link active">
489
581
  <i class="nav-icon bi bi-pencil-square"></i>
@@ -494,9 +586,27 @@
494
586
  </a>
495
587
  <ul class="nav nav-treeview">
496
588
  <li class="nav-item">
497
- <a href="../forms/general.html" class="nav-link active">
589
+ <a href="../forms/elements.html" class="nav-link active">
590
+ <i class="nav-icon bi bi-circle"></i>
591
+ <p>Elements</p>
592
+ </a>
593
+ </li>
594
+ <li class="nav-item">
595
+ <a href="../forms/layout.html" class="nav-link">
596
+ <i class="nav-icon bi bi-circle"></i>
597
+ <p>Layout</p>
598
+ </a>
599
+ </li>
600
+ <li class="nav-item">
601
+ <a href="../forms/validation.html" class="nav-link">
498
602
  <i class="nav-icon bi bi-circle"></i>
499
- <p>General Elements</p>
603
+ <p>Validation</p>
604
+ </a>
605
+ </li>
606
+ <li class="nav-item">
607
+ <a href="../forms/wizard.html" class="nav-link">
608
+ <i class="nav-icon bi bi-circle"></i>
609
+ <p>Wizard</p>
500
610
  </a>
501
611
  </li>
502
612
  </ul>
@@ -516,6 +626,114 @@
516
626
  <p>Simple Tables</p>
517
627
  </a>
518
628
  </li>
629
+ <li class="nav-item">
630
+ <a href="../tables/data.html" class="nav-link">
631
+ <i class="nav-icon bi bi-circle"></i>
632
+ <p>Data Tables</p>
633
+ </a>
634
+ </li>
635
+ </ul>
636
+ </li>
637
+
638
+ <li class="nav-header">PAGES</li>
639
+ <li class="nav-item">
640
+ <a href="#" class="nav-link">
641
+ <i class="nav-icon bi bi-file-earmark-text"></i>
642
+ <p>
643
+ Pages
644
+ <i class="nav-arrow bi bi-chevron-right"></i>
645
+ </p>
646
+ </a>
647
+ <ul class="nav nav-treeview">
648
+ <li class="nav-item">
649
+ <a href="../pages/profile.html" class="nav-link">
650
+ <i class="nav-icon bi bi-circle"></i>
651
+ <p>Profile</p>
652
+ </a>
653
+ </li>
654
+ <li class="nav-item">
655
+ <a href="../pages/settings.html" class="nav-link">
656
+ <i class="nav-icon bi bi-circle"></i>
657
+ <p>Settings</p>
658
+ </a>
659
+ </li>
660
+ <li class="nav-item">
661
+ <a href="../pages/invoice.html" class="nav-link">
662
+ <i class="nav-icon bi bi-circle"></i>
663
+ <p>Invoice</p>
664
+ </a>
665
+ </li>
666
+ <li class="nav-item">
667
+ <a href="../pages/calendar.html" class="nav-link">
668
+ <i class="nav-icon bi bi-circle"></i>
669
+ <p>Calendar</p>
670
+ </a>
671
+ </li>
672
+ <li class="nav-item">
673
+ <a href="../pages/kanban.html" class="nav-link">
674
+ <i class="nav-icon bi bi-circle"></i>
675
+ <p>Kanban</p>
676
+ </a>
677
+ </li>
678
+ <li class="nav-item">
679
+ <a href="../pages/chat.html" class="nav-link">
680
+ <i class="nav-icon bi bi-circle"></i>
681
+ <p>Chat</p>
682
+ </a>
683
+ </li>
684
+ <li class="nav-item">
685
+ <a href="../pages/file-manager.html" class="nav-link">
686
+ <i class="nav-icon bi bi-circle"></i>
687
+ <p>File Manager</p>
688
+ </a>
689
+ </li>
690
+ <li class="nav-item">
691
+ <a href="../pages/projects.html" class="nav-link">
692
+ <i class="nav-icon bi bi-circle"></i>
693
+ <p>Projects</p>
694
+ </a>
695
+ </li>
696
+ <li class="nav-item">
697
+ <a href="../pages/pricing.html" class="nav-link">
698
+ <i class="nav-icon bi bi-circle"></i>
699
+ <p>Pricing</p>
700
+ </a>
701
+ </li>
702
+ <li class="nav-item">
703
+ <a href="../pages/faq.html" class="nav-link">
704
+ <i class="nav-icon bi bi-circle"></i>
705
+ <p>FAQ</p>
706
+ </a>
707
+ </li>
708
+ <li class="nav-item">
709
+ <a href="#" class="nav-link">
710
+ <i class="nav-icon bi bi-circle"></i>
711
+ <p>
712
+ Error
713
+ <i class="nav-arrow bi bi-chevron-right"></i>
714
+ </p>
715
+ </a>
716
+ <ul class="nav nav-treeview">
717
+ <li class="nav-item">
718
+ <a href="../pages/404.html" class="nav-link">
719
+ <i class="nav-icon bi bi-circle"></i>
720
+ <p>404</p>
721
+ </a>
722
+ </li>
723
+ <li class="nav-item">
724
+ <a href="../pages/500.html" class="nav-link">
725
+ <i class="nav-icon bi bi-circle"></i>
726
+ <p>500</p>
727
+ </a>
728
+ </li>
729
+ <li class="nav-item">
730
+ <a href="../pages/maintenance.html" class="nav-link">
731
+ <i class="nav-icon bi bi-circle"></i>
732
+ <p>Maintenance</p>
733
+ </a>
734
+ </li>
735
+ </ul>
736
+ </li>
519
737
  </ul>
520
738
  </li>
521
739
 
@@ -584,126 +802,6 @@
584
802
  </ul>
585
803
  </li>
586
804
 
587
- <li class="nav-header">DOCUMENTATIONS</li>
588
- <li class="nav-item">
589
- <a href="../docs/introduction.html" class="nav-link">
590
- <i class="nav-icon bi bi-download"></i>
591
- <p>Installation</p>
592
- </a>
593
- </li>
594
- <li class="nav-item">
595
- <a href="../docs/layout.html" class="nav-link">
596
- <i class="nav-icon bi bi-grip-horizontal"></i>
597
- <p>Layout</p>
598
- </a>
599
- </li>
600
- <li class="nav-item">
601
- <a href="../docs/color-mode.html" class="nav-link">
602
- <i class="nav-icon bi bi-star-half"></i>
603
- <p>Color Mode</p>
604
- </a>
605
- </li>
606
- <li class="nav-item">
607
- <a href="#" class="nav-link">
608
- <i class="nav-icon bi bi-ui-checks-grid"></i>
609
- <p>
610
- Components
611
- <i class="nav-arrow bi bi-chevron-right"></i>
612
- </p>
613
- </a>
614
- <ul class="nav nav-treeview">
615
- <li class="nav-item">
616
- <a href="../docs/components/main-header.html" class="nav-link">
617
- <i class="nav-icon bi bi-circle"></i>
618
- <p>Main Header</p>
619
- </a>
620
- </li>
621
- <li class="nav-item">
622
- <a href="../docs/components/main-sidebar.html" class="nav-link">
623
- <i class="nav-icon bi bi-circle"></i>
624
- <p>Main Sidebar</p>
625
- </a>
626
- </li>
627
- </ul>
628
- </li>
629
- <li class="nav-item">
630
- <a href="#" class="nav-link">
631
- <i class="nav-icon bi bi-filetype-js"></i>
632
- <p>
633
- Javascript
634
- <i class="nav-arrow bi bi-chevron-right"></i>
635
- </p>
636
- </a>
637
- <ul class="nav nav-treeview">
638
- <li class="nav-item">
639
- <a href="../docs/javascript/layout.html" class="nav-link">
640
- <i class="nav-icon bi bi-circle"></i>
641
- <p>Layout</p>
642
- </a>
643
- </li>
644
- <li class="nav-item">
645
- <a href="../docs/javascript/pushmenu.html" class="nav-link">
646
- <i class="nav-icon bi bi-circle"></i>
647
- <p>PushMenu</p>
648
- </a>
649
- </li>
650
- <li class="nav-item">
651
- <a href="../docs/javascript/treeview.html" class="nav-link">
652
- <i class="nav-icon bi bi-circle"></i>
653
- <p>Treeview</p>
654
- </a>
655
- </li>
656
- <li class="nav-item">
657
- <a href="../docs/javascript/card-widget.html" class="nav-link">
658
- <i class="nav-icon bi bi-circle"></i>
659
- <p>Card Widget</p>
660
- </a>
661
- </li>
662
- <li class="nav-item">
663
- <a href="../docs/javascript/direct-chat.html" class="nav-link">
664
- <i class="nav-icon bi bi-circle"></i>
665
- <p>Direct Chat</p>
666
- </a>
667
- </li>
668
- <li class="nav-item">
669
- <a href="../docs/javascript/fullscreen.html" class="nav-link">
670
- <i class="nav-icon bi bi-circle"></i>
671
- <p>Fullscreen</p>
672
- </a>
673
- </li>
674
- <li class="nav-item">
675
- <a href="../docs/javascript/accessibility.html" class="nav-link">
676
- <i class="nav-icon bi bi-circle"></i>
677
- <p>Accessibility</p>
678
- </a>
679
- </li>
680
- </ul>
681
- </li>
682
- <li class="nav-item">
683
- <a href="../docs/browser-support.html" class="nav-link">
684
- <i class="nav-icon bi bi-browser-edge"></i>
685
- <p>Browser Support</p>
686
- </a>
687
- </li>
688
- <li class="nav-item">
689
- <a href="../docs/how-to-contribute.html" class="nav-link">
690
- <i class="nav-icon bi bi-hand-thumbs-up-fill"></i>
691
- <p>How To Contribute</p>
692
- </a>
693
- </li>
694
- <li class="nav-item">
695
- <a href="../docs/faq.html" class="nav-link">
696
- <i class="nav-icon bi bi-question-circle-fill"></i>
697
- <p>FAQ</p>
698
- </a>
699
- </li>
700
- <li class="nav-item">
701
- <a href="../docs/license.html" class="nav-link">
702
- <i class="nav-icon bi bi-patch-check-fill"></i>
703
- <p>License</p>
704
- </a>
705
- </li>
706
-
707
805
  <li class="nav-header">MULTI LEVEL EXAMPLE</li>
708
806
  <li class="nav-item">
709
807
  <a href="#" class="nav-link">
@@ -791,67 +889,62 @@
791
889
  </li>
792
890
  </ul>
793
891
  <!--end::Sidebar Menu-->
892
+
893
+ <!-- Docs CTA (bottom of sidebar) -->
894
+ <div class="p-3 mt-3 border-top border-secondary border-opacity-25">
895
+ <a
896
+ href="../docs/introduction.html"
897
+ class="btn btn-sm btn-outline-light w-100 d-flex align-items-center justify-content-center gap-2"
898
+ >
899
+ <i class="bi bi-book" aria-hidden="true"></i>
900
+ View documentation
901
+ </a>
902
+ </div>
794
903
  </nav>
795
904
  </div>
796
905
  <!--end::Sidebar Wrapper-->
797
906
  </aside>
798
907
  <!--end::Sidebar-->
799
- <!--begin::App Main-->
800
908
  <main class="app-main">
801
- <!--begin::App Content Header-->
802
909
  <div class="app-content-header">
803
- <!--begin::Container-->
804
910
  <div class="container-fluid">
805
- <!--begin::Row-->
806
911
  <div class="row">
807
912
  <div class="col-sm-6">
808
- <h3 class="mb-0">General Form</h3>
913
+ <h3 class="mb-0">Form Elements</h3>
809
914
  </div>
810
915
  <div class="col-sm-6">
811
916
  <ol class="breadcrumb float-sm-end">
812
917
  <li class="breadcrumb-item"><a href="#">Home</a></li>
813
- <li class="breadcrumb-item active" aria-current="page">General Form</li>
918
+ <li class="breadcrumb-item"><a href="#">Forms</a></li>
919
+ <li class="breadcrumb-item active" aria-current="page">Elements</li>
814
920
  </ol>
815
921
  </div>
816
922
  </div>
817
- <!--end::Row-->
818
923
  </div>
819
- <!--end::Container-->
820
924
  </div>
821
- <!--end::App Content Header-->
822
- <!--begin::App Content-->
823
925
  <div class="app-content">
824
- <!--begin::Container-->
825
926
  <div class="container-fluid">
826
- <!--begin::Row-->
827
927
  <div class="row g-4">
828
- <!--begin::Col-->
829
928
  <div class="col-12">
830
929
  <div class="callout callout-info">
831
- For detailed documentation of Form visit
930
+ For detailed documentation visit
832
931
  <a
833
932
  href="https://getbootstrap.com/docs/5.3/forms/overview/"
834
933
  target="_blank"
835
934
  rel="noopener noreferrer"
836
935
  class="callout-link"
837
- >
838
- Bootstrap Form
839
- </a>
936
+ >Bootstrap Forms</a
937
+ >.
840
938
  </div>
841
939
  </div>
842
- <!--end::Col-->
843
- <!--begin::Col-->
940
+
941
+ <!-- Quick Example -->
844
942
  <div class="col-md-6">
845
- <!--begin::Quick Example-->
846
943
  <div class="card card-primary card-outline mb-4">
847
- <!--begin::Header-->
848
944
  <div class="card-header">
849
945
  <div class="card-title">Quick Example</div>
850
946
  </div>
851
- <!--end::Header-->
852
- <!--begin::Form-->
853
947
  <form>
854
- <!--begin::Body-->
855
948
  <div class="card-body">
856
949
  <div class="mb-3">
857
950
  <label for="exampleInputEmail1" class="form-label">Email address</label>
@@ -878,24 +971,19 @@
878
971
  <label class="form-check-label" for="exampleCheck1">Check me out</label>
879
972
  </div>
880
973
  </div>
881
- <!--end::Body-->
882
- <!--begin::Footer-->
883
974
  <div class="card-footer">
884
975
  <button type="submit" class="btn btn-primary">Submit</button>
885
976
  </div>
886
- <!--end::Footer-->
887
977
  </form>
888
- <!--end::Form-->
889
978
  </div>
890
- <!--end::Quick Example-->
891
- <!--begin::Input Group-->
979
+ </div>
980
+
981
+ <!-- Input Group -->
982
+ <div class="col-md-6">
892
983
  <div class="card card-success card-outline mb-4">
893
- <!--begin::Header-->
894
984
  <div class="card-header">
895
985
  <div class="card-title">Input Group</div>
896
986
  </div>
897
- <!--end::Header-->
898
- <!--begin::Body-->
899
987
  <div class="card-body">
900
988
  <div class="input-group mb-3">
901
989
  <span class="input-group-text" id="basic-addon1">@</span>
@@ -907,7 +995,6 @@
907
995
  aria-describedby="basic-addon1"
908
996
  />
909
997
  </div>
910
-
911
998
  <div class="input-group mb-3">
912
999
  <input
913
1000
  type="text"
@@ -918,7 +1005,6 @@
918
1005
  />
919
1006
  <span class="input-group-text" id="basic-addon2">@example.com</span>
920
1007
  </div>
921
-
922
1008
  <div class="mb-3">
923
1009
  <label for="basic-url" class="form-label">Your vanity URL</label>
924
1010
  <div class="input-group">
@@ -936,7 +1022,6 @@
936
1022
  Example help text goes outside the input group.
937
1023
  </div>
938
1024
  </div>
939
-
940
1025
  <div class="input-group mb-3">
941
1026
  <span class="input-group-text">$</span>
942
1027
  <input
@@ -946,7 +1031,6 @@
946
1031
  />
947
1032
  <span class="input-group-text">.00</span>
948
1033
  </div>
949
-
950
1034
  <div class="input-group mb-3">
951
1035
  <input
952
1036
  type="text"
@@ -962,329 +1046,211 @@
962
1046
  aria-label="Server"
963
1047
  />
964
1048
  </div>
965
-
966
1049
  <div class="input-group">
967
1050
  <span class="input-group-text">With textarea</span>
968
1051
  <textarea class="form-control" aria-label="With textarea"></textarea>
969
1052
  </div>
970
1053
  </div>
971
- <!--end::Body-->
972
- <!--begin::Footer-->
973
- <div class="card-footer">
974
- <button type="submit" class="btn btn-success">Submit</button>
975
- </div>
976
- <!--end::Footer-->
977
1054
  </div>
978
- <!--end::Input Group-->
979
- <!--begin::Horizontal Form-->
980
- <div class="card card-warning card-outline mb-4">
981
- <!--begin::Header-->
1055
+ </div>
1056
+
1057
+ <!-- Checks & Radios -->
1058
+ <div class="col-md-6">
1059
+ <div class="card card-info card-outline mb-4">
982
1060
  <div class="card-header">
983
- <div class="card-title">Horizontal Form</div>
1061
+ <div class="card-title">Checks &amp; Radios</div>
984
1062
  </div>
985
- <!--end::Header-->
986
- <!--begin::Form-->
987
- <form>
988
- <!--begin::Body-->
989
- <div class="card-body">
990
- <div class="row mb-3">
991
- <label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
992
- <div class="col-sm-10">
993
- <input type="email" class="form-control" id="inputEmail3" />
994
- </div>
995
- </div>
996
- <div class="row mb-3">
997
- <label for="inputPassword3" class="col-sm-2 col-form-label">Password</label>
998
- <div class="col-sm-10">
999
- <input type="password" class="form-control" id="inputPassword3" />
1000
- </div>
1001
- </div>
1002
- <fieldset class="row mb-3">
1003
- <legend class="col-form-label col-sm-2 pt-0">Radios</legend>
1004
- <div class="col-sm-10">
1005
- <div class="form-check">
1006
- <input
1007
- class="form-check-input"
1008
- type="radio"
1009
- name="gridRadios"
1010
- id="gridRadios1"
1011
- value="option1"
1012
- checked
1013
- />
1014
- <label class="form-check-label" for="gridRadios1"> First radio </label>
1015
- </div>
1016
- <div class="form-check">
1017
- <input
1018
- class="form-check-input"
1019
- type="radio"
1020
- name="gridRadios"
1021
- id="gridRadios2"
1022
- value="option2"
1023
- />
1024
- <label class="form-check-label" for="gridRadios2"> Second radio </label>
1025
- </div>
1026
- <div class="form-check disabled">
1027
- <input
1028
- class="form-check-input"
1029
- type="radio"
1030
- name="gridRadios"
1031
- id="gridRadios3"
1032
- value="option3"
1033
- disabled
1034
- />
1035
- <label class="form-check-label" for="gridRadios3">
1036
- Third disabled radio
1037
- </label>
1038
- </div>
1039
- </div>
1040
- </fieldset>
1041
- <div class="row mb-3">
1042
- <div class="col-sm-10 offset-sm-2">
1043
- <div class="form-check">
1044
- <input class="form-check-input" type="checkbox" id="gridCheck1" />
1045
- <label class="form-check-label" for="gridCheck1">
1046
- Example checkbox
1047
- </label>
1048
- </div>
1049
- </div>
1050
- </div>
1063
+ <div class="card-body">
1064
+ <h6 class="text-secondary small text-uppercase mb-2">Checkboxes</h6>
1065
+ <div class="form-check mb-3">
1066
+ <input class="form-check-input" type="checkbox" id="check-default" />
1067
+ <label class="form-check-label" for="check-default">Default</label>
1051
1068
  </div>
1052
- <!--end::Body-->
1053
- <!--begin::Footer-->
1054
- <div class="card-footer">
1055
- <button type="submit" class="btn btn-warning">Sign in</button>
1056
- <button type="submit" class="btn float-end">Cancel</button>
1069
+ <div class="form-check mb-3">
1070
+ <input class="form-check-input" type="checkbox" id="check-checked" checked />
1071
+ <label class="form-check-label" for="check-checked">Pre-checked</label>
1057
1072
  </div>
1058
- <!--end::Footer-->
1059
- </form>
1060
- <!--end::Form-->
1073
+ <div class="form-check mb-3">
1074
+ <input
1075
+ class="form-check-input"
1076
+ type="checkbox"
1077
+ id="check-disabled"
1078
+ disabled
1079
+ />
1080
+ <label class="form-check-label" for="check-disabled">Disabled</label>
1081
+ </div>
1082
+
1083
+ <h6 class="text-secondary small text-uppercase mb-2 mt-3">Radios</h6>
1084
+ <div class="form-check mb-2">
1085
+ <input
1086
+ class="form-check-input"
1087
+ type="radio"
1088
+ name="radioGroup"
1089
+ id="radio-1"
1090
+ checked
1091
+ />
1092
+ <label class="form-check-label" for="radio-1">Option one</label>
1093
+ </div>
1094
+ <div class="form-check mb-3">
1095
+ <input class="form-check-input" type="radio" name="radioGroup" id="radio-2" />
1096
+ <label class="form-check-label" for="radio-2">Option two</label>
1097
+ </div>
1098
+
1099
+ <h6 class="text-secondary small text-uppercase mb-2 mt-3">Switches</h6>
1100
+ <div class="form-check form-switch mb-2">
1101
+ <input class="form-check-input" type="checkbox" role="switch" id="switch-1" />
1102
+ <label class="form-check-label" for="switch-1">Notifications</label>
1103
+ </div>
1104
+ <div class="form-check form-switch">
1105
+ <input
1106
+ class="form-check-input"
1107
+ type="checkbox"
1108
+ role="switch"
1109
+ id="switch-2"
1110
+ checked
1111
+ />
1112
+ <label class="form-check-label" for="switch-2">Auto-save</label>
1113
+ </div>
1114
+ </div>
1061
1115
  </div>
1062
- <!--end::Horizontal Form-->
1063
1116
  </div>
1064
- <!--end::Col-->
1065
- <!--begin::Col-->
1117
+
1118
+ <!-- Select / Range / File -->
1066
1119
  <div class="col-md-6">
1067
- <!--begin::Different Height-->
1068
- <div class="card card-secondary card-outline mb-4">
1069
- <!--begin::Header-->
1120
+ <div class="card card-warning card-outline mb-4">
1070
1121
  <div class="card-header">
1071
- <div class="card-title">Different Height</div>
1122
+ <div class="card-title">Selects, Ranges &amp; File</div>
1072
1123
  </div>
1073
- <!--end::Header-->
1074
- <!--begin::Body-->
1075
1124
  <div class="card-body">
1076
- <input
1077
- class="form-control form-control-lg"
1078
- type="text"
1079
- placeholder=".form-control-lg"
1080
- aria-label=".form-control-lg example"
1081
- />
1082
- <br />
1083
- <input
1084
- class="form-control"
1085
- type="text"
1086
- placeholder="Default input"
1087
- aria-label="default input example"
1088
- />
1089
- <br />
1090
- <input
1091
- class="form-control form-control-sm"
1092
- type="text"
1093
- placeholder=".form-control-sm"
1094
- aria-label=".form-control-sm example"
1095
- />
1125
+ <div class="mb-3">
1126
+ <label class="form-label" for="select-default">Select</label>
1127
+ <select class="form-select" id="select-default">
1128
+ <option selected>Open this select menu</option>
1129
+ <option>One</option>
1130
+ <option>Two</option>
1131
+ <option>Three</option>
1132
+ </select>
1133
+ </div>
1134
+ <div class="mb-3">
1135
+ <label class="form-label" for="select-multiple">Multi-select</label>
1136
+ <select class="form-select" id="select-multiple" multiple size="3">
1137
+ <option>Apple</option>
1138
+ <option selected>Orange</option>
1139
+ <option>Pear</option>
1140
+ <option>Mango</option>
1141
+ </select>
1142
+ </div>
1143
+ <div class="mb-3">
1144
+ <label class="form-label" for="range-1">Range</label>
1145
+ <input
1146
+ type="range"
1147
+ class="form-range"
1148
+ id="range-1"
1149
+ min="0"
1150
+ max="100"
1151
+ value="35"
1152
+ />
1153
+ </div>
1154
+ <div class="mb-3">
1155
+ <label class="form-label" for="form-file-multi">Multiple files</label>
1156
+ <input class="form-control" type="file" id="form-file-multi" multiple />
1157
+ </div>
1158
+ <div>
1159
+ <label class="form-label" for="form-color">Color</label>
1160
+ <input
1161
+ type="color"
1162
+ class="form-control form-control-color"
1163
+ id="form-color"
1164
+ value="#0d6efd"
1165
+ title="Choose your color"
1166
+ />
1167
+ </div>
1096
1168
  </div>
1097
- <!--end::Body-->
1098
1169
  </div>
1099
- <!--end::Different Height-->
1100
- <!--begin::Different Width-->
1101
- <div class="card card-danger card-outline mb-4">
1102
- <!--begin::Header-->
1170
+ </div>
1171
+
1172
+ <!-- Floating labels -->
1173
+ <div class="col-md-6">
1174
+ <div class="card card-secondary card-outline mb-4">
1103
1175
  <div class="card-header">
1104
- <div class="card-title">Different Width</div>
1176
+ <div class="card-title">Floating Labels</div>
1105
1177
  </div>
1106
- <!--end::Header-->
1107
- <!--begin::Body-->
1108
1178
  <div class="card-body">
1109
- <!--begin::Row-->
1110
- <div class="row">
1111
- <!--begin::Col-->
1112
- <div class="col-3">
1113
- <input type="text" class="form-control" placeholder=".col-3" />
1114
- </div>
1115
- <!--end::Col-->
1116
- <!--begin::Col-->
1117
- <div class="col-4">
1118
- <input type="text" class="form-control" placeholder=".col-4" />
1119
- </div>
1120
- <!--end::Col-->
1121
- <!--begin::Col-->
1122
- <div class="col-5">
1123
- <input type="text" class="form-control" placeholder=".col-5" />
1124
- </div>
1125
- <!--end::Col-->
1179
+ <div class="form-floating mb-3">
1180
+ <input
1181
+ type="email"
1182
+ class="form-control"
1183
+ id="floatingEmail"
1184
+ placeholder="name@example.com"
1185
+ />
1186
+ <label for="floatingEmail">Email address</label>
1187
+ </div>
1188
+ <div class="form-floating mb-3">
1189
+ <input
1190
+ type="password"
1191
+ class="form-control"
1192
+ id="floatingPwd"
1193
+ placeholder="Password"
1194
+ />
1195
+ <label for="floatingPwd">Password</label>
1196
+ </div>
1197
+ <div class="form-floating">
1198
+ <textarea
1199
+ class="form-control"
1200
+ id="floatingTextarea"
1201
+ placeholder="Leave a comment here"
1202
+ style="height: 6rem"
1203
+ ></textarea>
1204
+ <label for="floatingTextarea">Comments</label>
1126
1205
  </div>
1127
- <!--end::Row-->
1128
1206
  </div>
1129
- <!--end::Body-->
1130
1207
  </div>
1131
- <!--end::Different Width-->
1132
- <!--begin::Form Validation-->
1133
- <div class="card card-info card-outline mb-4">
1134
- <!--begin::Header-->
1208
+ </div>
1209
+
1210
+ <!-- Disabled / Readonly -->
1211
+ <div class="col-md-6">
1212
+ <div class="card card-danger card-outline mb-4">
1135
1213
  <div class="card-header">
1136
- <div class="card-title">Form Validation</div>
1214
+ <div class="card-title">Disabled &amp; Readonly</div>
1137
1215
  </div>
1138
- <!--end::Header-->
1139
- <!--begin::Form-->
1140
- <form class="needs-validation" novalidate>
1141
- <!--begin::Body-->
1142
- <div class="card-body">
1143
- <!--begin::Row-->
1144
- <div class="row g-3">
1145
- <!--begin::Col-->
1146
- <div class="col-md-6">
1147
- <label for="validationCustom01" class="form-label">First name</label>
1148
- <input
1149
- type="text"
1150
- class="form-control"
1151
- id="validationCustom01"
1152
- value="Mark"
1153
- required
1154
- />
1155
- <div class="valid-feedback">Looks good!</div>
1156
- </div>
1157
- <!--end::Col-->
1158
- <!--begin::Col-->
1159
- <div class="col-md-6">
1160
- <label for="validationCustom02" class="form-label">Last name</label>
1161
- <input
1162
- type="text"
1163
- class="form-control"
1164
- id="validationCustom02"
1165
- value="Otto"
1166
- required
1167
- />
1168
- <div class="valid-feedback">Looks good!</div>
1169
- </div>
1170
- <!--end::Col-->
1171
- <!--begin::Col-->
1172
- <div class="col-md-6">
1173
- <label for="validationCustomUsername" class="form-label">Username</label>
1174
- <div class="input-group has-validation">
1175
- <span class="input-group-text" id="inputGroupPrepend">@</span>
1176
- <input
1177
- type="text"
1178
- class="form-control"
1179
- id="validationCustomUsername"
1180
- aria-describedby="inputGroupPrepend"
1181
- required
1182
- />
1183
- <div class="invalid-feedback">Please choose a username.</div>
1184
- </div>
1185
- </div>
1186
- <!--end::Col-->
1187
- <!--begin::Col-->
1188
- <div class="col-md-6">
1189
- <label for="validationCustom03" class="form-label">City</label>
1190
- <input
1191
- type="text"
1192
- class="form-control"
1193
- id="validationCustom03"
1194
- required
1195
- />
1196
- <div class="invalid-feedback">Please provide a valid city.</div>
1197
- </div>
1198
- <!--end::Col-->
1199
- <!--begin::Col-->
1200
- <div class="col-md-6">
1201
- <label for="validationCustom04" class="form-label">State</label>
1202
- <select class="form-select" id="validationCustom04" required>
1203
- <option selected disabled value="">Choose...</option>
1204
- <option>...</option>
1205
- </select>
1206
- <div class="invalid-feedback">Please select a valid state.</div>
1207
- </div>
1208
- <!--end::Col-->
1209
- <!--begin::Col-->
1210
- <div class="col-md-6">
1211
- <label for="validationCustom05" class="form-label">Zip</label>
1212
- <input
1213
- type="text"
1214
- class="form-control"
1215
- id="validationCustom05"
1216
- required
1217
- />
1218
- <div class="invalid-feedback">Please provide a valid zip.</div>
1219
- </div>
1220
- <!--end::Col-->
1221
- <!--begin::Col-->
1222
- <div class="col-12">
1223
- <div class="form-check">
1224
- <input
1225
- class="form-check-input"
1226
- type="checkbox"
1227
- value=""
1228
- id="invalidCheck"
1229
- required
1230
- />
1231
- <label class="form-check-label" for="invalidCheck">
1232
- Agree to terms and conditions
1233
- </label>
1234
- <div class="invalid-feedback">You must agree before submitting.</div>
1235
- </div>
1236
- </div>
1237
- <!--end::Col-->
1238
- </div>
1239
- <!--end::Row-->
1216
+ <div class="card-body">
1217
+ <div class="mb-3">
1218
+ <label class="form-label" for="dis-text">Disabled text</label>
1219
+ <input
1220
+ type="text"
1221
+ class="form-control"
1222
+ id="dis-text"
1223
+ value="Can't touch this"
1224
+ disabled
1225
+ />
1240
1226
  </div>
1241
- <!--end::Body-->
1242
- <!--begin::Footer-->
1243
- <div class="card-footer">
1244
- <button class="btn btn-info" type="submit">Submit form</button>
1227
+ <div class="mb-3">
1228
+ <label class="form-label" for="ro-text">Readonly text</label>
1229
+ <input
1230
+ type="text"
1231
+ class="form-control"
1232
+ id="ro-text"
1233
+ value="Read me, but don't write me"
1234
+ readonly
1235
+ />
1245
1236
  </div>
1246
- <!--end::Footer-->
1247
- </form>
1248
- <!--end::Form-->
1249
- <!--begin::JavaScript-->
1250
- <script>
1251
- // Example starter JavaScript for disabling form submissions if there are invalid fields
1252
- (() => {
1253
- 'use strict';
1254
-
1255
- // Fetch all the forms we want to apply custom Bootstrap validation styles to
1256
- const forms = document.querySelectorAll('.needs-validation');
1257
-
1258
- // Loop over them and prevent submission
1259
- Array.from(forms).forEach((form) => {
1260
- form.addEventListener(
1261
- 'submit',
1262
- (event) => {
1263
- if (!form.checkValidity()) {
1264
- event.preventDefault();
1265
- event.stopPropagation();
1266
- }
1267
-
1268
- form.classList.add('was-validated');
1269
- },
1270
- false,
1271
- );
1272
- });
1273
- })();
1274
- </script>
1275
- <!--end::JavaScript-->
1237
+ <div class="mb-3">
1238
+ <label class="form-label" for="dis-select">Disabled select</label>
1239
+ <select id="dis-select" class="form-select" disabled>
1240
+ <option>Locked option</option>
1241
+ </select>
1242
+ </div>
1243
+ <div class="form-check">
1244
+ <input class="form-check-input" type="checkbox" id="dis-check" disabled />
1245
+ <label class="form-check-label" for="dis-check">Can't check this</label>
1246
+ </div>
1247
+ </div>
1276
1248
  </div>
1277
- <!--end::Form Validation-->
1278
1249
  </div>
1279
- <!--end::Col-->
1280
1250
  </div>
1281
- <!--end::Row-->
1282
1251
  </div>
1283
- <!--end::Container-->
1284
1252
  </div>
1285
- <!--end::App Content-->
1286
1253
  </main>
1287
- <!--end::App Main-->
1288
1254
  <!--begin::Footer-->
1289
1255
  <footer class="app-footer">
1290
1256
  <!--begin::To the end-->
@@ -1300,8 +1266,6 @@
1300
1266
  </footer>
1301
1267
  <!--end::Footer-->
1302
1268
  </div>
1303
- <!--end::App Wrapper-->
1304
- <!--begin::Script-->
1305
1269
  <!--begin::Third Party Plugin(OverlayScrollbars)-->
1306
1270
  <script
1307
1271
  src="https://cdn.jsdelivr.net/npm/overlayscrollbars@2.11.0/browser/overlayscrollbars.browser.es6.min.js"
@@ -1348,8 +1312,70 @@
1348
1312
  }
1349
1313
  });
1350
1314
  </script>
1351
- <!--end::OverlayScrollbars Configure-->
1352
- <!--end::Script-->
1315
+ <!--end::OverlayScrollbars Configure--><!--begin::Color Mode Toggle (#6010)-->
1316
+ <script>
1317
+ (() => {
1318
+ 'use strict';
1319
+
1320
+ const STORAGE_KEY = 'lte-theme';
1321
+
1322
+ const getStoredTheme = () => localStorage.getItem(STORAGE_KEY);
1323
+ const setStoredTheme = (theme) => localStorage.setItem(STORAGE_KEY, theme);
1324
+
1325
+ const prefersDark = () => globalThis.matchMedia('(prefers-color-scheme: dark)').matches;
1326
+
1327
+ const getPreferredTheme = () => {
1328
+ const stored = getStoredTheme();
1329
+ if (stored) return stored;
1330
+ return prefersDark() ? 'dark' : 'light';
1331
+ };
1332
+
1333
+ const setTheme = (theme) => {
1334
+ const resolved = theme === 'auto' ? (prefersDark() ? 'dark' : 'light') : theme;
1335
+ document.documentElement.setAttribute('data-bs-theme', resolved);
1336
+ };
1337
+
1338
+ setTheme(getPreferredTheme());
1339
+
1340
+ const showActiveTheme = (theme) => {
1341
+ // Highlight the active dropdown option
1342
+ document.querySelectorAll('[data-bs-theme-value]').forEach((el) => {
1343
+ el.classList.remove('active');
1344
+ el.setAttribute('aria-pressed', 'false');
1345
+ const check = el.querySelector('.bi-check-lg');
1346
+ if (check) check.classList.add('d-none');
1347
+ });
1348
+ const active = document.querySelector(`[data-bs-theme-value="${theme}"]`);
1349
+ if (active) {
1350
+ active.classList.add('active');
1351
+ active.setAttribute('aria-pressed', 'true');
1352
+ const check = active.querySelector('.bi-check-lg');
1353
+ if (check) check.classList.remove('d-none');
1354
+ }
1355
+ // Sync the topbar trigger icon
1356
+ document.querySelectorAll('[data-lte-theme-icon]').forEach((icon) => {
1357
+ icon.classList.toggle('d-none', icon.dataset.lteThemeIcon !== theme);
1358
+ });
1359
+ };
1360
+
1361
+ globalThis.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
1362
+ const stored = getStoredTheme();
1363
+ if (!stored || stored === 'auto') setTheme(getPreferredTheme());
1364
+ });
1365
+
1366
+ document.addEventListener('DOMContentLoaded', () => {
1367
+ showActiveTheme(getPreferredTheme());
1368
+ document.querySelectorAll('[data-bs-theme-value]').forEach((toggle) => {
1369
+ toggle.addEventListener('click', () => {
1370
+ const theme = toggle.getAttribute('data-bs-theme-value');
1371
+ setStoredTheme(theme);
1372
+ setTheme(theme);
1373
+ showActiveTheme(theme);
1374
+ });
1375
+ });
1376
+ });
1377
+ })();
1378
+ </script>
1379
+ <!--end::Color Mode Toggle-->
1353
1380
  </body>
1354
- <!--end::Body-->
1355
1381
  </html>