24
Views
1
Comments
Dark mode on phone
Question
Application Type
Mobile

Hello, we have an issue.

While testing, we noticed that in some phones, which have dark mode activated, in some change to different colours, and in others don't (we didn't do this in the app, this is made by the phone it self).

So to trying to avoid this, since we don't want a dark mode, we would like to block that capability of some phones to change the colours. 

Can someone help us?


Greetings

Rank: #83

Hi Andre Teixeira,
Not a solution but came up with some findings & approach that may solve your Issue:

1- Use the forge-component: https://www.outsystems.com/forge/component-overview/3079/edit-plist-file-plugin
Add a new config via the plugin, which will solve your issue for iOS.

<config-file parent="UIUserInterfaceStyle" platform="ios" target="*-Info.plist">
    <string>Light</string>
</config-file>   


or

2- Use the repo on mobile to detect the active-mode whether dark/light
     https://www.npmjs.com/package/cordova-plugin-darkmode
And then populate your CSS accordingly using prefers-color-scheme the media feature.
https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme


.day   { background: #eee; color: black; }
.night { background: #333; color: white; }

@media (prefers-color-scheme: dark) {
  .day.dark-scheme   { background:  #333; color: white; }
  .night.dark-scheme { background: black; color:  #ddd; }
}

@media (prefers-color-scheme: light) {
  .day.light-scheme   { background: white; color:  #555; }
  .night.light-scheme { background:  #eee; color: black; }
}


Hope it helps,
Assif