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>

此代码不起作用，即使我将背景更改为“黄色”，它仍保持黑色。 为什么在 Quasar 上更改背景颜色的代码不起作用？

Answer 1

body.body--dark上的样式background确实适用于页面：

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

演示 1

或者你可以设置一个Sass 变量：

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

演示 2