Yorrike

Follow @yorrike on Micro.blog.

How to Add Dark Mode to your Custom CSS

Dark mode is now a feature over all of Apple’s operating systems. With this mode, if selected, window chrome, backgrounds and other interfaces will be dark. I find this easier on my eyes, and it as an essential accessibility feature.

But if someone is in dark mode, you may want to have your website automatically switch them to a dark theme, so you’re not unexpectantly blasting them with white light.

I use the Martha theme, so you may need to modify the below for your site. To get the most basic dark mode going, add this to your custom css in your micro.blog (In your account area, go to posts (at the top), then click on Design in the next row down, and click the Edit CSS button near the bottom of the page in the custom theme area and then paste the following in):

@media (prefers-color-scheme: dark) {
    body, nav.main-nav {
        background:#333;
        color: #DDD;
    }
}

This will make your page text a light grey (#DDD) and the background a very dark grey (#333). Adjust to your liking. Any other elements you’d like to adjust for dark-only purposes can be placed within the @media (prefers-color-scheme: dark) {} block of css.

As reference, here is the dark-mode section of my custom css:

@media (prefers-color-scheme: dark) {
    body, nav.main-nav {
        background:#222;
        color: #DDD;
    }
  	/* The website name at the top of the site is normally 
  black, make it light grey */
    h1.p-name {
        color: #C8C8C8;
    }
  	/* Images can be very bright, so make them a little
        transparent, but full brightness on hover*/
    img {
        opacity: .70;
        transition: opacity .5s ease-in-out;
    }
    img:hover {
        opacity: 1;
  	}
    h3 {
        color: #FFF;
        box-shadow: inset 0 -1px 0 #666;
    }  
      
    /* My avatar at the top of the page is normally 
       floating with no shape - not so with a dark BG */
      .profile #avatar {
          border-radius: 20px;
          /* Slightly invert the avatar so it's darker */
          filter: invert(15%);	
          opacity: 1;
    }
  
    /* Make all links a light grey with a dark red underline */
    nav.main-nav a, #footer a, #post-nav a, p a ,div a, li article header h2 a, .h-entry .u-url {
        box-shadow: inset 0 -2px 0 #800;
        color: #BBB;
    }
  
    /* Switch the link text to bright white and red on hover */
    nav.main-nav a:hover, #footer a:hover, #post-nav a:hover, p a:hover, div a:hover, li article header h2 a:hover, .h-entry .u-url:hover {
        box-shadow: inset 0 -2px 0 #F00;
        color: #fff;
    }
}
Yorrike @yorrike