funciton updated for option, added dark as separate css, look into child style loading

This commit is contained in:
Jacob Haddon 2020-11-20 21:03:31 -05:00
parent 8255d3a784
commit db18cc711f
4 changed files with 334 additions and 323 deletions

View File

@ -4,9 +4,18 @@
# Enqueue the css
$darkcolor = "dark";
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles');
function theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
// wp_enqueue_style( 'dark-style', get_stylesheet_directory_uri() . '/style-dark.css' );
if ($darkcolor == "blue") {
wp_enqueue_style( 'dark-style', get_stylesheet_directory_uri() . '/style-dark.css' );
} else {
wp_enqueue_style( 'dark-style', get_stylesheet_directory_uri() . '/style-dark.css' );
}
} # theme_enqueue_styles

0
style-blue.css Normal file
View File

325
style-dark.css Normal file
View File

@ -0,0 +1,325 @@
/* Dark Mode Theme */
@media screen and (prefers-color-scheme: dark)
{
/* Text Colors */
/*
Primary Colors:
1 #e1e1e1 Primary Text Color
2 #111111 Darkest Main Body Area Color
3 #222222 Dark
4 #343434 Med Dark
5 #222222 Inactive
Accent Colors:
1 #8e8e8e
2 #007acc
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: #e1e1e1;
}
/* 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: #8e8e8e;
}
/* 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: #007acc; }
/* 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: #fff;
}
/* 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: #111111;
}
/* 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: #222222;
}
/* Primary color 4 Medium Dark */
code,
hr
{
background: #343434;
}
/* 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: #222222;
}
/* Accent Color 1; */
.widget_calendar tbody a:hover,
.widget_calendar tbody a:focus { background-color: #8e8e8e; }
/* 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: #007acc; }
/* Border Colors */
/* Primary color 3 Dark */
.post-navigation,
.post-navigation div + div,
.widget,
.comments-title,
.comment-reply-title { border-color: #222222; }
/* Primary Color 4 */
/* This is separate because of the 'transparent' */
.main-navigation ul ul:before,
.main-navigation ul ul:after { border-color: #343434 transparent; }
/* Primary Color 4 */
.main-navigation ul ul li,
.main-navigation ul ul { border-color: #343434; }
/* 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: #8e8e8e; }
/* background-color: transparent; */
.menu-toggle,
.menu-toggle:hover,
.menu-toggle:focus { background-color: transparent; }
body:not(.search-results) .entry-summary blockquote { border-color: currentColor; }
}

323
style.css
View File

@ -135,327 +135,4 @@ code,
/* media 985px */
/* Dark Mode Theme */
@media screen and (prefers-color-scheme: dark)
{
/* Text Colors */
/*
Primary Colors:
1 #e1e1e1 Primary Text Color
2 #111111 Darkest Main Body Area Color
3 #222222 Dark
4 #343434 Med Dark
5 #222222 Inactive
Accent Colors:
1 #8e8e8e
2 #007acc
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: #e1e1e1;
}
/* 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: #8e8e8e;
}
/* 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: #007acc; }
/* 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: #fff;
}
/* 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: #111111;
}
/* 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: #222222;
}
/* Primary color 4 Medium Dark */
code,
hr
{
background: #343434;
}
/* 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: #222222;
}
/* Accent Color 1; */
.widget_calendar tbody a:hover,
.widget_calendar tbody a:focus { background-color: #8e8e8e; }
/* 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: #007acc; }
/* Border Colors */
/* Primary color 3 Dark */
.post-navigation,
.post-navigation div + div,
.widget,
.comments-title,
.comment-reply-title { border-color: #222222; }
/* Primary Color 4 */
/* This is separate because of the 'transparent' */
.main-navigation ul ul:before,
.main-navigation ul ul:after { border-color: #343434 transparent; }
/* Primary Color 4 */
.main-navigation ul ul li,
.main-navigation ul ul { border-color: #343434; }
/* 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: #8e8e8e; }
/* background-color: transparent; */
.menu-toggle,
.menu-toggle:hover,
.menu-toggle:focus { background-color: transparent; }
body:not(.search-results) .entry-summary blockquote { border-color: currentColor; }
}