Topic: Dark theme
kawicoder free asked 9 years ago
René Schultz Madsen free answered 3 years ago
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;
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.
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.
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 6 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 9 years ago
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 6 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 6 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 9 years ago
kawicoder free answered 9 years ago
Michal Szymanski staff answered 9 years ago
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Free
- Premium support: No
- Technology: General Bootstrap questions
- MDB Version: -
- Device: -
- Browser: -
- OS: -
- Provided sample code: No
- Provided link: No