Dark Mode Compatibility Issues

Mare
(@aesthetiverse)

4 years, 4 months 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 4 years, 4 months 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)

4 years, 4 months ago
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)

4 years, 4 months ago
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 4 years, 4 months ago by Mare.
Theme Author Alexander Agnarson
(@alxmedia)

4 years, 4 months ago
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)

4 years, 4 months ago
{"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 4 years, 4 months 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.

Tags