CODEWITHSUNDEEP
javascripthtmlvue.jsvuejs3quasar
fangio
fangio

Reputation: 1786

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?

Upvotes: 1

Views: 5099

Answers (1)

tony19
tony19

Reputation: 138526

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

Upvotes: 3

Related Questions