Dark Mode for AdminLTE

Post Reply
mobhar
User
Posts: 10858

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: 328

Post by vintoICT »

+1


stefano
User
Posts: 19

Post by stefano »

+1


yinsw
User
Posts: 78
Location: Penang, Malaysia

Post by yinsw »

+1


malsonique
User
Posts: 24

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: 8

Post by yusufnalbantoglu »

+1


arbei
User
Posts: 7915

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: 10858

Post by mobhar »

It works properly. Thank you.


yusufnalbantoglu
User
Posts: 8

Post by yusufnalbantoglu »

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


mobhar
User
Posts: 10858

Post by mobhar »

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


malsonique
User
Posts: 24

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


Post Reply