You can Dynamically change the default Quasar color scheme with a special Stylus mixin.

The creation of the mixin and the usage both explained towards the end of this thread:
http://forum.quasar-framework.org/topic/1756/transform-scss-mixins-to-stylus

It works great!

@ssuess Exactly… iOS really f*cked up the PWA support this time…

I believe they want to make the worst compatibility as possible to make devs not use PWA’s and make more native apps. Because Apple won’t make money from PWA’s and they have more chances they will from native apps.

Welcome to the world where money is more important than the consumers.

The following two SCSS mixins I need to use in Quasar Framework in Stylus:

• Responsive Typography with min/max font-sizes:
  https://www.sassmeister.com/gist/7f22e44ace49b5124eec

• Dynamic Theme CSS generator for multiple theme variables:
  https://www.sassmeister.com/gist/e99b7a8c01ef87d0dff8

Once I found out how to rewrite these in Stylus I’ll post here so it can be useful for others as well!

@eleina A proposal is currently in progress to add the functionality for custom icons:
https://github.com/quasarframework/quasar/issues/2494

Also, in that thread is explained how to create your own icon font, though it be a bit cumbersome…

@leopiccionia I was able to successfully integrate it into my stylus files.

The very cool thing you can do with this. You know Quasar has a lot of components where you can e.g. color="primary.
Now if I include a styl file like so:

.text-primary
  themify($themes, @($theme) {
    color: $theme.$primary !important
  })
.bg-primary
  themify($themes, @($theme) {
    background: $theme.$primary !important
  })

And you have a primary color setup for another theme e.g. theme-retro. Then just by adding the class theme-retro to the body tag all component’s primary color will change into your new theme!
Isn’t that cool? : )

You’d need to setup the retro theme like so:

$themes = {
  "theme-retro": {
    "$primary": purple
  },
}

Now the final question: Do you think it’s possible to wrap it into another mixin to make using the mixin less verbose?
Cheers!

Full example:

The variables in a styl file:

$themes = {
  "theme-default": {
    '$primary': $primary
    '$secondary': $secondary
    '$tertiary': $tertiary

    '$neutral': $neutral
    '$positive': $positive
    '$negative': $negative
    '$info': $info
    '$warning': $warning

    '$light': $light
    '$dark': $dark
  },
  "theme-retro": {
    '$primary': purple
    '$secondary': lime
    '$tertiary': grey

    '$neutral': $neutral
    '$positive': $positive
    '$negative': $negative
    '$info': $info
    '$warning': $warning

    '$light': $dark
    '$dark': $light
  },
}
// Create the Stylus mixin:
themify($themes, $mixin)
  for $theme in $themes
    .{$theme} &
      $mixin($themes[$theme])

You can see that the themes hold the original values from Quasar. To change these you best change them before you make your $themes object.
Then in the theme-retro you see I can leave original options or change to my second theme. I can even switch around light and dark!

Then you have to add all the Quasar color classes with the correct mixin like so:

.text-primary
  themify($themes, @($theme) {
    color: $theme.$primary !important
  })

.bg-primary
  themify($themes, @($theme) {
    background: $theme.$primary !important
  })

.text-secondary
  themify($themes, @($theme) {
    color: $theme.$secondary !important
  })
.bg-secondary
  themify($themes, @($theme) {
    background: $theme.$secondary !important
  })

.text-tertiary
  themify($themes, @($theme) {
    color: $theme.$tertiary !important
  })
.bg-tertiary
  themify($themes, @($theme) {
    background: $theme.$tertiary !important
  })

.text-faded
  themify($themes, @($theme) {
    color: $theme.$faded !important
  })
.bg-faded
  themify($themes, @($theme) {
    background: $theme.$faded !important
  })

.text-positive
  themify($themes, @($theme) {
    color: $theme.$positive !important
  })
.bg-positive
  themify($themes, @($theme) {
    background: $theme.$positive !important
  })

.text-negative
  themify($themes, @($theme) {
    color: $theme.$negative !important
  })
.bg-negative
  themify($themes, @($theme) {
    background: $theme.$negative !important
  })

.text-info
  themify($themes, @($theme) {
    color: $theme.$info !important
  })
.bg-info
  themify($themes, @($theme) {
    background: $theme.$info !important
  })

.text-warning
  themify($themes, @($theme) {
    color: $theme.$warning !important
  })
.bg-warning
  themify($themes, @($theme) {
    background: $theme.$warning !important
  })

.text-light
  themify($themes, @($theme) {
    color: $theme.$light !important
  })
.bg-light
  themify($themes, @($theme) {
    background: $theme.$light !important
  })

.text-dark
  themify($themes, @($theme) {
    color: $theme.$dark !important
  })
.bg-dark
  themify($themes, @($theme) {
    background: $theme.$dark !important
  })

That’s all! Now your Quasar components will change when you change a class on the <body> tag from theme-default to theme-retro.

I’m having difficulty making my app (which uses some dependencies like Firebase) work on IE11.

vendor.js seems to keep including ES6 code which can’t be read on IE11.

This is my setup:

In build.config.js

• supportIE: true,
• transpileDependencies: [/.*/],

In babel.config I have:

module.exports = {
  presets: [['@babel/preset-env']],
  plugins: ['@babel/plugin-transform-runtime']
}

But when looking in the built dist/vendor.xxxx.js file, I still find things like getOwnPropertySymbols which is not supported on IE11…

Any advice much appreciated!

@rstoenescu Thanks. I’m trying to install a helpers folder I have in a private repo on Github:

vue init mesqueeb/templates/tree/master/styles/helpers helpers
// but I get:
(node:58697) ExperimentalWarning: The fs.promises API is experimental
   vue-cli · Failed to download repo mesqueeb/templates/tree/master/styles/helpers: Response code 404 (Not Found)

@steffanhalv
You can follow progress by the amount of open 0.15 flagged issues on GitHub.
https://github.com/quasarframework/quasar/issues?q=is%3Aopen+is%3Aissue+milestone%3Av0.15

Wow. @leopiccionia you are a Stylus pro!!! You have just solved so many people’s problems trying to have dynamic theming!

@qyloxe
I’m interested in why you rate this:

4- live data - option 2 - the data are refreshed after user action (filter, select, click on chart)
UMD - 3
SSR - 2
SPA - 5

For an SSR site, doesn’t Vue take over after the initial load of the page from the server side?
Eg. after the initial load an SSR page becomes the exact same thing as the SPA.

Therefore I would rate this category the same for SPA and SSR…

Or do you disagree?

With the new icongenie, I can do this
icongenie g -i /path/to/icon.png and it generates the icons for all modes installed for me.

However, when working with a “profile” it seems like it cannot automatically detect modes for you, so I need to specify them.

I’m confused in the documentation though, what the difference is between these:

    --assets, -a          Prefill the assets Array with Icon Genie's
                          internal list, based on the modes that you indicate;
                            [all|spa|pwa|ssr|bex|cordova|capacitor|electron]
                          Multiple can be specified, separated by ",":
                            spa,cordova

and

    --include             Prefill the params.include property;
                            [all|spa|pwa|ssr|bex|cordova|capacitor|electron]
                          Multiple can be specified, separated by ",":
                            spa,cordova

What does params.include property mean?

And, just like quasar.conf I’d love an “auto” option!

I’m having difficulty making my app (which uses some dependencies like Firebase) work on IE11.

vendor.js seems to keep including ES6 code which can’t be read on IE11.

This is my setup:

In build.config.js

• supportIE: true,
• transpileDependencies: [/.*/],

In babel.config I have:

module.exports = {
  presets: [['@babel/preset-env']],
  plugins: ['@babel/plugin-transform-runtime']
}

But when looking in the built dist/vendor.xxxx.js file, I still find things like getOwnPropertySymbols which is not supported on IE11…

Any advice much appreciated!

Just FYI,
I recently found this very promising vue library to add drag and drop functionality:
https://github.com/kutlugsahin/smooth-dnd

It seems very easy and powerful.
I’m trying to play around with it now.

I recently found this very promising vue library to add drag and drop functionality:
https://github.com/kutlugsahin/smooth-dnd

It seems very easy and powerful.
Just throwing it out here.

I recently found this very promising vue library to add drag and drop functionality:
https://github.com/kutlugsahin/smooth-dnd

It seems very easy and powerful.

Hi everyone. I made the draggable extension for a project of mine about a year ago.

The downsides of my extension were:

• I only ever required being able to drag rows. Not “any component to any other location”.
• I never found out why it didn’t work on macOS
• I learned a lot since I first made it, and would do it all different now…

The project is still a side project, and I plan to start working on it again somewhere this year. At that time I was planning to rewrite it from scratch with the new Vue 3 composition api; better separation of code; TypeScript.

But I think until that time many more devs need drag and drop for a variety of reasons, so I wanted to give some advice:

• Whenever you start building it, use the quasar-starter-kit-ui it’s really good for modular components complete with a demo project for you to HMR test your standalone component you’re building.
• When you start building the ui component, you can try to get ppl involved via discord so the community could work together.
• You’ll most likely track the mouse position to calculate the css of the element you’re dragging, to calculate where to drop the element and how the UI should look, I’d suggest try using the on-mouseover directive.
• Try to immediately set up a demo with numerous test items to drag. To see if it’s performant. I had a problem where it became slow after 300+ items, but it was too late because I always tested with about 10 items.

Hurray!!!

I’m building a Quasar app for a client and they said not to use Css Grid for IE browser compatibility reasons.

However, I almost tried using css filter!!! Until I thought "no let’s check on caniuse.com.

So now I’m wondering, should I be checking all my css manually to see what’s supported and what’s not?

Does anyone know a tool that can look through my vue & stylus files for me and tell me about this instead?

I’m sure any dev who does client work needs this, so there must be something out there!!!