Replies: 23 comments 15 replies
-
|
Like this? https://codepen.io/sashatran/pen/rPaLgG |
Beta Was this translation helpful? Give feedback.
-
|
Yes that's right. Another example of it is the following Hugo theme https://academic-demo.netlify.com |
Beta Was this translation helpful? Give feedback.
-
|
This is how i (a noob) achieved/reverse-engineered it in Minimal-Mistakes
you can see it in action here (shameless plug) - my dev site 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 |
Beta Was this translation helpful? Give feedback.
-
|
Not exactly sure how I'd handle this without bloating the theme with a bunch of extra CSS. 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). |
Beta Was this translation helpful? Give feedback.
-
|
@mmistakes see https://inclusive-components.design/a-theme-switcher/ |
Beta Was this translation helpful? Give feedback.
-
|
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. |
Beta Was this translation helpful? Give feedback.
-
|
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. |
Beta Was this translation helpful? Give feedback.
-
|
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/ |
Beta Was this translation helpful? Give feedback.
-
|
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). |
Beta Was this translation helpful? Give feedback.
-
|
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 |
Beta Was this translation helpful? Give feedback.
-
|
I'd also very much like to be able to achieve this. |
Beta Was this translation helpful? Give feedback.
-
|
@astrob0t Hi, I'm a noobie in web dev here. Do you mind sharing your solution in more details? |
Beta Was this translation helpful? Give feedback.
-
|
Sorry for not viewing this thread earlier, I'm a noob to jekyll and web dev so apologies if this is not easy at all. Great theme Michael. Will love it always! Here is my original ISSUE : SummaryWouldn't it be great to add a two theme switching button feature to the website: Maybe include something in the theme configuration file as :
MotivationI thought of looking at some articles and found these :
However, these documents don't cover the themes that minimal mistakes uses, aka : | aqua | neon | plum | dirt | mint | sunrise | air | contrast | dark | DrawbacksNone that I know of , except that it may cause the one navigation menu item to maybe go to the sidebar with three horizontal bars? |
Beta Was this translation helpful? Give feedback.
-
|
It'd be great to have this toggle feature. |
Beta Was this translation helpful? Give feedback.
-
|
I've been able to achieve this. Before telling the procedure, let's discuss the main idea: First, edit _config.yml : There are going to be two themes. The first one is declared as usual. And for the second one, we create a new entry caled minimal_mistakes_skin2. So, add the following lines: Create a file in your project directory in the location assets/css/theme2.scss (create a folder named assets, and inside that, create another folder named css) and insert the following lines in the file: Now, create a _includes folder and copy the _includes/head.html from your Minimal-mistakes gems directory. Now we have to modify the file. Open it and find the following line: Change it to: and just after that line, add the following: Note that, I am using "light" and "dark" as generic names of skin1 and skin2. These strings have nothing to do with the actual skin names. Now, create a _layouts folder and copy the _layouts/default.html from your Minimal-mistakes gems directory. Now we have to modify the file. Open it and find the following part: Keep those lines intact and just above those, add the following: Now if you build your site, you'll see a large button with bad design and written "HI!" on it (add your own css). Click on that to toggle theme. Also verify that the skin remains consistent if we navigate to other pages. Here is one example, done on the theme Please suggest improvements and designs for the button. |
Beta Was this translation helpful? Give feedback.
-
|
I put it in the masthead (_includes/masthead.html). |
Beta Was this translation helpful? Give feedback.
-
|
Beta Was this translation helpful? Give feedback.
-
|
Building on this, I needed to change my masthead logo colors with the theme change. I added entry to {% capture logo_path2 %}{{ site.logo2 }}{% endcapture %}and replaced {% unless logo_path == empty %}
<a class="site-logo" href="{{ '/' | relative_url }}"><img src="{{ logo_path | relative_url }}" alt=""></a>
{% endunless %}with {% unless logo_path == empty %}
{% if site.minimal_mistakes_skin2 and site.logo2 %}
<a class="site-logo" href="{{ '/' | relative_url }}">
<picture>
<source
srcset="{{ logo_path2 | relative_url }}"
media="(prefers-color-scheme: dark)"
alt="">
<img src="{{ logo_path | relative_url }}" alt="">
</picture>
</a>
{% else %}
<a class="site-logo" href="{{ '/' | relative_url }}"><img src="{{ logo_path | relative_url }}" alt=""></a>
{% endif %}
{% endunless %} |
Beta Was this translation helpful? Give feedback.
-
|
@sohamsaha99 You're a star! You should make a PR to minimal-mistakes to make this an optional feature :) |
Beta Was this translation helpful? Give feedback.
-
|
If you want an icon next to navigation: As @shuds13 suggested move it to In Of course change |
Beta Was this translation helpful? Give feedback.
-
|
Hi, Thanks for this, it looks very promising. The link to the example webpage is broken ( https://sohamsaha99.github.io/notes/ ). Could you please fix it to see how it looks like? Thank you. |
Beta Was this translation helpful? Give feedback.
-
|
Hey @fabrizioleone I've added it to my website: https://www.vladsiv.com/ |
Beta Was this translation helpful? Give feedback.
-
|
This seems to work well. Perhaps updating the documentation is sufficient. |
Beta Was this translation helpful? Give feedback.
-
|
I can also confirm that the above solution works well. Comparing @sohamsaha99's solution to @VladimirSiv's, I found that one should modify |
Beta Was this translation helpful? Give feedback.
-
|
Hello,
So basically the best of both world. and there is one problem: when the OS theme is set to dark, the theme change button on the website doesn't cause any effects. |
Beta Was this translation helpful? Give feedback.
-
|
Untested code but I think if you modify the <link rel="stylesheet alternate" href="{{ '/assets/css/theme2.css' | relative_url }}" id="theme_source_2">
<script>
let theme = sessionStorage.getItem('theme');
- if(theme === 'dark')
+ if (theme === 'dark' || window.matchMedia('(prefers-color-scheme: dark)').matches)
{
sessionStorage.setItem('theme', 'dark');
node1 = document.getElementById('theme_source');
node2 = document.getElementById('theme_source_2');
node1.setAttribute('rel', 'stylesheet alternate');
node2.setAttribute('rel', 'stylesheet');
}
else
{
sessionStorage.setItem('theme', 'light');
}
</script> |
Beta Was this translation helpful? Give feedback.
-
|
@mmistakes thanks a lot, that was fast! But it doesn't work :( |
Beta Was this translation helpful? Give feedback.
-
|
I implemented night mode using this method. It works fine. Thanks. But I am facing an issue with giscus comment provider. How can I toggle giscus theme with site theme? |
Beta Was this translation helpful? Give feedback.
-
|
I love the solution provided by @sohamsaha99, Thanks!! But sometimes, whenever I reload a page or change the theme, CSS is loaded after HTML (I can see my form fields for a brief moment while they are still unstyled). I think I've solved this by first loading // in head.html
<link rel="stylesheet" href="{{ '/assets/css/main.css' | relative_url }}" id="theme_source">
{% if site.minimal_mistakes_skin2 %}
<link rel="stylesheet" href="{{ '/assets/css/theme2.css' | relative_url }}" id="theme_source_2">
<script>
if (sessionStorage.getItem('theme') === null) {
if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
sessionStorage.setItem('theme', 'dark');
}
else{
sessionStorage.setItem('theme', 'light');
}
}
let theme = sessionStorage.getItem('theme');
if(theme === "dark"){
document.getElementById('theme_source').setAttribute('rel', 'stylesheet alternate');
sessionStorage.setItem('theme', 'dark');
}
else
{
document.getElementById('theme_source_2').setAttribute('rel', 'stylesheet alternate');
sessionStorage.setItem('theme', 'light');
}
</script>
{% endif %}And for the button script, I've set a timeout for disabling a stylesheet (this solved the CSS issues when applying theme change for me): // in _includes/masthead.html
<div class="masthead">
.....
{% if site.minimal_mistakes_skin2 %}
<li><i class="fas fa-fw fa-adjust dark_mode_btn" aria-hidden="true" onclick="dark_mode_btn_click()"></i></li>
{% endif %}
.....
</div>
// in _includes/scripts.html
<script>
function dark_mode_btn_click() {
var node1 = document.getElementById('theme_source');
var node2 = document.getElementById('theme_source_2');
if(node1.getAttribute('rel')=='stylesheet'){
node2.setAttribute('rel', 'stylesheet');
setTimeout(function(){
node1.setAttribute('rel', 'stylesheet alternate');
}, 10);
sessionStorage.setItem('theme', 'dark');
}else{
node1.setAttribute('rel', 'stylesheet');
setTimeout(function(){
node2.setAttribute('rel', 'stylesheet alternate');
}, 10);
sessionStorage.setItem('theme', 'light');
}
return false;
}
<script> |
Beta Was this translation helpful? Give feedback.
-
Was seeing the same issue where reloading the page would have little moments where things didn't look right. This solved it for me. Great work! |
Beta Was this translation helpful? Give feedback.
-
|
Thanks, above solution from @codeslake worked for me. I had another question, and it may seem dumb. I have some HTML elements where I need to bring in different CSS classes (different image from FA basically) when it is dark mode instead of light. Anyone have an idea how to achieve this? |
Beta Was this translation helpful? Give feedback.
-
|
Piling on the list of "here's what I tried that worked", I started using the trick written up by @codeslake, @codeslake and documented by @hsteinshiromoto. Instead of having an explicit button, I just wanted to use whichever preference the user has set on their OS. Turns out that you can add media queries to <link title="main" rel="stylesheet" href="{{ '/assets/css/main.css' | relative_url }}" >
<link title="main" rel="stylesheet" href="{{ '/assets/css/dark.css' | relative_url }}" media="(prefers-color-scheme: dark)"> |
Beta Was this translation helpful? Give feedback.
-
|
Came across this, and worked great - thanks! Using a media query to link compiled In summary:
Simple and likely covers 90% of what most need 👌 |
Beta Was this translation helpful? Give feedback.
-
|
@amomchilov Adding the media query to the |
Beta Was this translation helpful? Give feedback.
-
|
@crykn I haven't bothered to implement a clickable toggle (I figure matching the OS pref is prob want 99% of people want anyway), but it might be interesting to combine these two techniques. So the media query is used to set the default (and respond to changes in the OS pref, e.g. at sunset), while the button can be used to override it. |
Beta Was this translation helpful? Give feedback.
-
|
The solution in my comment doesn't use a button either; it also depends solely on the OS settings. |
Beta Was this translation helpful? Give feedback.
-
|
Came across this thread, also looked for ways to toggle giscus themes along with dark mode. I'll help everyone else summarize what needs to be done. I referred to this when implementing my giscus toggle: giscus/giscus#336 (comment) The full code in action:I am a noob in javascript, so I combined some of the above into a new js asset: dark-mode.jsfunction changeGiscusTheme(theme) {
function sendMessage(message) {
const iframe = document.querySelector('iframe.giscus-frame');
if (!iframe) return;
iframe.contentWindow.postMessage({ giscus: message }, 'https://giscus.app');
}
sendMessage({
setConfig: {
theme: theme
}
});
}
function updateThemeButton(){
let currentTheme = sessionStorage.getItem('theme');
let themeToggle = document.getElementById('theme-toggle');
if (currentTheme === 'dark') {
themeToggle.classList.remove('fa-adjust');
themeToggle.classList.add('fa-sun');
} else {
themeToggle.classList.remove('fa-sun');
themeToggle.classList.add('fa-adjust');
}
}
function themeOnLoad(){
let theme = sessionStorage.getItem('theme');
if(theme === "dark" || (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches && !(sessionStorage.getItem('manualtoggled'))))
{
sessionStorage.setItem('theme', 'dark');
node1 = document.getElementById('theme_source');
node2 = document.getElementById('theme_source_2');
node1.setAttribute('rel', 'stylesheet alternate');
node2.setAttribute('rel', 'stylesheet');
}
else
{
sessionStorage.setItem('theme', 'light');
}
updateThemeButton();
}
function toggleTheme() {
node1 = document.getElementById('theme_source');
node2 = document.getElementById('theme_source_2');
if (node1.getAttribute('rel')=='stylesheet') {
node1.setAttribute('rel', 'stylesheet alternate');
node2.setAttribute('rel', 'stylesheet');
sessionStorage.setItem('theme', 'dark');
changeGiscusTheme("dark");
} else {
node1.setAttribute('rel', 'stylesheet');
node2.setAttribute('rel', 'stylesheet alternate');
sessionStorage.setItem('theme', 'light');
changeGiscusTheme("light");
}
updateThemeButton();
sessionStorage.setItem('manualtoggled', true);
}Save the above code somewhere in the repo directory. Remove the Add the follwing in minimal_mistakes_skin_dark: "dark"
# logo: "/assets/brand/logo.svg"
# logo_dark: "/assets/brand/logo_dark.svg"
head_scripts:
- /assets/js/dark-mode.jsThen, in <i class="fas fa-fw fa-adjust" id="theme-toggle" aria-hidden="true" title="Toggle between light and dark mode" onclick="toggleTheme(); return false;"></i>
<script>themeOnLoad();</script>Also, in {% unless logo_path == empty %}
<a class="site-logo" href="{{ '/' | relative_url }}"><img src="{{ logo_path | relative_url }}" alt="{{ site.masthead_title | default: site.title }}"></a>
{% endunless %}Replace the above with the following: {% unless logo_path == empty %}
<a class="site-logo" href="{{ '/' | relative_url }}">
<picture>
{% unless logo_path_dark == empty %}
<!-- dark mode logo -->
<source
srcset="{{ logo_path_dark | relative_url }}"
media="(prefers-color-scheme: dark)">
{% endunless %}
<img src="{{ logo_path | relative_url }}" alt="{{ site.masthead_title | default: site.title }}">
</picture>
</a>
{% endunless %}In <link title="main" rel="stylesheet" href="{{ '/assets/css/main.css' | relative_url }}" id="theme_source">
<link rel="stylesheet alternate" href="{{ '/assets/css/main2.css' | relative_url }}" id="theme_source_2">Create a new file @charset "utf-8";
@import "minimal-mistakes/skins/{{ site.minimal_mistakes_skin_dark | default: 'dark' }}"; // skin
@import "minimal-mistakes"; // main partialsIf you use GiscusWhen loading into a new post or page with giscus enabled, the theme will be set by default. Since we set the value Find the following var script = document.createElement('script');
let giscusTheme = sessionStorage.getItem("theme");Then, find the script.setAttribute('data-theme', giscusTheme);Note: I am using the manual toggle solution provided by #2033 (comment), you also need to check the names of your variables. Not sure if the above function has redundant parts, but I am happy with the outcome for the time being. You can see the effect in action here: https://lilme.cc/new-year-old-challenge/ Edit: After a lot of head-scratching and edits, I believe this is the final version that works and looks good. Hopefully dark mode toggle will be implemented in the official theme in the future. |
Beta Was this translation helpful? Give feedback.
and others
Uh oh!
There was an error while loading. Please reload this page.
-
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
Beta Was this translation helpful? Give feedback.
All reactions