Tag Archives: CSS

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

{"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}}}

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

Automatic Dark Mode for WordPress

Update: The Twenty Twenty-One by WordPress comes with color mode switcher. The feature is opt-in and supported in most operating systems, including Android, iOS, macOS, Windows 10, as well as most Linux distributions. If you have Dark Mode enabled, your site will be shown to visitors using a light or dark color scheme, respecting their operating system’s preferences.

So if you’re new to tweaking CSS, you don’t have to follow my guide. You could just install the latest version of Twenty Twenty-One.

But, if you are determined, continue reading this blog post.

Now that prefers-color-scheme is available for modern web browsers, you can use it to enable an automatic dark mode for WordPress websites. It is a CSS media feature used to detect if the user has requested the system to use a light or dark color theme.

Meaning, you can define a dedicated style for each color scheme. And the browser will display the specific color scheme of the website according to the user’s system settings.

The recommended way to use it

@media (prefers-color-scheme: dark) {
body  {
background-color: #121212;color: #fafafa;}}
@media (prefers-color-scheme: light)  {
body {
background-color: #fafafa;color: #121212;}}

Refer to https://developer.mozilla.org/

But I use something straightforward like this

@media (prefers-color-scheme: dark) {
body {
background-color: #121212;color: #fafafa;}}

I prefer this approach since I’m confident with my default color combination.  Take a look at the styling I use for dark mode.

@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;
}
*.lgc-grid-50:hover {
background: #72b1db;
color: hsla(0,0%,100%,.75);
}
}

I use the GeneratePress framework for WordPress.

How to Implement Dark Mode for WordPress Websites

STEP 1: Understand and take a note of your default style.css or color options. It varies according to the WordPress theme you’re using. Make sure you don’t leave out tiny details such as the color combination for hyperlinks, menu elements, footer, code, blockquote, etc.

STEP 2: Adjust colors. You can add the prefers-color-scheme CSS media feature within style.css or to the additional CSS section of WordPress. Which is accessible via Dashboard → Appearance → Customize → Additional CSS.

BEST PRACTICE: It’s recommended to place @media (prefers-color-scheme: dark) {} right beneath the current set of additional CSS.

Keep in mind that dark theme isn’t just about replacing colors. Don’t use high contrast colors for paragraphs. Adhere to WebAIM guidelines and Google best practices. Good luck!

Tip Me:

Support if you’d like by referring my resume or donating through PayPal or Alipay.