Quasar主题

每个网站/应用都需要特定的设计来区别于竞争对手。这是Quasar框架擅长的地方，因为：

  1. 它提供了两个主题：Material和iOS
  2. 这两个主题可以从应用代码轻松定制/扩展。您可以更改主要颜色、辅助颜色和大部分CSS。自定义并不意味着拥有多个CSS文件，不会是一个CSS文件覆盖另一个CSS文件的属性。您将有一个样式表，里面每个CSS属性只声明一次。
  3. 所有主题都包括CSS重置（遵循最新标准）以消除平台间的差异。

Quasar CSS是一块空白的板岩，您可以轻松地定制和修改以适应您的品牌，同时仍遵循每个平台的标准。应用程序商店中最好的应用程序是完全自定义的，Quasar可以很容易地对您的应用程序进行相同的操作。

Quasar建立在Stylus之上，它允许它为您的应用程序设置一些默认样式，但使您可以非常轻松地更改应用程序代码中的默认设置。

自定义主题意味着覆盖Stylus变量, 包括颜色、大小、边框类型等。阅读了这个介绍之后，你可以到组件>Stylus变量获取您可以覆盖的所有Stylus变量的列表，以便您可以为您的应用程序定制主题。

请注意以下事项：
1.构建应用程序或启动开发服务器时，一次只能使用一个主题。
2.Quasar主题可以在/src/css/themes文件夹中配置，其中包含三个文件，您将在下一节中看到。

结构

来自Quasary应用的src/css/themes文件夹将包含以下文件：

src
└── css
    └── themes
        ├── common.variables.styl # 主题共享的Quasar变量
        ├── variables.mat.styl    # 仅适用于Material的Quasar变量
        └── variables.ios.styl    # 仅适用于iOS的Quasar变量

您将在这些文件中找到更多文档和步骤。

在Vue文件中使用Stylus变量

在你的应用程序的*.vue文件中，你可以使用核心的Quasar Stylus变量（例如 - 颜色：$primary，$red-1，媒体断点：$breakpoint-md，$breakpoint-md-min等）。

<!-- 注意lang="stylus" -->
<style lang="stylus">
// "variables"是一个Webpack别名（由Quasar CLI提供） 
@import '~variables'

div
  color $red-1
  background-color $grey-5
</style>

注意：您必须在您的<style>标签中添加@import'〜variables`，以便Quasar解析您可能添加的任何Stylus变量。 如果你不这样做，Quasar会直接传递变量作为文本，任何使用Stylus变量的主题变化都不起作用。

注意：<style>标签使用stylus代码。 您不能使用任何其他CSS预处理器。

定制您的应用主题

您可以通过在src/css/themes/common.variables.styl或其他两个文件中添加Stylus变量声明来轻松地为您的应用程序设置主题（在后一种情况下，如果您想要每个Quasar主题有不同外观）。

要自定义此应用的外观，您可以覆盖Quasar的源Stylus文件中找到的Stylus变量。 在Quasar的Stylus之前设置变量将使用这些变量而不是使用Quasar的默认Stylus变量值。 特定于主题的Stylus变量在variables.ios.styl或variables.mat.styl文件中。

例如，更改您的应用程序的主要颜色：

$primary = #00ffff

平台特定的样式

应用程序运行的平台信息将会自动检测到，并且<body>标记获得以下类：

Body类名 描述
mat 默认样式; Material设计主题; Android平台
ios Apple平台; iOS主题
desktop 应用运行在一个桌面浏览器上
mobile 应用运行在一个手机浏览器上
cordova Apache Cordova包装的独立手机App
electron 应用运行在Electron下
touch 触摸感知能力的平台
no-touch 没有触摸感知能力的平台
within-iframe 当整个网站都是在一个IFRAME标签下的时候

因此，您可以为您的应用程序编写特定的Stylus代码，如下所示：

body
  &.cordova .tag
    color $primary
  &.desktop .tag
    color $secondary
  &.mobile .tag
    color $tertiary

Stylus变量

阅读您可以覆盖的所有Stylus变量的完整列表。

Vuex存储 应用代码校验