Hi Everyone,

Just beginning to explore Quasar and I’m wondering if you can easily set the entire app to be a dark theme (and therefore automatically default all text to white). This was something available in AngularJS-Material and was quite handy.

I have changed the $body-color Stylus variable as well as learning that I can add the ‘dark’ property on inputs etc but obviously it’s not the ideal solution to have to add that to all inputs.

There are no Stylus variables for the color of inputs so any expert suggestions would be greatly appreciated.

I assume some sort of global CSS rules would be the final solution but a dark theme setting would be great!

Thanks a lot.

I have found the solution to this problem, but thought it would be a good idea to post in order to help others AND make a suggestion to the overlords such as @nothingismagick

After adding @quasar/testing to a Quasar project, the jest.setup.js file prevents the stack trace of failed tests being printed to the console with the following line:

// jest speedup when errors are part of the game
Error.stackTraceLimit = 0

Whilst working with Quasar, I have come across several things which are different to stock Vue projects which have cost me a decent amount of time investigating. It seems to me that the most seamless experience for new Quasar users would be to create initial conditions that are as close as possible to those of Vue, and then provide optimisations that require “opting in” by uncommenting the relevant lines.

When you’re used to seeing the exact position of a failed test, to not have that stack trace all of a sudden is a tad disorienting.

@zeidanbm thanks a lot! That’s very helpful.

I have used your suggestion in the following manner:

<script>
import { colors } from 'quasar'

const { getBrand, setBrand } = colors
const infoColor = getBrand('info')

export default {
    mounted () {
        setBrand('negative', infoColor , document.getElementById('signUpForm'))
    }
}

@nothingismagick You guys are doing such an awesome job addressing all the issues cropping up. I can imagine you’re working your butts off. It’s very much appreciated.

@Theo this is what I ended up implementing

methods: {
    input (newValue) {

      if (newValue !== '') {
        newValue = parseInt(newValue)
      } else {
        newValue = null
      }

      this.$emit('change', newValue)
    }
  }

@s-molinari oh derr. I really shouldn’t answer questions on my phone (or perhaps at all)

@Roger I think the ‘dense’ attribute may do the trick

@dgk https://v1.quasar-framework.org/start/upgrade-guide

The v1 guide has a search function at top left that will be a faster way of finding answers, but make sure you’re on the v1 version as denoted by ‘v1.’ at the start of the URL.

@adsaviation use this:
site:https://v1.quasar-framework.org/

@turigeza
Thanks for the suggestion. However, the link needs to be to the current documentation instead of the old:

site:https://v1.quasar-framework.org/

https://www.google.com/search?ei=fANyXPTWJpre9QOItZDoBw&q=site%3Ahttps%3A%2F%2Fv1.quasar-framework.org%2F&oq=site%3Ahttps%3A%2F%2Fv1.quasar-framework.org%2F&gs_l=psy-ab.3...4766.5140..5669...0.0..0.165.303.0j2…0…1…gws-wiz.mw7gjiKp7Gk

@nothingismagick You guys are doing such an awesome job addressing all the issues cropping up. I can imagine you’re working your butts off. It’s very much appreciated.

@nothingismagick you have misunderstood the tone of my post. I am not complaining about my lost time, merely reporting my experience and suggestions, as is the nature of BETA.

I am incredibly grateful for the work that has gone into Quasar, hence why I am a Patreon supporter despite despising Patreon. I have also personally messaged you in the past thanking you for posts that allowed me to get Jest testing working on a Vue CLI project.

I haven’t looked at the Discord server at any great length, but rest assured that the most seamless experience for new Quasar users will be to match the default settings of Vue as closely as possible. Maximum familiarity and ease-of-use is going to be important for Quasar to retain people who are only dipping their toes in the water.

@rstoenescu my main concern is that not mapping ‘@’ is different to what Vue does by default. Some people will be copying existing Vue components across to their Quasar project. Why not make it the same?

Additionally, I apologise for missing this section of the documentation, but it’s easy to do without a search function. Are the docs going to be searchable soon?

Vue CLI provides a webpack alias to the src folder via ‘@’

Why is this not the same with Quasar? It means that existing Vue users must spend time searching for how to make this work.

To add an alias, go to quasar.conf.js, find the following code and add the lines between the comments:

...
      extendWebpack (cfg) {
        cfg.module.rules.push({
          enforce: 'pre',
          test: /\.(js|vue)$/,
          loader: 'eslint-loader',
          exclude: /node_modules|quasar/,
          options: {
            cache: true
          }
        })
        // Add the following code
        cfg.resolve.alias = {
          ...cfg.resolve.alias,
          '@': path.resolve(__dirname, 'src')
        }
        ////
      }
...

To provide the same alias to your Jest testing environment, go to jest.config.js and add:

'^@/(.*)$': '<rootDir>/src/$1', to the moduleNameMapper object