App seems to have hard-coded styles

About Support App App seems to have hard-coded styles

Tagged: , , ,

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #6287
    Avatar for kcclemokcclemo
    Participant

    I 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.

    #6290
    Avatar for Andy MoyleAndy Moyle
    Keymaster

    Dark 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.

    #6294
    Avatar for kcclemokcclemo
    Participant

    Thanks, 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

Viewing 3 posts - 1 through 3 (of 3 total)
  • You must be logged in to reply to this topic.