Dark Mode Compatibility Issues

  • Mare

    (@aesthetiverse)


    3 years, 1 month ago

    Hey, I prefer to offer dark/ night mode to my visitors for the best user experience. I currently use the WP Dark Mode plugin to do the job. I can safely say that this plugin and the theme are reasonably compatible. However, there are some issues I believe can be solved:

    -There remains a white space around the profile image that is part of the gradient linear on top; this white space also applies for the author image under post blocks.

    Although deleting the gradient linear would most likely solve the problem. I like that little touch, so I wish to keep it if possible.
    I would appreciate it if you could help.

    • This topic was modified 3 years, 1 month ago by Mare. Reason: solved some of the problems I inquired on my own

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)
  • Theme Author Alexander Agnarson

    (@alxmedia)

    Try adding this as additional css:

    
#profile-image img { border-color: #000; }
#profile-image:after { background: #000; }
#profile:after { background: #222; }

    and:

    
.blog-card-author img { border-color: #000; }
.blog-card-author a:after { background: #000; }
    Thread Starter Mare

    (@aesthetiverse)

    Well, the result makes white black as expected. I changed your values to #242424, which is my dark theme color (normal for you to assume it black). But then the same problem applies to the light theme.
    I added 00 to make the values transparent and saw the gradient fill in, and It is not that bad tbh. But still, can we write an ‘if’ code maybe to make it #fff in light mode and #242424 in dark mode?

    • This reply was modified 3 years, 1 month ago by Mare.
    Theme Author Alexander Agnarson

    (@alxmedia)

    I’ve never used WP Dark Mode, but perhaps it adds a class to <body>? If it adds a class to body when active, you can just do:

    
body.dark-mode #profile-image img { border-color: #000; }
body.dark-mode #profile-image:after { background: #000; }
body.dark-mode #profile:after { background: #222; }
body.dark-mode .blog-card-author img { border-color: #000; }
body.dark-mode .blog-card-author a:after { background: #000; }

    If the class added is “dark-mode”, then you’d write it as above.

    Thread Starter Mare

    (@aesthetiverse)

    {"wp_dark_mode_general":"a:4:{s:15:\"enable_frontend\";s:2:\"on\";s:14:\"enable_backend\";s:2:\"on\";s:14:\"enable_os_mode\";s:2:\"on\";s:19:\"enable_block_editor\";s:2:\"on\";}","wp_dark_mode_advanced":"","wp_dark_mode_color":"a:9:{s:10:\"brightness\";s:3:\"100\";s:8:\"contrast\";s:2:\"90\";s:5:\"sepia\";s:2:\"10\";s:13:\"enable_preset\";s:3:\"off\";s:12:\"color_preset\";s:1:\"0\";s:16:\"customize_colors\";s:3:\"off\";s:17:\"darkmode_bg_color\";s:0:\"\";s:19:\"darkmode_text_color\";s:0:\"\";s:19:\"darkmode_link_color\";s:0:\"\";}","wp_dark_mode_switch":"a:22:{s:13:\"show_switcher\";s:2:\"on\";s:12:\"switch_style\";s:1:\"1\";s:13:\"switcher_size\";s:2:\"XL\";s:14:\"switcher_scale\";s:3:\"130\";s:17:\"switcher_position\";s:12:\"right_bottom\";s:11:\"switch_side\";s:12:\"right_bottom\";s:14:\"bottom_spacing\";s:2:\"10\";s:12:\"side_spacing\";s:2:\"10\";s:16:\"attention_effect\";s:4:\"none\";s:10:\"enable_cta\";s:3:\"off\";s:8:\"cta_text\";s:0:\"\";s:14:\"cta_text_color\";s:0:\"\";s:12:\"cta_bg_color\";s:0:\"\";s:18:\"enable_menu_switch\";s:3:\"off\";s:18:\"custom_switch_icon\";s:3:\"off\";s:17:\"switch_icon_light\";s:0:\"\";s:16:\"switch_icon_dark\";s:0:\"\";s:18:\"custom_switch_text\";s:3:\"off\";s:17:\"switch_text_light\";s:5:\"Light\";s:16:\"switch_text_dark\";s:4:\"Dark\";s:15:\"show_above_post\";s:3:\"off\";s:15:\"show_above_page\";s:3:\"off\";}","wp_dark_mode_includes_excludes":"","wp_dark_mode_triggers":"","wp_dark_mode_performance":"","wp_dark_mode_accessibility":"","wp_dark_mode_wc":"","wp_dark_mode_image_settings":"","wp_dark_mode_video_settings":"","wp_dark_mode_custom_css":"","wp_dark_mode_animation":"","wp_dark_mode_analytics_reporting":"","configuration":"WPDarkMode","version":"2.2.6"}

    • This reply was modified 3 years, 1 month ago by Mare. Reason: here they are
Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Dark Mode Compatibility Issues’ is closed to new replies.