Haddon2016/style-blue.css

/* Dark Mode Theme */

:root {
	--primary1: #e1e1e1;
	--primary2: #1b264d;
	--primary3: #263b61;
	--primary4: #13576e;
	--accent1: #8b9fad;
	--accent2: #FE6813;
	--binary: #fff;
}

@media screen and (prefers-color-scheme: dark)
{
	/* Text Colors  */
	
	/* 
	Primary Colors: 
	1 #e1e1e1 Primary Text Color
	2 #21133C Darkest Main Body Area Color
	3 #271C4D Dark 
	4 #381D71 Med Dark
	
	Accent Colors: 
	1 #FC4CA0
	2 #52FFBD
	
	Binary: 
	Either white (#FFF) or black (#000)
	
	Accent color 1 and 2 are used as inverse of each other thoughout the theme
	 */
	
	/* Primary Color 1 : Text Color */
	body,
		button,
		input,
		select,
		textarea,
		blockquote cite,
		.wp-block-quote cite,
		blockquote small,
		input[type="date"]:focus,
		input[type="time"]:focus,
		input[type="datetime-local"]:focus,
		input[type="week"]:focus,
		input[type="month"]:focus,
		input[type="text"]:focus,
		input[type="email"]:focus,
		input[type="url"]:focus,
		input[type="password"]:focus,
		input[type="search"]:focus,
		input[type="tel"]:focus,
		input[type="number"]:focus,
		textarea:focus,
		.main-navigation a,
		.dropdown-toggle,
		.social-navigation a,
		.post-navigation a,
		.widget-title a,
		.site-branding .site-title a,
		.menu-toggle,
		.entry-title a,
		.page-links > .page-links-title,
		.pagination a:hover,
		.pagination a:focus,
		.comment-reply-title small a:hover,
		.comment-reply-title small a:focus,
		.wp-block-code { color: var(--primary1); }
	
	/* 	Accent Color 1 */
	blockquote,
		input[type="date"],
		input[type="time"],
		input[type="datetime-local"],
		input[type="week"],
		input[type="month"],
		input[type="text"],
		input[type="email"],
		input[type="url"],
		input[type="password"],
		input[type="search"],
		input[type="tel"],
		input[type="number"],
		textarea,
		.post-password-form label,
		a:hover,
		a:focus,
		a:active,
		.post-navigation .meta-nav,
		.image-navigation,
		.comment-navigation,
		.widget_recent_entries .post-date,
		.widget_rss .rss-date,
		.widget_rss cite,
		.site-description,
		.author-bio,
		.entry-footer,
		.entry-footer a,
		.sticky-post,
		.taxonomy-description,
		.entry-caption,
		.comment-author,
		.comment-metadata,
		.pingback .edit-link,
		.comment-metadata a,
		.pingback .comment-edit-link,
		.comment-form label,
		.comment-notes,
		.comment-awaiting-moderation,
		.logged-in-as,
		.form-allowed-tags,
		.site-info,
		.site-info a,
		.wp-caption .wp-caption-text,
		.gallery-caption,
		.widecolumn label,
		.widecolumn .mu_register label,
		a.page-numbers:hover { color: var(--accent1); }
	
	/* 	Accent Color 2  */
	a,
		.main-navigation a:hover,
		.main-navigation a:focus,
		.dropdown-toggle:hover,
		.dropdown-toggle:focus,
		.social-navigation a:hover:before,
		.social-navigation a:focus:before,
		.post-navigation a:hover .post-title,
		.post-navigation a:focus .post-title,
		.tagcloud a:hover,
		.tagcloud a:focus,
		.site-branding .site-title a:hover,
		.site-branding .site-title a:focus,
		.menu-toggle:hover,
		.menu-toggle:focus,
		.entry-title a:hover,
		.entry-title a:focus,
		.entry-footer a:hover,
		.entry-footer a:focus,
		.comment-metadata a:hover,
		.comment-metadata a:focus,
		.pingback .comment-edit-link:hover,
		.pingback .comment-edit-link:focus,
		.comment-reply-link,
		.required,
		.site-info a:hover,
		.site-info a:focus,
		.main-navigation li:hover > a,
		.main-navigation li.focus > a { color: var(--accent2); }
	
	/* 	Binary, White or Black: color: #fff; */
	mark,
		ins,
		button,
		button[disabled]:hover,
		button[disabled]:focus,
		input[type="button"],
		input[type="button"][disabled]:hover,
		input[type="button"][disabled]:focus,
		input[type="reset"],
		input[type="reset"][disabled]:hover,
		input[type="reset"][disabled]:focus,
		input[type="submit"],
		input[type="submit"][disabled]:hover,
		input[type="submit"][disabled]:focus,
		.pagination .nav-links:before,
		.pagination .nav-links:after,
		.pagination .prev,
		.pagination .next,
		.pagination .prev:hover,
		.pagination .prev:focus,
		.pagination .next:hover,
		.pagination .next:focus,
		.widget_calendar tbody a,
		.widget_calendar tbody a:hover,
		.widget_calendar tbody a:focus,
		.menu-toggle.toggled-on,
		.menu-toggle.toggled-on:hover,
		.menu-toggle.toggled-on:focus,
		.page-links a,
		.page-links a:hover,
		.page-links a:focus
	{
		/* 	color: #000; */
		color: var(--binary);
	}
	
	/* Back Ground Colors */
	/* 	Primary Color 2: Darkest */
	.main-navigation ul ul li, 
		input[type="date"]:focus,
		input[type="time"]:focus,
		input[type="datetime-local"]:focus,
		input[type="week"]:focus,
		input[type="month"]:focus,
		input[type="text"]:focus,
		input[type="email"]:focus,
		input[type="url"]:focus,
		input[type="password"]:focus,
		input[type="search"]:focus,
		input[type="tel"]:focus,
		input[type="number"]:focus,
		textarea:focus,
		.site { background-color: var(--primary2); }
	
	/* 	Primary Color 3 Dark */
	body,
		button,
		button[disabled]:hover,
		button[disabled]:focus,
		input[type="button"],
		input[type="button"][disabled]:hover,
		input[type="button"][disabled]:focus,
		input[type="reset"],
		input[type="reset"][disabled]:hover,
		input[type="reset"][disabled]:focus,
		input[type="submit"],
		input[type="submit"][disabled]:hover,
		input[type="submit"][disabled]:focus,
		.pagination:before,
		.pagination:after,
		.pagination .prev,
		.pagination .next,
		.menu-toggle.toggled-on,
		.menu-toggle.toggled-on:hover,
		.menu-toggle.toggled-on:focus,
		.page-links a { background: var(--primary3);}
	
	/* 	Primary color 4 Medium Dark */
	code,
		hr { background: var(--primary4); }
	
	/* 	Primary Color 4: Inactive */
	input[type="date"],
		input[type="time"],
		input[type="datetime-local"],
		input[type="week"],
		input[type="month"],
		input[type="text"],
		input[type="email"],
		input[type="url"],
		input[type="password"],
		input[type="search"],
		input[type="tel"],
		input[type="number"],
		textarea { background: var(--primary3); }
	
	/* 	Accent Color 1; */
	.widget_calendar tbody a:hover,
		.widget_calendar tbody a:focus { background-color: var(--accent1); }
	
	/* 	Accent Color 2 */
	mark,
		ins,
		.pagination .prev:hover,
		.pagination .prev:focus,
		.pagination .next:hover,
		.pagination .next:focus,
		button:hover,
		button:focus,
		input[type="button"]:hover,
		input[type="button"]:focus,
		input[type="reset"]:hover,
		input[type="reset"]:focus,
		input[type="submit"]:hover,
		input[type="submit"]:focus,
		.widget_calendar tbody a,
		.page-links a:hover,
		.page-links a:focus { background: var(--accent2); }
	
	/* 	Border Colors */
	/* 	Primary color 3 Dark */
	.post-navigation,
		.post-navigation div + div,
		.widget,
		.comments-title,
		.comment-reply-title { border-color: var(--primary3); }
	
	/* 	Primary Color 4 */
	/* 	This is separate because of the 'transparent' */
	.main-navigation ul ul:before,
		.main-navigation ul ul:after { border-color: var(--primary4) transparent; }
	
	/* 	Primary Color 4 */
	.main-navigation ul ul li,
		.main-navigation ul ul { border-color: var(--primary4); }
	
	/* 	Accent Color 1 */
	input[type="date"]:focus,
		input[type="time"]:focus,
		input[type="datetime-local"]:focus,
		input[type="week"]:focus,
		input[type="month"]:focus,
		input[type="text"]:focus,
		input[type="email"]:focus,
		input[type="url"]:focus,
		input[type="password"]:focus,
		input[type="search"]:focus,
		input[type="tel"]:focus,
		input[type="number"]:focus,
		textarea:focus,
		.tagcloud a:hover, 
		.tagcloud a:focus { border-color: var(--accent1); }
	
	/* 	background-color: transparent; */
	.menu-toggle,
		.menu-toggle:hover,
		.menu-toggle:focus { background-color: transparent; }
	body:not(.search-results) .entry-summary blockquote { border-color: currentColor; }
}