admin-lte 4.0.0-rc7 → 4.0.1

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 (104) hide show
  1. package/CHANGELOG.md +69 -0
  2. package/README.md +202 -102
  3. package/dist/UI/general.html +330 -129
  4. package/dist/UI/icons.html +330 -129
  5. package/dist/UI/timeline.html +330 -129
  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 +287 -399
  15. package/dist/docs/color-mode.html +268 -384
  16. package/dist/docs/components/main-header.html +264 -376
  17. package/dist/docs/components/main-sidebar.html +279 -391
  18. package/dist/docs/customization.html +1080 -0
  19. package/dist/docs/deployment.html +1145 -0
  20. package/dist/docs/faq.html +883 -411
  21. package/dist/docs/getting-started.html +991 -0
  22. package/dist/docs/how-to-contribute.html +361 -464
  23. package/dist/docs/index.html +16 -0
  24. package/dist/docs/integrations.html +1231 -0
  25. package/dist/docs/introduction.html +479 -448
  26. package/dist/docs/javascript/accessibility.html +387 -493
  27. package/dist/docs/javascript/card-widget.html +472 -452
  28. package/dist/docs/javascript/direct-chat.html +350 -423
  29. package/dist/docs/javascript/fullscreen.html +374 -418
  30. package/dist/docs/javascript/layout.html +371 -438
  31. package/dist/docs/javascript/plugins-overview.html +1144 -0
  32. package/dist/docs/javascript/pushmenu.html +511 -494
  33. package/dist/docs/javascript/treeview.html +492 -402
  34. package/dist/docs/layout-blueprint.html +1087 -0
  35. package/dist/docs/layout.html +313 -417
  36. package/dist/docs/license.html +278 -389
  37. package/dist/docs/migration.html +1149 -0
  38. package/dist/docs/recipes.html +1185 -0
  39. package/dist/docs/rtl.html +957 -0
  40. package/dist/examples/lockscreen.html +91 -1
  41. package/dist/examples/login-v2.html +91 -1
  42. package/dist/examples/login.html +91 -1
  43. package/dist/examples/register-v2.html +91 -1
  44. package/dist/examples/register.html +91 -1
  45. package/dist/forms/elements.html +1405 -0
  46. package/dist/forms/{general.html → layout.html} +401 -489
  47. package/dist/forms/validation.html +1275 -0
  48. package/dist/forms/wizard.html +1410 -0
  49. package/dist/generate/theme.html +160 -4
  50. package/dist/index.html +330 -129
  51. package/dist/index2.html +333 -129
  52. package/dist/index3.html +330 -129
  53. package/dist/js/adminlte.js +8 -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 +330 -129
  58. package/dist/layout/collapsed-sidebar.html +330 -129
  59. package/dist/layout/fixed-complete.html +330 -129
  60. package/dist/layout/fixed-footer.html +330 -129
  61. package/dist/layout/fixed-header.html +330 -129
  62. package/dist/layout/fixed-sidebar.html +330 -129
  63. package/dist/layout/layout-custom-area.html +330 -129
  64. package/dist/layout/layout-rtl.html +330 -129
  65. package/dist/layout/logo-switch.html +160 -4
  66. package/dist/layout/sidebar-mini.html +330 -129
  67. package/dist/layout/unfixed-sidebar.html +330 -129
  68. package/dist/mailbox/compose.html +1151 -0
  69. package/dist/mailbox/inbox.html +1509 -0
  70. package/dist/mailbox/read.html +1202 -0
  71. package/dist/pages/404.html +239 -0
  72. package/dist/pages/500.html +227 -0
  73. package/dist/pages/calendar.html +1266 -0
  74. package/dist/pages/chat.html +1427 -0
  75. package/dist/pages/faq.html +1383 -0
  76. package/dist/pages/file-manager.html +1835 -0
  77. package/dist/pages/invoice.html +1199 -0
  78. package/dist/pages/kanban.html +1439 -0
  79. package/dist/pages/maintenance.html +230 -0
  80. package/dist/pages/pricing.html +1279 -0
  81. package/dist/pages/profile.html +1382 -0
  82. package/dist/pages/projects.html +1644 -0
  83. package/dist/pages/settings.html +1387 -0
  84. package/dist/tables/data.html +1319 -0
  85. package/dist/tables/simple.html +330 -129
  86. package/dist/widgets/cards.html +330 -129
  87. package/dist/widgets/info-box.html +330 -129
  88. package/dist/widgets/small-box.html +330 -129
  89. package/github-issue-response.md +40 -0
  90. package/netlify.toml +16 -0
  91. package/package.json +31 -24
  92. package/src/scss/_app-header.scss +27 -0
  93. package/src/scss/_app-sidebar.scss +24 -30
  94. package/src/scss/_bootstrap-variables.scss +11 -4
  95. package/src/scss/_docs.scss +816 -0
  96. package/src/scss/_table.scss +4 -4
  97. package/src/scss/adminlte.scss +4 -1
  98. package/src/ts/accessibility.ts +9 -1
  99. package/src/ts/adminlte.ts +1 -1
  100. package/src/ts/fullscreen.ts +8 -4
  101. package/src/ts/push-menu.ts +66 -5
  102. package/.claude/settings.local.json +0 -37
  103. package/CLAUDE.md +0 -79
  104. package/release.md +0 -75
package/dist/docs/javascript/accessibility.html CHANGED
@@ -5,6 +5,32 @@
5
5
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
6
6
  <title>Accessibility Module | AdminLTE 4</title>
7
7
 
8
+ <!--begin::Theme Init (prevents flash of incorrect theme on load, #6043)-->
9
+ <script>
10
+ (() => {
11
+ 'use strict';
12
+ const STORAGE_KEY = 'lte-theme';
13
+ let stored = null;
14
+ try {
15
+ stored = localStorage.getItem(STORAGE_KEY);
16
+ } catch {
17
+ // localStorage may be unavailable (private mode, sandboxed iframe).
18
+ }
19
+ const prefersDark = globalThis.matchMedia('(prefers-color-scheme: dark)').matches;
20
+ // Mirror the resolution in _scripts.astro: explicit "dark"/"light" win,
21
+ // otherwise ("auto" or unset) fall back to the OS preference.
22
+ let resolved = 'light';
23
+ if (stored === 'dark' || stored === 'light') {
24
+ resolved = stored;
25
+ } else if (prefersDark) {
26
+ resolved = 'dark';
27
+ }
28
+ document.documentElement.setAttribute('data-bs-theme', resolved);
29
+ document.documentElement.style.colorScheme = resolved;
30
+ })();
31
+ </script>
32
+ <!--end::Theme Init-->
33
+
8
34
  <!--begin::Accessibility Meta Tags-->
9
35
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
10
36
  <meta name="color-scheme" content="light dark" />
@@ -64,7 +90,7 @@
64
90
  </head>
65
91
  <!--end::Head-->
66
92
  <!--begin::Body-->
67
- <body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
93
+ <body class="layout-fixed sidebar-expand-lg bg-body-tertiary docs-page">
68
94
  <!--begin::App Wrapper-->
69
95
  <div class="app-wrapper">
70
96
  <!--begin::Header-->
@@ -78,11 +104,18 @@
78
104
  <i class="bi bi-list"></i>
79
105
  </a>
80
106
  </li>
107
+
81
108
  <li class="nav-item d-none d-md-block">
82
- <a href="#" class="nav-link">Home</a>
109
+ <a href="../../docs/introduction.html" class="nav-link">
110
+ <i class="bi bi-book me-1" aria-hidden="true"></i>
111
+ Documentation
112
+ </a>
83
113
  </li>
84
114
  <li class="nav-item d-none d-md-block">
85
- <a href="#" class="nav-link">Contact</a>
115
+ <a href="../../index.html" class="nav-link">
116
+ <i class="bi bi-arrow-left me-1" aria-hidden="true"></i>
117
+ Back to live preview
118
+ </a>
86
119
  </li>
87
120
  </ul>
88
121
  <!--end::Start Navbar Links-->
@@ -220,11 +253,70 @@
220
253
  <li class="nav-item">
221
254
  <a class="nav-link" href="#" data-lte-toggle="fullscreen">
222
255
  <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>
256
+ <i data-lte-icon="minimize" class="bi bi-fullscreen-exit d-none"></i>
224
257
  </a>
225
258
  </li>
226
259
  <!--end::Fullscreen Toggle-->
227
260
 
261
+ <!--begin::Color Mode Toggle (#6010)-->
262
+ <li class="nav-item dropdown">
263
+ <a
264
+ class="nav-link"
265
+ href="#"
266
+ id="bd-theme"
267
+ aria-label="Toggle color scheme"
268
+ data-bs-toggle="dropdown"
269
+ aria-expanded="false"
270
+ >
271
+ <i class="bi bi-sun-fill" data-lte-theme-icon="light"></i>
272
+ <i class="bi bi-moon-fill d-none" data-lte-theme-icon="dark"></i>
273
+ <i class="bi bi-circle-half d-none" data-lte-theme-icon="auto"></i>
274
+ </a>
275
+ <ul
276
+ class="dropdown-menu dropdown-menu-end"
277
+ aria-labelledby="bd-theme"
278
+ style="--bs-dropdown-min-width: 8rem"
279
+ >
280
+ <li>
281
+ <button
282
+ type="button"
283
+ class="dropdown-item d-flex align-items-center"
284
+ data-bs-theme-value="light"
285
+ aria-pressed="false"
286
+ >
287
+ <i class="bi bi-sun-fill me-2"></i>
288
+ Light
289
+ <i class="bi bi-check-lg ms-auto d-none"></i>
290
+ </button>
291
+ </li>
292
+ <li>
293
+ <button
294
+ type="button"
295
+ class="dropdown-item d-flex align-items-center"
296
+ data-bs-theme-value="dark"
297
+ aria-pressed="false"
298
+ >
299
+ <i class="bi bi-moon-fill me-2"></i>
300
+ Dark
301
+ <i class="bi bi-check-lg ms-auto d-none"></i>
302
+ </button>
303
+ </li>
304
+ <li>
305
+ <button
306
+ type="button"
307
+ class="dropdown-item d-flex align-items-center active"
308
+ data-bs-theme-value="auto"
309
+ aria-pressed="true"
310
+ >
311
+ <i class="bi bi-circle-half me-2"></i>
312
+ Auto
313
+ <i class="bi bi-check-lg ms-auto d-none"></i>
314
+ </button>
315
+ </li>
316
+ </ul>
317
+ </li>
318
+ <!--end::Color Mode Toggle-->
319
+
228
320
  <!--begin::User Menu Dropdown-->
229
321
  <li class="nav-item dropdown user-menu">
230
322
  <a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">
@@ -281,326 +373,83 @@
281
373
  <!--end::Container-->
282
374
  </nav>
283
375
  <!--end::Header-->
284
- <!--begin::Sidebar-->
376
+ <!--begin::Sidebar (docs mode)-->
285
377
  <aside class="app-sidebar bg-body-secondary shadow" data-bs-theme="dark">
286
378
  <!--begin::Sidebar Brand-->
287
379
  <div class="sidebar-brand">
288
- <!--begin::Brand Link-->
289
- <a href="../../index.html" class="brand-link">
290
- <!--begin::Brand Image-->
380
+ <a href="../../docs/introduction.html" class="brand-link">
291
381
  <img
292
382
  src="../../assets/img/AdminLTELogo.png"
293
383
  alt="AdminLTE Logo"
294
384
  class="brand-image opacity-75 shadow"
295
385
  />
296
- <!--end::Brand Image-->
297
- <!--begin::Brand Text-->
298
- <span class="brand-text fw-light">AdminLTE 4</span>
299
- <!--end::Brand Text-->
386
+ <span class="brand-text fw-light">
387
+ AdminLTE 4 <span class="opacity-75">&middot; Docs</span>
388
+ </span>
300
389
  </a>
301
- <!--end::Brand Link-->
302
390
  </div>
303
391
  <!--end::Sidebar Brand-->
304
392
  <!--begin::Sidebar Wrapper-->
305
393
  <div class="sidebar-wrapper">
306
- <nav class="mt-2">
394
+ <nav class="mt-2" aria-label="Documentation navigation">
307
395
  <!--begin::Sidebar Menu-->
308
396
  <ul
309
397
  class="nav sidebar-menu flex-column"
310
398
  data-lte-toggle="treeview"
311
- role="navigation"
312
- aria-label="Main navigation"
313
399
  data-accordion="false"
314
- id="navigation"
400
+ id="docs-navigation"
315
401
  >
402
+ <li class="nav-header">START HERE</li>
316
403
  <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>
404
+ <a href="../../docs/introduction.html" class="nav-link">
405
+ <i class="nav-icon bi bi-download"></i>
406
+ <p>Installation</p>
323
407
  </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
408
  </li>
345
409
  <li class="nav-item">
346
- <a href="../../generate/theme.html" class="nav-link">
347
- <i class="nav-icon bi bi-palette"></i>
348
- <p>Theme Generate</p>
410
+ <a href="../../docs/getting-started.html" class="nav-link">
411
+ <i class="nav-icon bi bi-rocket-takeoff"></i>
412
+ <p>Getting Started</p>
349
413
  </a>
350
414
  </li>
415
+
416
+ <li class="nav-header">FOUNDATIONS</li>
351
417
  <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>
418
+ <a href="../../docs/layout.html" class="nav-link">
419
+ <i class="nav-icon bi bi-grip-horizontal"></i>
420
+ <p>Layout Classes</p>
358
421
  </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
422
  </li>
380
423
  <li class="nav-item">
381
- <a href="#" class="nav-link">
382
- <i class="nav-icon bi bi-clipboard-fill"></i>
383
- <p>
384
- Layout Options
385
- <span class="nav-badge badge text-bg-secondary me-3">7</span>
386
- <i class="nav-arrow bi bi-chevron-right"></i>
387
- </p>
424
+ <a href="../../docs/layout-blueprint.html" class="nav-link">
425
+ <i class="nav-icon bi bi-diagram-3"></i>
426
+ <p>Layout Blueprint</p>
388
427
  </a>
389
- <ul class="nav nav-treeview">
390
- <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/collapsed-sidebar-without-hover.html" class="nav-link">
440
- <i class="nav-icon bi bi-circle"></i>
441
- <p>Sidebar Mini <small>+ Collapsed + No Hover</small></p>
442
- </a>
443
- </li>
444
- <li class="nav-item">
445
- <a href="../../layout/logo-switch.html" class="nav-link">
446
- <i class="nav-icon bi bi-circle"></i>
447
- <p>Sidebar Mini <small>+ Logo Switch</small></p>
448
- </a>
449
- </li>
450
- <li class="nav-item">
451
- <a href="../../layout/layout-rtl.html" class="nav-link">
452
- <i class="nav-icon bi bi-circle"></i>
453
- <p>Layout RTL</p>
454
- </a>
455
- </li>
456
- </ul>
457
- </li>
458
- <li class="nav-item">
459
- <a href="#" class="nav-link">
460
- <i class="nav-icon bi bi-tree-fill"></i>
461
- <p>
462
- UI Elements
463
- <i class="nav-arrow bi bi-chevron-right"></i>
464
- </p>
465
- </a>
466
- <ul class="nav nav-treeview">
467
- <li class="nav-item">
468
- <a href="../../UI/general.html" class="nav-link">
469
- <i class="nav-icon bi bi-circle"></i>
470
- <p>General</p>
471
- </a>
472
- </li>
473
- <li class="nav-item">
474
- <a href="../../UI/icons.html" class="nav-link">
475
- <i class="nav-icon bi bi-circle"></i>
476
- <p>Icons</p>
477
- </a>
478
- </li>
479
- <li class="nav-item">
480
- <a href="../../UI/timeline.html" class="nav-link">
481
- <i class="nav-icon bi bi-circle"></i>
482
- <p>Timeline</p>
483
- </a>
484
- </li>
485
- </ul>
486
428
  </li>
487
429
  <li class="nav-item">
488
- <a href="#" class="nav-link">
489
- <i class="nav-icon bi bi-pencil-square"></i>
490
- <p>
491
- Forms
492
- <i class="nav-arrow bi bi-chevron-right"></i>
493
- </p>
430
+ <a href="../../docs/customization.html" class="nav-link">
431
+ <i class="nav-icon bi bi-palette"></i>
432
+ <p>Customization</p>
494
433
  </a>
495
- <ul class="nav nav-treeview">
496
- <li class="nav-item">
497
- <a href="../../forms/general.html" class="nav-link">
498
- <i class="nav-icon bi bi-circle"></i>
499
- <p>General Elements</p>
500
- </a>
501
- </li>
502
- </ul>
503
434
  </li>
504
435
  <li class="nav-item">
505
- <a href="#" class="nav-link">
506
- <i class="nav-icon bi bi-table"></i>
507
- <p>
508
- Tables
509
- <i class="nav-arrow bi bi-chevron-right"></i>
510
- </p>
436
+ <a href="../../docs/color-mode.html" class="nav-link">
437
+ <i class="nav-icon bi bi-star-half"></i>
438
+ <p>Color Mode</p>
511
439
  </a>
512
- <ul class="nav nav-treeview">
513
- <li class="nav-item">
514
- <a href="../../tables/simple.html" class="nav-link">
515
- <i class="nav-icon bi bi-circle"></i>
516
- <p>Simple Tables</p>
517
- </a>
518
- </li>
519
- </ul>
520
440
  </li>
521
-
522
- <li class="nav-header">EXAMPLES</li>
523
441
  <li class="nav-item">
524
- <a href="#" class="nav-link">
525
- <i class="nav-icon bi bi-box-arrow-in-right"></i>
526
- <p>
527
- Auth
528
- <i class="nav-arrow bi bi-chevron-right"></i>
529
- </p>
442
+ <a href="../../docs/rtl.html" class="nav-link">
443
+ <i class="nav-icon bi bi-text-paragraph"></i>
444
+ <p>RTL Support</p>
530
445
  </a>
531
- <ul class="nav nav-treeview">
532
- <li class="nav-item">
533
- <a href="#" class="nav-link">
534
- <i class="nav-icon bi bi-box-arrow-in-right"></i>
535
- <p>
536
- Version 1
537
- <i class="nav-arrow bi bi-chevron-right"></i>
538
- </p>
539
- </a>
540
- <ul class="nav nav-treeview">
541
- <li class="nav-item">
542
- <a href="../../examples/login.html" class="nav-link">
543
- <i class="nav-icon bi bi-circle"></i>
544
- <p>Login</p>
545
- </a>
546
- </li>
547
- <li class="nav-item">
548
- <a href="../../examples/register.html" class="nav-link">
549
- <i class="nav-icon bi bi-circle"></i>
550
- <p>Register</p>
551
- </a>
552
- </li>
553
- </ul>
554
- </li>
555
- <li class="nav-item">
556
- <a href="#" class="nav-link">
557
- <i class="nav-icon bi bi-box-arrow-in-right"></i>
558
- <p>
559
- Version 2
560
- <i class="nav-arrow bi bi-chevron-right"></i>
561
- </p>
562
- </a>
563
- <ul class="nav nav-treeview">
564
- <li class="nav-item">
565
- <a href="../../examples/login-v2.html" class="nav-link">
566
- <i class="nav-icon bi bi-circle"></i>
567
- <p>Login</p>
568
- </a>
569
- </li>
570
- <li class="nav-item">
571
- <a href="../../examples/register-v2.html" class="nav-link">
572
- <i class="nav-icon bi bi-circle"></i>
573
- <p>Register</p>
574
- </a>
575
- </li>
576
- </ul>
577
- </li>
578
- <li class="nav-item">
579
- <a href="../../examples/lockscreen.html" class="nav-link">
580
- <i class="nav-icon bi bi-circle"></i>
581
- <p>Lockscreen</p>
582
- </a>
583
- </li>
584
- </ul>
585
446
  </li>
586
447
 
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>
448
+ <li class="nav-header">BUILDING</li>
594
449
  <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>
450
+ <a href="../../docs/recipes.html" class="nav-link">
451
+ <i class="nav-icon bi bi-clipboard-check"></i>
452
+ <p>Recipes</p>
604
453
  </a>
605
454
  </li>
606
455
  <li class="nav-item">
@@ -630,11 +479,17 @@
630
479
  <a href="#" class="nav-link active">
631
480
  <i class="nav-icon bi bi-filetype-js"></i>
632
481
  <p>
633
- Javascript
482
+ JavaScript Plugins
634
483
  <i class="nav-arrow bi bi-chevron-right"></i>
635
484
  </p>
636
485
  </a>
637
486
  <ul class="nav nav-treeview">
487
+ <li class="nav-item">
488
+ <a href="../../docs/javascript/plugins-overview.html" class="nav-link">
489
+ <i class="nav-icon bi bi-circle"></i>
490
+ <p>Overview</p>
491
+ </a>
492
+ </li>
638
493
  <li class="nav-item">
639
494
  <a href="../../docs/javascript/layout.html" class="nav-link">
640
495
  <i class="nav-icon bi bi-circle"></i>
@@ -680,122 +535,83 @@
680
535
  </ul>
681
536
  </li>
682
537
  <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>
538
+ <a href="../../docs/integrations.html" class="nav-link">
539
+ <i class="nav-icon bi bi-puzzle"></i>
540
+ <p>Integrations</p>
686
541
  </a>
687
542
  </li>
543
+
544
+ <li class="nav-header">SHIPPING</li>
688
545
  <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>
546
+ <a href="../../docs/migration.html" class="nav-link">
547
+ <i class="nav-icon bi bi-arrow-up-right-square"></i>
548
+ <p>Migration from v3</p>
692
549
  </a>
693
550
  </li>
694
551
  <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>
552
+ <a href="../../docs/deployment.html" class="nav-link">
553
+ <i class="nav-icon bi bi-cloud-upload"></i>
554
+ <p>Deployment</p>
698
555
  </a>
699
556
  </li>
700
557
  <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>
558
+ <a href="../../docs/browser-support.html" class="nav-link">
559
+ <i class="nav-icon bi bi-browser-chrome"></i>
560
+ <p>Browser Support</p>
704
561
  </a>
705
562
  </li>
706
563
 
707
- <li class="nav-header">MULTI LEVEL EXAMPLE</li>
564
+ <li class="nav-header">RESOURCES</li>
708
565
  <li class="nav-item">
709
- <a href="#" class="nav-link">
710
- <i class="nav-icon bi bi-circle-fill"></i>
711
- <p>Level 1</p>
712
- </a>
713
- </li>
714
- <li class="nav-item">
715
- <a href="#" class="nav-link">
716
- <i class="nav-icon bi bi-circle-fill"></i>
717
- <p>
718
- Level 1
719
- <i class="nav-arrow bi bi-chevron-right"></i>
720
- </p>
721
- </a>
722
- <ul class="nav nav-treeview">
723
- <li class="nav-item">
724
- <a href="#" class="nav-link">
725
- <i class="nav-icon bi bi-circle"></i>
726
- <p>Level 2</p>
727
- </a>
728
- </li>
729
- <li class="nav-item">
730
- <a href="#" class="nav-link">
731
- <i class="nav-icon bi bi-circle"></i>
732
- <p>
733
- Level 2
734
- <i class="nav-arrow bi bi-chevron-right"></i>
735
- </p>
736
- </a>
737
- <ul class="nav nav-treeview">
738
- <li class="nav-item">
739
- <a href="#" class="nav-link">
740
- <i class="nav-icon bi bi-record-circle-fill"></i>
741
- <p>Level 3</p>
742
- </a>
743
- </li>
744
- <li class="nav-item">
745
- <a href="#" class="nav-link">
746
- <i class="nav-icon bi bi-record-circle-fill"></i>
747
- <p>Level 3</p>
748
- </a>
749
- </li>
750
- <li class="nav-item">
751
- <a href="#" class="nav-link">
752
- <i class="nav-icon bi bi-record-circle-fill"></i>
753
- <p>Level 3</p>
754
- </a>
755
- </li>
756
- </ul>
757
- </li>
758
- <li class="nav-item">
759
- <a href="#" class="nav-link">
760
- <i class="nav-icon bi bi-circle"></i>
761
- <p>Level 2</p>
762
- </a>
763
- </li>
764
- </ul>
765
- </li>
766
- <li class="nav-item">
767
- <a href="#" class="nav-link">
768
- <i class="nav-icon bi bi-circle-fill"></i>
769
- <p>Level 1</p>
566
+ <a href="../../docs/faq.html" class="nav-link">
567
+ <i class="nav-icon bi bi-question-circle"></i>
568
+ <p>FAQ</p>
770
569
  </a>
771
570
  </li>
772
-
773
- <li class="nav-header">LABELS</li>
774
571
  <li class="nav-item">
775
- <a href="#" class="nav-link">
776
- <i class="nav-icon bi bi-circle text-danger"></i>
777
- <p class="text">Important</p>
572
+ <a href="../../docs/how-to-contribute.html" class="nav-link">
573
+ <i class="nav-icon bi bi-people"></i>
574
+ <p>Contributing</p>
778
575
  </a>
779
576
  </li>
780
577
  <li class="nav-item">
781
- <a href="#" class="nav-link">
782
- <i class="nav-icon bi bi-circle text-warning"></i>
783
- <p>Warning</p>
578
+ <a href="../../docs/license.html" class="nav-link">
579
+ <i class="nav-icon bi bi-patch-check"></i>
580
+ <p>License</p>
784
581
  </a>
785
582
  </li>
786
583
  <li class="nav-item">
787
- <a href="#" class="nav-link">
788
- <i class="nav-icon bi bi-circle text-info"></i>
789
- <p>Informational</p>
584
+ <a
585
+ href="https://github.com/ColorlibHQ/AdminLTE"
586
+ target="_blank"
587
+ rel="noopener"
588
+ class="nav-link"
589
+ >
590
+ <i class="nav-icon bi bi-github"></i>
591
+ <p>
592
+ GitHub
593
+ <i class="bi bi-box-arrow-up-right ms-1" aria-hidden="true"></i>
594
+ </p>
790
595
  </a>
791
596
  </li>
792
597
  </ul>
793
598
  <!--end::Sidebar Menu-->
599
+
600
+ <!-- Back to preview CTA (bottom of sidebar) -->
601
+ <div class="p-3 mt-3 border-top border-secondary border-opacity-25">
602
+ <a
603
+ href="../../index.html"
604
+ class="btn btn-sm btn-outline-light w-100 d-flex align-items-center justify-content-center gap-2"
605
+ >
606
+ <i class="bi bi-arrow-left" aria-hidden="true"></i>
607
+ Back to live preview
608
+ </a>
609
+ </div>
794
610
  </nav>
795
611
  </div>
796
612
  <!--end::Sidebar Wrapper-->
797
613
  </aside>
798
- <!--end::Sidebar-->
614
+ <!--end::Sidebar (docs mode)-->
799
615
  <!--begin::App Main-->
800
616
  <main class="app-main">
801
617
  <!--begin::App Content Header-->
@@ -823,83 +639,91 @@
823
639
  <div class="app-content">
824
640
  <!--begin::Container-->
825
641
  <div class="container-fluid">
826
- <p>
827
- The Accessibility module provides WCAG 2.1 AA compliance features that are
828
- automatically initialized when AdminLTE loads.
829
- </p>
830
- <h5 id="features">Features</h5>
642
+ <div class="row">
643
+ <div class="col-12">
644
+ <div class="card">
645
+ <div class="card-body">
646
+ <p>
647
+ The Accessibility module provides WCAG 2.1 AA compliance features that are
648
+ automatically initialized when AdminLTE loads.
649
+ </p>
650
+ <h5 id="features">Features</h5>
831
651
 
832
- <table>
833
- <thead>
834
- <tr>
835
- <th>Feature</th>
836
- <th>WCAG Criterion</th>
837
- <th>Description</th>
838
- </tr>
839
- </thead>
840
- <tbody>
841
- <tr>
842
- <td>Skip Links</td>
843
- <td>2.4.1 Bypass Blocks</td>
844
- <td>Adds “Skip to main content” and “Skip to navigation” links.</td>
845
- </tr>
846
- <tr>
847
- <td>Focus Management</td>
848
- <td>2.4.3 &amp; 2.4.7</td>
849
- <td>Tab cycling, focus trapping in modals, and focus restoration.</td>
850
- </tr>
851
- <tr>
852
- <td>Keyboard Navigation</td>
853
- <td>2.1.1 Keyboard</td>
854
- <td>Arrow key navigation in menus, Enter/Space for custom buttons.</td>
855
- </tr>
856
- <tr>
857
- <td>Reduced Motion</td>
858
- <td>2.3.3 Animation</td>
859
- <td>Respects <code>prefers-reduced-motion</code> by disabling animations.</td>
860
- </tr>
861
- <tr>
862
- <td>Live Announcements</td>
863
- <td>4.1.3 Status Messages</td>
864
- <td>Announces errors and success messages to screen readers.</td>
865
- </tr>
866
- <tr>
867
- <td>Error Identification</td>
868
- <td>3.3.1 &amp; 3.3.2</td>
869
- <td>Auto-labels unlabelled inputs, announces form validation errors.</td>
870
- </tr>
871
- <tr>
872
- <td>Table Accessibility</td>
873
- <td>1.3.1 Info &amp; Relationships</td>
874
- <td>Adds <code>scope</code> attributes to table headers automatically.</td>
875
- </tr>
876
- </tbody>
877
- </table>
878
- <h5 id="configuration">Configuration</h5>
879
- <p>
880
- The module is initialized in <code>adminlte.ts</code> with all features enabled by
881
- default:
882
- </p>
883
- <pre
884
- class="astro-code dark-plus"
885
- style="background-color: #1e1e1e; color: #d4d4d4; overflow-x: auto"
886
- tabindex="0"
887
- data-language="js"
888
- ><code><span class="line"><span style="color:#DCDCAA">initAccessibility</span><span style="color:#D4D4D4">({</span></span>
652
+ <table>
653
+ <thead>
654
+ <tr>
655
+ <th>Feature</th>
656
+ <th>WCAG Criterion</th>
657
+ <th>Description</th>
658
+ </tr>
659
+ </thead>
660
+ <tbody>
661
+ <tr>
662
+ <td>Skip Links</td>
663
+ <td>2.4.1 Bypass Blocks</td>
664
+ <td>Adds “Skip to main content” and “Skip to navigation” links.</td>
665
+ </tr>
666
+ <tr>
667
+ <td>Focus Management</td>
668
+ <td>2.4.3 &amp; 2.4.7</td>
669
+ <td>Tab cycling, focus trapping in modals, and focus restoration.</td>
670
+ </tr>
671
+ <tr>
672
+ <td>Keyboard Navigation</td>
673
+ <td>2.1.1 Keyboard</td>
674
+ <td>Arrow key navigation in menus, Enter/Space for custom buttons.</td>
675
+ </tr>
676
+ <tr>
677
+ <td>Reduced Motion</td>
678
+ <td>2.3.3 Animation</td>
679
+ <td>
680
+ Respects <code>prefers-reduced-motion</code> by disabling animations.
681
+ </td>
682
+ </tr>
683
+ <tr>
684
+ <td>Live Announcements</td>
685
+ <td>4.1.3 Status Messages</td>
686
+ <td>Announces errors and success messages to screen readers.</td>
687
+ </tr>
688
+ <tr>
689
+ <td>Error Identification</td>
690
+ <td>3.3.1 &amp; 3.3.2</td>
691
+ <td>Auto-labels unlabelled inputs, announces form validation errors.</td>
692
+ </tr>
693
+ <tr>
694
+ <td>Table Accessibility</td>
695
+ <td>1.3.1 Info &amp; Relationships</td>
696
+ <td>
697
+ Adds <code>scope</code> attributes to table headers automatically.
698
+ </td>
699
+ </tr>
700
+ </tbody>
701
+ </table>
702
+ <h5 id="configuration">Configuration</h5>
703
+ <p>
704
+ The module is initialized in <code>adminlte.ts</code> with all features
705
+ enabled by default:
706
+ </p>
707
+ <pre
708
+ class="astro-code dark-plus"
709
+ style="background-color: #1e1e1e; color: #d4d4d4; overflow-x: auto"
710
+ tabindex="0"
711
+ data-language="js"
712
+ ><code><span class="line"><span style="color:#DCDCAA">initAccessibility</span><span style="color:#D4D4D4">({</span></span>
889
713
  <span class="line"><span style="color:#9CDCFE"> announcements:</span><span style="color:#569CD6"> true</span><span style="color:#D4D4D4">,</span></span>
890
714
  <span class="line"><span style="color:#9CDCFE"> skipLinks:</span><span style="color:#569CD6"> true</span><span style="color:#D4D4D4">,</span></span>
891
715
  <span class="line"><span style="color:#9CDCFE"> focusManagement:</span><span style="color:#569CD6"> true</span><span style="color:#D4D4D4">,</span></span>
892
716
  <span class="line"><span style="color:#9CDCFE"> keyboardNavigation:</span><span style="color:#569CD6"> true</span><span style="color:#D4D4D4">,</span></span>
893
717
  <span class="line"><span style="color:#9CDCFE"> reducedMotion:</span><span style="color:#569CD6"> true</span></span>
894
718
  <span class="line"><span style="color:#D4D4D4">})</span></span></code></pre>
895
- <p>Set any option to <code>false</code> to disable that feature.</p>
896
- <h5 id="public-api">Public API</h5>
897
- <pre
898
- class="astro-code dark-plus"
899
- style="background-color: #1e1e1e; color: #d4d4d4; overflow-x: auto"
900
- tabindex="0"
901
- data-language="js"
902
- ><code><span class="line"><span style="color:#C586C0">import</span><span style="color:#D4D4D4"> { </span><span style="color:#9CDCFE">initAccessibility</span><span style="color:#D4D4D4"> } </span><span style="color:#C586C0">from</span><span style="color:#CE9178"> &#39;admin-lte&#39;</span></span>
719
+ <p>Set any option to <code>false</code> to disable that feature.</p>
720
+ <h5 id="public-api">Public API</h5>
721
+ <pre
722
+ class="astro-code dark-plus"
723
+ style="background-color: #1e1e1e; color: #d4d4d4; overflow-x: auto"
724
+ tabindex="0"
725
+ data-language="js"
726
+ ><code><span class="line"><span style="color:#C586C0">import</span><span style="color:#D4D4D4"> { </span><span style="color:#9CDCFE">initAccessibility</span><span style="color:#D4D4D4"> } </span><span style="color:#C586C0">from</span><span style="color:#CE9178"> &#39;admin-lte&#39;</span></span>
903
727
  <span class="line"></span>
904
728
  <span class="line"><span style="color:#569CD6">const</span><span style="color:#4FC1FF"> a11y</span><span style="color:#D4D4D4"> = </span><span style="color:#DCDCAA">initAccessibility</span><span style="color:#D4D4D4">()</span></span>
905
729
  <span class="line"></span>
@@ -915,13 +739,13 @@
915
739
  <span class="line"></span>
916
740
  <span class="line"><span style="color:#6A9955">// Add semantic landmarks to the page</span></span>
917
741
  <span class="line"><span style="color:#9CDCFE">a11y</span><span style="color:#D4D4D4">.</span><span style="color:#DCDCAA">addLandmarks</span><span style="color:#D4D4D4">()</span></span></code></pre>
918
- <h5 id="utility-functions">Utility Functions</h5>
919
- <pre
920
- class="astro-code dark-plus"
921
- style="background-color: #1e1e1e; color: #d4d4d4; overflow-x: auto"
922
- tabindex="0"
923
- data-language="js"
924
- ><code><span class="line"><span style="color:#C586C0">import</span><span style="color:#D4D4D4"> { </span><span style="color:#9CDCFE">accessibilityUtils</span><span style="color:#D4D4D4"> } </span><span style="color:#C586C0">from</span><span style="color:#CE9178"> &#39;admin-lte&#39;</span></span>
742
+ <h5 id="utility-functions">Utility Functions</h5>
743
+ <pre
744
+ class="astro-code dark-plus"
745
+ style="background-color: #1e1e1e; color: #d4d4d4; overflow-x: auto"
746
+ tabindex="0"
747
+ data-language="js"
748
+ ><code><span class="line"><span style="color:#C586C0">import</span><span style="color:#D4D4D4"> { </span><span style="color:#9CDCFE">accessibilityUtils</span><span style="color:#D4D4D4"> } </span><span style="color:#C586C0">from</span><span style="color:#CE9178"> &#39;admin-lte&#39;</span></span>
925
749
  <span class="line"></span>
926
750
  <span class="line"><span style="color:#6A9955">// Check color contrast ratio (WCAG 1.4.3)</span></span>
927
751
  <span class="line"><span style="color:#569CD6">const</span><span style="color:#4FC1FF"> result</span><span style="color:#D4D4D4"> = </span><span style="color:#9CDCFE">accessibilityUtils</span><span style="color:#D4D4D4">.</span><span style="color:#DCDCAA">checkColorContrast</span><span style="color:#D4D4D4">(</span><span style="color:#CE9178">&#39;rgb(0,0,0)&#39;</span><span style="color:#D4D4D4">, </span><span style="color:#CE9178">&#39;rgb(255,255,255)&#39;</span><span style="color:#D4D4D4">)</span></span>
@@ -932,53 +756,59 @@
932
756
  <span class="line"></span>
933
757
  <span class="line"><span style="color:#6A9955">// Generate a unique ID for ARIA attributes</span></span>
934
758
  <span class="line"><span style="color:#9CDCFE">accessibilityUtils</span><span style="color:#D4D4D4">.</span><span style="color:#DCDCAA">generateId</span><span style="color:#D4D4D4">(</span><span style="color:#CE9178">&#39;modal&#39;</span><span style="color:#D4D4D4">) </span><span style="color:#6A9955">// &quot;modal-x7k2m9p4q&quot;</span></span></code></pre>
935
- <h5 id="css-classes">CSS Classes</h5>
759
+ <h5 id="css-classes">CSS Classes</h5>
936
760
 
937
- <table>
938
- <thead>
939
- <tr>
940
- <th>Class</th>
941
- <th>Description</th>
942
- </tr>
943
- </thead>
944
- <tbody>
945
- <tr>
946
- <td><code>skip-links</code></td>
947
- <td>Container for skip navigation links.</td>
948
- </tr>
949
- <tr>
950
- <td><code>skip-link</code></td>
951
- <td>Individual skip link, visible only on focus.</td>
952
- </tr>
953
- <tr>
954
- <td><code>reduce-motion</code></td>
955
- <td>Added to <code>&lt;body&gt;</code> when user prefers reduced motion.</td>
956
- </tr>
957
- <tr>
958
- <td><code>sr-only</code></td>
959
- <td>Screen reader only content (visually hidden).</td>
960
- </tr>
961
- <tr>
962
- <td><code>live-region</code></td>
963
- <td>ARIA live region for dynamic announcements.</td>
964
- </tr>
965
- </tbody>
966
- </table>
967
- <h5 id="notes">Notes</h5>
968
- <ul>
969
- <li>
970
- The module integrates with Bootstrap’s modal and dropdown events for focus
971
- management.
972
- </li>
973
- <li>
974
- Modal Escape key handling is deferred to Bootstrap to respect
975
- <code>keyboard: false</code> and stacked modals.
976
- </li>
977
- <li>
978
- Form validation announcements work automatically for any input with HTML5 validation
979
- attributes.
980
- </li>
981
- </ul>
761
+ <table>
762
+ <thead>
763
+ <tr>
764
+ <th>Class</th>
765
+ <th>Description</th>
766
+ </tr>
767
+ </thead>
768
+ <tbody>
769
+ <tr>
770
+ <td><code>skip-links</code></td>
771
+ <td>Container for skip navigation links.</td>
772
+ </tr>
773
+ <tr>
774
+ <td><code>skip-link</code></td>
775
+ <td>Individual skip link, visible only on focus.</td>
776
+ </tr>
777
+ <tr>
778
+ <td><code>reduce-motion</code></td>
779
+ <td>
780
+ Added to <code>&lt;body&gt;</code> when user prefers reduced motion.
781
+ </td>
782
+ </tr>
783
+ <tr>
784
+ <td><code>sr-only</code></td>
785
+ <td>Screen reader only content (visually hidden).</td>
786
+ </tr>
787
+ <tr>
788
+ <td><code>live-region</code></td>
789
+ <td>ARIA live region for dynamic announcements.</td>
790
+ </tr>
791
+ </tbody>
792
+ </table>
793
+ <h5 id="notes">Notes</h5>
794
+ <ul>
795
+ <li>
796
+ The module integrates with Bootstrap’s modal and dropdown events for focus
797
+ management.
798
+ </li>
799
+ <li>
800
+ Modal Escape key handling is deferred to Bootstrap to respect
801
+ <code>keyboard: false</code> and stacked modals.
802
+ </li>
803
+ <li>
804
+ Form validation announcements work automatically for any input with HTML5
805
+ validation attributes.
806
+ </li>
807
+ </ul>
808
+ </div>
809
+ </div>
810
+ </div>
811
+ </div>
982
812
  </div>
983
813
  <!--end::Container-->
984
814
  </div>
@@ -1048,7 +878,71 @@
1048
878
  }
1049
879
  });
1050
880
  </script>
1051
- <!--end::OverlayScrollbars Configure-->
881
+ <!--end::OverlayScrollbars Configure--><!--begin::Color Mode Toggle (#6010)-->
882
+ <script>
883
+ (() => {
884
+ 'use strict';
885
+
886
+ const STORAGE_KEY = 'lte-theme';
887
+
888
+ const getStoredTheme = () => localStorage.getItem(STORAGE_KEY);
889
+ const setStoredTheme = (theme) => localStorage.setItem(STORAGE_KEY, theme);
890
+
891
+ const prefersDark = () => globalThis.matchMedia('(prefers-color-scheme: dark)').matches;
892
+
893
+ const getPreferredTheme = () => {
894
+ const stored = getStoredTheme();
895
+ if (stored) return stored;
896
+ return prefersDark() ? 'dark' : 'light';
897
+ };
898
+
899
+ const setTheme = (theme) => {
900
+ const resolved = theme === 'auto' ? (prefersDark() ? 'dark' : 'light') : theme;
901
+ document.documentElement.setAttribute('data-bs-theme', resolved);
902
+ };
903
+
904
+ setTheme(getPreferredTheme());
905
+
906
+ const showActiveTheme = (theme) => {
907
+ // Highlight the active dropdown option
908
+ document.querySelectorAll('[data-bs-theme-value]').forEach((el) => {
909
+ el.classList.remove('active');
910
+ el.setAttribute('aria-pressed', 'false');
911
+ const check = el.querySelector('.bi-check-lg');
912
+ if (check) check.classList.add('d-none');
913
+ });
914
+ const active = document.querySelector(`[data-bs-theme-value="${theme}"]`);
915
+ if (active) {
916
+ active.classList.add('active');
917
+ active.setAttribute('aria-pressed', 'true');
918
+ const check = active.querySelector('.bi-check-lg');
919
+ if (check) check.classList.remove('d-none');
920
+ }
921
+ // Sync the topbar trigger icon
922
+ document.querySelectorAll('[data-lte-theme-icon]').forEach((icon) => {
923
+ icon.classList.toggle('d-none', icon.dataset.lteThemeIcon !== theme);
924
+ });
925
+ };
926
+
927
+ globalThis.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
928
+ const stored = getStoredTheme();
929
+ if (!stored || stored === 'auto') setTheme(getPreferredTheme());
930
+ });
931
+
932
+ document.addEventListener('DOMContentLoaded', () => {
933
+ showActiveTheme(getPreferredTheme());
934
+ document.querySelectorAll('[data-bs-theme-value]').forEach((toggle) => {
935
+ toggle.addEventListener('click', () => {
936
+ const theme = toggle.getAttribute('data-bs-theme-value');
937
+ setStoredTheme(theme);
938
+ setTheme(theme);
939
+ showActiveTheme(theme);
940
+ });
941
+ });
942
+ });
943
+ })();
944
+ </script>
945
+ <!--end::Color Mode Toggle-->
1052
946
  <!--end::Script-->
1053
947
  </body>
1054
948
  <!--end::Body-->