Quasar Framework in Vue3 Dark Mode

user_4301564 0
Viewed 1198

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?

quasar vuejs3 vue.js html javascript
1 Answers

Styling background on body.body--dark does work on a page:

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

demo 1

Or you can set a Sass variable:

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

demo 2

user_62771510
Related