vue3+quasar+capacitor开发多平台项目,使用quasar改变主题背景

2022-05-26 00:03:26 阅读：176 来源： 互联网

标签：方案 name color quasar element 样式 capacitor vue3

quasar的样式和其他的框架修改不太一样，需要我们使用动态的方式来进行变更，一般来说有两种方案进行主题修改

方案一：

修改样式所需文档：
这里是样式修改的说明：https://quasar.dev/style/color-palette#how-it-works
这里有大量的默认样式声明：https://quasar.dev/style/sass-scss-variables

废话不多说，直接上代码：

<template>
  <router-view />
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import { setCssVar } from 'quasar';

const colorStyles = [
  {
    name: 'primary',
    color: '#e0301e',
  },
  {
    name: 'secondary',
    color: '#d54800',
  },
  {
    name: 'positive',
    color: '#000',
  },
  {
    name: 'accent',
    color: '#000',
  },
  {
    name: 'info',
    color: '#111',
  },
];

export default defineComponent({
  name: 'App',
  mounted() {
    colorStyles.forEach((element) => {
      setCssVar(element.name, element.color);
    });
  },
});
</script>

方案二：

新建文件：src\css\quasar.variables.scss
写入下面代码：

$primary   : #1976D2;
$secondary : #26A69A;
$accent    : #9C27B0;

$dark      : #1D1D1D;

$positive  : #21BA45;
$negative  : #C10015;
$info      : #31CCEC;
$warning   : #F2C037;

以上两种方式混用的话，方案一代码会替代掉方案二代码的重复颜色得哦~~~

欢迎大家指出文章需要改正之处~
学无止境，合作共赢

欢迎路过的小哥哥小姐姐们提出更好的意见哇~~

标签：方案,name,color,quasar,element,样式,capacitor,vue3
来源： https://www.cnblogs.com/sugartang/p/16308758.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。