Customize Site's appearance when dark mode enabled

953
3
Jump to solution
06-09-2021 04:18 AM
AGP
by
Occasional Contributor

On mobile devices using dark mode my Hub Site colors look fully different.

The worst thing is the background color of rows, my sand orange background looks dark brown so the site's logo (with black and white parts) is barely visible and the same goes for all the buttons (which were white and are black in dark mode).

I'm trying to keep the design simple, but I'm afraid I'll have to use CSS to have everything as I want it to be in dark mode. I still don't know how.

I also realized social media icons in the default header changed from black to light gray. I just wonder if this is only for icons from the default header or will it also happen to other svg icons I use (I want to add sendmail icon).

Isn't there an easy way of controlling colors or set replacement images (for any image in the site or at least header and background images) when using dark mode in any browser? 

0 Kudos
1 Solution

Accepted Solutions
KlaraSchmitt
Esri Contributor

In checking my own device, I see you are right. If I use FireFox, Chrome, or Brave, the Hub theme is respected and only the browser skin is darkened. But using the Samsung browser changes all the colors. It seems they do not even respect usage of the a media query that lets you specify preferred stylesheet. That is most unfortunate. Bummer.

View solution in original post

3 Replies
KlaraSchmitt
Esri Contributor

Hello,

Could you please provide more details about what device you are using, the operating system (android, windows, iOS, etc), and what browser? 

We currently do not offer a method for you to have more than one theme set at a time, but your situation sounds a bit more like what I have experienced with high contrast mode, which does forcibly change colors in order to improve contrast for some folks who might need it. Generally speaking, dark mode shouldn't be shifting all your colors, but I might be unfamiliar with how certain devices do it.

AGP
by
Occasional Contributor

I'm using Samsung Internet Browser for Android, v.14.0.3.5.

Now I see, Chrome turns its interface dark, but Samsung browser modifies the appearance of sites to make them dark too. It's useful for browsing at night with lights off but otherwise it's awful.

It comes preinstalled with every Samsung phone/tablet so cross fingers it's not too popular and people prefer using Chrome on Samsung devices. I'll have to add a browser disclaimer to warn about dark mode in Samsung browser. 😑

KlaraSchmitt
Esri Contributor

In checking my own device, I see you are right. If I use FireFox, Chrome, or Brave, the Hub theme is respected and only the browser skin is darkened. But using the Samsung browser changes all the colors. It seems they do not even respect usage of the a media query that lets you specify preferred stylesheet. That is most unfortunate. Bummer.