Adminlte: [FEATURE] Lighten or Desaturate Color Variables in Dark Mode

[glavrjk]

Is your feature request related to a problem? Please describe.
Regards. I have a small problem with the new dark mode of the 3.1-RC, although for me the choice of dark tones is correct. The default color palette is too saturated and in my project where the primary and secondary colors are quite strong it really looks awful.
Describe the solution you'd like
My question is if there is a way to overwrite the variable values ​​when dark mode in the body class is active? Something like this:

if ($dark_mode == true) {
   $primary = lighten($primary, $percent);
}

// OR

.dark-mode {
  $primary = lighten($primary, $percent);
}

Thank you and sorry for my google translator english... 😄

[danny007in]

I will do this implementation

[glavrjk]

I will do this implementation

Regards. Thanks for your hard work. I have verified your implementation to my issue, but I think it will not solve my problem, although it helps a lot and I appreciate the effort.

The point is that in order to implement the dark colors you would have to declare the dark css from the head. That is, statically implement the dark palette to make it work. Right?

What if through the backend I have configured the users to select the theme they want, whether it is light or dark. I could parameterize the css of the head according to the value of ( user.dark_mode ? true : false ) but I use webpack encore for the handling of dependencies and I cannot or do not know how I would tell it to compile adminlte.css or adminlte-dark.css

Any suggestion? Thank you...

[danny007in]

I will do this implementation

Regards. Thanks for your hard work. I have verified your implementation to my issue, but I think it will not solve my problem, although it helps a lot and I appreciate the effort.

The point is that in order to implement the dark colors you would have to declare the dark css from the head. That is, statically implement the dark palette to make it work. Right?

What if through the backend I have configured the users to select the theme they want, whether it is light or dark. I could parameterize the css of the head according to the value of ( user.dark_mode ? true : false ) but I use webpack encore for the handling of dependencies and I cannot or do not know how I would tell it to compile adminlte.css or adminlte-dark.css

Any suggestion? Thank you...

Check https://stackoverflow.com/questions/14292997/changing-style-sheet-javascript and https://github.com/ColorlibHQ/AdminLTE/issues/3188#issuecomment-748041598

[REJack]

I will tackle this feature in v4, caused that I want to release v3.1.0 soon.