# \[Solved\] Status bar color blending issue

**URL:** <https://community.thunkable.com/t/solved-status-bar-color-blending-issue/426070>\
**Category:** Questions about Thunkable X\
**Tags:** solved\
**Created:** [January 24, 2020, 9:30pm UTC](https://community.thunkable.com/t/solved-status-bar-color-blending-issue/426070 "2020-01-24T21:30:27Z")\
**Posts on this page:** 20\
**Page:** 4

<div class="post-metadata">

**Author:** ![Deluxe](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/deluxe/32/30016_2.png) [@Deluxe](https://community.thunkable.com/u/Deluxe)\
**Post date:** [January 20, 2021, 8:02pm UTC](https://community.thunkable.com/t/solved-status-bar-color-blending-issue/426070/62 "2021-01-20T20:02:22Z")

</div>

Well, there is no specific setting to set the color of the status bar for iOS. Instead, the status bar would inherit the screen’s background color but that is no longer the case since lare last year.

So, as explained above, if I would want my iOS sratus bar to be green, I would set my screen’s background color to green. If i would want my iOS sratus bar to be black, I would set my screen’s background color to black. But now, it is always white.

Makes sense?

---

<div class="post-metadata">

**Author:** ![Steven](https://avatars.discourse-cdn.com/v4/letter/s/94ad74/32.png) [@Steven](https://community.thunkable.com/u/Steven)\
**Post date:** [January 20, 2021, 8:03pm UTC](https://community.thunkable.com/t/solved-status-bar-color-blending-issue/426070/63 "2021-01-20T20:03:26Z")

</div>

Yes, I understand. A better way to phrase would be the status bar on iOS used to inherit the color from the screen’s background color but no longer does.

In either case, I’ll look into it and hopefully we can get this fixed soon.

---

<div class="post-metadata">

**Author:** ![Deluxe](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/deluxe/32/30016_2.png) [@Deluxe](https://community.thunkable.com/u/Deluxe)\
**Post date:** [January 20, 2021, 8:05pm UTC](https://community.thunkable.com/t/solved-status-bar-color-blending-issue/426070/64 "2021-01-20T20:05:34Z")

</div>

Well, either a fix or a separate option for setting the iOS status bar color irrespective of the screen color, just like on Android which has a separate option for this.

Many thanks

---

<div class="post-metadata">

**Author:** ![ryan\_hall\_apps](https://avatars.discourse-cdn.com/v4/letter/r/f6c823/32.png) [@ryan\_hall\_apps](https://community.thunkable.com/u/ryan_hall_apps)\
**Post date:** [January 20, 2021, 9:07pm UTC](https://community.thunkable.com/t/solved-status-bar-color-blending-issue/426070/65 "2021-01-20T21:07:32Z")

</div>

@Steven,

The light/dark modes are display themes in iOS settings. I can see the status bar when my iOS theme is light, but I can not see the status bar when I have the iOS theme as dark mode. (see my pics above)

I hope that clarifies. I don’t know if it matters but I am using the top navigation in Thunkable.

---

<div class="post-metadata">

**Author:** ![Steven](https://avatars.discourse-cdn.com/v4/letter/s/94ad74/32.png) [@Steven](https://community.thunkable.com/u/Steven)\
**Post date:** [January 20, 2021, 9:14pm UTC](https://community.thunkable.com/t/solved-status-bar-color-blending-issue/426070/66 "2021-01-20T21:14:13Z")

</div>

Thanks, this is actually correct behavior if you have the screen’s statusBarStyle set to default. If you are in light mode it assumes you need the text to be dark to show on top of light content. If you’re in dark mode it assumes the opposite. To fix, you can set the statusBarStyle manually to either light or dark content depending on what you need.

---

<div class="post-metadata">

**Author:** ![Deluxe](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/deluxe/32/30016_2.png) [@Deluxe](https://community.thunkable.com/u/Deluxe)\
**Post date:** [January 20, 2021, 9:22pm UTC](https://community.thunkable.com/t/solved-status-bar-color-blending-issue/426070/67 "2021-01-20T21:22:12Z")

</div>

Correct. But in my (and many others) case, we explicitly set the value to ‘light-content’ and set the screen’s background color to black. This was working fine up until late last year but all of a sudden, it stopped.

---

<div class="post-metadata">

**Author:** ![Steven](https://avatars.discourse-cdn.com/v4/letter/s/94ad74/32.png) [@Steven](https://community.thunkable.com/u/Steven)\
**Post date:** [January 20, 2021, 9:27pm UTC](https://community.thunkable.com/t/solved-status-bar-color-blending-issue/426070/68 "2021-01-20T21:27:42Z")

</div>

Yes, I understand. This is a separate issue from what @ryan_hall_apps is discussing. We are investigating your issue now, @Deluxe.

---

<div class="post-metadata">

**Author:** ![ryan\_hall\_apps](https://avatars.discourse-cdn.com/v4/letter/r/f6c823/32.png) [@ryan\_hall\_apps](https://community.thunkable.com/u/ryan_hall_apps)\
**Post date:** [January 20, 2021, 9:35pm UTC](https://community.thunkable.com/t/solved-status-bar-color-blending-issue/426070/69 "2021-01-20T21:35:37Z")

</div>

This does not seem like correct behavior. Why would my status bar have a white background and white text when my phone is set to dark theme?

This only happens in my Thunkable app. I don’t have to change phone themes in any other app I use.

Am I missing something?

---

<div class="post-metadata">

**Author:** ![Steven](https://avatars.discourse-cdn.com/v4/letter/s/94ad74/32.png) [@Steven](https://community.thunkable.com/u/Steven)\
**Post date:** [January 20, 2021, 9:39pm UTC](https://community.thunkable.com/t/solved-status-bar-color-blending-issue/426070/70 "2021-01-20T21:39:11Z")

</div>

Again, you can explicitly set the value if you prefer. But the idea of having it be reactive to whether the user has dark mode enabled or not is so that you can reactively use the correct color without any further settings.

Though I just realized that we don’t expose a block to determine if the phone is set to dark mode so we should probably work on that. If you had something like that available you could set your screens’ background and statusBarColor to black if dark mode is on or white if it isn’t. Then if you leave the screen’s statusBarStyle to default it will have the correct colors regardless of which background color it has.

---

<div class="post-metadata">

**Author:** ![ryan\_hall\_apps](https://avatars.discourse-cdn.com/v4/letter/r/f6c823/32.png) [@ryan\_hall\_apps](https://community.thunkable.com/u/ryan_hall_apps)\
**Post date:** [January 20, 2021, 9:46pm UTC](https://community.thunkable.com/t/solved-status-bar-color-blending-issue/426070/71 "2021-01-20T21:46:58Z")

</div>

Ok so I didn’t realize I could change the statusBar style on the screen pages. Sorry about that!

A block to determine system theme would be nice! I will play with the statusBar style that I knew was there all along (🤦‍♂️) and see what comes out.

If all else fails I will hide the status bar, which I also just now saw 🤦‍♂️ .

Thanks for your help. Sorry for my ignorance.

---

<div class="post-metadata">

**Author:** ![oreeldadln](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/oreeldadln/32/89185_2.png) [@oreeldadln](https://community.thunkable.com/u/oreeldadln)\
**Post date:** [January 21, 2021, 1:45pm UTC](https://community.thunkable.com/t/solved-status-bar-color-blending-issue/426070/72 "2021-01-21T13:45:12Z")

</div>

Did you found the issue or it something we are doing wrong?

---

<div class="post-metadata">

**Author:** ![boomdaba1232rbid](https://avatars.discourse-cdn.com/v4/letter/b/eb8c5e/32.png) [@boomdaba1232rbid](https://community.thunkable.com/u/boomdaba1232rbid)\
**Post date:** [January 21, 2021, 9:10pm UTC](https://community.thunkable.com/t/solved-status-bar-color-blending-issue/426070/73 "2021-01-21T21:10:24Z")

</div>

I have the same issue.  
this is light-content status bar ![light](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/d/4/d4f6aee11c25c9f7f6f33e95810525f24e997287.png)

 ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/a/3/a39bd4bf7e3ed8316200bd94e8f35b1bb9fc10da.jpeg)

and this is dark-content status bar ![dark](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/c/e/ce40e6aa5ae5bfacc3a78d34404ea3697d803163.png)

 ![IMG_0572](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/4/c/4c6cf2dd4433f5d77ea938eeb3898c73a9a03248.jpeg)

It appear white part both light and dark content. Please solve this issue.  
[Steven](http://community.thunkable.com/u/Steven), [domhnallohanlon](http://community.thunkable.com/u/domhnallohanlon)

---

<div class="post-metadata">

**Author:** ![boomdaba1232rbid](https://avatars.discourse-cdn.com/v4/letter/b/eb8c5e/32.png) [@boomdaba1232rbid](https://community.thunkable.com/u/boomdaba1232rbid)\
**Post date:** [January 22, 2021, 10:12am UTC](https://community.thunkable.com/t/solved-status-bar-color-blending-issue/426070/74 "2021-01-22T10:12:29Z")

</div>

![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/6/8/68f56816a3456a7d5026a9e24e97a3810324889e.jpeg)

The first one was published last 2 months

---

<div class="post-metadata">

**Author:** ![Steven](https://avatars.discourse-cdn.com/v4/letter/s/94ad74/32.png) [@Steven](https://community.thunkable.com/u/Steven)\
**Post date:** [January 22, 2021, 5:26pm UTC](https://community.thunkable.com/t/solved-status-bar-color-blending-issue/426070/75 "2021-01-22T17:26:20Z")

</div>

@oreeldadln I think we’ve identified the issue but it takes time to get the fix implemented, tested, and released. If all goes well I think we should be able to get it out next week.

@boomdaba1232rbid Hm, that looks like another separate issue. The color of the status bar items looks correct. There just seems to be either an additional unwanted white bar at the top or the screen (and there the background color of the screen) isn’t extending all the way to the top of the phone. I’ll take a look at this as well.

---

<div class="post-metadata">

**Author:** ![boomdaba1232rbid](https://avatars.discourse-cdn.com/v4/letter/b/eb8c5e/32.png) [@boomdaba1232rbid](https://community.thunkable.com/u/boomdaba1232rbid)\
**Post date:** [January 22, 2021, 6:00pm UTC](https://community.thunkable.com/t/solved-status-bar-color-blending-issue/426070/76 "2021-01-22T18:00:54Z")

</div>

I think it’s the same issue.

My app run with iPhone 6 you won’t see the status bar.

 ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/6/7/67889829839a82429a4a388fe2104702f12fe7d9.jpeg)

And iPhone 12 Pro Max

 ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/4/4/44be238f309c207f2d1f0db185f184a78aa2f935.jpeg)

the biggest problem in this issue is a white part at the top of the screen

---

<div class="post-metadata">

**Author:** ![Deluxe](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/deluxe/32/30016_2.png) [@Deluxe](https://community.thunkable.com/u/Deluxe)\
**Post date:** [January 22, 2021, 6:11pm UTC](https://community.thunkable.com/t/solved-status-bar-color-blending-issue/426070/77 "2021-01-22T18:11:54Z")

</div>

@boomdaba1232rbid I don’t have an iPhone with a notch but on my iPhone 7 I am having the same issue as you do.

Can I assume that:

1. You have selected Light-Content for your status bar
2. Your screen’s background color is set to black
3. You are using a tab navigator

K

---

<div class="post-metadata">

**Author:** ![boomdaba1232rbid](https://avatars.discourse-cdn.com/v4/letter/b/eb8c5e/32.png) [@boomdaba1232rbid](https://community.thunkable.com/u/boomdaba1232rbid)\
**Post date:** [January 22, 2021, 8:05pm UTC](https://community.thunkable.com/t/solved-status-bar-color-blending-issue/426070/78 "2021-01-22T20:05:39Z")

</div>

@Deluxe You’re correct!

---

<div class="post-metadata">

**Author:** ![boomdaba1232rbid](https://avatars.discourse-cdn.com/v4/letter/b/eb8c5e/32.png) [@boomdaba1232rbid](https://community.thunkable.com/u/boomdaba1232rbid)\
**Post date:** [January 25, 2021, 1:31am UTC](https://community.thunkable.com/t/solved-status-bar-color-blending-issue/426070/79 "2021-01-25T01:31:09Z")

</div>

I have an update!  
Today I downloaded my app and run on iPhone 12 Pro Max.  
A white part at the top is larger than the last version.

 ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/1/7/17f73998fb54aee4d7cecd039280bab8169dfba2.jpeg)

---

<div class="post-metadata">

**Author:** ![Deluxe](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/deluxe/32/30016_2.png) [@Deluxe](https://community.thunkable.com/u/Deluxe)\
**Post date:** [January 25, 2021, 9:22am UTC](https://community.thunkable.com/t/solved-status-bar-color-blending-issue/426070/80 "2021-01-25T09:22:35Z")

</div>

Bummer…

---

<div class="post-metadata">

**Author:** ![bader\_mouti](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/bader_mouti/32/98887_2.png) [@bader\_mouti](https://community.thunkable.com/u/bader_mouti)\
**Post date:** [January 27, 2021, 4:31pm UTC](https://community.thunkable.com/t/solved-status-bar-color-blending-issue/426070/81 "2021-01-27T16:31:44Z")

</div>

Any update?

[Previous page](https://community.thunkable.com/t/solved-status-bar-color-blending-issue/426070.md?page=3)

[Next page](https://community.thunkable.com/t/solved-status-bar-color-blending-issue/426070.md?page=5)
