Automatic Dark Mode Customisation

  • Author
    Posts
  • #150014

    chambyteblog
    Member

    Hi,

    I recently migrated to WordPress from Squarespace. I used a custom CSS code for the blog template that added Dark/Light mode on my Squarespace blog.

    I’ve come across some WordPress blogs that have implemented custom Dark/Light Mode options on their blogs that works automatically with device settings. I managed to get one of those custom CSS codes but obviously both CSS Codes will need to be modified to work with the Venture Theme.

    If it’s possible to help modify either to come up with one code that does the job that will be great.

    Code used on Squarespace:

      @media (prefers-color-scheme:     dark) {
       body {
     color: #fafafa;
     background-color: #1a1a1a; 
     }
     .blog-title a {
     color: #ffffff;
     }
       .post-title a {
       color: #ffffff !important;
     } 
        blockquote p {
       color: #ffffff !important;
     }
     /* Tagline */
     .logo-subtitle {
         color: white;
     }
     /* Nav */
     nav.main-nav li a {
         color: white !important;
     }
     /* Post Title */
     article h1.entry-title a {
         color: white !important;
     }
    div#mobileMenuLink a {
         color: #fff;
     }
    
     @media (prefers-color-scheme:dark) {
        h2, h3 {
        color: #fff !important;
     }
     }
    
     }
    
    article h2.entry-title a {
         color: white !important;
     }

    Code obtain from Another WordPress blog;

    /* DARK MODE */
    ​
    @media (prefers-color-scheme: dark) {
        html {
            background-color: #0e0e0e;
        }
        body {
        	background-color: none;
        }
        h1, h2, h3, h4, h5, h6 {
            color: white;
        }
    
        article {
            background-color: #1D2129;
            color: white;
        }
    ​
        .post-template #wrapper .content {
            background-color: #1D2129;
        }
    ​
        .post-title {
            color: white;
        }
    ​
        .post-meta {
            color: #cccdce;
        }
    ​
        a {
            color: #f8345e'
        }
        blockquote {
        	color: #b1b1b1;
        }
    
        a {
        	color: #ffffff;
        }
    }

    Thanks in advance. Your help is appreciated.

    The blog I need help with is chambyte.net.

    #150023

    tarasdashkevych
    Theme Author

    Hello,

    The reason why this custom CSS does not work because each WordPress theme comes with its own markup structure and CSS classes.

    I am going to create a custom CSS for you and test it on my local machine. I’ll let you know when it’s ready.

    Also, we might introduce automatic Dark Mode in the future releases once we are done with refactoring.

    Thank you for your patience!
    Taras

    #150032

    chambyteblog
    Member

    Hi Taras,

    I thought that might be the case.

    Thank you very much for taking the time to create a custom CSS to activate Dark Mode for the Venture theme. I’m sure myself and many others will be happy to make use of it for now while we wait for Dark Mode to be fully implemented as part of the theme in the future.

    Your help is appreciated, as always.

    #150076

    tarasdashkevych
    Theme Author

    “I’m sure myself and many others will be happy to make use of it for now while we wait for Dark Mode to be fully implemented as part of the theme in the future.”
    – I agree with you. So, once the refactoring is done, we will add an option to activate an automatic dark mode. We hope that a support for “prefers-color-scheme” will be much higher in browsers once we are done with refactoring. Current status: https://caniuse.com/#feat=prefers-color-scheme

    “Thank you very much for taking the time to create a custom CSS to activate Dark Mode for the Venture theme.”
    – I’ll try to finish this custom CSS by the end of a day. The custom CSS might be long and some of it might not work after the theme update (because of the refactoring).

    Thank you,
    Taras

    #150094

    tarasdashkevych
    Theme Author

    Hi,

    Here is a temporary custom CSS you can use to enable automatic dark mode:

    
    @media (prefers-color-scheme: dark) {
    	#page,
    	#primary-header {
    		background-color: #1a1a1a;
    	}
    
    	blockquote,
    	h1, h2, h3, h4, h5, h6 {
    		color: #eaeaea;
    	}
    
    	.site input:not([type="submit"]),
    	.site textarea,
    	.site select {
    		background-color: #5a5a5a;
    		color: #222222;
    	}
    
    	#colophon,
    	.toggle-sidebar,
    	.site-header,
    	.site-header.scroll-header,
    	.site-header.default-view-header {
    		background-color: #2a2a2a;
    	}
    
    	.th-bordered-stack--base > * + * {
    		border-top-color: #5a5a5a;
    	}
    
    	blockquote:before {
    		color: #2a2a2a;
    	}
    
    	.single.singular-featured-image-inactive .site #primary-header .entry-meta,
    	.single.singular-featured-image-inactive .site #primary-header .entry-meta a {
    		color: #fafafa;
    	}
    
    	#page .entry-meta a {
    		color: inherit;
    	}
    
    	#page,
    	#page .entry-meta,
    	#colophon a:hover,
    	.portfolio-type-list li,
    	.portfolio-type-list li a,
    	.posts-navigation a,
    	.post-navigation .meta-nav,
    	.post-navigation a:hover,
    	.comment-navigation,
    	.comment-navigation a,
    	.widget a:hover,
    	.hentry .entry-footer,
    	.hentry .entry-footer .edit-link a,
    	.page-links .page-links-title,
    	.page-links span,
    	#page .page-links a span,
    	.page-header .page-title,
    	.page-header .taxonomy-description,
    	.author-container .author-name,
    	#comments .comment-metadata,
    	#comments .comment-metadata a,
    	#comments .reply a,
    	.wp-caption-text,
    	#page div.sharedaddy h3.sd-title,
    	#page div#jp-relatedposts h3.jp-relatedposts-headline,
    	#masthead.scroll-header,
    	#masthead.scroll-header a,
    	#masthead.default-view-header,
    	#masthead.default-view-header a,
    	.single.singular-featured-image-inactive #masthead,
    	.page.singular-featured-image-inactive:not(.page-template-templatesfront-page-php) #masthead,
    	.single.singular-featured-image-inactive #masthead a,
    	.page.singular-featured-image-inactive:not(.page-template-templatesfront-page-php) #masthead a {
    		color: #fafafa;
    	}
    }
    
    

    The custom CSS is long because some colors are overwritten by WordPress.com custom color option, so we need to change it via the custom CSS as well.

    Hope this helps. Let me know if you have any additional questions.

    Thanks,
    Taras

    #150095

    chambyteblog
    Member

    Hi Taras,

    Incredible. Working pretty well. I haven’t found any issues at all with it yet. I’ll keep an eye out for the theme updated after the refactoring and see what works and what doesn’t. In the meantime this goes a long way in trying to have the site as accessible as possible.

    My thanks to you for all your help. Truly truly appreciated. Respect to you.

    #150123

    tarasdashkevych
    Theme Author

    You are very welcome! I am glad I was able to help :)

    All the best,
    Taras

The topic ‘Automatic Dark Mode Customisation’ is closed to new replies.