https://github.com/niroula-kushal/vue-bootstrap-theming
https://github.com/niroula-kushal/vue-bootstrap-theming
bootstrap dark js theme vue
Last synced: 4 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/niroula-kushal/vue-bootstrap-theming
- Owner: niroula-kushal
- Created: 2020-04-17T10:33:49.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2025-02-13T14:00:30.000Z (over 1 year ago)
- Last Synced: 2025-05-15T00:22:47.980Z (about 1 year ago)
- Topics: bootstrap, dark, js, theme, vue
- Language: JavaScript
- Size: 3.1 MB
- Stars: 4
- Watchers: 1
- Forks: 0
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## Vue Theming Bootstrap
[](https://travis-ci.org/RehmatFalcon/vue-bootstrap-theming)
## Project setup
```
npm install
```
### Compiles and hot-reloads for development
```
npm run serve
```
## Demo
https://rehmatfalcon.github.io/vue-bootstrap-theming/
## Screenshot
## Motivation
1. To integrate bootstrap with vue and make theming possible.
1. To adapt bootstrap according to project requirement by changing its variables.
## Procedures followed:
1. Add bootstrap to project
```bash
npm i bootstrap jquery popper
// Jquery and popper were added because
// bootstrap relies on them for some of its functionality
```
2. Create a styles file and import bootstrap scss there.
```scss
@import '~bootstrap/scss/boostrap';
// add any new styles / overrides
```
3. Import the styles file in our app.
> App.vue
```js
import './styles';
```
Once we have done the above, we can use bootstrap classes in our application.
Blog.vue (For example)
```js
Primary
```
## Theming
Bootstrap exposes its configuration as SASS variables. So, in order to have multiple theme, its just a matter of generating different classes with adjusted variable values.
```scss
.theme-dark {
$card-color : #d8d5d5;
$card-bg: rgb(65, 65, 65);
$card-cap-color: #ebebeb;
$card-cap-bg: darken($card-bg, 5%);
}
```
This sets the background color and text of the card component.
Currently two themes are supported : light and dark.
~~When the theme is light, a `theme-light` class is added to the body element.~~
~~When dark theme is chosen, a `theme-dark` class is added to the body element.~~
In order to allow for multiple themes for multiple component, now the classes `theme-light` and `theme-dark` are applied to the root element of the component.
The allows us to render different parts of the app with different theme.
#### Js counterpart
In the js, we check the current theme and apply correct class to the body element.
We also add a `temp-transitional` class to the ~~body~~ component element for one second. This is done to ensure that the transition from light to dark theme and vice versa does not feel abrupt.
```scss
.temp-transitional {
&, & *, & *:before, & *:after {
transition: all .3s;
}
}
```
temp-transitional is defined as above.
We also save the selected theme in localstorage, so that the user choice is persisted across request.