Darkmode (feature)

[hwalinga]

It would be nice to have a darkmode option in the config. Since some people really like darkmode.

Since this project is based on bootstrap, you can simply replace the bootstrap files with a themed one from for example bootswatch.com

I already poked around a bit and it generally works, but some elements need some additionally CSS. I tried to do that myself, but I had difficulties setting the correct shades of grey. (Full disclosure: I actually don't like darkmode.)

[farridav]

That's a great idea, I am a dark mode fan personally.

I'll have a think about the potential for implementation, I have some ideas already

[hwalinga]

What ideas?

I so far personally settled with darkly from bootswatch: https://bootswatch.com/darkly/

[farridav]

I think supporting bootswatch themes would be a good start, there are admin LTE skins too, but they don't change much.

I think having an optional bootswatch theme configured from the jazzmin settings would be good, and perhaps also an optional dropdown that allows you to choose a theme for the current session, I've done this kind of a thing before and it turned out quite nicely.

[farridav]

I started to look at this in the morning, using any of the bootswatch themes seems to have no effect, as I think adminlte is compiled with bootstrap, and they are in the business of promoting their own premium templates.

It might be possible to compile pre-themed versions of adminlte using the variables from each of the bootswatch themes

Have you managed to get any theming working ?

[hwalinga]

It is some time ago and I don't have so much time now, but I think I just added the compiled bootstrap css from bootswatch to the admin/base_site.html and that's it. (Since all components have bootstrap names this works, but it doesn't work for components that are custom. But as far as I could see that weren't a lot. But you do need to add a bit of custom CSS yourself.)

{% extends "admin/base.html" %}
{% load static %}
{% block extrastyle %}
    <link rel="stylesheet" href="{% static 'vendor/bootswatch/dist/darkly/bootstrap.min.css'%}" />
{% endblock %}

[kristofgilicze]

Bootstrap team is also looking into this: https://github.com/twbs/bootstrap/issues/27514 ( targeting v5 ) Hopefully the adminlte + "bootstrap" compiled mix will be updated.

Recently implemented web standard is a great way to achieve 'color scheme' via CSS media query.

@media (prefers-color-scheme: dark) {
  .day.dark-scheme   { background:  #333; color: white; }
  .night.dark-scheme { background: black; color:  #ddd; }
}

The Bootswatch solution proposed by @hwalinga looks great, you can make it optional using the media prop on the link tag.

{% extends "admin/base.html" %}
{% load static %}
{% block extrastyle %}
    <link 
      rel="stylesheet"
      href="{% static 'vendor/bootswatch/dist/darkly/bootstrap.min.css'%}"
      media="(prefers-color-scheme: dark)"
    />
{% endblock %}

[farridav]

I've had a run at this over here https://github.com/farridav/django-jazzmin/pull/207

Let me know if this gets you where you need to be, or feel free to suggest/contribute any tweaks

See https://github.com/farridav/django-jazzmin/blob/8fd707725b3059c6d42c7fb2a3759eecffd10424/docs/ui_customisation.md for notes on how to enable it

[kristofgilicze]

Wow so many themes :D My only issue is that this makes it so that you can set the theme globally for everyone. So for theming this is great, for 'dark mode' not so much.

The solution that I described above, makes it dependent on the individual users preference ( browser settings ). 'prefers-color-scheme' should be available across all major browsers see: https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme

Maybe there is a middleground, where we could have a setting for:

THEME --> used normally ( light ), if empty we use vanilla bootstrap DARK_THEME -> If this is set then we decide based upon the preferes_color_scheme setting.

 <!-- Bootswatch theme -->
 {% if  jazzmin_ui.theme %}
   <link rel="stylesheet" href="{{ jazzmin_ui.theme }}"  id="jazzmin-theme" />
 {% endif %} 
 {% if  jazzmin_ui.dark_theme %}
   <link rel="stylesheet" href=""{{ jazzmin_ui.dark_theme }}" media="(prefers-color-scheme:dark)"/>
 {% endif %} 

I am wondering, is there a AdminLTE version where bootstrap is not bundled ? I added a check for the theme as well, to avoid loading bootstrap twice if the setting does not override the theme.

Let me know how do you feel about this! This should be a small adjustment given what you have done so far on https://github.com/farridav/django-jazzmin/pull/207, but I could also write something up - if there is interest.

[farridav]

Some great points here, I've made tweaks to that PR that do the following:

1. If the default theme is in use, dont add additional bootstrap CSS, use the one bundled with adminLTE
2. Allow setting of a theme condition/media query (So you can choose any dark theme, but precondition its use on whether the user prefers dark or light mode)
3. Update the UI builder to allow experimenting with this
4. Update the docs to explain this

If there's any more to add, please let me know on that PR

[hwalinga]

Wow, you really went the extra mile, thanks a lot.

I do have some remarks, but I will make a new issue for that.