[Resolved] Dark mode tweaks

Home Forums Support [Resolved] Dark mode tweaks

Home Forums Support Dark mode tweaks

  • This topic has 23 replies, 4 voices, and was last updated 4 weeks ago by David.
Viewing 15 posts - 1 through 15 (of 24 total)
  • Author
    Posts
  • #2248246
    hitesh

    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&#8221; 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;
    }

    #2248540
    Ying
    Staff
    Customer Support

    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;
    }
    #2250587
    hitesh

    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?

    #2250823
    David
    Staff
    Customer Support

    Hi there,

    see the users reply here:

    https://generatepress.com/forums/topic/is-it-possible-to-fire-generate_element_display-using-wp-hooks/#post-2179091

    – he provides a link to his final script that includes the localStorage preferences.

    #2256826
    hitesh

    Thanks for the redirect.

    I’ll try to take it from there.

    #2258634
    David
    Staff
    Customer Support
    #2274713
    hitesh

    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;

    }

    }

    #2275123
    Ying
    Staff
    Customer Support

    Can you provide the link where we can see the flash?

    #2275472
    hitesh

    hey,
    you can check out the issue on any of the blog posts such as:

    https://mustechie.com/nordpass-vs-lastpass/

    #2275486
    Fernando
    Customer Support

    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.

    #2275488
    hitesh

    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.

    #2275499
    Fernando
    Customer Support

    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?

    #2275503
    hitesh

    hey,

    Cleared the cache and disabled the plugin.

    please check.

    #2275505
    hitesh

    from my smartphone, the flash is less visible but still there.

    #2275506
    hitesh

    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.

Viewing 15 posts - 1 through 15 (of 24 total)
  • You must be logged in to reply to this topic.