How can I change the top bar color on my Debut Theme?

Store Design
1

Hello, I need help. I’m using the Debut Theme. My Background has been set to Black (#000000) in the Theme Settings however the top of the website (only having this issue on mobile) is white.

My background is black besides the top bar and when i pull down to refresh on mobile. How do i change it so this is also Black. I have never had this issue with other Themes before, which is why i’m confused.

I have attatched pictures of the issue im having as you can see the top of the screen is white, how do i change this? Please help. Thank you

IMG_1029.jpg
IMG_1029.jpg1170×1300 40.5 KB

IMG_1031.jpg
IMG_1031.jpg1170×2532 134 KB

2

Have you found solution yet?

3

hello, Ruthless.

Please provide website link to your store

4

The website is in the picture. Ruthlesstwiy.com

I am asking a simple question of how to change the background. Please help.

5

Have you got a solution?

6

ruthless, I will need the password to see the website, it’s still locked

7

I don’t understand why you would need to access the website to help me with a solution that is simple code. i just don’t know how to.

8

@ruthless , for one of us to be able to provide the simple code, we need to know what element is white, so that it can be selected, and we need to know in what file is the styling that’s affecting it, to know where to send you to change the code. Unfortunately, a screenshot doesn’t help much to know how to tackle the issue

9

@Uhrick , the website password is “Ruthless”, like i said earlier i can only see this “white background” on mobile. Can you please check this out for me and reply with a soultion thank you.

10

hey, Ruthless. I’m trying to find this white background here, but in my mobile your website looks normal

11

@Uhrick , As you can see in the screenshot below, The website itself is black but there is a white background (when i pull down to refresh) on other themes this is normally black. I have tried viewing this on multiple devices and i’m seeing the same issue.

The white background in the screenshot attached is what i am trying to change the colour of, i hope you can understand this.

IMG_1064.jpeg
IMG_1064.jpeg1170×1534 40.4 KB

12

yes, I could understand the issue. But I wasn’t able to reproduce it in my device, and by not being able to reproduce it, unfortunately, I’m not able to find the solution.

13

@Uhrick you don’t need to see it for yourself to give me some simple code to fix it. when i use other themes like Dawn i can simply change the colour of thr background and it will change the white part too. Unfortunately with Debut i am not able to change that. i am asking for some code to help change that colour.

14

Can any of you help with this problem? I need this fixed ASAP as the site is about to be released and this is very frustrating.

15

Hi @ruthless , Try adding this code after tag in theme.liquid file,
16

Hi @ruthless

First thing first is Debut is depreciated and you should go for dawn or any new theme.

Also, you can try dark mode in chrome or safari, it may help you. as from your first post seen, the loading sign symbol is a browser feature not by store.

But you can still try following the code.

  1. Go to Online Store-> Theme->Edit code
  2. Asset-> theme.css ->paste the below code at the bottom of the file.
@media only screen and (max-width: 768px){
*,body,header,footer,#SiteContainer{
   background: #000;
   background-color:#fff;
}
}