Update dynamic theme fixes config for *.iherb.com by arturstat · Pull Request #15685 · darkreader/darkreader

arturstat · 2026-06-29T14:22:39Z

Need to use more specific selector in order to define text color only on the desired images.

arturstat · 2026-06-29T14:24:05Z

 div[data-qa-element^="rewards-landing-faq-item-collapse"]::after
 div.policy-accordion-item img
 div.cms-accordion-switch-btn
-span.cms-bubble-text


Not needed anymore after modifying the CSS rule below.

arturstat · 2026-06-29T14:24:57Z


 CSS
-div.custom-flex-box-item span,
+div:is(.cms-banner-container, .rewards-banner-container) div.custom-flex-box-item span,


Use more specific selectors in order to avoid issues elsewhere.

arturstat · 2026-07-01T22:48:09Z

 div.cms-accordion-switch-btn
 div.myaccount-container div[data-an-element="base-info"] > div:first-of-type svg
 div.house-brand-content-container div.section-2-img img:not([alt$="icon"])
+div#hamburger-menu-base img


Icons in the sidepanel of the mobile version.
https://pt.iherb.com/

arturstat · 2026-07-01T22:48:44Z

 div.myaccount-container div[data-an-element="base-info"] > div:first-of-type svg
 div.house-brand-content-container div.section-2-img img:not([alt$="icon"])
+div#hamburger-menu-base img
+a[class$="SocialIcons"] img


Social icons in the footer of the mobile version.
https://pt.iherb.com/

arturstat · 2026-07-01T22:50:20Z

 div.house-brand-content-container div.section-2-img img:not([alt$="icon"])
+div#hamburger-menu-base img
+a[class$="SocialIcons"] img
+img[src$="/iHerb_Vitacost.png"]


iHerb+VITACOST logo at:
https://pt.iherb.com/pressreleases/iherb-acquires-vitacost-business/2280

arturstat · 2026-07-01T22:52:51Z

 a.menu-link.menu-pill-wrapper span,
 div[data-qa-element="SubscribeListContainer"] h4,
-div.quality-description {
+div.slider-container a > div:nth-of-type(2),


Note that we are using IGNORE IMAGE ANALYSIS on all elements in the website.
These selectors define black color on text over images that have lighter backgrounds.
These apply to the mobile version of the website.
https://pt.iherb.com/

arturstat · 2026-07-01T23:04:10Z

 div.house-brand-content-container div:is(.section-1, .section-2) {
    background-image: none !important;
 }
+.parent-selector {


Lines R792 to R819 fix backgrounds in the mobile and desktop version of the following pages:
https://pt.iherb.com/c/california-gold-nutrition
https://pt.iherb.com/c/cgn-digestive-health
https://pt.iherb.com/c/california-gold-nutrition-pure-sports
The backgrounds are images which are light and the text is also light.
The purpose is for the surrounding images and the text to remain visible.

Can not find any element with class .parent-selector on mentioned pages.
Can not confirm this part of fix is needed.

.parent-selectror is not needed.
Will delete the respective lines.

arturstat · 2026-07-01T23:06:08Z

 div[class^="scan-qr-login_qrCode"] svg *
 div.shipping-textbox-subheader span
 div.sc-social-media-list *
+:is(section, div).footer-banner-container *


The green rewards area near the bottom.
https://pt.iherb.com/

Not sure what we want to fix here:

Maybe you have some other example what this line will fix?

I get white text in that area.
This line fixes it.

arturstat · 2026-07-01T23:12:40Z


 CSS
-div.cms-banner-container div.custom-flex-box-item span,
+div.cms-banner-container div.custom-flex-box-item,


Text over the images near the top of the mobile version.
https://pt.iherb.com/

arturstat · 2026-07-01T23:13:05Z

 CSS
-div.cms-banner-container div.custom-flex-box-item span,
+div.cms-banner-container div.custom-flex-box-item,
+div.cms-banner-container div.custom-flex-box-item span:not(.custom-button),


Exclude text inside the dark green button.
https://pt.iherb.com/

arturstat · 2026-07-01T23:15:45Z

 div[data-qa-element="SubscribeListMobileContainer"]
-  > div:first-of-type > div > div > div:first-of-type > h2 > div {
+  > div:first-of-type > div > div > div:first-of-type > h2 > div,
+div.professional-brands-intro div.brands-header:not(:has(> div > div > img)) * {


Text over the image near the top of the mobile version.
https://pt.iherb.com/c/sports
The purpose of the :not is to exclude the white text over the brands section:
https://pt.iherb.com/
https://pt.iherb.com/c/professional-brands

Myshor · 2026-07-03T13:53:47Z

+div.slider-container div[class$="IconCategories"] img,
+div.slider-container div[class$="BrandsSubNav"] img,
+div.slider-container div[class$="SpecialsCarousel"] img,
+div.slider-container div[class$="CategoriesCarousel"] img,


I am thinking about making this fixes little smaller. Maybe you could use
div.slider-container img, which would work for all five entries?

Myshor · 2026-07-03T13:56:44Z

 img.shop-by-logo-section-image,
-button.thumbnail-item:not(.selected):hover img {
+button.thumbnail-item:not(.selected):hover img,
+img[style^="mix-blend-mode: darken"],


Seeing this gives me idea we should check if

img { mix-blend-mode: normal !important; }

Would not be better. In most cases all pictures on some shop sites should not have any mix-blend-mode set as they will be almost invisible in Dark Reader's Dark mode.
Entering specific selector will give us new PRs every time page will add something new not included in fixes.

This suggestion seems to be possible without any issues.

Myshor · 2026-07-03T14:04:18Z

+div.slider-container div[class$="ShopByLogosCarousel"] a > div > div,
+div[class$="SectionContainer"] + div > a,
+a[href^="/pressreleases/"] img {
    background-color: #f7f8f7 !important;


If we would change mix-blend-mode to all img elements I think this whole section could be removed.

I tried removing this section and it seems that some elements still need it.
Maybe we can remove all img elements from this section?

After removing some img elements there are issues, so this section seems to be needed!

Myshor · 2026-07-03T14:10:53Z

 div.shipping-textbox-header,
 div[data-qa-element="SubscribeListContainer"] div:has(+ h4),
-div[data-qa-element="SubscribeListContainer"] h4 strong {
+div[data-qa-element="SubscribeListContainer"] h4 strong,


Again... adding specific paths for elements which work today can force make additional fixes in some days again.
If we have this container div[data-qa-element="SubscribeListMobileContainer"] problematic then maybe selector forcing color to all children would be better (still better if site will create some new approach to present text in different path inside.

Can you check div[data-qa-element="SubscribeListMobileContainer"] * instead of having this list growing?

Or maybe this will be outdated because we will set mix-blend-mode: normal for all images.

Myshor · 2026-07-03T14:15:55Z

 div.house-brand-content-container div:is(.section-1, .section-2) {
    background-image: none !important;
 }
+.parent-selector {


Can not find any element with class .parent-selector on mentioned pages.
Can not confirm this part of fix is needed.

Myshor · 2026-07-03T14:19:48Z

+.parent-selector {
+    position: relative;
+}
+div:has(> div.quality-description) {


Can not find any div.quality-description on all sites I had opened today for tests.

It is found in the mobile version only.
https://www.iherb.com/c/california-gold-nutrition
https://www.iherb.com/c/cgn-digestive-health
https://www.iherb.com/c/california-gold-nutrition-pure-sports
Click "Learn more about California Gold Nutrition".

Myshor · 2026-07-03T14:25:22Z

 div[class^="scan-qr-login_qrCode"] svg *
 div.shipping-textbox-subheader span
 div.sc-social-media-list *
+:is(section, div).footer-banner-container *


Not sure what we want to fix here:

Maybe you have some other example what this line will fix?

Myshor · 2026-07-03T14:25:28Z

+    position: relative;
+    z-index: 2;
+}
+.parent-selector {


Why this is repeated?

And I already mentioned this for line R794
Can not find any element with class .parent-selector on mentioned pages.
Can not confirm this part of fix is needed.

Will remove.

arturstat · 2026-07-05T01:28:23Z

In the mobile version:
https://secure.iherb.com/myaccount/subscription
we can replace:

div[data-qa-element="SubscribeListMobileContainer"]
  > div:first-of-type > div > div > div:first-of-type > div,
div[data-qa-element="SubscribeListMobileContainer"]
  > div:first-of-type > div > div > div:first-of-type > h2 strong {
    color: #2c7500 ! important;
}

with a single line:

div[data-qa-element="SubscribeListMobileContainer"]
  > div:first-of-type > div > div > div:first-of-type * {
    color: #2c7500 ! important;
}

I am using the full path because there are many random classes.

arturstat · 2026-07-05T01:35:44Z

This is required:

div[data-qa-element="SubscribeListContainer"] div:has(+ h4),
div[data-qa-element="SubscribeListContainer"] h4 strong {
    color: #2c7500 ! important;
}

See the desktop version.
https://secure.iherb.com/myaccount/subscription

arturstat · 2026-07-05T01:51:02Z

I think that after mix-blend-mode: normal on all images, the background section may be shortened.
I will have to investigate tomorrow.

Update dynamic theme fixes config for *.iherb.com

6ef90de

Need to use more specific selector in order to define text color only on the desired images.

arturstat marked this pull request as draft June 29, 2026 14:22

arturstat commented Jun 29, 2026

View reviewed changes

arturstat marked this pull request as ready for review June 29, 2026 14:25

arturstat marked this pull request as draft June 30, 2026 19:32

arturstat added 2 commits July 1, 2026 04:11

Update dynamic theme fixes for the mobile version

45f7333

Add more fixes for the mobile version

aade4df

arturstat commented Jul 1, 2026

View reviewed changes

arturstat marked this pull request as ready for review July 1, 2026 23:16

Myshor requested changes Jul 3, 2026

View reviewed changes

Refactor CSS selectors for dynamic theme fixes

245bef8

Uh oh!

Uh oh!

Conversation

arturstat commented Jun 29, 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!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

arturstat Jul 4, 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!

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 Jul 3, 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!

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 commented Jul 5, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

arturstat commented Jul 5, 2026

Uh oh!

arturstat commented Jul 5, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

arturstat Jul 4, 2026 •

edited

Loading

Myshor Jul 3, 2026 •

edited

Loading

arturstat commented Jul 5, 2026 •

edited

Loading