- This topic has 2 replies, 2 voices, and was last updated 2 years, 12 months ago by
kcclemo.
-
AuthorPosts
-
17th February 2022 at 8:37 pm #6287
kcclemo
ParticipantI recently tried to create a theme for the app using the box provided in “Church Admin> App> App Settings”. My theme uses the CSS Media Query “prefers-color-scheme” to create a theme that adjusts to the user’s preference via their devices light or dark theme.
However, it appears to be “stuck” on dark mode despite anything I change in my device. As a test, I removed all the “prefers-color-scheme” queries from my code to force it into the light theme. This appeared to work, however, when I open the App menu, it is now using a dark background for the menu items. This causes a problem because my light theme uses dark text so now I have dark text on a dark background.
To me this might mean that something in the app is overriding my styles for the menu items.
So, I believe these are two separate issues:
1) The prefers-color-scheme query is being activated all the time no matter what mode the device is in.
2) There seem to be some baked in styles for certain parts of the app that I cannot override.17th February 2022 at 10:12 pm #6290Andy Moyle
KeymasterDark mode appears to be a pain – it doesn’t work on android with “webview” apps as webview doesn’t pick up that dark mode is on. Somebody else has reported that the app on their android is dark mode all the time – I can’t work out how!
the code in the app stylesheet is this@media(prefers-color-scheme: dark){
body{background:#273E54;color:#DFE6E8}
#rendered a{color:#DFE6E8; text-decoration:underline;}
.ui-navbar{background:#102B43}
li.classItem,li.account,li.menu,li.chatItem,li.addItem,li.calItem,li.sermon,li.newsItem,li.prayeritem,li.courageitem,li.messageItem{background:#273E54;margin-bottom:10px;padding-bottom:10px;border-bottom:1px solid #CCC}
.button, button{background:#03DAC5;padding:10px; border-radius:10px;}
.menu-icon{color:#03DAC5}
.menu .tab-button{background:#273E54}
textarea,select,input[type=”text”],input[type=”password”],input[type=”email”],input[type=”phone”]input[type=”number”]{width:95%; margin:0 auto;border:2px SOLID #ACE99A!important;background:#455B6D!important;color:#D9E2E2!important}
input[type=”text”]:placeholder,input[type=”password”]:placeholder,input[type=”email”]:placeholder,input[type=”number”]:placeholder{color:#D9E2E2}}
I’m going to remove it though as it seems pointless if it only works on iOS – people can add if they want it.
21st February 2022 at 2:13 pm #6294kcclemo
ParticipantThanks, Andy.
I think that’s the right move as it allows users to add their own styles should they wish.As a side note though, it looks like support for this was just added in January so maybe that will be coming soon whenever your version of WebView is updated.
https://caniuse.com/?search=prefers-color-scheme -
AuthorPosts
- You must be logged in to reply to this topic.