Add dynamic theme fixes for thrivemagazine.com by arturstat · Pull Request #15870 · darkreader/darkreader

arturstat · 2026-08-14T02:51:42Z

https://www.thrivemagazine.com/

arturstat · 2026-08-14T02:53:05Z

+thrivemagazine.com
+
+INVERT
+div#MENU_AS_CONTAINER_TOGGLE span


Hamburguer icon in the mobile version:
https://www.thrivemagazine.com/

arturstat · 2026-08-14T02:53:41Z

+div#MENU_AS_CONTAINER_TOGGLE span
+
+CSS
+div.wixui-vertical-menu__arrow svg {


Up and down arrow icon in the sidepanel:
https://www.thrivemagazine.com/

Checked in Firefox and Edge... I don't see any need for this entry. Without it I have visible arrow.

I agree that the arrow is visible.
However, it is still not clear enough for me.
Please see the comment below.

arturstat · 2026-08-14T02:53:59Z

+div.wixui-vertical-menu__arrow svg {
+    fill: var(--darkreader-neutral-text) !important;
+}
+nav#MENU_AS_CONTAINER_EXPANDABLE_MENU a {


Text in the sidepanel:
https://www.thrivemagazine.com/

I can not confirm that applying this is needed. I see light text in dark scheme and dark in light scheme without this CSS fix. Checked both Firefox and Edge.

The text is visible, but I suggest making it brighter for improved visibility.
Maybe we all have different eyes!
In fact, I use contrast at +35 and maybe that is why I need this fix.

This is how it looks with the proposed fixes.

arturstat · 2026-08-14T02:55:09Z

+nav#MENU_AS_CONTAINER_EXPANDABLE_MENU a {
+    color: var(--darkreader-neutral-text) !important;
+}
+nav#MENU_AS_CONTAINER_EXPANDABLE_MENU *,


Area in the sidepanel that sometimes is green instead of black:
https://www.thrivemagazine.com/

arturstat · 2026-08-14T02:56:03Z

+    color: var(--darkreader-neutral-text) !important;
+}
+nav#MENU_AS_CONTAINER_EXPANDABLE_MENU *,
+div#MENU_AS_CONTAINER_TOGGLE > div {


Area around the hamburguer icon in the mobile version occasionally showing green:
https://www.thrivemagazine.com/

arturstat · 2026-08-14T02:56:35Z

+div#MENU_AS_CONTAINER_TOGGLE > div {
+    background-color: transparent !important;
+}
+div#overlay-MENU_AS_CONTAINER,


Area in the sidepanel occasionally showing green:
https://www.thrivemagazine.com/

arturstat · 2026-08-14T02:57:22Z

+    background-color: transparent !important;
+}
+div#overlay-MENU_AS_CONTAINER,
+div[data-testid="page-bg"] {


Background area in the articles occasionally showing white:
https://www.thrivemagazine.com/single-post/the-best-plant-based-eats-in-miami

div[data-testid="page-bg"] will break background on main (home page) I started testing it without this and started to look fine.

https://www.thrivemagazine.com/single-post/the-best-plant-based-eats-in-miami

Additional I had this white background you mentioned one time. Then I could not reproduce but the white part was inside iframe:

Maybe it would be easier to use iframe as selector instead. 😅

This is what I see without div[data-testid="page-bg"] and with iframe instead.

I just found a solution for this.
I will make a proposal.

arturstat · 2026-08-14T02:59:04Z

+div[data-testid="page-bg"] {
+    background-color: var(--darkreader-background-ffffff, #000000) !important;
+}
+div[data-testid="screenWidthContainerBgCenter"] {


Area in the center of the footer occasionally showing light green:
https://www.thrivemagazine.com/

Myshor

I additionally found one more popup which had two buttons transparent. So my whole fix would be:

thrivemagazine.com

INVERT
div#MENU_AS_CONTAINER_TOGGLE span

CSS
nav#MENU_AS_CONTAINER_EXPANDABLE_MENU *,
div#MENU_AS_CONTAINER_TOGGLE > div {
    background-color: transparent !important;
}
div#overlay-MENU_AS_CONTAINER,
iframe,
a.wixui-button:not(:hover) {
    background-color: var(--darkreader-neutral-background) !important;
}
div[data-testid="screenWidthContainerBgCenter"] {
    background-color: initial !important;
}

The popup preview after fix:

You can check it and apply to your PR. If it would work for you. 😉

Then comment I can do rereview.

Myshor · 2026-08-14T16:18:29Z

+div.wixui-vertical-menu__arrow svg {
+    fill: var(--darkreader-neutral-text) !important;
+}
+nav#MENU_AS_CONTAINER_EXPANDABLE_MENU a {


I can not confirm that applying this is needed. I see light text in dark scheme and dark in light scheme without this CSS fix. Checked both Firefox and Edge.

Myshor · 2026-08-14T16:18:51Z

+div#MENU_AS_CONTAINER_TOGGLE span
+
+CSS
+div.wixui-vertical-menu__arrow svg {


Checked in Firefox and Edge... I don't see any need for this entry. Without it I have visible arrow.

Myshor · 2026-08-14T16:20:37Z

+    background-color: transparent !important;
+}
+div#overlay-MENU_AS_CONTAINER,
+div[data-testid="page-bg"] {


div[data-testid="page-bg"] will break background on main (home page) I started testing it without this and started to look fine.

Myshor · 2026-08-14T16:27:35Z

+}
+div#overlay-MENU_AS_CONTAINER,
+div[data-testid="page-bg"] {
+    background-color: var(--darkreader-background-ffffff, #000000) !important;


I would use background-color: var(--darkreader-neutral-background) !important; instead.

Myshor · 2026-08-14T16:37:47Z

+    background-color: transparent !important;
+}
+div#overlay-MENU_AS_CONTAINER,
+div[data-testid="page-bg"] {


https://www.thrivemagazine.com/single-post/the-best-plant-based-eats-in-miami

Additional I had this white background you mentioned one time. Then I could not reproduce but the white part was inside iframe:

Maybe it would be easier to use iframe as selector instead. 😅

Myshor

Changed to Request Changes.

arturstat · 2026-08-14T16:44:21Z

Please wait three to four hours. Thank you.

The purpose is to define the color of pagination numbers and icons on the following pages: https://www.thrivemagazine.com/breakfast https://www.thrivemagazine.com/savory-recipes https://www.thrivemagazine.com/vegan-desserts while excluding the following page: https://www.thrivemagazine.com/wellness The first three pages have a wow-image element while the fourth does not. We also use: div[data-hook="post-list-root"]:not(.lte-post_content_area_small) in order to exclude the mobile version of any of the pages.

arturstat · 2026-08-15T03:36:13Z

The solution was to set transparent background on div[data-testid="page-bg"].
The original color of the pagination numbers and icons on the pages with a background image was restored.
Please check.
Thank you.

Add dynamic theme fixes for thrivemagazine.com

6eb3fbb

https://www.thrivemagazine.com/

arturstat marked this pull request as draft August 14, 2026 02:51

arturstat commented Aug 14, 2026

View reviewed changes

arturstat marked this pull request as ready for review August 14, 2026 02:59

Myshor reviewed Aug 14, 2026

View reviewed changes

Myshor requested changes Aug 14, 2026

View reviewed changes

arturstat added 2 commits August 15, 2026 02:58

Update background colors for dynamic theme fixes

45d8544

Uh oh!

Uh oh!

Conversation

arturstat commented Aug 14, 2026

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Myshor left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

arturstat Aug 15, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Myshor left a comment

Choose a reason for hiding this comment

Uh oh!

arturstat commented Aug 14, 2026

Uh oh!

arturstat commented Aug 15, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Myshor left a comment •

edited

Loading

arturstat Aug 15, 2026 •

edited

Loading