I want to change Bootstrap-vue theme colors , primary , success , danger ...
I have read document but still can't do that
this is theme.scss
$body-bg: red;
$body-color: #111;
$theme-colors: (
"primary": red,
"danger": #caaf12
);
$primary:red;
#import '../node_modules/bootstrap/scss/bootstrap';
#import '../node_modules/bootstrap-vue/src/index.scss';
and I have imported this file in my main.scss like this
#import url('./theme.scss');
body{
...
}
But still primary color does not change
How can I fix this ?
I found answer .
I have to add theme.scss in nuxt-config like this
css:['./assets/theme.scss']
also ichanged import address like this
#import 'node_modules/bootstrap/scss/bootstrap';
#import 'node_modules/bootstrap-vue/src/index.scss';
Related
I want to define my own theme color so the standard bootstrap elemets are overriden and also use the value later for my own components. Here is the code I use in a scss file:
$theme-colors: (
"primary": #611fe6,
"secondary": #ffbd58,
"dark": #000000
);
#import "node_modules/bootstrap/scss/bootstrap";
#import "node_modules/bootstrap/scss/functions";
#import "node_modules/bootstrap/scss/variables";
#import "node_modules/bootstrap/scss/mixins";
.fa-li {
color: $primary;
}
.fa-li then has the original primary color of bootstrap and not my own.
"How to access a theme color in bootstrap 5?"
Short answer, use map-get...
.fa-li {
color: map-get($theme-colors,"primary")
}
Demo
"I want to define my own theme color so the standard bootstrap elements
are overridden and also use the value later for my own components"
Full answer, For your theme changes it would be better to redefine the value of $primary. Then you won't have to use map-get. Simply reference $primary...
$primary: #611fe6;
$secondary: #ffbd58;
$dark: #000000;
#import "bootstrap";
.fa-li {
color: $primary
}
Demo
Also see: Overriding Bootstrap SCSS Variables
I would like to define some custom color in Laravel 6 but don't work.
My target is to add #dee2e6 color and called it custom-blue for whatever,
I try to add in 3 places and define it as a color and class. Only able to define
it as as a class. Here are my code.
_variables.scss
// Body
$body-bg: #f8fafc;
// Typography
$font-family-sans-serif: 'Nunito', sans-serif;
$font-size-base: 0.9rem;
$line-height-base: 1.6;
// Colors
$blue: #3490dc;
$indigo: #6574cd;
$purple: #9561e2;
$pink: #f66d9b;
$red: #e3342f;
$orange: #f0b274;
$yellow: #ffed4a;
$green: #38c172;
$teal: #4dc0b5;
$cyan: #6cb2eb;
$brand-primary: #0040c0;
$lwcpa-blue: #cddde1; // custom color
app.scss
// Fonts
#import url('https://fonts.googleapis.com/css?family=Nunito');
// Variables
#import 'variables';
// Bootstrap
#import '~bootstrap/scss/bootstrap';
$custom-blue: #cddde1;
.customcss{
color: #cddde1;
}
After " npm run dev " only one "#cddde1" in the public/css/app.css
public/css/app.css (last few lines)
.table .thead-dark th {
color: inherit;
border-color: #dee2e6;
}
}
.customcss {
color: #cddde1;
}
I try to search "#cddde1" in the public/css/app.css, only fine 1 entry, but I expect 3 entries.
Appreciated if anybody points out what is wrong. Thank you!
Laravel 6,
boostrap 4.5.2
I'm just starting with Bootstrap 4 and Sass. I can't for the life of me figure out how to override the default .alert-[whatever] styles.
If I have:
<div class="alert alert-success">Hello!</div>
It creates an alert with the default light shade of green that ships with Bootstrap 4. The only way I can override it is with my own custom CSS style for .alert-success. I'd rather use a built in variable to override it like I'm doing with my other colors, but I have no idea if that's an option?
In my .scss file I have:
$blue: #3498db;
$green: #37bf91;
$theme-colors: (
"primary": $blue,
"success": $green,
);
I assumed that .alert-success would just use the $green I've specified in my .scss file, but that doesn't seem to be the case.
I've tried to do $alert-success: $green;which also doesn't change anything.
What's the correct way to go about this?
This is similar to: How to change the bootstrap primary color? Make sure you import Bootstrap after the overrides, and I will answer as it related to alerts.
/* custom.scss */
/* import the necessary Bootstrap files */
#import "bootstrap/functions";
#import "bootstrap/variables";
/* -------begin customization-------- */
$blue: #3498db;
$green: #37bf91;
$theme-colors: (
primary: $blue,
success: $green,
);
/* -------end customization-------- */
/* finally, import Bootstrap to set the changes! */
#import "bootstrap";
Demo: https://www.codeply.com/go/NCfqvU3Upe
For the alerts, the bg and text colors are derived using the SASS darken function on the theme color. The defaults are:
$alert-bg-level: -10 !default;
$alert-border-level: -9 !default;
$alert-color-level: 6 !default;
The negative numbers lighten the original theme color, the positive numbers darken the color. So, for example if you want to make the success alert bg closer to the actual $green color, you'd adjust the alert variables:
$alert-bg-level:0; // this negates the darken function
$alert-border-level:1;
$alert-color-level:-10;
I updated the demo to show this.
This is driving me mad.
I have a load of SCSS files and 1 variable file.
I include them in my core.scss like this:
#import url(https://fonts.googleapis.com/css?family=Roboto:900,700,500,300);
#import "global/variables";
#import "components";
#import "layout";
*:focus {
outline: none !important;
}
Inside my variables stylesheet, I have this:
$font-family: 'Roboto', sans-serif;
$primary: #000000;
$secondary: #E67F22;
$tertiary: #F1C40F;
$green: #27AE61;
$blue: #297FB8;
$silver: #B2BABB;
$white-sky: #F5F7F8;
$grey: #F0F2F2;
$clouds: #E5E8E8;
$midnight-blue: #2D3E50;
$wet-asphalt: #34495E;
$concrete: #7E8C8D;
Now I am creating another style sheet, which I have done like this:
$font-family: 'Gill Sans';
$green: '#000000';
#import "../global/variables";
#import "../components";
#import "../layout";
*:focus {
outline: none !important;
}
But neither the font or the colour has changed.
Does anyone know why?
This is because you are setting your updated variables before your generic ones. So your variables are actually overwritten, but not in the direction you want them to.
You need to do it this way to achieve your goal:
#import "../global/variables";
$font-family: 'Gill Sans';
$green: '#000000';
#import "../components";
#import "../layout";
*:focus {
outline: none !important;
}
Or better, to have another file for your customized variables.
I have theme.scss SCSS file which contains something like that
// global variables
#import "variables";
// SCSS placeholders
#import "placeholders";
// basic HTML styles - links etc.
#import "basic";
// default layout styles
#import "layout";
/* COMPONENTS */
#import "components/layout/header"; // top page header
#import "components/layout/heading"; // main page heading
//etc. etc. a lot of another components
And it generates one output CSS file. Now I need to generate 3 different color themes (differenet CSS files). So I've created 3 SCSS files theme1.scss, theme2.scss and theme3.scss. They have the same content with only one difference:
#import "variables";
Variables will be specific for each theme. Yeah, everything works. But everytime I need to create another theme, I'll need to create another SCSS file and copy-paste whole includes from previous theme file. Is there any way how can I create my theme1.scss, theme2.scss, theme3.scss without creating 3 duplicated files?
You couldn't do it with #mixin, currently Import directives not working inside mixin becuuse of this issue https://github.com/sass/sass/issues/451
#mixin apply-theme($theme) {
#if $theme == 'red' {
#import 'variables-red';
} #else if $theme == 'green'{
#import 'variables-green';
} #else{
#import 'variables-defaults';
}
}
So currently you can do with it
$theme:'red';
#if $theme == 'red' {
#import 'variables-red';
} #else if $theme == 'green'{
#import 'variables-green';
} #else{
#import 'variables-defaults';
}