The eBay app for iOS is destroying my item listing page’s stylesheet when the device is in dark mode, turning it into a disgusting pink mess!
To be clear: when listing an item, it accepts HTML & CSS in the description
Here is how my eBay listing displays on the app during daylight hours:
Here is how it looks if dark mode is enabled in the iPhone's Settings app (or if using a schedule to switch it on at night time):
(click to enlarge images)
It has changed the colours of:
- Backgrounds
- Fonts
- Emojis
- Images!!!
Things I have tried:
- Added
<meta name="color-scheme" content="only light">
inside<head>...</head>
- eBay strips the
<head>
tag but keeps the<meta>
tag
- eBay strips the
- Added
:root, * { color-scheme: only light !important; }
inside my.css
file - Changed my CSS rules to
!important
- Set
html, body { background-color: #ffffff !important; }
- Set
html, body { background-color: #000000 !important; background-image: linear-gradient(#ffffff, #ffffff) !important; }
- I noticed that eBay wraps my entire description in a
<div class="x-item-description-child">
so I tried resetting all properties with.x-item-description-child { all: initial }
- Changed the link to my
.css
file to use?v=12345
, to force a cache-bust
These changes fix Safari but have zero effect on the eBay app.
- Which browser is the eBay app using under the hood?
- How can we check?
- I heard that all web browser controls in iOS apps really just use Safari?
- Are they using the wkwebview control?
- Can eBay use this control be used to inject forced styles? It seems to be possible
- If so, how can these be overridden by the page being displayed by the control - I.E. me?
- How can I force the eBay app to respect the colours I have chosen?
- eBay prevents the use of JavaScript
- Alternatively, how can I set my own dark theme in the CSS?
- The usual method of
@media (prefers-color-scheme: dark) { .someElement { background: black } }
appears to have no effect
- The usual method of
- Does this behaviour also affect their Android app?
Related
Amongst many others:
- how to prevent force dark mode by system?
- How do I stop dark mode from destroying my css
See also
- Chrome for Developers blog > Auto Dark Theme