Update dynamic theme fixes for hugoboss.com by arturstat · Pull Request #15935 · darkreader/darkreader

arturstat · 2026-08-28T03:04:30Z

https://www.hugoboss.com/pt/en/home

arturstat · 2026-08-28T04:15:04Z

 div.sidebar svg.bottom-sheet__close-svg
 div#main svg.care-info__icon
 div#main div.dch-icon svg
+div#main div:not(:has(div[style^="background-color: rgb(237, 237, 237) !important;"]))[style^="background-color: rgb(237, 237, 237) !important;"]


White area at:
https://www.hugoboss.com/fr/toutes-les-marques/homme/stories/inspirations/boss-zone/?prefn1=brand&prefv1=BOSS

arturstat · 2026-08-28T04:15:39Z

 div#main div:not(:has(a[style^="background-color: rgb(255, 255, 255) !important;"]))[style^="background-color: rgb(255, 255, 255) !important;"]
 div#main section[style^="background-color: rgb(255, 255, 255) !important;"]
 div#main section[style^="background-color: rgb(255, 255, 255) !important;"] button.dch-topbanner__play_button svg
+div#main div[style^="background-color: white !important;"]


White area in the mobile version:
https://www.hugoboss.com/pt/en/all-brands/men/highlights/inspiration/boss/quality/materials-wool/
https://www.hugoboss.com/pt/en/all-brands/men/highlights/inspiration/boss/quality/materials-cashmere/
https://www.hugoboss.com/pt/en/boss-men-materials-leather/

arturstat · 2026-08-28T04:20:48Z

-div#main div.dch-head-teaser__container:has(> div.dch-head-teaser__image-area img[alt="Find your inspiration"]) div.dch-head-teaser__text-container,
-div#main a:has(div[style^="background-color:  !important;"]) div.dch-head-teaser__text-container,
-div#main a:has(div[style^="background-color:  !important;"]) p.dch-links-item:not(.dch-links-item--button-bordered--white-large) span,
+div#main div.dch-home-hub-slider-2__dots div.swiper-dot div.dch-home-hub-slider-2__dots-buttons button {


Area below the slider:
https://www.hugoboss.com/pt/en/all-brands/men/highlights/inspiration/styleinspotlight/

arturstat · 2026-08-28T04:22:48Z

+div#main div.dch-home-hub-slider-2__dots div.swiper-dot div.dch-home-hub-slider-2__dots-buttons button {
+    background-color: #ffffff !important;
+}
+div#main section.dch-component a.dch-links-item:has(img) p.dch-links-item--button-bordered:not(.dch-links-item--button-bordered--white-small),


"Shop now" text over white images:
https://www.hugoboss.com/pt/en/boss-women-jeans-fit-guide/

Not sure what you are fixing here.
Without this PR merged I see all "Shop now" black on white.

The desktop version is alright.
This is what I get in the mobile version after deleting this line:

arturstat · 2026-08-28T04:24:01Z

+    background-color: #ffffff !important;
+}
+div#main section.dch-component a.dch-links-item:has(img) p.dch-links-item--button-bordered:not(.dch-links-item--button-bordered--white-small),
+div#main section.dch-component a.dch-links-item:has(img),


Text over white images:
https://www.hugoboss.com/pt/en/boss-women-jeans-fit-guide/

Same as above. I do not know which text

This is what I get in the mobile version after deleting this line:

arturstat · 2026-08-28T04:30:02Z

+div#main section.dch-component a.dch-links-item:has(img) p.dch-links-item--button-bordered:not(.dch-links-item--button-bordered--white-small),
+div#main section.dch-component a.dch-links-item:has(img),
+:is(div.main-header__main, div#main) a.dch-links-item:not(.dch-core--invert) div.dch-core__font__copy,
+div#main div[style^="background-color: rgb(237, 237, 237) !important;"],


Force text color inside white area in order to invert the whole area later:
https://www.hugoboss.com/fr/toutes-les-marques/homme/stories/inspirations/boss-zone/?prefn1=brand&prefv1=BOSS

arturstat · 2026-08-28T04:30:13Z

+div#main section.dch-component a.dch-links-item:has(img),
+:is(div.main-header__main, div#main) a.dch-links-item:not(.dch-core--invert) div.dch-core__font__copy,
+div#main div[style^="background-color: rgb(237, 237, 237) !important;"],
+div#main div[style^="background-color: rgb(237, 237, 237) !important;"] *,


Force text color for all elements inside the div:
https://www.hugoboss.com/fr/toutes-les-marques/homme/stories/inspirations/boss-zone/?prefn1=brand&prefv1=BOSS

arturstat · 2026-08-28T04:43:09Z

 footer div.dch-footer__item-payments div.dch-icon-svg {
    fill: #000000 !important;
 }
+@media only screen and (min-width: 47rem) {


The purpose of the code from line 17861 to 17877 is to define black color on text that lies over images that are white or nearly white for improved visibility. Because the image area occupied by the text differs between mobile and desktop versions, different handling is required. After these fixes, text over images should be readable in the desktop version of the following pages:
https://www.hugoboss.com/pt/en/home
https://www.hugoboss.com/pt/en/inspiration/
https://www.hugoboss.com/pt/en/all-brands/men/highlights/inspiration/beckham-x-boss-campaign/
https://www.hugoboss.com/pt/en/be-your-own-boss/
https://www.hugoboss.com/pt/en/all-brands/men/highlights/inspiration/boss-x-aston-martin/
https://www.hugoboss.com/pt/en/all-brands/men/highlights/inspiration/boss-performance/
https://www.hugoboss.com/pt/en/all-brands/men/highlights/inspiration/styleinspotlight/
https://www.hugoboss.com/pt/en/all-brands/men/highlights/inspiration/boss-zone/
https://www.hugoboss.com/pt/en/all-brands/men/highlights/inspiration/women-inspiration-sports/
https://www.hugoboss.com/pt/en/boss-brandlines-men/
https://www.hugoboss.com/pt/en/all-brands/men/highlights/inspiration/boss-x-ligne-roset/
https://www.hugoboss.com/pt/en/boss-men-we-care/
https://www.hugoboss.com/pt/en/all-brands/women/highlights/office-wear-for-women/
https://www.hugoboss.com/pt/en/boss-women-jeans-fit-guide/
https://www.hugoboss.com/pt/en/boss-men-made-to-measure/
https://www.hugoboss.com/pt/en/boss-quality/
https://www.hugoboss.com/pt/en/boss-guides/
https://www.hugoboss.com/pt/en/boss-men-12-rules-of-suits/
https://www.hugoboss.com/pt/en/boss-watches-jewellery-collection/
https://www.hugoboss.com/pt/en/boss-eyewear/
https://www.hugoboss.com/pt/en/hugo-men/
https://www.hugoboss.com/pt/en/hugo-women/
https://www.hugoboss.com/pt/en/boss-experience/
https://www.hugoboss.com/pt/en/boss-camel-men/
https://www.hugoboss.com/pt/en/brandline-boss-black/
https://www.hugoboss.com/pt/en/boss-green-men/
https://www.hugoboss.com/pt/en/boss-men-orange/
https://www.hugoboss.com/pt/en/boss-black-women/
https://www.hugoboss.com/pt/en/boss-orange-women/
https://www.hugoboss.com/pt/en/gift-ideas/

Hardcoding color: #000000 !important inside @media (min-width: 47rem) based on the assumption that hero images are currently white/bright is a severe regression risk:

Dynamic Content Fragility: Hugo Boss rotates hero banners frequently across seasons and marketing campaigns. The moment a dark or nighttime campaign image is deployed in these containers, forcing #000000 will cause a complete loss of contrast (black text on dark images).

Overfitting: Relying on 30+ campaign URLs and 10-level chained pseudo-selectors (:has(img):not(:has(> a)), :not(.dch-core__font-invert--large)) is unmaintainable. Any minor upstream DOM/BEM update will silently break these rules and leave dead CSS payload in the config.

Background-Agnostic Solution: Contrast issues over image banners should be solved without toggling font colors between breakpoints. Applying text-shadow on the base teaser/headline components ensures high contrast across both light and dark images, on desktop and mobile alike:

.dch-head-teaser h1, .dch-head-teaser .dch-links-item, .dch-home-hub-stage-2__headline, .dch-home-hub-stage-2__subline { text-shadow: 0 1px 8px rgba(0, 0, 0, 0.9) !important; }

I tested this suggestion, and I can see that it seems an excellent idea!
I will see what I can do with your suggestion.

arturstat · 2026-08-28T04:49:40Z

+        fill: #000000 !important;
+    }
+}
+@media only screen and (max-width: 47rem) {


The purpose of lines 17878 to 17883 is to define black text over bright images for improved visibility. The code deals with small screens such as the ones in mobile devices, by restoring the original text color. Text over images in the mobile version of the pages mentioned in the previous comment and particularly in following pages should be readable:
https://www.hugoboss.com/pt/en/all-brands/men/highlights/inspiration/boss-x-ligne-roset/
https://www.hugoboss.com/pt/en/boss-men-12-rules-of-suits/
https://www.hugoboss.com/pt/en/gift-ideas/

Same issue here. Splitting text color rules into a separate @media (max-width: 47rem) block is completely redundant if we handle text legibility via text-shadow on the base classes rather than overriding font colors per breakpoint.

arturstat · 2026-08-28T04:51:46Z

 IGNORE INLINE STYLE
 :is(header, div#main) section.dch-topbanner button.dch-topbanner__play_button *
 div#main button.dch-links-item--play span.dch-links-item__icon *
+div#main section.dch-component a.dch-links-item *


Text over the shoe image:
https://www.hugoboss.com/pt/en/boss-guides/

If your suggestion above is used, this line can be deleted.

Myshor

Summary of Changes Requested

This PR introduces excessive specificity and overfitted media queries that significantly increase maintenance overhead and config bloat.

Please address the following points before this can be considered:

Re-audit forced black text colors:
Go through every instance where color: #000000 !important; is being forced and verify if it is genuinely necessary. While certain edge cases occasionally require a hard override, contrast issues over image containers should default to generic, background-agnostic solutions like text-shadow rather than hardcoded font colors.
Preventing recurring regressions and review cycles:
Hardcoding micro-fixes for 30+ seasonal marketing URLs creates a fragile setup. Every time upstream rotates banners or changes a CSS class, these rules break, leading to repeated PRs for the exact same domain every few weeks and wasting reviewer bandwidth. The configuration should be resilient to marketing updates, not tied to current campaign assets.
Eliminate media query bloat & overfitted selector chains:
Replace the @media blocks and deep pseudo-selector chains (:has(), :not()) with clean, component-level rules that work across all viewports.

Please refactor the changes to keep the configuration clean, minimal, and maintainable long-term.

Myshor · 2026-08-28T17:26:41Z

+div#main div.dch-home-hub-slider-2__dots div.swiper-dot div.dch-home-hub-slider-2__dots-buttons button {
+    background-color: #ffffff !important;
+}
+div#main section.dch-component a.dch-links-item:has(img) p.dch-links-item--button-bordered:not(.dch-links-item--button-bordered--white-small),


Not sure what you are fixing here.
Without this PR merged I see all "Shop now" black on white.

Myshor · 2026-08-28T17:29:22Z

+    background-color: #ffffff !important;
+}
+div#main section.dch-component a.dch-links-item:has(img) p.dch-links-item--button-bordered:not(.dch-links-item--button-bordered--white-small),
+div#main section.dch-component a.dch-links-item:has(img),


Same as above. I do not know which text

Myshor · 2026-08-28T17:31:19Z

+}
+div#main section.dch-component a.dch-links-item:has(img) p.dch-links-item--button-bordered:not(.dch-links-item--button-bordered--white-small),
+div#main section.dch-component a.dch-links-item:has(img),
+:is(div.main-header__main, div#main) a.dch-links-item:not(.dch-core--invert) div.dch-core__font__copy,


Screens!!! I can not confirm on my side. With old sitesfixes.

Myshor · 2026-08-28T17:42:46Z

 footer div.dch-footer__item-payments div.dch-icon-svg {
    fill: #000000 !important;
 }
+@media only screen and (min-width: 47rem) {


Hardcoding color: #000000 !important inside @media (min-width: 47rem) based on the assumption that hero images are currently white/bright is a severe regression risk:

Dynamic Content Fragility: Hugo Boss rotates hero banners frequently across seasons and marketing campaigns. The moment a dark or nighttime campaign image is deployed in these containers, forcing #000000 will cause a complete loss of contrast (black text on dark images).

Overfitting: Relying on 30+ campaign URLs and 10-level chained pseudo-selectors (:has(img):not(:has(> a)), :not(.dch-core__font-invert--large)) is unmaintainable. Any minor upstream DOM/BEM update will silently break these rules and leave dead CSS payload in the config.

Background-Agnostic Solution: Contrast issues over image banners should be solved without toggling font colors between breakpoints. Applying text-shadow on the base teaser/headline components ensures high contrast across both light and dark images, on desktop and mobile alike:

.dch-head-teaser h1, .dch-head-teaser .dch-links-item, .dch-home-hub-stage-2__headline, .dch-home-hub-stage-2__subline { text-shadow: 0 1px 8px rgba(0, 0, 0, 0.9) !important; }

Myshor · 2026-08-28T17:43:53Z

+        fill: #000000 !important;
+    }
+}
+@media only screen and (max-width: 47rem) {


Same issue here. Splitting text color rules into a separate @media (max-width: 47rem) block is completely redundant if we handle text legibility via text-shadow on the base classes rather than overriding font colors per breakpoint.

Update dynamic theme fixes for hugoboss.com

9658f45

https://www.hugoboss.com/pt/en/home

arturstat marked this pull request as draft August 28, 2026 03:04

arturstat commented Aug 28, 2026

View reviewed changes

arturstat marked this pull request as ready for review August 28, 2026 04:52

Myshor requested changes Aug 28, 2026

View reviewed changes

Uh oh!

Uh oh!

Conversation

arturstat commented Aug 28, 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!

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

Summary of Changes Requested

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!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants