change status bar color according to quasar theme in mobile version

Sujan Dev

HI team, i am working on quasar last 2 months. recently i have visited the WEEX playground and find a issue in quasar playground . i am attaching both image to make it understand clear.
quasar is

is there any way to change the status bar color according to theme color in quasar mobile build .

i have another question WEEX are native and quasar is not . what does it mean ?
and what is the difference?

matt

I think the problem is the ‘theme-color’ meta tag in index.html

Can you try to locate / add this to the <head> section:

<meta name="theme-color" content="#db5945">

Replace the color with the one that you want and it should work.

Sujan Dev

@matt thanks a lot. it works

matt

No problem, glad to help

rstoenescu

@Sujan-Dev v0.14 (to be released in a few days) also has a new component with which you can change that color dynamically

Sujan Dev

@rstoenescu great. waiting for this release.

just for asking. i heard that The performance of WEEX is better as it support native render. is there any feature in your v0.14 release for better performance. i mean like more native feel.

i loved quasar and i want to stick with it.

rstoenescu

@Sujan-Dev just wait for the release and you’ll see great improvements in performance as well as look’n’feel too

Sujan Dev

@rstoenescu OK waiting…

philliperosario

This post is deleted!

terumi

@matt said in change status bar color according to quasar theme in mobile version:

I think the problem is the ‘theme-color’ meta tag in index.html

Can you try to locate / add this to the <head> section:
<meta name="theme-color" content="#db5945">
Replace the color with the one that you want and it should work.

I did the same thing

<head>
    <meta charset="utf-8">
    <meta name="format-detection" content="telephone=no">
    <meta name="msapplication-tap-highlight" content="no">
    <meta name="viewport"
          content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
    <meta name="theme-color" content="#f44336">
    <title>Quasar App</title>
</head><head>
    <meta charset="utf-8">
    <meta name="format-detection" content="telephone=no">
    <meta name="msapplication-tap-highlight" content="no">
    <meta name="viewport"
          content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
    <meta name="theme-color" content="#f44336">
    <title>Quasar App</title>
</head>

And after that when I build my app on my device, the status bar is still on its default color.
Any ideas?

Thank you.

terumi

Ok,
I first installed the status bar cordova plugin,

cordova plugin add cordova-plugin-statusbar

and then, in the cordova/config.xml I added these lines:

<preference name="StatusBarOverlaysWebView" value="true" />
<preference name="StatusBarBackgroundColor" value="#F44336" />

And everything is ok now

More on…
https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-statusbar/index.html

No More Posting New Topics!

change status bar color according to quasar theme in mobile version