较新的移动浏览器能够为地址栏，如下图所示。

¥Newer mobile browsers have the ability to specify a color for the addressbar, like in the image below.

// quasar.config file

return {
  framework: {
    plugins: [
      'AddressbarColor'
    ]
  }
}

用法(Usage)

¥Usage

我们创建启动文件来初始化它的用法：$ quasar new boot addressbar-color [--format ts]。创建一个文件 (/src/boot/addressbar-color.js)。我们正在编辑它：

¥We create boot file to initialize its usage: $ quasar new boot addressbar-color [--format ts]. A file is created (/src/boot/addressbar-color.js). We edit it:

import { AddressbarColor } from 'quasar'

export default () => {
  AddressbarColor.set('#a2e3fa')
}

然后，我们必须告诉 quasar 使用我们刚刚创建的这个启动文件。为此，我们需要编辑 Quasar 配置的启动部分：

¥We then have to tell quasar to use this boot file we just created. To do this we edit the boot section of the quasar config:

return {
  boot: [
    'addressbar-color'
  ]
}

它的作用是在运行时将一些 <meta> 标签注入到你的 index.html 中。

¥What this does is that it injects some <meta> tags into your index.html at runtime.

由于元标记直到运行时才会被注入，你可以根据用户所在的页面动态更改此颜色多次（通过在相应页面上的 created() 生命周期钩子中调用 set 方法）：

¥Because the meta tag doesn’t get injected until run time you can dynamically change this color multiple times, based on the page the user is on (by calling the set method in the created() lifecycle hook on the respective pages):

import { useQuasar } from 'quasar'

export default {
  setup () {
    // equivalent to calling this on creating the component
    const $q = useQuasar()
    $q.addressbarColor.set('#a2e3fa')
  }
}