No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search

    SCSS brand colors not reactive

    Help
    2
    21
    1323
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • mboeni
      mboeni last edited by

      Hi there

      I am altering the built-in brand colors to offer a dark and light themed UI.

      When I change, for example, the ‘primary’ brand color, it is updated everywhere, except here:

      .tileBGColor {
         background:rgba($color: $primary, $alpha: 0.8)
      }
      

      How do I make sure that changed brand colors get updated when used in customscss definitions?

      Cheers,
      m.

      1 Reply Last reply Reply Quote 0
      • T
        turigeza last edited by

        Dark Mode is now built in. Have you seen it ?
        https://quasar.dev/style/dark-mode#What-it-does

        mboeni 1 Reply Last reply Reply Quote 0
        • mboeni
          mboeni @turigeza last edited by

          @turigeza Yep, I’ve given it a spin. That’s not what I want, though…I want a bit more control over the theming.

          1 Reply Last reply Reply Quote 0
          • T
            turigeza last edited by turigeza

            @mboeni ok … just checking.

            The CSS you have posted doesn’t look right. Not even for a stylus function. The rgba function should look like this:

            rgba($green-7, $alpha);
            or
            rgba($green-7, 0.8);
            But not like
            rgba($green-7, $alpha: 0.8);

            http://stylus-lang.com/docs/bifs.html#rgbacolor--rgba

            mboeni 1 Reply Last reply Reply Quote 0
            • mboeni
              mboeni @turigeza last edited by

              @turigeza Hmm, strange…the above function actually works (at least I get the correct visual results). I do admit, though, that the syntax looks wrong…

              It’s just that if I change the color value for $primary, it’s not updated.

              Using rgba($primary, 0.8) does the same as the function I have posted above but the color is still not updated on the page if $primary is changed.

              1 Reply Last reply Reply Quote 0
              • T
                turigeza last edited by

                @mboeni
                I suspect maybe some other style must be applied to the element in that case.
                Have a look in chrome inspector if the colour does indeed come from .tileBGColor class or from somewhere else.

                mboeni 1 Reply Last reply Reply Quote 0
                • mboeni
                  mboeni @turigeza last edited by

                  @turigeza Yes it does:

                  Anmerkung 2019-12-08 175301.png

                    .tileBGColor {
                      background:rgba($primary, 0.8)
                    }
                  

                  The correct color should be the one seen in the toolbar + 20% transparency.

                  mboeni T 2 Replies Last reply Reply Quote 0
                  • mboeni
                    mboeni @mboeni last edited by

                    That’s really strange:

                    <div class="col q-ma-sm tileBGColor" style="border-radius: 7px; height: 300px; width: 300px; min-width: 300px; max-width: 400px">
                    NEWS 1
                    </div>
                    <div class="col q-ma-sm bg-primary" style="border-radius: 7px; height: 300px; width: 300px; min-width: 300px; max-width: 400px">
                    NEWS 2
                    </div>
                    

                    Assigning primary as bg-primary works, applying it via the css does not…

                    1 Reply Last reply Reply Quote 0
                    • T
                      turigeza @mboeni last edited by

                      @mboeni
                      I meant like this. The screenshot only shows that tileBgColor class applied.
                      I meant look at the cascade (Computed tab) where the wrong colour comes from. See screenshot:

                      Screen Shot 2019-12-08 at 17.07.53.png

                      mboeni 1 Reply Last reply Reply Quote 0
                      • mboeni
                        mboeni @turigeza last edited by mboeni

                        @turigeza here you go:

                        fbc21beb-2e1e-4cbf-bbff-c5177077e752-image.png

                        d71c35bc-3459-4f20-ab27-db9f1336322b-image.png

                        T 2 Replies Last reply Reply Quote 0
                        • T
                          turigeza @mboeni last edited by turigeza

                          This post is deleted!
                          1 Reply Last reply Reply Quote 0
                          • T
                            turigeza @mboeni last edited by

                            @mboeni I have no idea in that case sorry …
                            If that is not the number you expect to see the variable $primary may contain the wrong value.

                            I would also try and set the background-color instead of background but it looks like it is not the case in your situation.

                            mboeni 1 Reply Last reply Reply Quote 0
                            • mboeni
                              mboeni @turigeza last edited by

                              @turigeza thats the strange thing…using bg-primaryworks, the css version (using $primary) does not…

                              I’ll try setting the ‘background color’ as you mentioned…

                              1 Reply Last reply Reply Quote 0
                              • T
                                turigeza last edited by

                                Multiple declaration of the same variable as a last thought. Do a global search for $primary in your project.
                                It should only be declared once.
                                In my case src/css/quasar.variables.styl

                                mboeni 3 Replies Last reply Reply Quote 0
                                • mboeni
                                  mboeni @turigeza last edited by

                                  @turigeza $primary is actually a ‘brand’ color offered by quasar - i just change the value of it. I’ll do an investigation though…you never know…

                                  1 Reply Last reply Reply Quote 0
                                  • mboeni
                                    mboeni @turigeza last edited by mboeni

                                    @turigeza Nope, it’s not a redefinition… -.- just checked…

                                    1 Reply Last reply Reply Quote 0
                                    • mboeni
                                      mboeni @turigeza last edited by mboeni

                                      @turigeza I might have a lead here…shouldn’t this be working:

                                          console.log('Changed Primary color:' + getComputedStyle(document.documentElement).getPropertyValue('--q-color-primary'))
                                          colors.setBrand('primary', '#e6edf2')
                                          console.log('Changed Primary color:' + getComputedStyle(document.documentElement).getPropertyValue('--q-color-primary'))
                                      

                                      Fact is, the color is NOT changed as expected, output is #364552 in both cases…

                                      T 1 Reply Last reply Reply Quote 0
                                      • T
                                        turigeza @mboeni last edited by turigeza

                                        @mboeni I get the same issue.
                                        I would do a pen on the subject if I knew how to include the quasar colour utility
                                        https://quasar.dev/quasar-utils/color-utils
                                        on a pen.

                                        But I don’t. : )

                                        Basically
                                        colors.setBrand('primary', '#eee'); does not update the variables inside your classes.

                                        Example code does not work because custom-background will never change colour but remains the original $primary colour.

                                        
                                        <template>
                                        <div id="colours" class="bg-white q-ma-lg q-pa-lg">
                                            <q-color v-model="hex" no-header class="my-picker" ></q-color>
                                            <div class="q-pa-xl bg-primary">1</div>
                                            <div class="q-pa-xl custom-background">2</div>
                                        
                                            <h3 class="caption">Main Colors</h3>
                                            <div class="main-color row inline flex-center text-white q-pa-lg q-mb-lg" v-for="color in mainColors" :key="color" :class="`bg-${color}`">
                                                {{ color }}
                                            </div>
                                        </div>
                                        </template>
                                        
                                        <script>
                                        import { colors } from 'quasar';
                                        
                                        export default {
                                            name: 'Colours',
                                            data: () => {
                                                return {
                                                    mainColors: ['primary', 'secondary', 'accent', 'positive', 'negative', 'info', 'warning', 'black'],
                                                    hex: ''
                                                };
                                            },
                                            watch: {
                                                hex: function (n, o) {
                                                    colors.setBrand('primary', n);
                                                }
                                            }
                                        };
                                        
                                        </script>
                                        
                                        <style lang="stylus">
                                            .custom-background{
                                                background-color: $primary;
                                            }
                                        </style>
                                        
                                        
                                        mboeni 1 Reply Last reply Reply Quote 0
                                        • mboeni
                                          mboeni @turigeza last edited by

                                          @turigeza Very stange…Perhaps one of the devs can shed some light on this…?

                                          T 1 Reply Last reply Reply Quote 0
                                          • T
                                            turigeza @mboeni last edited by turigeza

                                            @mboeni
                                            I got it …

                                            So you should be using css variable in your case like

                                            background-color: var(--q-color-primary);
                                            

                                            and not like

                                            background-color: $primary;
                                            

                                            Because the latter will be replaced by actual colour values.

                                            Docs related to this is here:
                                            https://quasar.dev/quasar-utils/color-utils#Create-Dynamic-Custom-Colors

                                            Actually they do it like

                                            background-color: $primary;
                                            background-color: var(--q-color-primary);
                                            

                                            for fallback for older browsers.

                                            mboeni 1 Reply Last reply Reply Quote 0
                                            • First post
                                              Last post