Dark Mode for AdminLTE

Post Reply
mobhar
User
Posts: 11660

Dark Mode for AdminLTE

Post by mobhar »

Please provide the AdminLTE Dark option from HTML -> Theme -> Theme, so that it will automatically adjust the related settings from the CSS variables below.

Thank you.


vintoICT
User
Posts: 389

Post by vintoICT »

+1


stefano
User
Posts: 24

Post by stefano »

+1


yinsw
User
Posts: 140
Location: Penang, Malaysia

Post by yinsw »

+1


malsonique
User
Posts: 25

Post by malsonique »

It should be even better if user can choose either:

  1. light mode;
  2. dark mode;
  3. system default;

yusufnalbantoglu
User
Posts: 12

Post by yusufnalbantoglu »

+1


arbei
User
Posts: 9286

Post by arbei »

Bootstrap 5.2 does not fully support dark mode yet, AdminLTE 3.2 supports dark mode for Bootstrap 4 only, so I believe there is no official support on dark mode yet. However, since PHPMaker v2023 customized AdminLTE 3.2 for Bootstrap 5.2, there is some basic support on dark mode. Under the HTML -> Theme tab, search "enable-dark-mode", generate all scripts again, then you should be able to enable dark mode by adding the CSS class "dark-mode" to the <body> tag. (Remember to press Ctrl + F5 in your browser to refresh the .css files.)


mobhar
User
Posts: 11660

Post by mobhar »

It works properly. Thank you.


yusufnalbantoglu
User
Posts: 12

Post by yusufnalbantoglu »

How to add dark-mode css class to body tag?


mobhar
User
Posts: 11660

Post by mobhar »

You may customize the generated src/config.php file, see the BODY_CLASS part.


malsonique
User
Posts: 25

Post by malsonique »

I think it will be even better if the template can provide a dropdown menu for user to choose light or dark mode by clicking a brush icon on upper right corner, just like this forum. :D


mishanian
User
Posts: 120

Post by mishanian »

drop down Level selection of Mode is needed


Webmaster
User
Posts: 9425

Post by Webmaster »

Try v2024.


mobhar
User
Posts: 11660

Post by mobhar »

Thanks.

However, when we use sidebar-light-* class for the Sidebar from Theme -> AdminLTE -> Sidebar class, then after switching it to dark-mode, the Sidebar still remains in light-mode.

Just a friendly suggestion, the Sidebar should be able to adjust to dark-mode, too. It is too dazzled to see the white Sidebar in a dark-mode display.


Webmaster
User
Posts: 9425

Post by Webmaster »

Try v2024.1.


mobhar
User
Posts: 11660

Post by mobhar »

Thanks, now it works as expected.


Post Reply