最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

html - How to deal with dark mode on the eBay iOS app? - Stack Overflow

programmeradmin4浏览0评论

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:

  1. Added <meta name="color-scheme" content="only light"> inside <head>...</head>
    • eBay strips the <head> tag but keeps the <meta> tag
  2. Added :root, * { color-scheme: only light !important; } inside my .css file
  3. Changed my CSS rules to !important
  4. Set html, body { background-color: #ffffff !important; }
  5. Set html, body { background-color: #000000 !important; background-image: linear-gradient(#ffffff, #ffffff) !important; }
  6. 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 }
  7. 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.

  1. 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?
  2. How can I force the eBay app to respect the colours I have chosen?
    • eBay prevents the use of JavaScript
  3. 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
  4. 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
发布评论

评论列表(0)

  1. 暂无评论