Archived topic
Dark mode tweaks
23 replies · Started by hitesh on June 9, 2022
Hey guys,
I have used some code from a YouTuber and it kind of worked to get me dark mode on the blog posts.
However, there are some things that need fixing. And if you can, please tell me:
1. How to turn the white strips on the sides to black?
2. The switcher icon is not changing from the sun to the moon when placed in the navigation. But it was when placed anywhere else.
Any help would be appreciated.
This is the code i have used:
custom html:
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" class="mode-switch-button" viewBox="0 0 20 20" onclick="colorModeSwitcher()">
<g id="switcher-icon" transform="translate(-384 -141)">
<g id="sun" transform="translate(14)">
<path id="brightness-high-fill" d="M15,10a5,5,0,1,1-5-5A5,5,0,0,1,15,10ZM10,0a.625.625,0,0,1,.625.625v2.5a.625.625,0,0,1-1.25,0V.625A.625.625,0,0,1,10,0Zm0,16.25a.625.625,0,0,1,.625.625v2.5a.625.625,0,0,1-1.25,0v-2.5A.625.625,0,0,1,10,16.25ZM20,10a.625.625,0,0,1-.625.625h-2.5a.625.625,0,0,1,0-1.25h2.5A.625.625,0,0,1,20,10ZM3.75,10a.625.625,0,0,1-.625.625H.625a.625.625,0,0,1,0-1.25h2.5A.625.625,0,0,1,3.75,10ZM17.071,2.929a.625.625,0,0,1,0,.884L15.3,5.581A.625.625,0,0,1,14.42,4.7l1.767-1.768a.625.625,0,0,1,.884,0ZM5.58,14.42a.625.625,0,0,1,0,.884L3.813,17.071a.625.625,0,1,1-.884-.884L4.7,14.42A.625.625,0,0,1,5.58,14.42Zm11.491,2.651a.625.625,0,0,1-.884,0L14.42,15.3a.625.625,0,1,1,.884-.884l1.767,1.768a.625.625,0,0,1,0,.884ZM5.58,5.581a.625.625,0,0,1-.884,0L2.929,3.813a.625.625,0,1,1,.884-.884L5.58,4.7a.625.625,0,0,1,0,.885Z" transform="translate(370 141)" fill="#f6f7f8"></path>
</g>
<g id="moon" transform="translate(-11.084 2.917)">
<g id="moon-stars-fill" transform="translate(398 141)">
<path id="Path_17" data-name="Path 17" d="M5.384.246a.673.673,0,0,1,.072.76A6.317,6.317,0,0,0,4.668,4.07a6.506,6.506,0,0,0,6.567,6.444,6.684,6.684,0,0,0,1.376-.142.711.711,0,0,1,.727.28.642.642,0,0,1-.028.791,7.531,7.531,0,0,1-5.822,2.726A7.416,7.416,0,0,1,0,6.827,7.343,7.343,0,0,1,4.6.053a.681.681,0,0,1,.786.193Z" transform="translate(0 -0.001)" fill="#181818"></path>
<path id="Path_18" data-name="Path 18" d="M9.979,2.23a.154.154,0,0,1,.292,0l.274.823a1.23,1.23,0,0,0,.777.777l.823.274a.154.154,0,0,1,0,.292l-.823.274a1.228,1.228,0,0,0-.777.777l-.274.823a.154.154,0,0,1-.292,0L9.7,5.448a1.228,1.228,0,0,0-.777-.777L8.1,4.4a.154.154,0,0,1,0-.292l.823-.274A1.228,1.228,0,0,0,9.7,3.053l.274-.823ZM12.153.071a.1.1,0,0,1,.194,0l.183.548a.818.818,0,0,0,.519.519l.548.183a.1.1,0,0,1,0,.194l-.548.183a.819.819,0,0,0-.519.519l-.183.548a.1.1,0,0,1-.194,0l-.183-.548a.819.819,0,0,0-.519-.519L10.9,1.514a.1.1,0,0,1,0-.194l.548-.183A.818.818,0,0,0,11.97.619l.183-.548Z" transform="translate(0.501 -0.001)" fill="#181818"></path>
</g>
</g>
</g>
</svg>
hook:
<script>function colorModeSwitcher() {
var element = document.getElementById("content");
element.classList.toggle("light-mode");
}</script>
CSS:
.mode-switch-button{
width: 24px;
height: 24px;
cursor: pointer;
}
g#moon{
opacity: 0;
transition: .5s opacity ease-in;
}
g#sun{
opacity: 1;
transition: .5s opacity ease-in;
}
.light-mode g#moon{
opacity: 1;
}
.light-mode g#sun{
opacity: 0;
}
.light-mode{
background-color: black;
color: #000000;
}
.light-mode h1{
color: #ffffff;
}
.light-mode h2, .light-mode h3, .light-mode h4{
color: #fe9277;
}
.light-mode p, .light-mode ul{
color: #ffffff;
}
.light-mode a{
color: #fe9277;
transition: .2s all ease-in;
}
.light-mode a:hover{
color: #ffffff;
}
.light-mode .sidebar .widget {
background-color: black;
}
.light-mode .sidebar ul.ez-toc-list > li.active > a {
font-weight: 900;
color: #7F1A01;
font-size: 16px;
}
.light-mode .sidebar ul.ez-toc-list > li > a {
font-weight: 500;
color: #ffffff;
font-size: 16px;
}
.light-mode .entry-meta {
font-weight: 500;
color: #ffffff;
font-size: 16px;
}
#content{
transition: .2s all ease-in;
}
Hi there,
The code is targeting the contentarea, in your case it should be targeting the bodyelement.
1. JavaScript:
Try replace this line var element = document.getElementById("content"); with var element = document.getElementsByTagName("BODY")[0];
2. CSS:
Replace this:
#content{
transition: .2s all ease-in;
}with
body {
transition: .2s all ease-in;
}hey, thanks for the assistance.
but now the content area has gone absurd:
https://drive.google.com/file/d/16UkmJqsxBCOiqhKPXW3PjOvjJX-zln80/view?usp=sharing
And, is there a way to store the user preference so that once someone turns the dark mode on it stays that way for all blog posts or on page refresh?
Hi there,
see the users reply here:
- he provides a link to his final script that includes the localStorage preferences.
Thanks for the redirect.
I'll try to take it from there.
You're welcome
Hello people,
So I have tried to use the guidance provided as told and failed miserably.
Finally, I turned towards media@prefers-dark-color thing to set things dark based on native user preference. I have been mostly successful in applying that as a hook on the blog posts only.
Just that it flashes white before going dark. Can I have some code to put so that it looks more natural?
May not be related, but this is the CSS:
@media (prefers-color-scheme: dark) {
:root {
--base-3: #121212;
}
h1, p, ul{
color: #e1e1e1;
}
h2, h3, h4{
color: #fe9277;
}
p>a{
font-size:inherit;
}
blockquote>p {
color: #fe9277;
}
a{
color: #fe9277;
transition: .2s all ease-in;
font-size: 17px;
}
a:hover{
color: #e1e1e1;
}
.sidebar ul.ez-toc-list > li.active > a {
font-weight: 900;
color: #fe9277 !important;
font-size: 16px;
}
.sidebar ul.ez-toc-list > li >a {
font-weight: 500;
color: #e1e1e1;
font-size: 16px;
}
.sidebar .ez-toc-title {
font-weight: 600;
color: #fe9277;
font-size: 18px;
}
.entry-meta {
font-weight: 500;
color: #e1e1e1;
font-size: 17px;
}
.gb-container-6256ab9d {
background-color: #121212;
}
.gb-container-6256ab9d p{
color:#e1e1e1;
}
.gb-container-795a034c p{
color: #fe9277;
}
.gb-container-d305d458 {
box-shadow: rgba(23,43,99,.3) 5px 5px 2px;
border-radius: 5px;
}
ul.wp-block-latest-posts>li>a
{
font-size: inherit;
}
.wp-block-table {
color:#e1e1e1;
}
.wp-block-image, .wp-block-video{
color:#e1e1e1;
}
.wp-block-code{
color: #e1e1e1;
background-color:#000000;
}
.copyright-bar{
color:#e1e1e1;
}
.footer-bar .widget_nav_menu a{
color: #e1e1e1;
font-size:inherit;
}
h2.entry-title a {
color: #fe9277;
font-size:inherit;
}
h2.entry-title a:hover {
color: #e1e1e1;
font-size:inherit;
}
.nav-links .page-numbers.current {
color:#e1e1e1;
}
.site-content a:visited{
color: #e1e1e1!important;
font-size:inherit !important;
}
}
@media (prefers-color-scheme: light){
h2.entry-title a {
color: #7f1a01;
font-size:inherit;
}
h2.entry-title a:hover {
color: #fe9277;
font-size:inherit;
}
.nav-links .page-numbers.current {
color:#222222;
}
}
Can you provide the link where we can see the flash?
hey,
you can check out the issue on any of the blog posts such as:
Hi Hitesh,
Visiting the link from my end, I can’t seem to replicate the issue.
Are the any additional steps to reproduce the issue?
If there isn’t can you try viewing the site from a different browser, and then on a different device as well?
Kindly let us know how it goes.
hey Fernando,
please check the slow-mo video in the private tab.
It flashes white before the web page goes dark. for context, you can check any makeuseof.com page and it loads dark without any reload flash.
How did testing from a different device go?
From my end, this is how it loads: https://share.getcloudapp.com/DOuddBKm
Also tested with a Slow 3G network, and still couldn’t replicate the issue: https://share.getcloudapp.com/Z4uAAjpj
Can you try disabling caching/optimization plugins temporarily to test as well?
hey,
Cleared the cache and disabled the plugin.
please check.
from my smartphone, the flash is less visible but still there.
if it is of any help, i read somewhere to put some code so that it's the first thing that gets loaded. not sure though how to implement this.
