search

bootstrap-vue / bootstrap-vue

BootstrapVue provides one of the most comprehensive implementations of Bootstrap v4 for Vue.js. With extensive and automated WAI-ARIA accessibility markup.
https://bootstrap-vue.org
MIT License
14.51k stars 1.87k forks source link

How to use bootswatch themes with BoostrapVue #1763

Closed vairamsvsjdo closed 6 years ago

vairamsvsjdo commented 6 years ago

I am looking for ways to use bootswatch themes with bootstrap-vue and switch theme dynamically during runtime

robgallen commented 6 years ago

Not sure how to switch themes dynamically (nor why you would want to), but for a single/set theme, try this.

Download the Bootswatch css locally and replace the main boostrap css import.

import Vue from "vue";
import BootstrapVue from "bootstrap-vue";
// import "bootstrap/dist/css/bootstrap.css";
import "@/css/bootstrap.min.css";
import "bootstrap-vue/dist/bootstrap-vue.css";
vairamsvsjdo commented 6 years ago

@robgallen Dynamic changing is to provide user option to see a site at their preferred themes by choosing a theme from a dropdown.

robcresswell commented 6 years ago

This is beyond the scope of BootstrapVue. It's here to provide some components with Bootstrap markup, not custom styling etc. 😄 You'll have to look elsewhere for help on dynamically changing CSS in your website.

solumspace commented 5 years ago

@vairamsvsjdo you may want to use this article as a guide if your still interested https://medium.com/maestral-solutions/coloring-your-app-implementing-live-theming-with-vue-js-and-styled-components-29e428900394