I am using bootstrap 4 alpha-6,I want to modify bootstrap 4's primary color(#0275d8),is there a variable that can set the value?
You could overwrite the relevant css styles with your own custom styles, otherwise it might be worth it to look into using Less. Less is a CSS Preprocessor that allows you to store variables used in your css such as color values. You can see an example of this below:
#brand-primary: darken(#428bca, 6.5%); // #337ab7
#brand-success: #5cb85c;
#brand-info: #5bc0de;
#brand-warning: #f0ad4e;
#brand-danger: #d9534f;
.masthead {
background-color: #brand-primary;
}
You can read more on bootstraps use of Less here
Update 2019 Bootstrap 4
It's easily done with SASS. Just set the $brand-primary $primary variable.
$primary: hotpink;
Demo on Codeply
See: How to change the bootstrap primary color?
Related
I'm using vuetify (2.5.8) with our own custom theme colors. We've defined our own color names via String, or Object if we need more control over which variations are generated and to have fewer css variables.
However, I haven't been able to get these variations to work with the color prop of vuetify elements, specifically v-expansion-panel-header.
In the docs I saw example use of color=”purple darken-2" and color="success darken-2", separating the theme color and its variation by a space. This works, when a color in my theme is defined as a string and its variations are generated by vuetify as (darken|lighten)-{n}.
But when I define my own variations, this doesn't work anymore. For example: if I define the color success: { base: '#1CC234', muted: '#2AAC9B', }' in my theme, I can't use color="success muted", it will always display the base color. This is also true when I try to name my variations the way vuetify describes them, for example success: { base: '#1CC234', 'darken-2': '#2AAC9B', }'. In this case, color="success darken-2" no longer works.
I've tried working around it by naming my variations 'darken-2' and the like, as well as nested syntax (success.muted) as the name of the generated color variable (success-muted), but to no avail. Does anyone have a way to pass these variations via the color prop, without having to use a v-deep selector and restyling the entire component everywhere I use it? Or should I use a computed to reach into this.$vuetify.theme and see if I can get the hexcode that way?
Thanks in advance.
color="success muted"
Only base and lighten/darken variations are used.
You can work around this by defining it as { success: '#1CC234', 'success-muted': '#2AAC9B' }
In this case, color="success darken-2" no longer works.
The keys in the theme configuration should be in camelCase: darken2
I have a simple sass variables declarations as below
$theme-primary-dom: #181818ff
$theme-primary-sub: #29292Bff
$theme-secondary-dom: #FAFAFAff
$theme-secondary-sub: #C4C4C4ff
$theme-primary-sub-transparent: #29292B22
This is what I need for dark theme that is a default theme. BUt I want to add a light theme as well. In my brain it is very simple.
if .wrapper.darktheme{
$theme-primary-dom: #181818ff
$theme-primary-sub: #29292Bff
$theme-secondary-dom: #FAFAFAff
$theme-secondary-sub: #C4C4C4ff
$theme-primary-sub-transparent: #29292B22
} else {
$theme-primary-dom: #FAFAFAff
$theme-primary-sub: #C4C4C4ff
$theme-secondary-dom: #181818ff
$theme-secondary-sub: #29292Bff
$theme-primary-sub-transparent: #C4C4C422
}
Now I have no idea how to do this in SASS.
Also, I have
<button class="theme__switch theme__switch--light">theme is light</button>
in header component
and,
<div class="wrapper darktheme"></div>
in main app.vue. which increase complecations as the trigger button and the trigger area are in different components.
I can easily get this using jquery of course, But since I am using vue.cli, adding jquery code didn't felt right. I have been searching all over stackoverflow and google for past 3 days but I haven't found a relative solution yet.
I wrote a reusable app in Vue and I compiled it as a library. I set the global variable $brand-color in SCSS file which is a main color of the app (buttons, borders, font colors). I use this variable in other SCSS component files.
I've put my app to my client's website and everything is working fine. Right now I have another client who is willing to use my app. BUT... new client wants to have my app in different $brand-color than my old one. What would be the best way to approach this problem?
One thing which comes to my mind is to set store variable with value of $brand-color which depends on location.host and bind styles of all "branded" elements.
switch (location.host) {
case 'client1.com':
context.commit('setMainColor', '#ff0000');
...
case 'client2.com':
context.commit('setMainColor', '#16c100');
...
}
But this will be very painful. I would need to apply a lot of changes in all my components. Is there any better solution that style-binding all components?
By the way, I can't use CSS variables because code needs to be IE friendly.
You can have 2 files, each file definne scss variable for different customer:
customer1_variables.scss
$brand-color: green
customer2_variables.scss
$brand-color: red
And you can import it in javascript file
main.js
switch (location.host) {
case 'client1.com':
import './customer1_variables.scss'
...
case 'client2.com':
import './customer2_variables.scss'
...
}
Another solution is using vue-style-component. You can check this article for more detail
So finally I set store value depending on my client and prepared set of SCSS classess specified for each client, i.e.:
.btn-client1 {
background: red;
}
.btn-client2 {
background: blue;
}
...
and I binded classes for specific elements:
:class="`btn-${client}`"`
We've got our sass variables file set up like
scss\variables\_custom_variables.scss.
Which, of course contains things like
$link-color: $00f;
Then put to use in our sass files set up like this one for navigation as scss\main\_main_nav.scss where we have rules like
a {color: $link-color;}
Now we've got a new feature allowing for custom styling, which pulls in the variables as well as everything in scss\main\. In lieu of creating something like
scss\main_2\_main_nav.scss ad infinitum
I'd like to be able to redefine $link-color.
I was hoping I could simply create scss\new_file\_variables.scss and have a list of overrides like
$link-color: #36c;
but this is not working as expected. What could I be doing better?
Thanks, all
You can define your base-variables with the default-flag: $var1: lightblue !default;
and override them in the theme using $var1: red;
If you #import the variable-files in the right order, red overrides lightblue.
https://webdesign.tutsplus.com/articles/understanding-variable-scope-in-sass--cms-23498
I'd like to add new group on the trac roadmap progress bar. To do this I've modified trac.ini file with:
# Definition of an 'rejected' group:
rejected = rejected
rejected.order = 2
rejected.css_class = my
rejected.label = rejected
where I've associated to css_class atribute value my.
Next I've created style.css file with one line only:
table.progress td.my { background: blue; }
The file style.css is read however the colour is not applied.
When I change back to the default one i.e.
rejected.css_class = new
the progress bar is updated and displaying yellow colour as expected.
However, it not displaying when I use
rejected.css_class = my
Any ides why?
First, for reference, the authoritative documentation on the subject is in trac.edgewall.org's wiki.
Now, did you try with other color expressions, like the common hex values, i.e. #BAE0BA (green Trac default for closed)? You could even try to set the full range of values for the background key like none repeat scroll 0 0 #BAE0BA.
Remember that CSS styles will override each other depending on the order in which they are encountered. The page may be loading your custom style correctly, but if another stylesheet is loaded after your style.css and that stylesheet includes any styles that conflict with yours, then the later stylesheet will override yours. Double-check that your custom stylesheet is being included and isn't being silently overridden by another stylesheet (I find the Firebug plugin for Firefox to be helpful in tracking down these sorts of issues).