admin-lte 4.0.0-rc6 → 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 (107) hide show
  1. package/CHANGELOG.md +96 -0
  2. package/README.md +44 -18
  3. package/dist/UI/general.html +311 -92
  4. package/dist/UI/icons.html +311 -92
  5. package/dist/UI/timeline.html +311 -92
  6. package/dist/css/adminlte.css +2814 -1138
  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 +2814 -1138
  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 +291 -385
  15. package/dist/docs/color-mode.html +283 -381
  16. package/dist/docs/components/main-header.html +269 -363
  17. package/dist/docs/components/main-sidebar.html +284 -378
  18. package/dist/docs/customization.html +1056 -0
  19. package/dist/docs/deployment.html +1121 -0
  20. package/dist/docs/faq.html +887 -397
  21. package/dist/docs/getting-started.html +967 -0
  22. package/dist/docs/how-to-contribute.html +365 -450
  23. package/dist/docs/index.html +16 -0
  24. package/dist/docs/integrations.html +1207 -0
  25. package/dist/docs/introduction.html +483 -434
  26. package/dist/docs/javascript/accessibility.html +925 -0
  27. package/dist/docs/javascript/card-widget.html +995 -0
  28. package/dist/docs/javascript/direct-chat.html +872 -0
  29. package/dist/docs/javascript/fullscreen.html +881 -0
  30. package/dist/docs/javascript/layout.html +884 -0
  31. package/dist/docs/javascript/plugins-overview.html +1120 -0
  32. package/dist/docs/javascript/pushmenu.html +522 -377
  33. package/dist/docs/javascript/treeview.html +498 -390
  34. package/dist/docs/layout-blueprint.html +1063 -0
  35. package/dist/docs/layout.html +316 -402
  36. package/dist/docs/license.html +282 -375
  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 +66 -2
  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/elements.html +1381 -0
  46. package/dist/forms/{general.html → layout.html} +382 -452
  47. package/dist/forms/validation.html +1251 -0
  48. package/dist/forms/wizard.html +1386 -0
  49. package/dist/generate/theme.html +135 -5
  50. package/dist/index.html +311 -92
  51. package/dist/index2.html +314 -92
  52. package/dist/index3.html +311 -92
  53. package/dist/js/adminlte.js +135 -314
  54. package/dist/js/adminlte.js.map +1 -1
  55. package/dist/js/adminlte.min.js +3 -3
  56. package/dist/js/adminlte.min.js.map +1 -1
  57. package/dist/layout/collapsed-sidebar-without-hover.html +1120 -0
  58. package/dist/layout/collapsed-sidebar.html +311 -92
  59. package/dist/layout/fixed-complete.html +311 -92
  60. package/dist/layout/fixed-footer.html +311 -92
  61. package/dist/layout/fixed-header.html +311 -92
  62. package/dist/layout/fixed-sidebar.html +311 -92
  63. package/dist/layout/layout-custom-area.html +311 -92
  64. package/dist/layout/layout-rtl.html +311 -92
  65. package/dist/layout/logo-switch.html +135 -5
  66. package/dist/layout/sidebar-mini.html +311 -92
  67. package/dist/layout/unfixed-sidebar.html +311 -92
  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 +311 -92
  86. package/dist/widgets/cards.html +311 -92
  87. package/dist/widgets/info-box.html +311 -92
  88. package/dist/widgets/small-box.html +311 -92
  89. package/netlify.toml +16 -0
  90. package/package.json +32 -26
  91. package/src/scss/_accessibility.scss +44 -0
  92. package/src/scss/_app-footer.scss +9 -0
  93. package/src/scss/_app-header.scss +27 -0
  94. package/src/scss/_app-sidebar.scss +73 -74
  95. package/src/scss/_bootstrap-variables.scss +12 -5
  96. package/src/scss/_docs.scss +816 -0
  97. package/src/scss/_table.scss +4 -4
  98. package/src/scss/adminlte.scss +4 -1
  99. package/src/scss/pages/_login_and_register.scss +1 -1
  100. package/src/ts/accessibility.ts +9 -7
  101. package/src/ts/adminlte.ts +2 -14
  102. package/src/ts/fullscreen.ts +8 -4
  103. package/src/ts/layout.ts +34 -16
  104. package/src/ts/push-menu.ts +257 -104
  105. package/src/ts/util/index.ts +10 -0
  106. package/.claude/settings.local.json +0 -33
  107. package/CLAUDE.md +0 -79
@@ -64,7 +64,7 @@
64
64
  </head>
65
65
  <!--end::Head-->
66
66
  <!--begin::Body-->
67
- <body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
67
+ <body class="layout-fixed sidebar-expand-lg bg-body-tertiary docs-page">
68
68
  <!--begin::App Wrapper-->
69
69
  <div class="app-wrapper">
70
70
  <!--begin::Header-->
@@ -78,11 +78,18 @@
78
78
  <i class="bi bi-list"></i>
79
79
  </a>
80
80
  </li>
81
+
81
82
  <li class="nav-item d-none d-md-block">
82
- <a href="#" class="nav-link">Home</a>
83
+ <a href="../docs/introduction.html" class="nav-link">
84
+ <i class="bi bi-book me-1" aria-hidden="true"></i>
85
+ Documentation
86
+ </a>
83
87
  </li>
84
88
  <li class="nav-item d-none d-md-block">
85
- <a href="#" class="nav-link">Contact</a>
89
+ <a href="../index.html" class="nav-link">
90
+ <i class="bi bi-arrow-left me-1" aria-hidden="true"></i>
91
+ Back to live preview
92
+ </a>
86
93
  </li>
87
94
  </ul>
88
95
  <!--end::Start Navbar Links-->
@@ -220,11 +227,70 @@
220
227
  <li class="nav-item">
221
228
  <a class="nav-link" href="#" data-lte-toggle="fullscreen">
222
229
  <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>
230
+ <i data-lte-icon="minimize" class="bi bi-fullscreen-exit d-none"></i>
224
231
  </a>
225
232
  </li>
226
233
  <!--end::Fullscreen Toggle-->
227
234
 
235
+ <!--begin::Color Mode Toggle (#6010)-->
236
+ <li class="nav-item dropdown">
237
+ <a
238
+ class="nav-link"
239
+ href="#"
240
+ id="bd-theme"
241
+ aria-label="Toggle color scheme"
242
+ data-bs-toggle="dropdown"
243
+ aria-expanded="false"
244
+ >
245
+ <i class="bi bi-sun-fill" data-lte-theme-icon="light"></i>
246
+ <i class="bi bi-moon-fill d-none" data-lte-theme-icon="dark"></i>
247
+ <i class="bi bi-circle-half d-none" data-lte-theme-icon="auto"></i>
248
+ </a>
249
+ <ul
250
+ class="dropdown-menu dropdown-menu-end"
251
+ aria-labelledby="bd-theme"
252
+ style="--bs-dropdown-min-width: 8rem"
253
+ >
254
+ <li>
255
+ <button
256
+ type="button"
257
+ class="dropdown-item d-flex align-items-center"
258
+ data-bs-theme-value="light"
259
+ aria-pressed="false"
260
+ >
261
+ <i class="bi bi-sun-fill me-2"></i>
262
+ Light
263
+ <i class="bi bi-check-lg ms-auto d-none"></i>
264
+ </button>
265
+ </li>
266
+ <li>
267
+ <button
268
+ type="button"
269
+ class="dropdown-item d-flex align-items-center"
270
+ data-bs-theme-value="dark"
271
+ aria-pressed="false"
272
+ >
273
+ <i class="bi bi-moon-fill me-2"></i>
274
+ Dark
275
+ <i class="bi bi-check-lg ms-auto d-none"></i>
276
+ </button>
277
+ </li>
278
+ <li>
279
+ <button
280
+ type="button"
281
+ class="dropdown-item d-flex align-items-center active"
282
+ data-bs-theme-value="auto"
283
+ aria-pressed="true"
284
+ >
285
+ <i class="bi bi-circle-half me-2"></i>
286
+ Auto
287
+ <i class="bi bi-check-lg ms-auto d-none"></i>
288
+ </button>
289
+ </li>
290
+ </ul>
291
+ </li>
292
+ <!--end::Color Mode Toggle-->
293
+
228
294
  <!--begin::User Menu Dropdown-->
229
295
  <li class="nav-item dropdown user-menu">
230
296
  <a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">
@@ -281,24 +347,20 @@
281
347
  <!--end::Container-->
282
348
  </nav>
283
349
  <!--end::Header-->
284
- <!--begin::Sidebar-->
350
+ <!--begin::Sidebar (docs mode)-->
285
351
  <aside class="app-sidebar bg-body-secondary shadow" data-bs-theme="dark">
286
352
  <!--begin::Sidebar Brand-->
287
353
  <div class="sidebar-brand">
288
- <!--begin::Brand Link-->
289
- <a href="../index.html" class="brand-link">
290
- <!--begin::Brand Image-->
354
+ <a href="../docs/introduction.html" class="brand-link">
291
355
  <img
292
356
  src="../assets/img/AdminLTELogo.png"
293
357
  alt="AdminLTE Logo"
294
358
  class="brand-image opacity-75 shadow"
295
359
  />
296
- <!--end::Brand Image-->
297
- <!--begin::Brand Text-->
298
- <span class="brand-text fw-light">AdminLTE 4</span>
299
- <!--end::Brand Text-->
360
+ <span class="brand-text fw-light">
361
+ AdminLTE 4 <span class="opacity-75">&middot; Docs</span>
362
+ </span>
300
363
  </a>
301
- <!--end::Brand Link-->
302
364
  </div>
303
365
  <!--end::Sidebar Brand-->
304
366
  <!--begin::Sidebar Wrapper-->
@@ -309,451 +371,223 @@
309
371
  class="nav sidebar-menu flex-column"
310
372
  data-lte-toggle="treeview"
311
373
  role="navigation"
312
- aria-label="Main navigation"
374
+ aria-label="Documentation navigation"
313
375
  data-accordion="false"
314
- id="navigation"
376
+ id="docs-navigation"
315
377
  >
378
+ <li class="nav-header">START HERE</li>
316
379
  <li class="nav-item">
317
- <a href="#" class="nav-link">
318
- <i class="nav-icon bi bi-speedometer"></i>
319
- <p>
320
- Dashboard
321
- <i class="nav-arrow bi bi-chevron-right"></i>
322
- </p>
380
+ <a href="../docs/introduction.html" class="nav-link">
381
+ <i class="nav-icon bi bi-download"></i>
382
+ <p>Installation</p>
383
+ </a>
384
+ </li>
385
+ <li class="nav-item">
386
+ <a href="../docs/getting-started.html" class="nav-link">
387
+ <i class="nav-icon bi bi-rocket-takeoff"></i>
388
+ <p>Getting Started</p>
389
+ </a>
390
+ </li>
391
+
392
+ <li class="nav-header">FOUNDATIONS</li>
393
+ <li class="nav-item">
394
+ <a href="../docs/layout.html" class="nav-link">
395
+ <i class="nav-icon bi bi-grip-horizontal"></i>
396
+ <p>Layout Classes</p>
397
+ </a>
398
+ </li>
399
+ <li class="nav-item">
400
+ <a href="../docs/layout-blueprint.html" class="nav-link">
401
+ <i class="nav-icon bi bi-diagram-3"></i>
402
+ <p>Layout Blueprint</p>
323
403
  </a>
324
- <ul class="nav nav-treeview">
325
- <li class="nav-item">
326
- <a href="../index.html" class="nav-link">
327
- <i class="nav-icon bi bi-circle"></i>
328
- <p>Dashboard v1</p>
329
- </a>
330
- </li>
331
- <li class="nav-item">
332
- <a href="../index2.html" class="nav-link">
333
- <i class="nav-icon bi bi-circle"></i>
334
- <p>Dashboard v2</p>
335
- </a>
336
- </li>
337
- <li class="nav-item">
338
- <a href="../index3.html" class="nav-link">
339
- <i class="nav-icon bi bi-circle"></i>
340
- <p>Dashboard v3</p>
341
- </a>
342
- </li>
343
- </ul>
344
404
  </li>
345
405
  <li class="nav-item">
346
- <a href="../generate/theme.html" class="nav-link">
406
+ <a href="../docs/customization.html" class="nav-link">
347
407
  <i class="nav-icon bi bi-palette"></i>
348
- <p>Theme Generate</p>
408
+ <p>Customization</p>
349
409
  </a>
350
410
  </li>
351
411
  <li class="nav-item">
352
- <a href="#" class="nav-link">
353
- <i class="nav-icon bi bi-box-seam-fill"></i>
354
- <p>
355
- Widgets
356
- <i class="nav-arrow bi bi-chevron-right"></i>
357
- </p>
412
+ <a href="../docs/color-mode.html" class="nav-link active">
413
+ <i class="nav-icon bi bi-star-half"></i>
414
+ <p>Color Mode</p>
415
+ </a>
416
+ </li>
417
+ <li class="nav-item">
418
+ <a href="../docs/rtl.html" class="nav-link">
419
+ <i class="nav-icon bi bi-text-paragraph"></i>
420
+ <p>RTL Support</p>
421
+ </a>
422
+ </li>
423
+
424
+ <li class="nav-header">BUILDING</li>
425
+ <li class="nav-item">
426
+ <a href="../docs/recipes.html" class="nav-link">
427
+ <i class="nav-icon bi bi-clipboard-check"></i>
428
+ <p>Recipes</p>
358
429
  </a>
359
- <ul class="nav nav-treeview">
360
- <li class="nav-item">
361
- <a href="../widgets/small-box.html" class="nav-link">
362
- <i class="nav-icon bi bi-circle"></i>
363
- <p>Small Box</p>
364
- </a>
365
- </li>
366
- <li class="nav-item">
367
- <a href="../widgets/info-box.html" class="nav-link">
368
- <i class="nav-icon bi bi-circle"></i>
369
- <p>info Box</p>
370
- </a>
371
- </li>
372
- <li class="nav-item">
373
- <a href="../widgets/cards.html" class="nav-link">
374
- <i class="nav-icon bi bi-circle"></i>
375
- <p>Cards</p>
376
- </a>
377
- </li>
378
- </ul>
379
430
  </li>
380
431
  <li class="nav-item">
381
432
  <a href="#" class="nav-link">
382
- <i class="nav-icon bi bi-clipboard-fill"></i>
433
+ <i class="nav-icon bi bi-ui-checks-grid"></i>
383
434
  <p>
384
- Layout Options
385
- <span class="nav-badge badge text-bg-secondary me-3">6</span>
435
+ Components
386
436
  <i class="nav-arrow bi bi-chevron-right"></i>
387
437
  </p>
388
438
  </a>
389
439
  <ul class="nav nav-treeview">
390
440
  <li class="nav-item">
391
- <a href="../layout/unfixed-sidebar.html" class="nav-link">
392
- <i class="nav-icon bi bi-circle"></i>
393
- <p>Default Sidebar</p>
394
- </a>
395
- </li>
396
- <li class="nav-item">
397
- <a href="../layout/fixed-sidebar.html" class="nav-link">
398
- <i class="nav-icon bi bi-circle"></i>
399
- <p>Fixed Sidebar</p>
400
- </a>
401
- </li>
402
- <li class="nav-item">
403
- <a href="../layout/fixed-header.html" class="nav-link">
404
- <i class="nav-icon bi bi-circle"></i>
405
- <p>Fixed Header</p>
406
- </a>
407
- </li>
408
- <li class="nav-item">
409
- <a href="../layout/fixed-footer.html" class="nav-link">
410
- <i class="nav-icon bi bi-circle"></i>
411
- <p>Fixed Footer</p>
412
- </a>
413
- </li>
414
- <li class="nav-item">
415
- <a href="../layout/fixed-complete.html" class="nav-link">
416
- <i class="nav-icon bi bi-circle"></i>
417
- <p>Fixed Complete</p>
418
- </a>
419
- </li>
420
- <li class="nav-item">
421
- <a href="../layout/layout-custom-area.html" class="nav-link">
422
- <i class="nav-icon bi bi-circle"></i>
423
- <p>Layout <small>+ Custom Area </small></p>
424
- </a>
425
- </li>
426
- <li class="nav-item">
427
- <a href="../layout/sidebar-mini.html" class="nav-link">
428
- <i class="nav-icon bi bi-circle"></i>
429
- <p>Sidebar Mini</p>
430
- </a>
431
- </li>
432
- <li class="nav-item">
433
- <a href="../layout/collapsed-sidebar.html" class="nav-link">
434
- <i class="nav-icon bi bi-circle"></i>
435
- <p>Sidebar Mini <small>+ Collapsed</small></p>
436
- </a>
437
- </li>
438
- <li class="nav-item">
439
- <a href="../layout/logo-switch.html" class="nav-link">
441
+ <a href="../docs/components/main-header.html" class="nav-link">
440
442
  <i class="nav-icon bi bi-circle"></i>
441
- <p>Sidebar Mini <small>+ Logo Switch</small></p>
443
+ <p>Main Header</p>
442
444
  </a>
443
445
  </li>
444
446
  <li class="nav-item">
445
- <a href="../layout/layout-rtl.html" class="nav-link">
447
+ <a href="../docs/components/main-sidebar.html" class="nav-link">
446
448
  <i class="nav-icon bi bi-circle"></i>
447
- <p>Layout RTL</p>
449
+ <p>Main Sidebar</p>
448
450
  </a>
449
451
  </li>
450
452
  </ul>
451
453
  </li>
452
454
  <li class="nav-item">
453
455
  <a href="#" class="nav-link">
454
- <i class="nav-icon bi bi-tree-fill"></i>
456
+ <i class="nav-icon bi bi-filetype-js"></i>
455
457
  <p>
456
- UI Elements
458
+ JavaScript Plugins
457
459
  <i class="nav-arrow bi bi-chevron-right"></i>
458
460
  </p>
459
461
  </a>
460
462
  <ul class="nav nav-treeview">
461
463
  <li class="nav-item">
462
- <a href="../UI/general.html" class="nav-link">
464
+ <a href="../docs/javascript/plugins-overview.html" class="nav-link">
463
465
  <i class="nav-icon bi bi-circle"></i>
464
- <p>General</p>
466
+ <p>Overview</p>
465
467
  </a>
466
468
  </li>
467
469
  <li class="nav-item">
468
- <a href="../UI/icons.html" class="nav-link">
470
+ <a href="../docs/javascript/layout.html" class="nav-link">
469
471
  <i class="nav-icon bi bi-circle"></i>
470
- <p>Icons</p>
472
+ <p>Layout</p>
471
473
  </a>
472
474
  </li>
473
475
  <li class="nav-item">
474
- <a href="../UI/timeline.html" class="nav-link">
476
+ <a href="../docs/javascript/pushmenu.html" class="nav-link">
475
477
  <i class="nav-icon bi bi-circle"></i>
476
- <p>Timeline</p>
478
+ <p>PushMenu</p>
477
479
  </a>
478
480
  </li>
479
- </ul>
480
- </li>
481
- <li class="nav-item">
482
- <a href="#" class="nav-link">
483
- <i class="nav-icon bi bi-pencil-square"></i>
484
- <p>
485
- Forms
486
- <i class="nav-arrow bi bi-chevron-right"></i>
487
- </p>
488
- </a>
489
- <ul class="nav nav-treeview">
490
481
  <li class="nav-item">
491
- <a href="../forms/general.html" class="nav-link">
482
+ <a href="../docs/javascript/treeview.html" class="nav-link">
492
483
  <i class="nav-icon bi bi-circle"></i>
493
- <p>General Elements</p>
484
+ <p>Treeview</p>
494
485
  </a>
495
486
  </li>
496
- </ul>
497
- </li>
498
- <li class="nav-item">
499
- <a href="#" class="nav-link">
500
- <i class="nav-icon bi bi-table"></i>
501
- <p>
502
- Tables
503
- <i class="nav-arrow bi bi-chevron-right"></i>
504
- </p>
505
- </a>
506
- <ul class="nav nav-treeview">
507
487
  <li class="nav-item">
508
- <a href="../tables/simple.html" class="nav-link">
488
+ <a href="../docs/javascript/card-widget.html" class="nav-link">
509
489
  <i class="nav-icon bi bi-circle"></i>
510
- <p>Simple Tables</p>
490
+ <p>Card Widget</p>
511
491
  </a>
512
492
  </li>
513
- </ul>
514
- </li>
515
-
516
- <li class="nav-header">EXAMPLES</li>
517
- <li class="nav-item">
518
- <a href="#" class="nav-link">
519
- <i class="nav-icon bi bi-box-arrow-in-right"></i>
520
- <p>
521
- Auth
522
- <i class="nav-arrow bi bi-chevron-right"></i>
523
- </p>
524
- </a>
525
- <ul class="nav nav-treeview">
526
493
  <li class="nav-item">
527
- <a href="#" class="nav-link">
528
- <i class="nav-icon bi bi-box-arrow-in-right"></i>
529
- <p>
530
- Version 1
531
- <i class="nav-arrow bi bi-chevron-right"></i>
532
- </p>
494
+ <a href="../docs/javascript/direct-chat.html" class="nav-link">
495
+ <i class="nav-icon bi bi-circle"></i>
496
+ <p>Direct Chat</p>
533
497
  </a>
534
- <ul class="nav nav-treeview">
535
- <li class="nav-item">
536
- <a href="../examples/login.html" class="nav-link">
537
- <i class="nav-icon bi bi-circle"></i>
538
- <p>Login</p>
539
- </a>
540
- </li>
541
- <li class="nav-item">
542
- <a href="../examples/register.html" class="nav-link">
543
- <i class="nav-icon bi bi-circle"></i>
544
- <p>Register</p>
545
- </a>
546
- </li>
547
- </ul>
548
498
  </li>
549
499
  <li class="nav-item">
550
- <a href="#" class="nav-link">
551
- <i class="nav-icon bi bi-box-arrow-in-right"></i>
552
- <p>
553
- Version 2
554
- <i class="nav-arrow bi bi-chevron-right"></i>
555
- </p>
500
+ <a href="../docs/javascript/fullscreen.html" class="nav-link">
501
+ <i class="nav-icon bi bi-circle"></i>
502
+ <p>Fullscreen</p>
556
503
  </a>
557
- <ul class="nav nav-treeview">
558
- <li class="nav-item">
559
- <a href="../examples/login-v2.html" class="nav-link">
560
- <i class="nav-icon bi bi-circle"></i>
561
- <p>Login</p>
562
- </a>
563
- </li>
564
- <li class="nav-item">
565
- <a href="../examples/register-v2.html" class="nav-link">
566
- <i class="nav-icon bi bi-circle"></i>
567
- <p>Register</p>
568
- </a>
569
- </li>
570
- </ul>
571
504
  </li>
572
505
  <li class="nav-item">
573
- <a href="../examples/lockscreen.html" class="nav-link">
506
+ <a href="../docs/javascript/accessibility.html" class="nav-link">
574
507
  <i class="nav-icon bi bi-circle"></i>
575
- <p>Lockscreen</p>
508
+ <p>Accessibility</p>
576
509
  </a>
577
510
  </li>
578
511
  </ul>
579
512
  </li>
580
-
581
- <li class="nav-header">DOCUMENTATIONS</li>
582
513
  <li class="nav-item">
583
- <a href="../docs/introduction.html" class="nav-link">
584
- <i class="nav-icon bi bi-download"></i>
585
- <p>Installation</p>
514
+ <a href="../docs/integrations.html" class="nav-link">
515
+ <i class="nav-icon bi bi-puzzle"></i>
516
+ <p>Integrations</p>
586
517
  </a>
587
518
  </li>
519
+
520
+ <li class="nav-header">SHIPPING</li>
588
521
  <li class="nav-item">
589
- <a href="../docs/layout.html" class="nav-link">
590
- <i class="nav-icon bi bi-grip-horizontal"></i>
591
- <p>Layout</p>
522
+ <a href="../docs/migration.html" class="nav-link">
523
+ <i class="nav-icon bi bi-arrow-up-right-square"></i>
524
+ <p>Migration from v3</p>
592
525
  </a>
593
526
  </li>
594
527
  <li class="nav-item">
595
- <a href="../docs/color-mode.html" class="nav-link active">
596
- <i class="nav-icon bi bi-star-half"></i>
597
- <p>Color Mode</p>
528
+ <a href="../docs/deployment.html" class="nav-link">
529
+ <i class="nav-icon bi bi-cloud-upload"></i>
530
+ <p>Deployment</p>
598
531
  </a>
599
532
  </li>
600
- <li class="nav-item">
601
- <a href="#" class="nav-link">
602
- <i class="nav-icon bi bi-ui-checks-grid"></i>
603
- <p>
604
- Components
605
- <i class="nav-arrow bi bi-chevron-right"></i>
606
- </p>
607
- </a>
608
- <ul class="nav nav-treeview">
609
- <li class="nav-item">
610
- <a href="../docs/components/main-header.html" class="nav-link">
611
- <i class="nav-icon bi bi-circle"></i>
612
- <p>Main Header</p>
613
- </a>
614
- </li>
615
- <li class="nav-item">
616
- <a href="../docs/components/main-sidebar.html" class="nav-link">
617
- <i class="nav-icon bi bi-circle"></i>
618
- <p>Main Sidebar</p>
619
- </a>
620
- </li>
621
- </ul>
622
- </li>
623
- <li class="nav-item">
624
- <a href="#" class="nav-link">
625
- <i class="nav-icon bi bi-filetype-js"></i>
626
- <p>
627
- Javascript
628
- <i class="nav-arrow bi bi-chevron-right"></i>
629
- </p>
630
- </a>
631
- <ul class="nav nav-treeview">
632
- <li class="nav-item">
633
- <a href="../docs/javascript/treeview.html" class="nav-link">
634
- <i class="nav-icon bi bi-circle"></i>
635
- <p>Treeview</p>
636
- </a>
637
- </li>
638
- </ul>
639
- </li>
640
533
  <li class="nav-item">
641
534
  <a href="../docs/browser-support.html" class="nav-link">
642
- <i class="nav-icon bi bi-browser-edge"></i>
535
+ <i class="nav-icon bi bi-browser-chrome"></i>
643
536
  <p>Browser Support</p>
644
537
  </a>
645
538
  </li>
646
- <li class="nav-item">
647
- <a href="../docs/how-to-contribute.html" class="nav-link">
648
- <i class="nav-icon bi bi-hand-thumbs-up-fill"></i>
649
- <p>How To Contribute</p>
650
- </a>
651
- </li>
539
+
540
+ <li class="nav-header">RESOURCES</li>
652
541
  <li class="nav-item">
653
542
  <a href="../docs/faq.html" class="nav-link">
654
- <i class="nav-icon bi bi-question-circle-fill"></i>
543
+ <i class="nav-icon bi bi-question-circle"></i>
655
544
  <p>FAQ</p>
656
545
  </a>
657
546
  </li>
658
547
  <li class="nav-item">
659
- <a href="../docs/license.html" class="nav-link">
660
- <i class="nav-icon bi bi-patch-check-fill"></i>
661
- <p>License</p>
548
+ <a href="../docs/how-to-contribute.html" class="nav-link">
549
+ <i class="nav-icon bi bi-people"></i>
550
+ <p>Contributing</p>
662
551
  </a>
663
552
  </li>
664
-
665
- <li class="nav-header">MULTI LEVEL EXAMPLE</li>
666
553
  <li class="nav-item">
667
- <a href="#" class="nav-link">
668
- <i class="nav-icon bi bi-circle-fill"></i>
669
- <p>Level 1</p>
554
+ <a href="../docs/license.html" class="nav-link">
555
+ <i class="nav-icon bi bi-patch-check"></i>
556
+ <p>License</p>
670
557
  </a>
671
558
  </li>
672
559
  <li class="nav-item">
673
- <a href="#" class="nav-link">
674
- <i class="nav-icon bi bi-circle-fill"></i>
560
+ <a
561
+ href="https://github.com/ColorlibHQ/AdminLTE"
562
+ target="_blank"
563
+ rel="noopener"
564
+ class="nav-link"
565
+ >
566
+ <i class="nav-icon bi bi-github"></i>
675
567
  <p>
676
- Level 1
677
- <i class="nav-arrow bi bi-chevron-right"></i>
568
+ GitHub
569
+ <i class="bi bi-box-arrow-up-right ms-1" aria-hidden="true"></i>
678
570
  </p>
679
571
  </a>
680
- <ul class="nav nav-treeview">
681
- <li class="nav-item">
682
- <a href="#" class="nav-link">
683
- <i class="nav-icon bi bi-circle"></i>
684
- <p>Level 2</p>
685
- </a>
686
- </li>
687
- <li class="nav-item">
688
- <a href="#" class="nav-link">
689
- <i class="nav-icon bi bi-circle"></i>
690
- <p>
691
- Level 2
692
- <i class="nav-arrow bi bi-chevron-right"></i>
693
- </p>
694
- </a>
695
- <ul class="nav nav-treeview">
696
- <li class="nav-item">
697
- <a href="#" class="nav-link">
698
- <i class="nav-icon bi bi-record-circle-fill"></i>
699
- <p>Level 3</p>
700
- </a>
701
- </li>
702
- <li class="nav-item">
703
- <a href="#" class="nav-link">
704
- <i class="nav-icon bi bi-record-circle-fill"></i>
705
- <p>Level 3</p>
706
- </a>
707
- </li>
708
- <li class="nav-item">
709
- <a href="#" class="nav-link">
710
- <i class="nav-icon bi bi-record-circle-fill"></i>
711
- <p>Level 3</p>
712
- </a>
713
- </li>
714
- </ul>
715
- </li>
716
- <li class="nav-item">
717
- <a href="#" class="nav-link">
718
- <i class="nav-icon bi bi-circle"></i>
719
- <p>Level 2</p>
720
- </a>
721
- </li>
722
- </ul>
723
- </li>
724
- <li class="nav-item">
725
- <a href="#" class="nav-link">
726
- <i class="nav-icon bi bi-circle-fill"></i>
727
- <p>Level 1</p>
728
- </a>
729
- </li>
730
-
731
- <li class="nav-header">LABELS</li>
732
- <li class="nav-item">
733
- <a href="#" class="nav-link">
734
- <i class="nav-icon bi bi-circle text-danger"></i>
735
- <p class="text">Important</p>
736
- </a>
737
- </li>
738
- <li class="nav-item">
739
- <a href="#" class="nav-link">
740
- <i class="nav-icon bi bi-circle text-warning"></i>
741
- <p>Warning</p>
742
- </a>
743
- </li>
744
- <li class="nav-item">
745
- <a href="#" class="nav-link">
746
- <i class="nav-icon bi bi-circle text-info"></i>
747
- <p>Informational</p>
748
- </a>
749
572
  </li>
750
573
  </ul>
751
574
  <!--end::Sidebar Menu-->
575
+
576
+ <!-- Back to preview CTA (bottom of sidebar) -->
577
+ <div class="p-3 mt-3 border-top border-secondary border-opacity-25">
578
+ <a
579
+ href="../index.html"
580
+ class="btn btn-sm btn-outline-light w-100 d-flex align-items-center justify-content-center gap-2"
581
+ >
582
+ <i class="bi bi-arrow-left" aria-hidden="true"></i>
583
+ Back to live preview
584
+ </a>
585
+ </div>
752
586
  </nav>
753
587
  </div>
754
588
  <!--end::Sidebar Wrapper-->
755
589
  </aside>
756
- <!--end::Sidebar-->
590
+ <!--end::Sidebar (docs mode)-->
757
591
  <!--begin::App Main-->
758
592
  <main class="app-main">
759
593
  <!--begin::App Content Header-->
@@ -873,7 +707,7 @@
873
707
  data-bs-theme-value="auto"
874
708
  aria-pressed="true"
875
709
  >
876
- <i class="bi bi-circle-fill-half-stroke me-2"></i>
710
+ <i class="bi bi-circle-half me-2"></i>
877
711
  Auto
878
712
  <i class="bi bi-check-lg ms-auto d-none"></i>
879
713
  </button>
@@ -889,12 +723,14 @@
889
723
  </div>
890
724
  <!-- Start column -->
891
725
  <div class="col-12">
892
- <pre
893
- class="astro-code dark-plus"
894
- style="background-color: #1e1e1e; color: #d4d4d4; overflow-x: auto"
895
- tabindex="0"
896
- data-language="html"
897
- ><code><span class="line"><span style="color:#6A9955">&lt;!--begin::Header--&gt;</span></span>
726
+ <div class="card">
727
+ <div class="card-body">
728
+ <pre
729
+ class="astro-code dark-plus"
730
+ style="background-color: #1e1e1e; color: #d4d4d4; overflow-x: auto"
731
+ tabindex="0"
732
+ data-language="html"
733
+ ><code><span class="line"><span style="color:#6A9955">&lt;!--begin::Header--&gt;</span></span>
898
734
  <span class="line"><span style="color:#808080">&lt;</span><span style="color:#569CD6">nav</span><span style="color:#9CDCFE"> class</span><span style="color:#D4D4D4">=</span><span style="color:#CE9178">&quot;navbar navbar-expand bg-body&quot;</span><span style="color:#808080">&gt;</span></span>
899
735
  <span class="line"><span style="color:#6A9955"> &lt;!--begin::Container--&gt;</span></span>
900
736
  <span class="line"><span style="color:#808080"> &lt;</span><span style="color:#569CD6">div</span><span style="color:#9CDCFE"> class</span><span style="color:#D4D4D4">=</span><span style="color:#CE9178">&quot;container-fluid&quot;</span><span style="color:#808080">&gt;</span></span>
@@ -965,7 +801,7 @@
965
801
  <span class="line"><span style="color:#9CDCFE"> data-bs-theme-value</span><span style="color:#D4D4D4">=</span><span style="color:#CE9178">&quot;auto&quot;</span></span>
966
802
  <span class="line"><span style="color:#9CDCFE"> aria-pressed</span><span style="color:#D4D4D4">=</span><span style="color:#CE9178">&quot;true&quot;</span></span>
967
803
  <span class="line"><span style="color:#808080"> &gt;</span></span>
968
- <span class="line"><span style="color:#808080"> &lt;</span><span style="color:#569CD6">i</span><span style="color:#9CDCFE"> class</span><span style="color:#D4D4D4">=</span><span style="color:#CE9178">&quot;bi bi-circle-fill-half-stroke me-2&quot;</span><span style="color:#808080">&gt;&lt;/</span><span style="color:#569CD6">i</span><span style="color:#808080">&gt;</span></span>
804
+ <span class="line"><span style="color:#808080"> &lt;</span><span style="color:#569CD6">i</span><span style="color:#9CDCFE"> class</span><span style="color:#D4D4D4">=</span><span style="color:#CE9178">&quot;bi bi-circle-half me-2&quot;</span><span style="color:#808080">&gt;&lt;/</span><span style="color:#569CD6">i</span><span style="color:#808080">&gt;</span></span>
969
805
  <span class="line"><span style="color:#D4D4D4"> Auto</span></span>
970
806
  <span class="line"><span style="color:#808080"> &lt;</span><span style="color:#569CD6">i</span><span style="color:#9CDCFE"> class</span><span style="color:#D4D4D4">=</span><span style="color:#CE9178">&quot;bi bi-check-lg ms-auto d-none&quot;</span><span style="color:#808080">&gt;&lt;/</span><span style="color:#569CD6">i</span><span style="color:#808080">&gt;</span></span>
971
807
  <span class="line"><span style="color:#808080"> &lt;/</span><span style="color:#569CD6">button</span><span style="color:#808080">&gt;</span></span>
@@ -978,34 +814,34 @@
978
814
  <span class="line"><span style="color:#6A9955"> &lt;!--end::Container--&gt;</span></span>
979
815
  <span class="line"><span style="color:#808080">&lt;/</span><span style="color:#569CD6">nav</span><span style="color:#808080">&gt;</span></span>
980
816
  <span class="line"><span style="color:#6A9955">&lt;!--end::Header--&gt;</span></span></code></pre>
981
- <pre
982
- class="astro-code dark-plus"
983
- style="background-color: #1e1e1e; color: #d4d4d4; overflow-x: auto"
984
- tabindex="0"
985
- data-language="js"
986
- ><code><span class="line"><span style="color:#6A9955">// Color Mode Toggler</span></span>
817
+ <pre
818
+ class="astro-code dark-plus"
819
+ style="background-color: #1e1e1e; color: #d4d4d4; overflow-x: auto"
820
+ tabindex="0"
821
+ data-language="js"
822
+ ><code><span class="line"><span style="color:#6A9955">// Color Mode Toggler</span></span>
987
823
  <span class="line"><span style="color:#D4D4D4">(() </span><span style="color:#569CD6">=&gt;</span><span style="color:#D4D4D4"> {</span></span>
988
824
  <span class="line"><span style="color:#CE9178"> &quot;use strict&quot;</span><span style="color:#D4D4D4">;</span></span>
989
825
  <span class="line"></span>
990
826
  <span class="line"><span style="color:#569CD6"> const</span><span style="color:#4FC1FF"> storedTheme</span><span style="color:#D4D4D4"> = </span><span style="color:#9CDCFE">localStorage</span><span style="color:#D4D4D4">.</span><span style="color:#DCDCAA">getItem</span><span style="color:#D4D4D4">(</span><span style="color:#CE9178">&quot;theme&quot;</span><span style="color:#D4D4D4">);</span></span>
991
827
  <span class="line"></span>
992
828
  <span class="line"><span style="color:#569CD6"> const</span><span style="color:#DCDCAA"> getPreferredTheme</span><span style="color:#D4D4D4"> = () </span><span style="color:#569CD6">=&gt;</span><span style="color:#D4D4D4"> {</span></span>
993
- <span class="line"><span style="color:#CE92A4"> if</span><span style="color:#D4D4D4"> (</span><span style="color:#9CDCFE">storedTheme</span><span style="color:#D4D4D4">) {</span></span>
994
- <span class="line"><span style="color:#CE92A4"> return</span><span style="color:#9CDCFE"> storedTheme</span><span style="color:#D4D4D4">;</span></span>
829
+ <span class="line"><span style="color:#C586C0"> if</span><span style="color:#D4D4D4"> (</span><span style="color:#9CDCFE">storedTheme</span><span style="color:#D4D4D4">) {</span></span>
830
+ <span class="line"><span style="color:#C586C0"> return</span><span style="color:#9CDCFE"> storedTheme</span><span style="color:#D4D4D4">;</span></span>
995
831
  <span class="line"><span style="color:#D4D4D4"> }</span></span>
996
832
  <span class="line"></span>
997
- <span class="line"><span style="color:#CE92A4"> return</span><span style="color:#9CDCFE"> window</span><span style="color:#D4D4D4">.</span><span style="color:#DCDCAA">matchMedia</span><span style="color:#D4D4D4">(</span><span style="color:#CE9178">&quot;(prefers-color-scheme: dark)&quot;</span><span style="color:#D4D4D4">).</span><span style="color:#9CDCFE">matches</span></span>
833
+ <span class="line"><span style="color:#C586C0"> return</span><span style="color:#9CDCFE"> window</span><span style="color:#D4D4D4">.</span><span style="color:#DCDCAA">matchMedia</span><span style="color:#D4D4D4">(</span><span style="color:#CE9178">&quot;(prefers-color-scheme: dark)&quot;</span><span style="color:#D4D4D4">).</span><span style="color:#9CDCFE">matches</span></span>
998
834
  <span class="line"><span style="color:#D4D4D4"> ? </span><span style="color:#CE9178">&quot;dark&quot;</span></span>
999
835
  <span class="line"><span style="color:#D4D4D4"> : </span><span style="color:#CE9178">&quot;light&quot;</span><span style="color:#D4D4D4">;</span></span>
1000
836
  <span class="line"><span style="color:#D4D4D4"> };</span></span>
1001
837
  <span class="line"></span>
1002
838
  <span class="line"><span style="color:#569CD6"> const</span><span style="color:#DCDCAA"> setTheme</span><span style="color:#D4D4D4"> = </span><span style="color:#569CD6">function</span><span style="color:#D4D4D4"> (</span><span style="color:#9CDCFE">theme</span><span style="color:#D4D4D4">) {</span></span>
1003
- <span class="line"><span style="color:#CE92A4"> if</span><span style="color:#D4D4D4"> (</span></span>
839
+ <span class="line"><span style="color:#C586C0"> if</span><span style="color:#D4D4D4"> (</span></span>
1004
840
  <span class="line"><span style="color:#9CDCFE"> theme</span><span style="color:#D4D4D4"> === </span><span style="color:#CE9178">&quot;auto&quot;</span><span style="color:#D4D4D4"> &amp;&amp;</span></span>
1005
841
  <span class="line"><span style="color:#9CDCFE"> window</span><span style="color:#D4D4D4">.</span><span style="color:#DCDCAA">matchMedia</span><span style="color:#D4D4D4">(</span><span style="color:#CE9178">&quot;(prefers-color-scheme: dark)&quot;</span><span style="color:#D4D4D4">).</span><span style="color:#9CDCFE">matches</span></span>
1006
842
  <span class="line"><span style="color:#D4D4D4"> ) {</span></span>
1007
843
  <span class="line"><span style="color:#9CDCFE"> document</span><span style="color:#D4D4D4">.</span><span style="color:#9CDCFE">documentElement</span><span style="color:#D4D4D4">.</span><span style="color:#DCDCAA">setAttribute</span><span style="color:#D4D4D4">(</span><span style="color:#CE9178">&quot;data-bs-theme&quot;</span><span style="color:#D4D4D4">, </span><span style="color:#CE9178">&quot;dark&quot;</span><span style="color:#D4D4D4">);</span></span>
1008
- <span class="line"><span style="color:#D4D4D4"> } </span><span style="color:#CE92A4">else</span><span style="color:#D4D4D4"> {</span></span>
844
+ <span class="line"><span style="color:#D4D4D4"> } </span><span style="color:#C586C0">else</span><span style="color:#D4D4D4"> {</span></span>
1009
845
  <span class="line"><span style="color:#9CDCFE"> document</span><span style="color:#D4D4D4">.</span><span style="color:#9CDCFE">documentElement</span><span style="color:#D4D4D4">.</span><span style="color:#DCDCAA">setAttribute</span><span style="color:#D4D4D4">(</span><span style="color:#CE9178">&quot;data-bs-theme&quot;</span><span style="color:#D4D4D4">, </span><span style="color:#9CDCFE">theme</span><span style="color:#D4D4D4">);</span></span>
1010
846
  <span class="line"><span style="color:#D4D4D4"> }</span></span>
1011
847
  <span class="line"><span style="color:#D4D4D4"> };</span></span>
@@ -1015,8 +851,8 @@
1015
851
  <span class="line"><span style="color:#569CD6"> const</span><span style="color:#DCDCAA"> showActiveTheme</span><span style="color:#D4D4D4"> = (</span><span style="color:#9CDCFE">theme</span><span style="color:#D4D4D4">, </span><span style="color:#9CDCFE">focus</span><span style="color:#D4D4D4"> = </span><span style="color:#569CD6">false</span><span style="color:#D4D4D4">) </span><span style="color:#569CD6">=&gt;</span><span style="color:#D4D4D4"> {</span></span>
1016
852
  <span class="line"><span style="color:#569CD6"> const</span><span style="color:#4FC1FF"> themeSwitcher</span><span style="color:#D4D4D4"> = </span><span style="color:#9CDCFE">document</span><span style="color:#D4D4D4">.</span><span style="color:#DCDCAA">querySelector</span><span style="color:#D4D4D4">(</span><span style="color:#CE9178">&quot;#bd-theme&quot;</span><span style="color:#D4D4D4">);</span></span>
1017
853
  <span class="line"></span>
1018
- <span class="line"><span style="color:#CE92A4"> if</span><span style="color:#D4D4D4"> (!</span><span style="color:#9CDCFE">themeSwitcher</span><span style="color:#D4D4D4">) {</span></span>
1019
- <span class="line"><span style="color:#CE92A4"> return</span><span style="color:#D4D4D4">;</span></span>
854
+ <span class="line"><span style="color:#C586C0"> if</span><span style="color:#D4D4D4"> (!</span><span style="color:#9CDCFE">themeSwitcher</span><span style="color:#D4D4D4">) {</span></span>
855
+ <span class="line"><span style="color:#C586C0"> return</span><span style="color:#D4D4D4">;</span></span>
1020
856
  <span class="line"><span style="color:#D4D4D4"> }</span></span>
1021
857
  <span class="line"></span>
1022
858
  <span class="line"><span style="color:#569CD6"> const</span><span style="color:#4FC1FF"> themeSwitcherText</span><span style="color:#D4D4D4"> = </span><span style="color:#9CDCFE">document</span><span style="color:#D4D4D4">.</span><span style="color:#DCDCAA">querySelector</span><span style="color:#D4D4D4">(</span><span style="color:#CE9178">&quot;#bd-theme-text&quot;</span><span style="color:#D4D4D4">);</span></span>
@@ -1026,7 +862,7 @@
1026
862
  <span class="line"><span style="color:#D4D4D4"> );</span></span>
1027
863
  <span class="line"><span style="color:#569CD6"> const</span><span style="color:#4FC1FF"> svgOfActiveBtn</span><span style="color:#D4D4D4"> = </span><span style="color:#9CDCFE">btnToActive</span><span style="color:#D4D4D4">.</span><span style="color:#DCDCAA">querySelector</span><span style="color:#D4D4D4">(</span><span style="color:#CE9178">&quot;i&quot;</span><span style="color:#D4D4D4">).</span><span style="color:#DCDCAA">getAttribute</span><span style="color:#D4D4D4">(</span><span style="color:#CE9178">&quot;class&quot;</span><span style="color:#D4D4D4">);</span></span>
1028
864
  <span class="line"></span>
1029
- <span class="line"><span style="color:#CE92A4"> for</span><span style="color:#D4D4D4"> (</span><span style="color:#569CD6">const</span><span style="color:#4FC1FF"> element</span><span style="color:#569CD6"> of</span><span style="color:#9CDCFE"> document</span><span style="color:#D4D4D4">.</span><span style="color:#DCDCAA">querySelectorAll</span><span style="color:#D4D4D4">(</span><span style="color:#CE9178">&quot;[data-bs-theme-value]&quot;</span><span style="color:#D4D4D4">)) {</span></span>
865
+ <span class="line"><span style="color:#C586C0"> for</span><span style="color:#D4D4D4"> (</span><span style="color:#569CD6">const</span><span style="color:#4FC1FF"> element</span><span style="color:#569CD6"> of</span><span style="color:#9CDCFE"> document</span><span style="color:#D4D4D4">.</span><span style="color:#DCDCAA">querySelectorAll</span><span style="color:#D4D4D4">(</span><span style="color:#CE9178">&quot;[data-bs-theme-value]&quot;</span><span style="color:#D4D4D4">)) {</span></span>
1030
866
  <span class="line"><span style="color:#9CDCFE"> element</span><span style="color:#D4D4D4">.</span><span style="color:#9CDCFE">classList</span><span style="color:#D4D4D4">.</span><span style="color:#DCDCAA">remove</span><span style="color:#D4D4D4">(</span><span style="color:#CE9178">&quot;active&quot;</span><span style="color:#D4D4D4">);</span></span>
1031
867
  <span class="line"><span style="color:#9CDCFE"> element</span><span style="color:#D4D4D4">.</span><span style="color:#DCDCAA">setAttribute</span><span style="color:#D4D4D4">(</span><span style="color:#CE9178">&quot;aria-pressed&quot;</span><span style="color:#D4D4D4">, </span><span style="color:#CE9178">&quot;false&quot;</span><span style="color:#D4D4D4">);</span></span>
1032
868
  <span class="line"><span style="color:#D4D4D4"> }</span></span>
@@ -1037,7 +873,7 @@
1037
873
  <span class="line"><span style="color:#569CD6"> const</span><span style="color:#4FC1FF"> themeSwitcherLabel</span><span style="color:#D4D4D4"> = </span><span style="color:#CE9178">`</span><span style="color:#569CD6">${</span><span style="color:#9CDCFE">themeSwitcherText</span><span style="color:#D4D4D4">.</span><span style="color:#9CDCFE">textContent</span><span style="color:#569CD6">}</span><span style="color:#CE9178"> (</span><span style="color:#569CD6">${</span><span style="color:#9CDCFE">btnToActive</span><span style="color:#D4D4D4">.</span><span style="color:#9CDCFE">dataset</span><span style="color:#D4D4D4">.</span><span style="color:#9CDCFE">bsThemeValue</span><span style="color:#569CD6">}</span><span style="color:#CE9178">)`</span><span style="color:#D4D4D4">;</span></span>
1038
874
  <span class="line"><span style="color:#9CDCFE"> themeSwitcher</span><span style="color:#D4D4D4">.</span><span style="color:#DCDCAA">setAttribute</span><span style="color:#D4D4D4">(</span><span style="color:#CE9178">&quot;aria-label&quot;</span><span style="color:#D4D4D4">, </span><span style="color:#9CDCFE">themeSwitcherLabel</span><span style="color:#D4D4D4">);</span></span>
1039
875
  <span class="line"></span>
1040
- <span class="line"><span style="color:#CE92A4"> if</span><span style="color:#D4D4D4"> (</span><span style="color:#9CDCFE">focus</span><span style="color:#D4D4D4">) {</span></span>
876
+ <span class="line"><span style="color:#C586C0"> if</span><span style="color:#D4D4D4"> (</span><span style="color:#9CDCFE">focus</span><span style="color:#D4D4D4">) {</span></span>
1041
877
  <span class="line"><span style="color:#9CDCFE"> themeSwitcher</span><span style="color:#D4D4D4">.</span><span style="color:#DCDCAA">focus</span><span style="color:#D4D4D4">();</span></span>
1042
878
  <span class="line"><span style="color:#D4D4D4"> }</span></span>
1043
879
  <span class="line"><span style="color:#D4D4D4"> };</span></span>
@@ -1045,7 +881,7 @@
1045
881
  <span class="line"><span style="color:#9CDCFE"> window</span></span>
1046
882
  <span class="line"><span style="color:#D4D4D4"> .</span><span style="color:#DCDCAA">matchMedia</span><span style="color:#D4D4D4">(</span><span style="color:#CE9178">&quot;(prefers-color-scheme: dark)&quot;</span><span style="color:#D4D4D4">)</span></span>
1047
883
  <span class="line"><span style="color:#D4D4D4"> .</span><span style="color:#DCDCAA">addEventListener</span><span style="color:#D4D4D4">(</span><span style="color:#CE9178">&quot;change&quot;</span><span style="color:#D4D4D4">, () </span><span style="color:#569CD6">=&gt;</span><span style="color:#D4D4D4"> {</span></span>
1048
- <span class="line"><span style="color:#CE92A4"> if</span><span style="color:#D4D4D4"> (</span><span style="color:#9CDCFE">storedTheme</span><span style="color:#D4D4D4"> !== </span><span style="color:#CE9178">&quot;light&quot;</span><span style="color:#D4D4D4"> || </span><span style="color:#9CDCFE">storedTheme</span><span style="color:#D4D4D4"> !== </span><span style="color:#CE9178">&quot;dark&quot;</span><span style="color:#D4D4D4">) {</span></span>
884
+ <span class="line"><span style="color:#C586C0"> if</span><span style="color:#D4D4D4"> (</span><span style="color:#9CDCFE">storedTheme</span><span style="color:#D4D4D4"> !== </span><span style="color:#CE9178">&quot;light&quot;</span><span style="color:#D4D4D4"> || </span><span style="color:#9CDCFE">storedTheme</span><span style="color:#D4D4D4"> !== </span><span style="color:#CE9178">&quot;dark&quot;</span><span style="color:#D4D4D4">) {</span></span>
1049
885
  <span class="line"><span style="color:#DCDCAA"> setTheme</span><span style="color:#D4D4D4">(</span><span style="color:#DCDCAA">getPreferredTheme</span><span style="color:#D4D4D4">());</span></span>
1050
886
  <span class="line"><span style="color:#D4D4D4"> }</span></span>
1051
887
  <span class="line"><span style="color:#D4D4D4"> });</span></span>
@@ -1053,7 +889,7 @@
1053
889
  <span class="line"><span style="color:#9CDCFE"> window</span><span style="color:#D4D4D4">.</span><span style="color:#DCDCAA">addEventListener</span><span style="color:#D4D4D4">(</span><span style="color:#CE9178">&quot;DOMContentLoaded&quot;</span><span style="color:#D4D4D4">, () </span><span style="color:#569CD6">=&gt;</span><span style="color:#D4D4D4"> {</span></span>
1054
890
  <span class="line"><span style="color:#DCDCAA"> showActiveTheme</span><span style="color:#D4D4D4">(</span><span style="color:#DCDCAA">getPreferredTheme</span><span style="color:#D4D4D4">());</span></span>
1055
891
  <span class="line"></span>
1056
- <span class="line"><span style="color:#CE92A4"> for</span><span style="color:#D4D4D4"> (</span><span style="color:#569CD6">const</span><span style="color:#4FC1FF"> toggle</span><span style="color:#569CD6"> of</span><span style="color:#9CDCFE"> document</span><span style="color:#D4D4D4">.</span><span style="color:#DCDCAA">querySelectorAll</span><span style="color:#D4D4D4">(</span><span style="color:#CE9178">&quot;[data-bs-theme-value]&quot;</span><span style="color:#D4D4D4">)) {</span></span>
892
+ <span class="line"><span style="color:#C586C0"> for</span><span style="color:#D4D4D4"> (</span><span style="color:#569CD6">const</span><span style="color:#4FC1FF"> toggle</span><span style="color:#569CD6"> of</span><span style="color:#9CDCFE"> document</span><span style="color:#D4D4D4">.</span><span style="color:#DCDCAA">querySelectorAll</span><span style="color:#D4D4D4">(</span><span style="color:#CE9178">&quot;[data-bs-theme-value]&quot;</span><span style="color:#D4D4D4">)) {</span></span>
1057
893
  <span class="line"><span style="color:#9CDCFE"> toggle</span><span style="color:#D4D4D4">.</span><span style="color:#DCDCAA">addEventListener</span><span style="color:#D4D4D4">(</span><span style="color:#CE9178">&quot;click&quot;</span><span style="color:#D4D4D4">, () </span><span style="color:#569CD6">=&gt;</span><span style="color:#D4D4D4"> {</span></span>
1058
894
  <span class="line"><span style="color:#569CD6"> const</span><span style="color:#4FC1FF"> theme</span><span style="color:#D4D4D4"> = </span><span style="color:#9CDCFE">toggle</span><span style="color:#D4D4D4">.</span><span style="color:#DCDCAA">getAttribute</span><span style="color:#D4D4D4">(</span><span style="color:#CE9178">&quot;data-bs-theme-value&quot;</span><span style="color:#D4D4D4">);</span></span>
1059
895
  <span class="line"><span style="color:#9CDCFE"> localStorage</span><span style="color:#D4D4D4">.</span><span style="color:#DCDCAA">setItem</span><span style="color:#D4D4D4">(</span><span style="color:#CE9178">&quot;theme&quot;</span><span style="color:#D4D4D4">, </span><span style="color:#9CDCFE">theme</span><span style="color:#D4D4D4">);</span></span>
@@ -1063,6 +899,8 @@
1063
899
  <span class="line"><span style="color:#D4D4D4"> }</span></span>
1064
900
  <span class="line"><span style="color:#D4D4D4"> });</span></span>
1065
901
  <span class="line"><span style="color:#D4D4D4">})();</span></span></code></pre>
902
+ </div>
903
+ </div>
1066
904
  </div>
1067
905
  </div>
1068
906
  <!--end::Row-->
@@ -1079,7 +917,7 @@
1079
917
  <!--end::To the end-->
1080
918
  <!--begin::Copyright-->
1081
919
  <strong>
1082
- Copyright &copy; 2014-2025&nbsp;
920
+ Copyright &copy; 2014-2026&nbsp;
1083
921
  <a href="https://adminlte.io" class="text-decoration-none">AdminLTE.io</a>.
1084
922
  </strong>
1085
923
  All rights reserved.
@@ -1135,7 +973,71 @@
1135
973
  }
1136
974
  });
1137
975
  </script>
1138
- <!--end::OverlayScrollbars Configure-->
976
+ <!--end::OverlayScrollbars Configure--><!--begin::Color Mode Toggle (#6010)-->
977
+ <script>
978
+ (() => {
979
+ 'use strict';
980
+
981
+ const STORAGE_KEY = 'lte-theme';
982
+
983
+ const getStoredTheme = () => localStorage.getItem(STORAGE_KEY);
984
+ const setStoredTheme = (theme) => localStorage.setItem(STORAGE_KEY, theme);
985
+
986
+ const prefersDark = () => globalThis.matchMedia('(prefers-color-scheme: dark)').matches;
987
+
988
+ const getPreferredTheme = () => {
989
+ const stored = getStoredTheme();
990
+ if (stored) return stored;
991
+ return prefersDark() ? 'dark' : 'light';
992
+ };
993
+
994
+ const setTheme = (theme) => {
995
+ const resolved = theme === 'auto' ? (prefersDark() ? 'dark' : 'light') : theme;
996
+ document.documentElement.setAttribute('data-bs-theme', resolved);
997
+ };
998
+
999
+ setTheme(getPreferredTheme());
1000
+
1001
+ const showActiveTheme = (theme) => {
1002
+ // Highlight the active dropdown option
1003
+ document.querySelectorAll('[data-bs-theme-value]').forEach((el) => {
1004
+ el.classList.remove('active');
1005
+ el.setAttribute('aria-pressed', 'false');
1006
+ const check = el.querySelector('.bi-check-lg');
1007
+ if (check) check.classList.add('d-none');
1008
+ });
1009
+ const active = document.querySelector(`[data-bs-theme-value="${theme}"]`);
1010
+ if (active) {
1011
+ active.classList.add('active');
1012
+ active.setAttribute('aria-pressed', 'true');
1013
+ const check = active.querySelector('.bi-check-lg');
1014
+ if (check) check.classList.remove('d-none');
1015
+ }
1016
+ // Sync the topbar trigger icon
1017
+ document.querySelectorAll('[data-lte-theme-icon]').forEach((icon) => {
1018
+ icon.classList.toggle('d-none', icon.dataset.lteThemeIcon !== theme);
1019
+ });
1020
+ };
1021
+
1022
+ globalThis.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
1023
+ const stored = getStoredTheme();
1024
+ if (!stored || stored === 'auto') setTheme(getPreferredTheme());
1025
+ });
1026
+
1027
+ document.addEventListener('DOMContentLoaded', () => {
1028
+ showActiveTheme(getPreferredTheme());
1029
+ document.querySelectorAll('[data-bs-theme-value]').forEach((toggle) => {
1030
+ toggle.addEventListener('click', () => {
1031
+ const theme = toggle.getAttribute('data-bs-theme-value');
1032
+ setStoredTheme(theme);
1033
+ setTheme(theme);
1034
+ showActiveTheme(theme);
1035
+ });
1036
+ });
1037
+ });
1038
+ })();
1039
+ </script>
1040
+ <!--end::Color Mode Toggle-->
1139
1041
 
1140
1042
  <script>
1141
1043
  // Color Mode Toggler