Search code examples
javascripthtmlvue.jsvuejs3quasar

Quasar Framework in Vue3 Dark Mode

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?

Solution

  • 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