From 224a400721b077b421aa0f3f5265417efbd02520 Mon Sep 17 00:00:00 2001 From: Kim Coleman Date: Wed, 7 Aug 2024 16:09:24 -0400 Subject: [PATCH 1/6] Collection of fixes for Dark Mode --- css/dark.css | 8 -------- functions.php | 26 +++++++++++++++++++------- inc/customizer.php | 30 +++++++++++++++++++++++++++++- js/customizer-controls.js | 1 + theme.json | 2 +- 5 files changed, 50 insertions(+), 17 deletions(-) diff --git a/css/dark.css b/css/dark.css index 7e933a6..c43f704 100644 --- a/css/dark.css +++ b/css/dark.css @@ -1,14 +1,6 @@ /*-------------------------------------------------------------- Inverted Color Profiles for Dark Backgrounds --------------------------------------------------------------*/ -body, -blockquote.quote, -.q, -.lead, -div.lead p, -.pmpro_content_message { - color: #FFF; -} .site-footer .site-info p, .site-footer .site-info .columns:first-child a { color: #FFFFFF99; diff --git a/functions.php b/functions.php index afb2510..25c247e 100644 --- a/functions.php +++ b/functions.php @@ -362,13 +362,6 @@ function memberlite_setup() { 'color' => get_theme_mod( 'color_white', $memberlite_defaults['color_white'] ) ); - // Text Color - $color_scheme[] = array( - 'name' => __( 'Text', 'memberlite' ), - 'slug' => 'body-text', - 'color' => get_theme_mod( 'color_text', $memberlite_defaults['color_text'] ) - ); - // Borders Color $color_scheme[] = array( 'name' => __( 'Borders', 'memberlite' ), @@ -420,6 +413,25 @@ function memberlite_setup() { $color_scheme_temp = array_unique( array_column( $color_scheme, 'color' ) ); $color_scheme = array_intersect_key( $color_scheme, $color_scheme_temp ); + // Always ensure the body text color is set. + $color_scheme[] = array( + 'name' => __( 'Text', 'memberlite' ), + 'slug' => 'body-text', + 'color' => get_theme_mod( 'color_text', $memberlite_defaults['color_text'] ) + ); + + // Always ensure the base color is set. + $base_color = get_theme_mod( 'background_color', $memberlite_defaults['background_color'] ); + // Add a # if it's missing. + if ( strpos( $base_color, '#' ) === false ) { + $base_color = '#' . $base_color; + } + $color_scheme[] = array( + 'name' => __( 'Base', 'memberlite' ), + 'slug' => 'base', + 'color' => esc_attr( $base_color ) + ); + // Build colors array for palette. $colors = array(); foreach( $color_scheme as $color ) { diff --git a/inc/customizer.php b/inc/customizer.php index 2eab3b3..e09e4da 100644 --- a/inc/customizer.php +++ b/inc/customizer.php @@ -623,6 +623,29 @@ public static function register( $wp_customize ) { ) ); + $wp_customize->add_setting( + 'color_text', + array( + 'default' => $memberlite_defaults['color_text'], + 'sanitize_callback' => 'sanitize_hex_color', + 'sanitize_js_callback' => 'maybe_hash_hex_color', + 'transport' => 'postMessage', + ) + ); + + $wp_customize->add_control( + new WP_Customize_Color_Control( + $wp_customize, + 'memberlite_color_text', + array( + 'label' => __( 'Text Color', 'memberlite' ), + 'section' => 'colors', + 'settings' => 'color_text', + 'priority' => 40, + ) + ) + ); + $wp_customize->add_setting( 'color_link', array( @@ -943,6 +966,11 @@ public static function header_output() { $color_button = $memberlite_defaults['color_button']; } + $color_text = get_theme_mod( 'color_text' ); + if ( empty( $color_text ) ) { + $color_text = $memberlite_defaults['color_text']; + } + $color_link = get_theme_mod( 'color_link' ); if ( empty( $color_link ) ) { $color_link = $memberlite_defaults['color_link']; @@ -998,7 +1026,6 @@ public static function header_output() { // Get theme settings from defaults. $hover_brightness = $memberlite_defaults['hover_brightness']; $color_white = $memberlite_defaults['color_white']; - $color_text = $memberlite_defaults['color_text']; $color_borders = $memberlite_defaults['color_borders']; ?> @@ -1014,6 +1041,7 @@ public static function header_output() { --memberlite-color-header-background: ; --memberlite-color-site-navigation-background: ; --memberlite-color-site-navigation: ; + --memberlite-color-text: ; --memberlite-color-link: ; --memberlite-color-meta-link: ; --memberlite-color-primary: ; diff --git a/js/customizer-controls.js b/js/customizer-controls.js index 8121666..dcc4715 100644 --- a/js/customizer-controls.js +++ b/js/customizer-controls.js @@ -6,6 +6,7 @@ 'memberlite_bgcolor_header', 'memberlite_bgcolor_site_navigation', 'memberlite_color_site_navigation', + 'memberlite_color_text', 'memberlite_color_link', 'memberlite_color_meta_link', 'memberlite_color_primary', diff --git a/theme.json b/theme.json index fb8b7cb..68bf6f7 100644 --- a/theme.json +++ b/theme.json @@ -1016,7 +1016,7 @@ } }, "color": { - "background": "var(--wp--preset--color--white)", + "background": "var(--wp--preset--color--base)", "text": "var(--wp--preset--color--body-text)" }, "elements": { From 7c9a39d4972536cd626d6a9465bd9b62c745a9a4 Mon Sep 17 00:00:00 2001 From: Kim Coleman Date: Sat, 24 Aug 2024 09:35:03 -0400 Subject: [PATCH 2/6] Removing unnecessary styles --- css/dark.css | 28 ++++------------------------ 1 file changed, 4 insertions(+), 24 deletions(-) diff --git a/css/dark.css b/css/dark.css index c43f704..140fd2e 100644 --- a/css/dark.css +++ b/css/dark.css @@ -69,33 +69,13 @@ a.pmpro_cancel:link, .content-area .pmpro_btn.pmpro_btn-cancel:visited { color: #FFFFFFCC; } -#primary .hentry .entry-meta, .post .entry-footer, -#secondary .widget a, -#secondary .widget a:link, -#secondary .widget h3.wp-block-heading, -.wp-block-image figcaption, -form.pmpro_form .lite, -.pmpro_btn-cancel, -.pmpro_nolink, -.pmpro_nolink:link, -.pmpro_cancel, -.pmpro_cancel:link, -a.pmpro_cancel:link, -.content-area .pmpro_btn.pmpro_cancel, -.content-area .pmpro_btn.pmpro_btn-cancel, -.content-area .pmpro_btn.pmpro_btn-cancel:link, -.content-area .pmpro_btn.pmpro_btn-cancel:visited -.widget-area .widget a:not(.btn):not(.pmpro_btn) { +.widget-area .widget a:not(.btn):not(.pmpro_btn) , +#secondary .widget-title, +#secondary .widget h3.wp-block-heading { border-bottom: none; } -#secondary .widget a:hover, -.pmpro_btn.pmpro_btn-cancel:hover, -.pmpro_nolink:hover, -.pmpro_cancel:hover, -a.pmpro_cancel:hover, -.content-area .pmpro_btn.pmpro_cancel:hover, -.entry-content a.pmpro_btn.pmpro_btn-cancel:hover { +.widget-area .widget a:hover:not(.btn):not(.pmpro_btn) { color: #FFF; } #primary .hentry .entry-meta a, From 23878f94e57081870570db7b8457b218967fecdb Mon Sep 17 00:00:00 2001 From: Kim Coleman Date: Sat, 24 Aug 2024 09:49:49 -0400 Subject: [PATCH 3/6] Unnecessary styles and width adjustments now handled in PMPro --- style.css | 32 +++----------------------------- 1 file changed, 3 insertions(+), 29 deletions(-) diff --git a/style.css b/style.css index e114f6e..63b3d90 100644 --- a/style.css +++ b/style.css @@ -3249,40 +3249,14 @@ object { .comment-respond .form-submit input[type=submit] { width: 100%; } - form#pmpro_form .pmpro_checkout-fields, - form#pmpro_form #pmpro_payment_information_fields .pmpro_checkout-field-payment-request-button { - padding: 2.9rem 0; - } - form#pmpro_form .pmpro_checkout h3 { - padding: 1.45rem .9rem .9rem .9rem; - line-height: 3.2rem; - } - form#pmpro_form .pmpro_checkout h3 span.pmpro_checkout-h3-msg { - display: block; - float: none; - margin: 0; - } - form.pmpro_form .pmpro_select_payment_method span { - display: block; - } - form.pmpro_form .input[type=text], - form.pmpro_form select { - width: 93%; - } - form.pmpro_form .pmpro_checkout-field-checkbox label { - display: inline; - } - form.pmpro_form #CVV, - form.pmpro_form select#ExpirationMonth, - form.pmpro_form select#ExpirationYear { - width: 43%; - } .pmpro_levels-div { text-align: center; } .pmpro_levels-div .entry-footer .alignright, .pmpro_levels-2col .entry-footer .alignright { - float: none; margin: 0 0 1.5rem 0; display: block; + display: block; + float: none; + margin: 0 0 1.5rem 0; } #pmpro_levels.pmpro_advanced_levels-compare_table { display: none; From af178deb27185679c58a3a45551498ee03dd4001 Mon Sep 17 00:00:00 2001 From: Kim Coleman Date: Sun, 25 Aug 2024 12:46:16 -0400 Subject: [PATCH 4/6] Setting text color for color schemes; adjusting sidebar form overrides --- inc/customizer.php | 34 ++++++++++++++++++++++++---------- style.css | 18 ------------------ 2 files changed, 24 insertions(+), 28 deletions(-) diff --git a/inc/customizer.php b/inc/customizer.php index e09e4da..9e1408b 100644 --- a/inc/customizer.php +++ b/inc/customizer.php @@ -1139,16 +1139,17 @@ public static function get_all_fonts() { * 3. Header Background Color * 4. Primary Navigation Background Color * 5. Primary Navigation Link Color - * 6. Link Color - * 7. Meta Link Color - * 8. Primary Color - * 9. Secondary Color - * 10. Action Color - * 11. Default Button Color - * 12. Page Masthead Text Color - * 13. Page Masthead Background Color - * 14. Footer Widgets Text Color - * 15. Footer Widgets Background Color + * 6. Text Color + * 7. Link Color + * 8. Meta Link Color + * 9. Primary Color + * 10. Secondary Color + * 11. Action Color + * 12. Default Button Color + * 13. Page Masthead Text Color + * 14. Page Masthead Background Color + * 15. Footer Widgets Text Color + * 16. Footer Widgets Background Color * * @since Memberlite 1.0 * @@ -1165,6 +1166,7 @@ public static function get_color_schemes() { '#FFFFFF', '#F9FAFB', '#444444', + '#222222', '#011935', '#011935', '#011935', @@ -1185,6 +1187,7 @@ public static function get_color_schemes() { '#FFFFFF', '#FAFAFA', '#777777', + '#222222', '#2C3E50', '#2C3E50', '#2C3E50', @@ -1205,6 +1208,7 @@ public static function get_color_schemes() { '#F4EFEA', '#E2DED9', '#354458', + '#222222', '#3A9AD9', '#3A9AD9', '#354458', @@ -1225,6 +1229,7 @@ public static function get_color_schemes() { '#EFEFEF', '#424242', '#EFEFEF', + '#222222', '#00CCD6', '#00CCD6', '#00CCD6', @@ -1245,6 +1250,7 @@ public static function get_color_schemes() { '#FFFFFF', '#00AEEF', '#FFFFFF', + '#222222', '#00AEEF', '#00AEEF', '#333333', @@ -1265,6 +1271,7 @@ public static function get_color_schemes() { '#FFFFFF', '#00A651', '#FFFFFF', + '#222222', '#00A651', '#00A651', '#333333', @@ -1285,6 +1292,7 @@ public static function get_color_schemes() { '#FFFFFF', '#F39C12', '#FFFFFF', + '#222222', '#F39C12', '#F39C12', '#333333', @@ -1305,6 +1313,7 @@ public static function get_color_schemes() { '#FFFFFF', '#ED0977', '#FFFFFF', + '#222222', '#ED0977', '#ED0977', '#333333', @@ -1325,6 +1334,7 @@ public static function get_color_schemes() { '#FFFFFF', '#B1EB00', '#666666', + '#222222', '#B1EB00', '#B1EB00', '#53BBF4', @@ -1345,6 +1355,7 @@ public static function get_color_schemes() { '#F0F1EE', '#FFFFFF', '#555555', + '#222222', '#FB6964', '#FB6964', '#1352A2', @@ -1365,6 +1376,7 @@ public static function get_color_schemes() { '#FFFFFF', '#700035', '#EFEFEF', + '#222222', '#009D97', '#AA2159', '#AA2159', @@ -1385,6 +1397,7 @@ public static function get_color_schemes() { '#F5F5F5', '#FFFFFF', '#67727A', + '#222222', '#6991AC', '#6991AC', '#67727A', @@ -1405,6 +1418,7 @@ public static function get_color_schemes() { '#F9F9F7', '#363635', '#FFFFFF', + '#222222', '#83BF17', '#83BF17', '#83BF17', diff --git a/style.css b/style.css index 63b3d90..2140397 100644 --- a/style.css +++ b/style.css @@ -2887,16 +2887,6 @@ a:active:not(.pmpro_btn:active) { } } -/* Design variation specific adjustments for PMPro */ -.pmpro-variation_1 { - - .pmpro_card_actions { - background-color: var(--memberlite-color-site-navigation-background); - } - -} - - /* Membership Signup Forms */ .memberlite_signup, .pmpro_signup_form { @@ -2944,14 +2934,6 @@ a:active:not(.pmpro_btn:active) { } /* Member Log In / Log Out Widget */ -#secondary .pmpro_login_wrap, -#secondary .pmpro_logged_in_welcome_wrap { - background-color: var(--memberlite-color-site-navigation-background); -} -#secondary .pmpro_login_wrap .pmpro_card_actions, -#secondary .pmpro_logged_in_welcome_wrap .pmpro_card_actions { - background-color: transparent; -} .widget .pmpro_login_wrap hr, .widget .pmpro_logged_in_welcome_wrap hr { margin: 1.45rem 0; From 53b3e7afeed568433e4f0c89fd904c591bb9a258 Mon Sep 17 00:00:00 2001 From: Kim Coleman Date: Sun, 25 Aug 2024 12:58:45 -0400 Subject: [PATCH 5/6] Continued work on dark mode --- css/dark.css | 49 +------------------------------------------------ inc/extras.php | 7 +++++++ style.css | 2 +- 3 files changed, 9 insertions(+), 49 deletions(-) diff --git a/css/dark.css b/css/dark.css index 140fd2e..9329688 100644 --- a/css/dark.css +++ b/css/dark.css @@ -128,7 +128,7 @@ tbody tr:nth-child(even) td, background: none; } mark, -.ins { +ins { color: #000; } .search-form input[type=search], @@ -192,53 +192,6 @@ mark, color: #FFFFFFCC; } -/*-------------------------------------------------------------- -Paid Memberships Pro Integrated Styles ---------------------------------------------------------------*/ -#pmpro_levels .post h2, -.memberlite_signup h2, -.pmpro_signup_form h2 { - background: #FFFFFF11; -} -#pmpro_levels .post h2, -.memberlite_signup h2, -.pmpro_signup_form h2 { - color: #FFFFFF; -} -#pmpro_levels_table { - background: none; -} -#pmpro_levels_table.pmpro_checkout thead th, -#pmpro_form .pmpro_checkout thead th { - color: #FFF; -} -#pmpro_levels.pmpro_levels-table.pmpro_level-highlight, -#pmpro_levels.pmpro_levels-div .pmpro_level-highlight, -#pmpro_levels.pmpro_levels-2col .pmpro_level-highlight, -#pmpro_levels.pmpro_levels-3col .pmpro_level-highlight, -#pmpro_levels.pmpro_levels-4col .pmpro_level-highlight, -.memberlite_signup, -.pmpro_signup_form { - background: #FFFFFF19; - border-left: none; - border-right: none; -} -form#pmpro_form .pmpro_checkout h2, -form#pmpro_form .pmpro_checkout h3 { - background: #FFFFFF11; - border-color: #00000066; -} -.pmpro_checkout_gateway-stripe form.pmpro_form #pmpro_payment_information_fields div#AccountNumber, -.pmpro_checkout_gateway-stripe form.pmpro_form #pmpro_payment_information_fields div#Expiry, -.pmpro_checkout_gateway-stripe form.pmpro_form #pmpro_payment_information_fields div#CVV, -.pmpro_billing_gateway-stripe form.pmpro_form #pmpro_payment_information_fields div#AccountNumber, -.pmpro_billing_gateway-stripe form.pmpro_form #pmpro_payment_information_fields div#Expiry, -.pmpro_billing_gateway-stripe form.pmpro_form #pmpro_payment_information_fields div#CVV { - color: #FFF; - background: none; - border-color: #FFFFFF4C; -} - /*-------------------------------------------------------------- bbPress specific CSS --------------------------------------------------------------*/ diff --git a/inc/extras.php b/inc/extras.php index 00986ba..d4ea82a 100644 --- a/inc/extras.php +++ b/inc/extras.php @@ -46,6 +46,13 @@ function memberlite_body_classes( $classes ) { // color scheme class $classes[] = 'scheme_' . get_theme_mod( 'memberlite_color_scheme', $memberlite_defaults['memberlite_color_scheme'] ); + // dark mode class + if ( get_theme_mod( 'memberlite_darkcss', $memberlite_defaults['memberlite_darkcss'] ) ) { + $classes[] = 'is-style-dark'; + } else { + $classes[] = 'is-style-light'; + } + // other classes if ( is_multi_author() ) { $classes[] = 'group-blog'; diff --git a/style.css b/style.css index 2140397..9b1699c 100644 --- a/style.css +++ b/style.css @@ -1073,6 +1073,7 @@ a:active:not(.pmpro_btn:active) { .meta-navigation li:last-child, .header-right .widget_nav_menu li:last-child, .footer-navigation li:last-child { + border-right: none; padding-right: 0; } .footer-navigation ul { @@ -2769,7 +2770,6 @@ a:active:not(.pmpro_btn:active) { .pmpro_levels-2col .pmpro_level-highlight .pmpro_card, .pmpro_levels-3col .pmpro_level-highlight .pmpro_card, .pmpro_levels-4col .pmpro_level-highlight .pmpro_card { - background-color: var(--memberlite-color-site-background); z-index: 100; border-top: .9rem solid var(--memberlite-color-secondary); border-bottom: 1.45rem solid var(--memberlite-color-secondary); From 583130c5da6589e3398bfc48577ac9b3ffc06772 Mon Sep 17 00:00:00 2001 From: Kim Coleman Date: Sun, 25 Aug 2024 12:59:50 -0400 Subject: [PATCH 6/6] Fixing font color for lead paragraph --- css/dark.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/css/dark.css b/css/dark.css index 9329688..d70758c 100644 --- a/css/dark.css +++ b/css/dark.css @@ -21,6 +21,10 @@ hr { .wp-caption-text { color: var(--memberlite-color-action); } +div.lead p, +p.lead { + color: inherit; +} #site-navigation { border-top: none; }