Dark Mode for GeneratePress

Yep, Dark mode for GeneratePress done minimally. This website is a demo.

I made Jot, a starter site template for GeneratePress Premium. It comes with an automatic dark mode for supported systems and browsers. This template heavily relies on  prefers-color-scheme CSS media feature. Refer to my previous blog post if you want to read more about that.

Key features of Jot:

  • Automatic dark mode. Follows Google’s best practices.
  • Grayscale filter while in dark mode. Applicable to img, code, kbd, pre, samp, and blockquote.

Overall, the site template would be ideal for writers and bloggers that embrace minimalism.

How to use the GeneratePress Dark Mode site template

Step 1: Download the JSON file and import it to your GeneratePress settings. Accessible via Dashboard → Appearance → GeneratePress → Import Settings.

Step 2: Copy and paste the CSS to the Additional CSS section. Accessible via Dashboard → Appearance → Customize → Additional CSS.

Be sure to edit the settings and style to meet your goals and standards.

Raw .json

Raw CSS

.main-navigation {
	border-top: 1px solid #efefef;
	border-bottom: 1px solid #efefef;
}
code {
	background: #72b1db;
	color: #fafafa;
	padding: 2px;
	border-radius: 3px;
}

img {
	border-radius: 5px;
}
kbd,
pre,
samp {
	font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace;
	overflow-x: auto;
	margin: 1.5em 0 2em;
	padding: 20px;
	max-width: 100%;
	color: #fafafa;
	font-size: 0.97rem;
	line-height: 1.5em;
	background: #191919;
	border-radius: 3px;
}
blockquote {
	padding: 15px;
	quotes: "\201C""\201D""\2018""\2019";
	font-size: 96%;
	font-style: inherit;
	margin: 0 0 1.18em;
	position: relative;
	border-left: 3px solid #72b1db;
}
/* Dark Mode for GeneratePress*/
@media (prefers-color-scheme: dark) {
	body,
	.page-hero {
		background-color: #121212;
	}
	.entry-content,
	.entry-summary,
	h1,
	h2,
	h3,
	h4,
	.main-title,
	.main-title a,
	.main-title a:hover,
	.main-title a:visited,
	.wp-caption .wp-caption-text,
	br,
	.entry-title a,
	.entry-title a:visited {
		color: hsla(0, 0%, 100%, .75);
	}
	top,
	.generate-back-to-top {
		color: hsla(0, 0%, 100%, .75);
		background-color: #525252;
		text-decoration: none;
	}
	top,
	.generate-back-to-top:hover {
		color: hsla(0, 0%, 100%, .75);
		background-color: #72b1db;
		text-decoration: none;
	}
	.main-navigation {
		border-bottom: 1px solid #333;
		border-top: 1px solid #333;
	}
	code {
		background: #72b1db;
		color: #121212;
		padding: 2px;
		border-radius: 3px;
	}
	img,
	code,
	kbd,
	pre,
	samp,
	blockquote {
		-webkit-filter: grayscale(1);
		filter: grayscale(1);
	}
}

What's faster than a VPN?

Use SocketPro. Best VPN alternative for expats in China.

How to set up a fast website in China?

I provide top-notch website optimization services for China.

See also

Free DigitalOcean CreditCheap VPS HostingSet up a blog in ChinaExpat life in ChengduSpeed up website for ChinaBest VPNs for ChinaHackintosh Journal Sponsor or Donate.

© 2020 Site Notice. Powered by DigitalOcean & GP.