Dark mode toggle should be included!

[swastkk]

Project looks great but it will look more elegant if DARK mode will be introduced. I suggest using a DARK-LIGHT mode Toggle to be introduced in the Web App.

[tdruez]

@swastkk that's a good idea! PR welcome :)

[pombredanne]

Here is an example https://www.djangoproject.com/start/

https://user-images.githubusercontent.com/675997/201722651-fe06b6af-75c4-450f-b4fd-997e1b9b6cf9.mp4

[pombredanne]

See also https://github.com/django/djangoproject.com/search?q=theme-toggle In the HTML of https://www.djangoproject.com/start/I see this block:

<button class="theme-toggle">
  <div class="visually-hidden theme-label-when-auto">Toggle theme (current theme: auto)</div>
  <div class="visually-hidden theme-label-when-light">Toggle theme (current theme: light)</div>
  <div class="visually-hidden theme-label-when-dark">Toggle theme (current theme: dark)</div>

  <div class="visually-hidden">Toggle Light / Dark / Auto color theme</div>
  <svg aria-hidden="true" class="theme-icon-when-auto">
    <use xlink:href="#icon-auto"></use>
  </svg>
  <svg aria-hidden="true" class="theme-icon-when-dark">
    <use xlink:href="#icon-moon"></use>
  </svg>
  <svg aria-hidden="true" class="theme-icon-when-light">
    <use xlink:href="#icon-sun"></use>
  </svg>
</button>

[swastkk]

For the time Being I have added this Toggle button, which will operate the function!! Kindly give your Opinons on this!!!! Signed-off-by- [email protected]

https://user-images.githubusercontent.com/81990329/202520554-04212c0b-d1f7-4aa7-a043-0ab2d407f8dc.mp4

[DennisClark]

Hi @swastkk we cannot play your video in the format you provided. Please feel free to submit a PR for this, and thanks in advance!

[swastkk]

@DennisClark okay will submit a PR for sure :")

[swastkk]

@tdruez @pombredanne @DennisClark Since I have researched on this, found that for the Frontend, Bulma CSS has been used and since its classes have been used , can I use the Custom CSS with

[tdruez]

Dark mode is not available in Bulma and it does not seem likely that it will be added anytime soon. See https://github.com/jgthms/bulma/issues/2342

I don't think we want to put the effort into this, but if we end up changing the CSS library, let's make sure we pick one with Dark mode built-in.

[tdruez]

https://github.com/jgthms/bulma/issues/3678#issuecomment-1818767469