7.1 Bug Reports: Mac SAB ignores ui.drawer colors; Win/MAC ignore making Dark default

If an iOS app’s Normal ui.background color is set to black, the navigation menu text will be invisible, as both the drawer background and text will be incorrectly set to black.

This problem is made worse by the fact that SAB for Windows and Mac both fail to honor an unchecking of both Normal and Sepia color schemes. That is, you can’t make Dark the default or only color scheme (which is what works best for the Jesus Messiah comic strip with additional-language text below the images).

@ChrisHubbard, SAB for MAC has a couple different bugs relating to colors in the navigation drawer menu:

  1. The drawer’s background color is supposed to be defined by ui.drawer, which uses DrawerBackgroundColor by default. Instead it incorrectly gets its style from ui.background.

  2. Text for menu items in the drawer should get their color from ui.drawer.item.text, which uses DrawerItemTextColor by default. Instead its color is incorrectly hard-coded, and depends on the color scheme chosen but does not use any named color in that scheme. If the Normal scheme is chosen (or if users cannot choose a color scheme), the text is hard-coded to be black. If the Dark scheme is chosen, the text is hard-coded to be a light gray.

  3. Likewise, icons for menu items in the drawer should get their color from ui.drawer.item.icon, which uses DrawerItemIconColor by default. Instead its color is incorrectly hard-coded, and depends on the color scheme chosen but does not use any named color in that scheme. If the Normal scheme is chosen (or if users cannot choose a color scheme), the icon is hard-coded to be a dark gray. If the Dark scheme is chosen, the text is hard-coded to be a light gray.

The compounding bug in both SAB 7.1 for Windows and Mac is that if you uncheck “Normal” and “Sepia” to leave “Dark” as the only option, the app will still use Normal, not Dark. Even manually editing the appdef file to swap “Dark” and “Normal” like this does not make Dark the default, but still makes Normal the only available scheme:

  <color-themes>
    <color-theme name="Dark" enabled="true" default="true"/>
    <color-theme name="Sepia" enabled="false"/>
    <color-theme name="Normal" enabled="false"/>
  </color-themes>

Looking at manually editing the .appdef file to have Dark as the only enabled theme and set as the default.

Even if building from the command line. The theme named Normal is reset as the default theme before the app is built.

So judging by that you need to take the dark mode colors/settings and put them into Normal.

If you search in your .appdef file for:

  <colors type="main">
  </colors>

And replace it with:

    <colors type="main">
        <color name="PrimaryColor">
            <color-mapping theme="Normal" value="#181818"/>
        </color>
        <color name="PrimaryDarkColor">
            <color-mapping theme="Normal" value="#121212"/>
        </color>
        <color name="AccentColor">
            <color-mapping theme="Normal" value="#121212"/>
        </color>
        <color name="ActionBarColor">
            <color-mapping theme="Normal" value="PrimaryColor"/>
        </color>
        <color name="StatusBarColor">
            <color-mapping theme="Normal" value="PrimaryDarkColor"/>
        </color>
        <color name="TextColor">
            <color-mapping theme="Normal" value="#E0E0E0"/>
        </color>
        <color name="TitlesColor">
            <color-mapping theme="Normal" value="#E0E0E0"/>
        </color>
        <color name="VerseNumberColor">
            <color-mapping theme="Normal" value="#FFCDD2"/>
        </color>
        <color name="TextHighlightColor">
            <color-mapping theme="Normal" value="#404040"/>
        </color>
        <color name="LinkColor">
            <color-mapping theme="Normal" value="#FFCDD2"/>
        </color>
        <color name="BackgroundColor">
            <color-mapping theme="Normal" value="#000000"/>
        </color>
        <color name="DialogBackgroundColor">
            <color-mapping theme="Normal" value="#303030"/>
        </color>
        <color name="FootnoteBackgroundColor">
            <color-mapping theme="Normal" value="#1A1A1A"/>
        </color>
        <color name="PopupBackgroundColor">
            <color-mapping theme="Normal" value="#202020"/>
        </color>
        <color name="FooterBackgroundColor">
            <color-mapping theme="Normal" value="#303030"/>
        </color>
        <color name="AnnotationItemBackgroundColor">
            <color-mapping theme="Normal" value="#202020"/>
        </color>
        <color name="HistoryItemBackgroundColor">
            <color-mapping theme="Normal" value="#202020"/>
        </color>
        <color name="DividerColor">
            <color-mapping theme="Normal" value="#404040"/>
        </color>
        <color name="ImageTabsBackgroundColor">
            <color-mapping theme="Normal" value="#303030"/>
        </color>
        <color name="SliderBarColor">
            <color-mapping theme="Normal" value="#FFFFFF"/>
        </color>
        <color name="SliderProgressColor">
            <color-mapping theme="Normal" value="#E0E0E0"/>
        </color>
        <color name="DialogButtonColor">
            <color-mapping theme="Normal" value="#E0E0E0"/>
        </color>
        <color name="ShareButtonColor">
            <color-mapping theme="Normal" value="PrimaryColor"/>
        </color>
        <color name="ShareButtonTextColor">
            <color-mapping theme="Normal" value="#FFFFFF"/>
        </color>
        <color name="Pane1BackgroundColor">
            <color-mapping theme="Normal" value="#000000"/>
        </color>
        <color name="Pane2BackgroundColor">
            <color-mapping theme="Normal" value="#101010"/>
        </color>
        <color name="Pane1NameTextColor">
            <color-mapping theme="Normal" value="#707070"/>
        </color>
        <color name="Pane2NameTextColor">
            <color-mapping theme="Normal" value="#707070"/>
        </color>
        <color name="PaneSeparatorColor">
            <color-mapping theme="Normal" value="#505050"/>
        </color>
        <color name="PaneSeparatorHandleColor">
            <color-mapping theme="Normal" value="#909090"/>
        </color>
        <color name="PaneSeparatorHandleGripColor">
            <color-mapping theme="Normal" value="#040404"/>
        </color>
        <color name="PaneNameBorderColor">
            <color-mapping theme="Normal" value="#707070"/>
        </color>
        <color name="ChapterButtonColor">
            <color-mapping theme="Normal" value="#202020"/>
        </color>
        <color name="ChapterButtonTextColor">
            <color-mapping theme="Normal" value="#E0E0E0"/>
        </color>
        <color name="ChapterButtonIntroColor">
            <color-mapping theme="Normal" value="#303030"/>
        </color>
        <color name="BookListDefaultColor">
            <color-mapping theme="Normal" value="#101010"/>
        </color>
        <color name="BookButtonDefaultColor">
            <color-mapping theme="Normal" value="#202020"/>
        </color>
        <color name="BookButtonTextColor">
            <color-mapping theme="Normal" value="#E0E0E0"/>
        </color>
        <color name="ButtonSelectedColor">
            <color-mapping theme="Normal" value="#101010"/>
        </color>
        <color name="DrawerBackgroundColor">
            <color-mapping theme="Normal" value="#101010"/>
        </color>
        <color name="DrawerItemTextColor">
            <color-mapping theme="Normal" value="#D0D0D0"/>
        </color>
        <color name="DrawerItemIconColor">
            <color-mapping theme="Normal" value="#C0C0C0"/>
        </color>
        <color name="SearchTextColor">
            <color-mapping theme="Normal" value="#E0E0E0"/>
        </color>
        <color name="SearchButtonColor">
            <color-mapping theme="Normal" value="#505050"/>
        </color>
        <color name="SearchButtonTextColor">
            <color-mapping theme="Normal" value="#FFFFFF"/>
        </color>
        <color name="SearchProgressButtonColor">
            <color-mapping theme="Normal" value="#A0A0A0"/>
        </color>
        <color name="SearchProgressButtonTextColor">
            <color-mapping theme="Normal" value="#FFFFFF"/>
        </color>
        <color name="SettingsTitleColor">
            <color-mapping theme="Normal" value="#E0E0E0"/>
        </color>
        <color name="SettingsSummaryColor">
            <color-mapping theme="Normal" value="#B0B0B0"/>
        </color>
        <color name="SettingsSeparatorColor">
            <color-mapping theme="Normal" value="#404040"/>
        </color>
        <color name="HighlighterPenYellow">
            <color-mapping theme="Normal" value="#FFFFCC"/>
        </color>
        <color name="HighlighterPenGreen">
            <color-mapping theme="Normal" value="#D6FFEA"/>
        </color>
        <color name="HighlighterPenBlue">
            <color-mapping theme="Normal" value="#B8FBF9"/>
        </color>
        <color name="HighlighterPenOrange">
            <color-mapping theme="Normal" value="#FFE6BC"/>
        </color>
        <color name="HighlighterPenPink">
            <color-mapping theme="Normal" value="#FFD6FF"/>
        </color>
        <color name="HighlighterPenTextColor">
            <color-mapping theme="Normal" value="#000000"/>
        </color>
        <color name="AudioBarColor">
            <color-mapping theme="Normal" value="#101010"/>
        </color>
        <color name="AudioBarIconColor">
            <color-mapping theme="Normal" value="#C0C0C0"/>
        </color>
        <color name="ToolbarShadowColor">
            <color-mapping theme="Normal" value="#404040"/>
        </color>
        <color name="VideoBackgroundColor">
            <color-mapping theme="Normal" value="#303030"/>
        </color>
        <color name="TextSelectionBarColor">
            <color-mapping theme="Normal" value="#101010"/>
        </color>
        <color name="TextSelectionBarIconColor">
            <color-mapping theme="Normal" value="#C0C0C0"/>
        </color>
        <color name="ContentsBackgroundColor">
            <color-mapping theme="Normal" value="#000000"/>
        </color>
        <color name="ContentsItemBlockRefColor">
            <color-mapping theme="Normal" value="#202020"/>
        </color>
        <color name="ContentsItemBlockScreenColor">
            <color-mapping theme="Normal" value="#202020"/>
        </color>
        <color name="ContentsItemBlockShadowColor">
            <color-mapping theme="Normal" value="#101010"/>
        </color>
        <color name="ContentsItemTouchColor">
            <color-mapping theme="Normal" value="#151515"/>
        </color>
        <color name="ContentsTitleColor">
            <color-mapping theme="Normal" value="#E0E0E0"/>
        </color>
        <color name="ContentsSubtitleColor">
            <color-mapping theme="Normal" value="#E0E0E0"/>
        </color>
        <color name="ContentsReferenceColor">
            <color-mapping theme="Normal" value="#E0E0E0"/>
        </color>
        <color name="VerseByVerseColor1">
            <color-mapping theme="Normal" value="#E0FFFF"/>
        </color>
        <color name="VerseByVerseColor2">
            <color-mapping theme="Normal" value="#FFB6C1"/>
        </color>
        <color name="CustomColor1">
            <color-mapping theme="Normal" value="#FF0000"/>
        </color>
        <color name="CustomColor2">
            <color-mapping theme="Normal" value="#00FF00"/>
        </color>
        <color name="CustomColor3">
            <color-mapping theme="Normal" value="#0000FF"/>
        </color>
        <color name="CustomColor4">
            <color-mapping theme="Normal" value="#00FFFF"/>
        </color>
        <color name="CustomColor5">
            <color-mapping theme="Normal" value="#FFFF00"/>
        </color>
    </colors>

You will have a Dark theme as normal for what ever color you had chosen. Though this theme was made from the Black theme’s dark mode.

Hope that helps a bit.

Thanks, Ian, for looking into this.

I’d actually done this. Every single named color in the Normal color scheme has been redefined to match the Dark scheme. This does work around the bug that SAB won’t honor Dark being the only color scheme, but it would be much better for that bug to be fixed, hence the report.

Unfortunately, for building iOS apps, this approach doesn’t help as SAB ignores these names and uses hard-coded colors in the cases I mentioned. @david_moore1, do you have any thoughts on what it would take to address this for iOS apps? -Thanks!