Minimal-mistakes: Allow user to toggle between themes [light/dark]

Created on 18 Jan 2019 · 13Comments · Source: mmistakes/minimal-mistakes

Summary

I'm new to Front-end development. I was wondering if it would be possible to allow the user to toggle between themes/css properties using the same color configurations specified using minimal_mistakes_skin: "default"

Motivation

In the recent times a lot of people prefer a darker background at night that's easier on the eyes
At the same time, it's a know fact that using light font on a dark background ALWAYS reduces readability of the site.
I came across site like https://fdp.io/# that allow switching between themes using css properties
I was wondering if there is a way to allow the user to switch between the colour themes

Stale Enhancement

Source

rajesh-s

👍2

Most helpful comment

I'd also very much like to be able to achieve this.
Since my website is supposed to have both showcase pages and posts I'd like for users to be able to switch to the light theme when reading.

Gioele-Bencivenga on 8 Jun 2020

👍2

All 13 comments

Like this? https://codepen.io/sashatran/pen/rPaLgG

ghost on 28 Jan 2019

Yes that's right. Another example of it is the following Hugo theme https://academic-demo.netlify.com

rajesh-s on 31 Jan 2019

This is how i _(a noob)_ achieved/reverse-engineered it in Minimal-Mistakes

the Sass mixins were a tad bit confusing to me. So I extracted the css files by running the theme locally in default and dark mode. i saved them as main.css and dark.css
pulled up kdiff3 and compared the key differences
set up CSS variables for the differences
started substituting the CSS colors in the main.css with the variables.
added a light class to the <body> tag
toggled that class on click of a button using javascript.

you can see it in action here _(shameless plug)_ - my dev site
There are a few other decorations on the site which are not directly from the dark theme but the above is the gist.

I am sure Michael will come up with a better solution than that of the above monstrosity. Eagerly waiting as this issue has been marked with the Enhancement label.

astrob0t on 31 Jan 2019

👍1

Not exactly sure how I'd handle this without bloating the theme with a bunch of extra CSS.
The way the stylesheet works now is at build it injects "skin" dependent Sass variables to give everything the correct colors.

Which means the dark skin's styling isn't available to the "light" or vice/versa. Does bundling in all the skins in a stylesheet really the best thing for those who don't care about a light/dark toggle? I dunno...

There's also the issue of the theme not having a canonical "light" skin anymore. There are essentially 10 different color palettes someone can choose... and they don't all compliment each other. Which means probably designing 9 or so more color schemes to invert them.

Personally I've never much cared for sites that add this sort of thing. I'd rather see it happen at the system or browser level. There are browser extensions that do just this which might have better results vs. me trying to maintain consistency across 10 color palettes x 2 modes (20 palettes if you're counting at home).

mmistakes on 11 Feb 2019

👍1

@mmistakes see https://inclusive-components.design/a-theme-switcher/

ghost on 12 Feb 2019

That said I see this as a passing fad. Everyone scrambling to add a light/dark mode to their themes when the OS + browser should be responsible for this behavior.

ghost on 12 Feb 2019

OS + browser can go all dark mode on their browser menu but they can only go as far as just applying a dark contrast mode on the website content, which may lead to the website visuals getting all messed up. So it is actually upto the website developer to manage/feature their own dark mode.

astrob0t on 20 Feb 2019

I agree it's up to the site to control how it looks, but feel the toggle needs to be elsewhere which it seems like macOS is moving wards with Mojave as illustrated by @paulmillr here: https://paulmillr.com/posts/using-dark-mode-in-css/

ghost on 22 Feb 2019

This issue has been automatically marked as stale because it has not had recent activity.

If this is a bug and you can still reproduce this error on the master branch, please reply with any additional information you have about it in order to keep the issue open.

If this is a feature request, please consider whether it can be accomplished in another way. If it cannot, please elaborate on why it is core to this project and why you feel more than 80% of users would find this beneficial.

This issue will automatically be closed in 7 days if no further activity occurs. Thank you for all your contributions.

stale[bot] on 24 Mar 2019

I was wondering if we could resume the discussion around Mojave dark mode, since I'm considering using this theme for docs and not having a dark/light toggle is a bit of a pain point (not insurmountable, just a very nice to have).

rcarmo on 22 Aug 2019

👍2

I know this issue has been marked as closed, but I was wondering if we could continue this discussion as per @rcarmo's suggestion. I'm aware that there is no canonical light or dark theme, but it would be great if some form of customization functionality could be added with a toggling option, i.e. allow users to enable a toggle with two themes specified in _config.yml?

jaketae on 19 Jan 2020

👍2

I'd also very much like to be able to achieve this.
Since my website is supposed to have both showcase pages and posts I'd like for users to be able to switch to the light theme when reading.

Gioele-Bencivenga on 8 Jun 2020

👍2

@astrob0t Hi, I'm a noobie in web dev here. Do you mind sharing your solution in more details?