CODEWITHSUNDEEP
cssvue.jsvue-componentbulmabuefy
ezeYaniv
ezeYaniv

Reputation: 570

How to customize Buefy's Switch component with a custom color through Bulma?

I have created a custom .scss file for Bulma with some custom colors I want to use in my app. They work in most Buefy components, except the Switch component...even though the docs say I should be able to use the type= attribute with my custom colors.

What am I doing wrong in importing the custom colors?

My bulma_custom.scss file

@import '../node_modules/bulma/sass/utilities/functions';
$mc-persimmon: #F65D2E;
$mc-persimmon-invert: findColorInvert($mc-persimmon);
$custom-colors: (
    'mc-persimmon': ($mc-persimmon, $mc-persimmon-invert),
    );
@import '../node_modules/bulma/bulma';

My main.js file

import App from '@/App.vue';

import 'buefy/dist/buefy.css';
import 'bulma/css/bulma.css';
import '@/bulma_custom.scss';
import '@/style.css';

etc. Vue.app etc.

My Switch component implementation

<b-switch type="is-mc-persimmon" :value="isOptedOut" @input="onToggleOptOut" :disabled="isLoading">
          Opt Out
</b-switch>

In Chrome Devtools, the component's HTML

<label data-v-6e007ba7="" class="switch is-rounded">
    <input type="checkbox" true-value="true" value="false">
    <span class="check is-mc-persimmon"></span>
    <span class="control-label">
        Opt Out
      </span>
</label>

In Chrome Devtools, the component's css - it's using buefy.css and didn't find the Bulma color

.switch input[type=checkbox]:checked + .check {
    background: #7957d5; ## the Buefy default, NOT my color
}

Upvotes: 1

Views: 368

Answers (1)

ezeYaniv
ezeYaniv

Reputation: 570

I finally figured it out - instead of importing the buefy css file in main.js, I imported buefy in my bulma_custom.scss file. Somehow this way Buefy was able to overwrite the $form-colors with the additional custom colors instead of defaulting to the built-in ones.

GOOD: in scss file: @import "~buefy/src/scss/buefy";

BAD: in main.js: import 'buefy/dist/buefy.css';

Upvotes: 1

Related Questions