Dynamic Theme Options

silentcoast

Hey All!

Relatively new to the Quasar Framework and cant tell if I’m running into a limitation of the frameworks or just having a total brain fart. We are using the mat theme and I have a layout setup and working great. We are wanting to give the users the ability to select between “Theme 1” and “Theme 2” which will basically just change up some colors on the pages.

I’ve tried everything that comes to mind and tried finding other people doing something similar but not having much luck. As an over simplified example heres what I’m trying to do:

<script>
    import { QLayout } from 'quasar'

    var cssfile = 'DarkCSS'
    import '@/themes/'+cssfile+'.styl'

    export default {
        components: { QLayout },
        data () {
           return {}
        },
.....
</script>

If I use “import ‘@/themes/DarkCSS.styl’” it works just fine so I know at least that will work. But I want it controlled by Vue so doesnt really help me much! I’ve also tried throwing it down in the <style> tags at the end of the page but I cannot use Vue variables down there to control which css file is loaded. Also I dont have to use stylus I can switch over to CSS for what I’m trying to do and maybe thats my only option!?

I’m sure I am just trying to go about this completely wrong any advice would be great!

rstoenescu

Unfortunately, due to how webpack works, this is not quite possible to switch css imports dynamically.

silentcoast

I was making this far more difficult then it needed to be actually. I just ended up importing two different stylus sheets. Each with a header of for example .darktheme and .lighttheme. Then just change the class on the root element and it works perfect. Thank you for getting back to me!

mesqueeb

I’d like a good solution for dynamic theme’s with only 1 CSS sheet. As I’m making a PWA with 1 CSS sheet included in the HTML file actually.

I found a way to do it easy with multiple theme variables and an easy syntax in SCSS:
https://www.sassmeister.com/gist/e99b7a8c01ef87d0dff8

But since Quasar uses Stylus, I’m yet to find a good way to make something similar in Stylus… So far no luck.

benoitranque

I was thinking we could use css variables for this

mesqueeb

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!

LaurentPayot

Interesting topic. Note that the “theme” word is misleading as Quasar use it for material or ios builds. “color scheme” would be more appropriate…

No More Posting New Topics!

Dynamic Theme Options