I am trying to change Bootstrap 5.2 primary button background color.
I used mpn to install Bootstrap 5.2. When I created a file called my-bootstrap.scss I added the following
$primary: #047ec9;
#import "../../node_modules/bootstrap/scss/bootstrap";
After compiling the scss code, indeed the background of the primary color changed as expected! However, the primary button font-color also changed in the progress. Originally, the font-color was white and I want to keep it white. However, $primary: #047ec9; seems to also change the font-color from white to black.
How can I change the primary/blue background color without changing the font-color?
Related
I use ready-made Angular components in my project. Some of the components use colors (see picture) that don't fit my project.
Instead of the purple, I want to use another color. I couldn't find anything in the Angular documentation to change the color.
https://material.angular.io/components/input/overview
I also didn't see a property in Chrome's Inspecter Tool to change the color.
How can I use a different color instead of the purple?
It would be best if you only have to change it in one place, as I use many other Angular components.
If you check the CSS for the placeholder text in the browser inspector, you should see the associated CSS that you should be able to copy to your code and change. Below is what I copied when I went to https://material.angular.io/components/input/overview and inspected (and even changed). If you decided to add this CSS as is to your Angular app, be sure to change the encapsulation option to ViewEncapsulation.None to see the effect. This is if you're using Angular Material v15; otherwise, inspect and see the associated CSS.
.mdc-text-field:not(.mdc-text-field--disabled) .mdc-floating-label {
color: orange;
}
I need to customize the color of the label for the Input field ( ant design ). but i couldn't change the color of it.
Inside the yellow box is the CSS I have added to the code but when I run and inspect the code (inside the red box) there is two .ant-form-item-label > label is there, the issue is the one I have added (inside the yellow box) is not working, other one (i think its the default one) is overwriting the one which I have written. how to overcome this
Hard to judge as no one will know how the project is set up. The correct way to overcome this is by checking the order of your scss imports, if your default login scss styles are located below your LoginStyles.scss then they will overwrite any of your sass styles. Simply move, shift your imports so that LoginStyles.scss is below defaults.scss i.e
#import 'default.scss';
#import 'LoginStyles.scss';
A dirty way to fix the issue is by assigning !important on your color but I would try getting your import order correct first as this stops messy conflicts
You can add !important rule. And there is no definition of that color in the files? The default label appearance can also be changed.
I want to use its value as background in SCSS but it is not working. I tried color highlighter plugin and also checked settings for it but it is only working with hex code, rgb, rgba and name of color but not working with SCSS variable in WebStorm 2020.2
Sorry for my bad English.
What I see right now:
What I want to have:
For variables it is available as color boxes in the gutter area only for the moment.
https://youtrack.jetbrains.com/issue/WEB-14338 -- watch this ticket (star/vote/comment) to get notified with any progress.
just point out to the SCSS variables file where your color variable definitions lay at.
For instance:
#import "../abstracts/variables";
Once you include this reference at the head of each SCSS file you create, your color highlight extension installed in vScode would paint them just as in your variables folder.
I am designing a dark theme for my ionic application by following this Tutorial. It works for most of the classes but, there are some css classes which only change when i override them in app.scss, if i override them in theme.dark.scss they remain unaffected.
for example here's an ionic alert class .alert-md .alert-wrapper
if i change the background-color and color in app.scss, it reflects the changes. But, if i do the same in theme.dark.scss, it doesn't do anything.
I've tried using !important in theme.dark.scss but still it doesnt change the background-color and color of that class.
Is there any way to override the css in the theme.dark.scss file?
Help is appreciated.
you can change your background color in variables.scss or override the background color
In Variable.css you would find and change as below:-
// From
#import "ionic.theme.default";
// To
#import "ionic.theme.dark";
This would make you theme dark and then you can make appropriate changes as needed.
Please follow below link for more explanation.
https://coursetro.com/posts/code/117/How-to-Properly-Use-Ionic-Theme-Variables
I'm having a lot of trouble with a few of the SASS theming components. I'll start with the one providing me the most annoyance... I've written a BUNCH of custom themes for EXTjs 4.x, and haven't had these issues, but theming 5.x is proving to be a bit buggy/different. I'm not sure if I'm just not using the proper sass variables, or what... please help!
TAB
I've extended a theme from the 'ext-theme-gray' package. I'm simply trying to change the text color of the tab title, but these sass variables don't seem to change the color properly. The 'ext-theme-gray' has a text color of #333.
I add these sass values, and build my theme:
Code:
$tab-color: #c8c8c8 !default;
$tab-color-active: #c8c8c8 !default;
$tab-color-over: #c8c8c8 !default;
$tab-color-disabled: #c8c8c8 !default;
No change to the ACTIVE tab only. For some reason, the active tab is still using the ext-theme-gray css, and overwriting my theme (screenshot below):
What am I doing wrong?!
ref: link to duplicate sencha forum post here
Why are you including both your theme's CSS and the ExtJS theme? Your theme will have all of the relevant CSS, based on detection by ExtJS about what classes you use.
Your style is being overridden by the more specific style in the extjs theme. If you need both (and I don't think you do), you'll need to mark your styles as !important, not !default