After diving into the Buefy documentation, I successfully personalized my color scheme and even crafted unique hues by applying the is-[colorName] as a class to HTML elements.
<style lang="scss">
// Importing Bulma's core
@import "~bulma/sass/utilities/_all";
// Defining custom colors.
$download: #253091;
$download-inverted: findColorInvert($download);
// Setting up $colors for use as bulma classes (e.g. 'is-twitter')
$colors: (
"white": ($white, $black),
"black": ($black, $white),
"light": ($light, $light-invert),
"dark": ($dark, $dark-invert),
"primary": ($primary, $primary-invert),
"info": ($info, $info-invert),
"success": ($success, $success-invert),
"warning": ($warning, $warning-invert),
"danger": ($danger, $danger-invert),
"download": ($download, $download-inverted),
);
// Importing Bulma and Buefy styles
@import "~bulma";
@import "~buefy/src/scss/buefy";
// App-specific global styles.
#app {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
</style>
Now, within a page, I want to utilize a color variable, like $download, in order to create a basic gradient effect.
<style lang="scss" scoped>
@import "~bulma/sass/utilities/_all";
.gradient {
background-image: linear-gradient($download, #info);
}
</style>
Is there a way to access these variables in another Vue component or page?
I assumed that since the style block in App.vue wasn't scoped, I would be able to access the newly defined variables globally, but it seems I can't.