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.

JSON

{"modules":{"Backgrounds":"generate_package_backgrounds","Blog":"generate_package_blog","Colors":"generate_package_colors","Copyright":"generate_package_copyright","Elements":"generate_package_elements","Disable Elements":"generate_package_disable_elements","Menu Plus":"generate_package_menu_plus","Secondary Nav":"generate_package_secondary_nav","Sections":"generate_package_sections","Spacing":"generate_package_spacing","Typography":"generate_package_typography"},"mods":{"font_body_variants":"regular,italic,700,700italic","font_body_category":"serif","font_site_title_variants":"300,300italic,regular,italic,700,700italic,900,900italic","font_site_title_category":"serif","font_site_tagline_variants":false,"font_site_tagline_category":false,"font_navigation_variants":false,"font_navigation_category":false,"font_secondary_navigation_variants":false,"font_secondary_navigation_category":false,"font_buttons_variants":false,"font_buttons_category":false,"font_heading_1_variants":false,"font_heading_1_category":false,"font_heading_2_variants":false,"font_heading_2_category":false,"font_heading_3_variants":false,"font_heading_3_category":false,"font_heading_4_variants":false,"font_heading_4_category":false,"font_heading_5_variants":false,"font_heading_5_category":false,"font_heading_6_variants":false,"font_heading_6_category":false,"font_widget_title_variants":false,"font_widget_title_category":false,"font_footer_variants":"","font_footer_category":"","generate_copyright":"%copy% %current_year% jot.sh. <\/a> Powered by GeneratePress<\/a> for WordPress<\/a>."},"options":{"generate_settings":{"hide_title":false,"hide_tagline":true,"logo":"","retina_logo":"","top_bar_width":"full","top_bar_inner_width":"contained","top_bar_alignment":"left","container_width":500,"header_layout_setting":"fluid-header","header_inner_width":"contained","nav_alignment_setting":"left","header_alignment_setting":"center","nav_layout_setting":"contained-nav","nav_inner_width":"contained","nav_position_setting":"nav-below-header","nav_dropdown_type":"click-arrow","nav_search":"disable","content_layout_setting":"one-container","layout_setting":"no-sidebar","blog_layout_setting":"no-sidebar","single_layout_setting":"no-sidebar","post_content":"excerpt","footer_layout_setting":"fluid-footer","footer_inner_width":"contained","footer_widget_setting":"0","footer_bar_alignment":"right","back_to_top":"","background_color":"#ffffff","text_color":"#333333","link_color":"#72b1db","link_color_hover":"#3498db","link_color_visited":"","font_awesome":false,"font_awesome_v4_shim":false,"dynamic_css_cache":true,"smooth_scroll":false,"header_background_color":"rgba(232,232,232,0)","site_title_color":"#3a3a3a","site_tagline_color":"#7c7c7c","font_body":"PT Serif","site_title_font_transform":"none","site_title_font_size":45,"navigation_font_transform":"none","navigation_background_color":"rgba(232,232,232,0)","navigation_background_hover_color":"rgba(135,135,135,0)","navigation_background_current_color":"rgba(112,112,112,0)","navigation_font_weight":"400","navigation_font_size":17,"navigation_text_hover_color":"#6b96bc","header_text_color":"#3a3a3a","header_link_color":"#b5190e","navigation_text_color":"#727272","navigation_text_current_color":"#6b96bc","header_link_hover_color":"#b5190e","form_button_background_color":"#72b1db","form_button_text_color":"#ffffff","form_button_background_color_hover":"#3498db","form_button_text_color_hover":"#ffffff","form_background_color":"#ffffff","form_border_color":"#0a0a0a","form_border_color_focus":"#0a0a0a","form_text_color":"#0a0a0a","form_text_color_focus":"#0a0a0a","blog_post_title_color":"#333333","blog_post_title_hover_color":"","heading_2_weight":"500","heading_2_transform":"none","heading_2_font_size":24,"heading_1_weight":"500","heading_1_transform":"none","heading_1_font_size":27,"footer_background_color":"rgba(232,232,232,0)","footer_text_color":"#878787","footer_link_color":"#878787","footer_link_hover_color":"#3498db","buttons_font_weight":"600","buttons_font_transform":"none","buttons_font_size":17,"footer_transform":"none","widget_title_font_weight":"600","widget_title_font_transform":"none","widget_title_font_size":21,"widget_content_font_size":17,"footer_font_size":15,"heading_3_transform":"none","subnavigation_background_color":"#666666","subnavigation_background_hover_color":"rgba(85,85,85,0)","subnavigation_background_current_color":"#555555","subnavigation_text_hover_color":"#ffffff","font_awesome_essentials":true,"body_font_size":17,"mobile_heading_1_font_size":27,"logo_width":60,"mobile_site_title_font_size":24,"heading_3_weight":"500","heading_3_font_size":22,"heading_4_weight":"500","heading_4_font_size":20,"body_line_height":1.7,"site_title_font_weight":"500","site_tagline_font_size":15,"heading_1_line_height":1.15,"heading_2_line_height":1.5,"heading_3_line_height":1.3,"nav_dropdown_direction":"left","heading_1_margin_bottom":30,"single_post_title_font_size":29,"single_post_title_font_size_mobile":27,"single_post_title_line_height":1.7,"content_background_color":"rgba(255,255,255,0)","footer_widget_background_color":"rgba(232,232,232,0)","footer_widget_link_hover_color":"","sidebar_widget_background_color":"rgba(255,255,255,0)","paragraph_margin":1.3,"font_footer":"inherit","heading_2_margin_bottom":20,"mobile_heading_2_font_size":24,"entry_meta_link_color_hover":"#3498db","heading_3_margin_bottom":20,"heading_4_line_height":1.3,"top_bar_background_color":"rgba(99,99,99,0)","top_bar_font_size":14,"container_alignment":"boxes","footer_weight":"400","font_site_title":"Merriweather"},"generate_background_settings":false,"generate_blog_settings":{"excerpt_length":35,"read_more":"","masonry":true,"masonry_width":"width2","masonry_most_recent_width":"width4","masonry_load_more":"Load +","masonry_loading":"Loading...","post_image":true,"post_image_position":"","post_image_alignment":"post-image-aligned-center","post_image_width":"","post_image_height":"","date":true,"author":true,"categories":false,"tags":false,"comments":false,"column_layout":false,"columns":"50","featured_column":true,"single_date":true,"single_author":true,"single_categories":true,"single_tags":true,"read_more_button":false,"infinite_scroll":true,"post_image_padding":true,"single_post_image_padding":true,"page_post_image_padding":false,"page_post_image_position":"inside-content","single_post_image_position":"below-title","infinite_scroll_button":false},"generate_secondary_nav_settings":{"secondary_nav_position_setting":"secondary-nav-float-right"},"generate_spacing_settings":{"menu_item_height":52,"separator":20,"header_top":30,"header_right":30,"header_bottom":30,"header_left":30,"right_sidebar_width":30,"content_top":20,"content_right":10,"content_bottom":20,"content_left":10,"mobile_content_top":15,"mobile_content_right":15,"mobile_content_bottom":15,"mobile_content_left":15,"mobile_menu_item_height":53,"footer_right":10,"footer_left":20,"menu_item":11,"footer_bottom":30,"widget_right":30,"widget_left":30,"left_sidebar_width":30,"mobile_widget_right":20,"mobile_widget_top":20,"mobile_widget_bottom":20,"mobile_widget_left":20,"widget_top":25,"widget_bottom":25,"content_element_separator":1,"footer_top":10,"footer_widget_container_right":10,"footer_widget_container_left":10,"mobile_footer_widget_container_top":10,"mobile_footer_widget_container_bottom":10,"footer_widget_container_top":10,"footer_widget_container_bottom":10,"mobile_footer_widget_container_right":15,"mobile_footer_widget_container_left":15,"sub_menu_item_height":9,"mobile_header_right":10,"mobile_header_left":10,"mobile_menu_item":29,"sub_menu_width":110,"mobile_header_top":20,"mobile_header_bottom":20,"top_bar_right":10,"top_bar_left":30,"top_bar_top":8,"top_bar_bottom":8},"generate_menu_plus_settings":{"mobile_header":"enable","mobile_header_branding":"title","mobile_menu_label":"","mobile_header_logo":"","navigation_as_header":false}}}

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);
	}
}