[QUESTION] Background color doesn't seem to be universal

[lyra56k]

Question

I'm a little confused about how the background variable is working. I am using the Matrix theme (black background), but this same problem happens no matter which theme I use. The background of the page is colored according to the theme, but there seems to be a background somehow behind the page that's this mint green color, which Safari is coloring the tab bar as because that's what it thinks the page's primary color is.

I have already tried making a custom theme and adding

body {
  background: black;
}

Here's a screenshot of what I mean:

The effect is also noticeable when scrolling past the top or bottom of the page, the space that lacks content is the same color. Is there anything I can do? Thank you!

Category

Theming & Layout

Please tick the boxes

• You are using a supported version of Dashy (check the first two digits of the version number)
• You've checked that this question hasn't already been raised
• You've checked the docs and troubleshooting guide
• You agree to the code of conduct

[liss-bot]

If you're enjoying Dashy, consider dropping us a ⭐
_{🤖 I'm a bot, and this message was automated}

[lyra56k]

Update: Never mind, it was a browser extension I use that makes all pages have a dark mode. Sorry for my own failure to see that!

[lyra56k]

Reopening because it's now happening with that extension off. And this time I disabled every browser extension just to verify.

[liss-bot]

If you're enjoying Dashy, consider dropping us a ⭐
_{🤖 I'm a bot, and this message was automated}

[CrazyWolf13]

Reopening because it's now happening with that extension off. And this time I disabled every browser extension just to verify.

Hi @bobbyl140
As there is very little detail, I have to guess a lot, so please correct me and provide more details.

I think due to the layout of the little screenshot it's an apple device, could be safari?
Layout could be either widescreen phone or ipad, guess ipad.
While I tested with different themes on my dashy instance, I've never noticed such problems.
Could you try with the https://demo.dashy,to and send me screenshots if the issue appears there as well

Please also provide details about what browser and device you are using.

[lyra56k]

Sorry about that. The screenshot in OP is of Safari 17.4 on macOS Sonoma on my MacBook Pro 14". The issue also happens on my iPhone 13 Pro Max, and my iPad Air 4. I attached a screenshot of the demo instance from my MacBook and my iPhone. Notice how on the iPhone screenshot, the top is green (assumed from what Safari thinks is the background), and the bottom of the page beyond the scroll limit is also green. I tested a few Dashy themes and they all do the same thing.

[CrazyWolf13]

Hi
Sadly I cannot really test this then.

While searching for the exact color of your image I could find a variable with theme color defined with #00af87 the color that you navbar seems to be.

I can't really troubleshoot this by myself as I do not own apple macbooks, and VM is not really possible due to apple limitations.

IF you are comfortable, could you navigate to dashy's folder and then you should find a file called default.js inside /app/src/utils/default.js inside default.js on line 307 you should find "themeColor: '#00af87', " can you replace that with like a black or blue then rebuild dashy through the GUI ->

(Recompile or so in English)

Then you should see the changes.

[lyra56k]

Sure enough, that fixes the issue. I set that to #000000 and now the tab bar is black.

[CrazyWolf13]

Hi @Lissy93
Can we safely change this value?
Could we make a setting for the user to set this?

[Lissy93]

Yeah, this is the theme_color in the PWA manifest

/~https://github.com/Lissy93/dashy/blob/master/public/manifest.json#L8-L9

We could remove it and it just be default
Or OP could mount his own manifest.json to Dashy, and use a color of his choice
In the near future, I'll put all user-editable assets like the manifest into a single dir, so you don't have to mount individual files

Unfortunately not possible to create a config option for this value specifically, as it's outside of the Vue app

dashy/public/manifest.json at master · Lissy93/dashy

🚀 A self-hostable personal dashboard built for you. Includes status-checking, widgets, themes, icon packs, a UI editor and tons more! - Lissy93/dashy

[CrazyWolf13]

@bobbyl140

I think for the moment it's best to mount the manifest file.

The fix with chaning the value in default.js was just a temporary fix.

Please create a file on your host with the following contents:
https://raw.githubusercontent.com/Lissy93/dashy/master/public/manifest.json
But change on line 8-9 the theme color variable to what you like.

Then mount that file you just created with -v /path/to/manifest.json:/app/public/manifest.json make sure to replace /path/to/manifest.json with the path to the file just created.

Add this option to your docker run command and redeploy dashy.

[lyra56k]

I set the value in the manifest.json file on my host, added it as a volume, and tore down the container and started it again. Sure enough the green color is gone! Thank you both @Lissy93 and @CrazyWolf13 for the help!

[Lissy93]

Yay, nice one @bobbyl140 :)