Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Mobile browser addressbar color

See original GitHub issue

6ishfm

The browser addressbar color should be the primary color.

How to do it without tampering with the build system or touching Stylus files: In src/themes.js (maybe later will move the logic to some other file):

Check if running on a mobile browser (import Platform from './platform'):if Platform.is.mobile && !Platform.is.cordova`
Add an absolute positioned DOM element to <body> outside of the viewport (like top -10000px) with bg-primary CSS class. Also give it some height like 10px.
Use window.getComputedStyle(<ELEMENT from above>).getPropertyValue('background') to retrieve the color – which will be the primary color.
Remove the absolute positioned DOM element.
Add the meta tag to <head> using the color determined at step #3.

Issue Analytics

State:
Created 7 years ago
Reactions:1
Comments:7 (3 by maintainers)

Top GitHub Comments

1reaction

vuchlcommented, Sep 30, 2016

I’ll implement that over the weekend!

0reactions

rstoenescucommented, Mar 31, 2017

@ag-coder Can you open up a new Github ticket for this pls? “Enhance mobile browser address bar coloring”. I’ll start working on it right now. Will make this optional so every developer can choose to color the addressbar with primary color (default) or another color, or opt out of coloring the address bar. Thanks!