I am using Vue3 with the Quasar Framework. I made an icon which changes my application to dark mode, however this is a bit too dark for my taste, so I would make the background a little bit lighter. Quasar gives you the options to do so, however it doesn't seem to work. In my Login.Vue, I have the following:
<template>// div's and icon...</template>
<script>// code to toggle to dark mode...</script>
<style>
body.body--dark {
background: #333333
}
</style>
This code does not work, even if I change background to 'yellow', it stays black. Why doesn't code on Quasar to change background color is not working?
Styling background on body.body--dark does work on a page:
// pages/Index.vue
<style>
body.body--dark {
background: #333333;
}
</style>
Or you can set a Sass variable:
// src/css/quasar.variables.scss
$dark-page: #333333;