Vue3 深色模式下的 Quasar 框架

Question

我正在使用带有 Quasar 框架的 Vue3。我制作了一个图标，将我的应用程序更改为暗模式，但是这对我来说有点太暗了，所以我会让背景稍微亮一点。 Quasar 为您提供了这样做的选项，但它似乎不起作用。在我的 Login.Vue 中，我有以下内容：

<template>// div's and icon...</template>
<script>// code to toggle to dark mode...</script>
<style>
body.body--dark {
  background: #333333
}
</style>

此代码不起作用，即使我将背景更改为 'yellow'，它仍然是黑色。为什么在 Quasar 上更改背景颜色的代码不起作用？

Answer 1

background 在 body.body--dark 上的样式在页面上有效：

// pages/Index.vue
<style>
body.body--dark {
  background: #333333;
}
</style>

demo 1

或者你可以设置一个Sass variable:

// src/css/quasar.variables.scss
$dark-page: #333333;

demo 2

Vue3 深色模式下的 Quasar 框架

Quasar Framework in Vue3 Dark Mode

html

javascript

vue.js

quasar

vuejs3