Skip to content

Commit

Permalink
Merge pull request #175 from strangerstudios/dark-mode-fixes
Browse files Browse the repository at this point in the history 
WIP: Collection of fixes for Dark Mode
  • Loading branch information
@kimcoleman
kimcoleman authored Aug 25, 2024
2 parents cfc8423 + 583130c commit 3e0ee3a
Show file tree
Hide file tree
Showing 7 changed files with 94 additions and 147 deletions.
89 changes: 9 additions & 80 deletions css/dark.css
View file
Original file line number Diff line number Diff line change
@@ -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;
Expand All @@ -29,6 +21,10 @@ hr {
.wp-caption-text {
color: var(--memberlite-color-action);
}
div.lead p,
p.lead {
color: inherit;
}
#site-navigation {
border-top: none;
}
Expand Down Expand Up @@ -77,33 +73,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,
Expand Down Expand Up @@ -156,7 +132,7 @@ tbody tr:nth-child(even) td,
background: none;
}
mark,
.ins {
ins {
color: #000;
}
.search-form input[type=search],
Expand Down Expand Up @@ -220,53 +196,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
--------------------------------------------------------------*/
Expand Down
26 changes: 19 additions & 7 deletions functions.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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' ),
Expand Down Expand Up @@ -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 ) {
Expand Down
64 changes: 53 additions & 11 deletions inc/customizer.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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(
Expand Down Expand Up @@ -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'];
Expand Down Expand Up @@ -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'];
?>
<!--Customizer CSS-->
Expand All @@ -1014,6 +1041,7 @@ public static function header_output() {
--memberlite-color-header-background: <?php echo esc_attr( $color_header_background ); ?>;
--memberlite-color-site-navigation-background: <?php echo esc_attr( $color_site_navigation_background ); ?>;
--memberlite-color-site-navigation: <?php echo esc_attr( $color_site_navigation ); ?>;
--memberlite-color-text: <?php echo esc_attr( $color_text ); ?>;
--memberlite-color-link: <?php echo esc_attr( $color_link ); ?>;
--memberlite-color-meta-link: <?php echo esc_attr( $color_meta_link ); ?>;
--memberlite-color-primary: <?php echo esc_attr( $color_primary ); ?>;
Expand Down Expand Up @@ -1111,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
*
Expand All @@ -1137,6 +1166,7 @@ public static function get_color_schemes() {
'#FFFFFF',
'#F9FAFB',
'#444444',
'#222222',
'#011935',
'#011935',
'#011935',
Expand All @@ -1157,6 +1187,7 @@ public static function get_color_schemes() {
'#FFFFFF',
'#FAFAFA',
'#777777',
'#222222',
'#2C3E50',
'#2C3E50',
'#2C3E50',
Expand All @@ -1177,6 +1208,7 @@ public static function get_color_schemes() {
'#F4EFEA',
'#E2DED9',
'#354458',
'#222222',
'#3A9AD9',
'#3A9AD9',
'#354458',
Expand All @@ -1197,6 +1229,7 @@ public static function get_color_schemes() {
'#EFEFEF',
'#424242',
'#EFEFEF',
'#222222',
'#00CCD6',
'#00CCD6',
'#00CCD6',
Expand All @@ -1217,6 +1250,7 @@ public static function get_color_schemes() {
'#FFFFFF',
'#00AEEF',
'#FFFFFF',
'#222222',
'#00AEEF',
'#00AEEF',
'#333333',
Expand All @@ -1237,6 +1271,7 @@ public static function get_color_schemes() {
'#FFFFFF',
'#00A651',
'#FFFFFF',
'#222222',
'#00A651',
'#00A651',
'#333333',
Expand All @@ -1257,6 +1292,7 @@ public static function get_color_schemes() {
'#FFFFFF',
'#F39C12',
'#FFFFFF',
'#222222',
'#F39C12',
'#F39C12',
'#333333',
Expand All @@ -1277,6 +1313,7 @@ public static function get_color_schemes() {
'#FFFFFF',
'#ED0977',
'#FFFFFF',
'#222222',
'#ED0977',
'#ED0977',
'#333333',
Expand All @@ -1297,6 +1334,7 @@ public static function get_color_schemes() {
'#FFFFFF',
'#B1EB00',
'#666666',
'#222222',
'#B1EB00',
'#B1EB00',
'#53BBF4',
Expand All @@ -1317,6 +1355,7 @@ public static function get_color_schemes() {
'#F0F1EE',
'#FFFFFF',
'#555555',
'#222222',
'#FB6964',
'#FB6964',
'#1352A2',
Expand All @@ -1337,6 +1376,7 @@ public static function get_color_schemes() {
'#FFFFFF',
'#700035',
'#EFEFEF',
'#222222',
'#009D97',
'#AA2159',
'#AA2159',
Expand All @@ -1357,6 +1397,7 @@ public static function get_color_schemes() {
'#F5F5F5',
'#FFFFFF',
'#67727A',
'#222222',
'#6991AC',
'#6991AC',
'#67727A',
Expand All @@ -1377,6 +1418,7 @@ public static function get_color_schemes() {
'#F9F9F7',
'#363635',
'#FFFFFF',
'#222222',
'#83BF17',
'#83BF17',
'#83BF17',
Expand Down
7 changes: 7 additions & 0 deletions inc/extras.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down
1 change: 1 addition & 0 deletions js/customizer-controls.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down
Loading

0 comments on commit 3e0ee3a

Please sign in to comment.