kawicoder free asked 8 years ago

Would be great if there was a beautiful dark theme available!

When are we going to have a dark theme?

Marcin Luczak staff commented 3 years ago

At the moment we provide creating custom, light, and dark themes for MDB5 https://mdbootstrap.com/docs/standard/content-styles/theme/ and also a variety of skins for MDB4 https://mdbootstrap.com/docs/b4/jquery/css/skins/.

Regards, Marcin

williamw priority commented 3 years ago

Hi Marcin,

It's wonderful to see your team offer this dark theming, thank you to the community for requesting it over the years.

Please could these docs for theming in MDB5 be expanded? Three things that could help;

  1. It would be great to see screenshots of how this works in practice, so a screenshot of what the effect of recompiling this code would look like would be great.

  2. It would be handy to know how to utilise this in the compiled code, for example is '$my-dark-theme' used as a class or does it automatically get applied once the compiling is done.

  3. It would be useful to have documentation illustrating how in the front end, an end user could 'toggle' between a light and dark theme. For some people require the choice of one for accessibility.

Thanks again!

Marcin Luczak staff commented 3 years ago

Thank you @williamw for your comment. I've added your suggestions to our ideas list, so our documentation can be clearer in the future.

Regards, Marcin

Kodedylf free answered 5 years ago

I tried replacing bootstrap.css with the bootstrap.css file from the Darkly theme on the Bootswatch site and it seems to work fine on the small project I tried it on.

Michal Szymanski staff answered 8 years ago

We've added that to our todo list, thanks

Andrey Gadyukov free commented 6 years ago

Any updates?

Michal Szymanski staff commented 6 years ago

We have added multiple options of color customizations for any element, so you can easily create your own dark theme. What exactly do you need?

flashkit pro commented 5 years ago

Need to be able to quickly switch between day/night modes with a toggle. In night mode, it's like the new Apple feature where UI/background is dark and text is light. It's to reduce eye strain and extra light if you are working at night or in a low-light environment. I just did a deep dive on this and it looks like MD Bootstrap can't support it with the existing system. You can only override a single variable, for example $primary-color. There is no $primary-color-nightmode that applies when you have, for example, html[data-night-mode] (or html.night-mode, or body.night-mode, etc.). I'm not sure if there is a framework out there right now that enables this out of the box except for the new Apple and Android UI kits.

Bartłomiej Malanowski staff commented 5 years ago

Currently, we don't offer skins switching feature, but I recommend you to create two skins (dark and light). Then, you could simply switch between two skin classes

sam priority answered 8 years ago

I'd love a "dark body" based theme. Its not impossible to do by customising the code, but to do it really well, getting all the shadows and borders and stuff, involves changing a LOT of color variables. If it was built in, you can use the SCSS variables and functions to make it work a lot simpler.

Michal Szymanski staff answered 8 years ago

Thanks for idea, we'll think about it ;)

kawicoder free answered 8 years ago

Hi, Sorry for my description. I mean a theme with a dark body color, and light colored paragraph text everywhere. Sort of like this https://bootswatch.com/darkly/ but not as harsh...

Michal Szymanski staff answered 8 years ago

Hello, could you write a little more details? At the moment we've got a few dark-theme templates and components: http://mdbootstrap.com/MDB/live/Full%20Page%20Image%20Carousel/index.html http://mdbootstrap.com/MDB/live/MDB-MagicPortfolioForVideoMakerLive/index.html http://www.mdbootstrap.com/MDB/live/MDB-MagicPortfolioForCreativeAgency/index.html http://mdbootstrap.com/MDB/live/Full%20Page%20Video%20Carousel/index.html http://mdbootstrap.com/live/doc_dark-side-nav.html And of course you can easily change a color of every element of MDB framework by using our palette (there are a color defined for dark-theme too): http://mdbootstrap.com/css/colors/ Try to describe your idea a little bit more specific and for sure we'll take it into consideration :) Thanks!

Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.



Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No