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
Related
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';
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.
I'm attempting to integrate scss with the .net theming functionality.
Ideally most scss would be in a dedicated directory, but each theme would have its own scss page containing exclusively the variable values for that particular theme.
The problem I'm encountering is that I need to pass placeholder variables to the _layout.scss sheet, and then have their values updated by the theme scss sheets. Currently the original null values are outputted.
SCSS Files
Resources/SCSS/_variables.scss
$theme_color: null;
Resources/SCSS/_layout.scss
#import "variables";
div {
color: $theme_color;
}
Themes/Blue/blue.scss
$theme_color: #0000ff !default;
#import '../../Resources/SCSS/layout';
Themes/Red/red.scss
$theme_color: #ff0000 !default;
#import '../../Resources/SCSS/layout';
Desired CSS Output Files
blue.css
div {
color: #0000ff;
}
red.css
div {
color: #ff0000;
}
You have it backwards. The !default flag tells Sass that this is the value to use if it doesn't a previous declaration doesn't exist.
$foo: red;
$foo: blue !default;
#debug $foo; // red
$bar: red !default;
$bar: blue;
#debug $bar; // blue
You need to place the !default flag on the default null values, not the theme values.
In addition to application.css.scss, I have multiple partials like homepage.css.scss. At the moment I have to add #import 'bootstrap' to each one of them in order to use bootstrap variables and mixins.
Let's say I want to change my default links colour to red, I'd add that to application.css.scss. But the links in homepage.css.scss will not be red because the bootstrap import will override it with blue.
In LESS, I can do #import (reference) "bootstrap", how can I do that in SASS?
The closest you will get is a silent class / placeholder. These work a little different to how LESS and reference work, you can read more on them here: http://blog.teamtreehouse.com/extending-placeholder-selectors-with-sass
LESS
lib.less
.class {
background: red;
}
main.less
#import (reference) "lib";
.anotherClass {
&:extend(.class);
}
SASS
lib.sass
%class {
background: red;
}
main.sass
#import "lib";
.anotherClass {
#extend %class;
}
CSS Output
.anotherClass {
background: red;
}