I want to override .text-primary with a color of my choice.
So in my override file, I defined it like:
#include text-emphasis-variant(".text-primary",$brand-primary, true);
The text-emphasis-variant is a mixin from Bootstrap 4 that is defined in such a way that the color property is marked as !important. So the generated css file is as follows:
.text-primary {
color: #007bff !important; }
a.text-primary:hover, a.text-primary:focus {
color: #0056b3 !important; }
.text-primary {
color: #0078D2 !important; }
a.text-primary:hover, a.text-primary:focus {
color: #004c86 !important; }
Now, I want to use the text-primary class inside another class:
<div class="customRow">
<span class="text-primary"> Testing </span>
</div>
And I have another override like:
.customRow>span {
color: #555
}
The problem here is that it is not taking the color #555 since the color in text-primary is marked as !important.
i'm currently working on a project that i overrided the bootstrap 5 by following this tutorial hope it can help you too .
if you are using Bootstrap 5 The right way to override $theme-colors is to by doing this
// First override some or all individual color variables
$primary: #25408f;
$secondary: #8f5325;
$success: #3e8d63;
$info: #13101c;
$warning: #945707;
$danger: #d62518;
$light: #f8f9fa;
$dark: #343a40;
// Then add them to your custom theme-colors map, together with any additional colors you might need
$theme-colors: (
primary: $primary,
secondary: $secondary,
success: $success,
info: $info,
warning: $warning,
danger: $danger,
light: $light,
dark: $dark,
// add any additional color below
);
for more information see this link
Add this to your SCSS file.
$enable-important-utilities: false;
source https://getbootstrap.com/docs/5.0/utilities/api/#importance
Related
I am currently using variables keeping track of colors for both light and dark themes (e.g. --light-background-color, --dark-background-color). This isn't too hard with two themes but seems a bit manual and if faced with more themes it becomes impractical.
I have seen things like night shift that apply CSS filters which invert the colors on a webpage. How do these filters work? and how would I go about implementing them?
One way to go about this is to have a set of general theme color variables, rather than specific color variables for specific themes like you're trying to do here.
You can define these variables in the body element and override them with the class or a custom attribute of the body.
Use these variables as you would normally for your other HTML elements, and just change the attribute of the body element to apply a different theme.
The important part here is to make sure your theme color variables have corresponding contrasting color variables as well, so that things like white text on a dark background can swap to dark text on a white background.
Here's an example, where primary and secondary theme and contrast colors are defined in the body element, and are overridden when the body has the "dark" class applied to it:
document.querySelector("button").addEventListener("click", () => document.body.classList.toggle("dark"));
body {
--color-primary: #b4e9ce;
--color-primary-contrast: #000000;
--color-secondary: #308d43;
--color-secondary-contrast: #ffffff;
/* Other theme colors... */
}
body.dark {
--color-primary: #202d26;
--color-primary-contrast: #ffffff;
--color-secondary: #8f8f8f;
--color-secondary-contrast: #000000;
/* Other theme colors... */
}
button {
padding: 10px;
margin-bottom: 20px;
}
.wrapper {
padding: 20px;
background-color: var(--color-primary);
border: solid var(--color-secondary) 10px;
}
.wrapper h1 {
font-family: sans-serif;
text-align: center;
color: var(--color-primary-contrast);
}
<body>
<button>Toggle Theme</button>
<div class="wrapper">
<h1>Hello World</h1>
</div>
</body>
Single Line CSS will change Light Theme to Dark:
<style>
body
{
filter: invert(1);
}
</style>
I'm using snackbar in my Angular 9 project but some reason I'm getting the same background and text color for action button. I added css style in the component.scss file and also global style.scss file but still not working.
this._snackBar.open(`Chart has been copied to ${workspace.name}`, 'Check it out!',
{ duration: 5000, panelClass: "blue-snackbar"}).onAction().subscribe(() => {})
I also tried like this
panelClass: ['my-snack-bar', 'button-bar']}
I also add this in styles.scss and component.scss file but still not working
.my-snack-bar {
background-color: #E8EAF6;
color: red;
}
.button-bar {
background-color: pink;
color: blue;
}
example
Not sure why it's happening..any suggestion or help will be really appreciated.
In your global styles file, usually styles.scss you need to target the panelClass property, something like this:
.my-snack-bar {
background: #2196F3;
button {background:white; color: blue}
}
Here's a working example https://stackblitz.com/edit/angular-stacb4-b1fuu5
I want to create a local inverted theme (modern browsers). Color shades are set using CSS Vars (CSS custom properties). Some elements have more contrast, others are low contrast. Now the inverted container has a black background. Everything within there, should be reversed. Dark grey should be light grey. Light grey should be dark grey.
My goal is to achieve this without reassigning the vars in CSS selectors. For this example it would be easy, but the actual code base is big and there are many selectors. So instead of that I just want change the CSS Vars. Also, I want keep the original CSS Vars to be editable.
Final goal mockup
Simple reassignment of the Vars (light = dark, dark = light) does not work, obviously. I tried to transpose the values to a new placeholder var, but that also didn't worked. Maybe I was doing it wrong? Is there a clean way? I don't think so.
I am aware of workarounds using SASS, or hacks using mix-blend-mode.
Playground:
https://codepen.io/esher/pen/WzRJBy
Example code:
<p class="high-contrast">high contrast</p>
<p class="low-contrast">low contrast</p>
<div class="inverted">
<p class="high-contrast">high contrast</p>
<p class="low-contrast">low contrast</p>
</div>
<style>
:root {
--high-contrast: #222;
--low-contrast: #aaa;
}
.high-contrast { color: var(--high-contrast) }
.low-contrast { color: var(--low-contrast) }
.inverted {
background-color: black;
/* Switching vars does not work
--high-contrast: var(--low-contrast);
--low-contrast: var(--high-contrast);
*/
/* Transposing Vars also doesn't work:
--transposed-low-contrast: var(--low-contrast);
--transposed-high-contrast: var(--high-contrast);
--high-contrast: var(--transposed-low-contrast);
--low-contrast: var(--transposed-high-contrast);
*/
}
/*
I am aware of this solution (see description above):
.inverted p.high-contrast { color: var(--low-contrast); }
.inverted p.low-contrast { color: var(--high-contrast); }
*/
<style>
What about something like this:
:root {
--high-contrast: var(--high);
--low-contrast: var(--low);
--high: #222;
--low: #aaa;
/* Yes I can put them at the end and it will work, why?
Because it's not C, C++ or a programming language, it's CSS
And the order doesn't matter BUT we need to avoid
cyclic dependence between variables.
*/
}
.high-contrast {
color: var(--high-contrast)
}
.low-contrast {
color: var(--low-contrast)
}
.inverted {
--high-contrast: var(--low);
--low-contrast: var(--high);
}
<p class="high-contrast">high contrast</p>
<p class="low-contrast">low contrast</p>
<div class="inverted">
<p class="high-contrast">high contrast</p>
<p class="low-contrast">low contrast</p>
</div>
I am using DevExpress controls on ASP Web Forms Application. I would like to have different disabled styles for my buttons, so I've created some styles:
.dxmLite_Moderno .dxm-disabled, .dxmLite_Moderno .dxm-disabled a.dx {
color: rgb(1, 211, 211);
border-style: none !important;
height: 36px;
padding-top: 2px;
}
.red {
color: rgb(255, 0, 0) !important;
}
.blue {
color: rgb(0, 255, 0) !important;
}
First override style of button if it's disabled.
Second is overriding buttons which have:
<dx:MenuItem ItemStyle-CssClass="red" Text="D" ItemStyle-Width="104" Name="I">
ItemStyle-CssClass called 'red'.
Now question is - it's possible to combine those css styles in way:
if button is disabled and red => have style red
if button is enabled and red => I dont want any style
if button is disabled and blue => have style blue
if button is enabld and blue => I don't want any style
I am asking because now situation looks like if I have enabled / disabled button red it's always color of style red.
What is important you have wrong blue definition color.
Second remove any !important from css.
And finally combine dxm-disabled class with your colors class:
.dxmLite_Moderno .dxm-disabled.red {
color: #f00;
}
.dxmLite_Moderno .dxm-disabled.blue {
color: #00f;
}
I create the demo for you:
http://jsfiddle.net/YQG9B/1/
I found out that html and body quote got basically a background:none.
How can i change that to apply a new background in one of my quote ?
For example, if you want a grey background for your body, put the following code :
body {
background-color: #CCCCCC !important;
}
The !important lets you override a property that has been defined in another CSS. In the case of Foundation, the background has probably been set before.
Hope that it will help you.
You have two background tags in both style sheets of Foundation 4:
Try to edit:
css/foudation.css
body {
background: white;
...
}
css/normalize.css
html{
background: #fff;
...
}
If using foundation with SASS add this to ./scss/app.scss :
body, html {
background-color: $white !important;
}
where $white - variable defined in ./scss/_settings.scss