Text colour of Disabled tab could be lighter.

[emfluenceindia]

Can we make the default text colour of Disabled Tab bit more lighter?
Currently this is pretty close to that of Active Tab's text colour.

Here is the screenshot from the documentation page

[Hiws]

You're probably right, but this is more of an upstream issue.
So i would suggest you open up an issue on the Bootstrap Repo, with your suggestion.

You can also modify the color in your project easily if you're using SCSS.
The following variable $nav-link-disabled-color, can be edited to change the disabled color, just be aware <b-nav> and <b-tabs> share the same styling.

(also glad to see people are using the new Discussions Section)

[emfluenceindia]

Thanks a lot for your reply. I would love to open an issue and contribute.

I have actually downloaded from the project Github repo at my local but cannot run it. The contribution doc says I need yarn which I don't have. I however, have npm. How can I run the dev server and run the project using npm? Please help.

[Hiws]

Which repo do you refer to? Bootstrap or BootstrapVue?

[emfluenceindia]

Bootstrapvue. This one: https://github.com/bootstrap-vue/bootstrap-vue.
I am following https://github.com/bootstrap-vue/bootstrap-vue/blob/dev/CONTRIBUTING.md

[Hiws]

While npm isn't recommended to use, it's still possible.
After cloning the repo, you should be able to run npm install in the cloned folder and then npm run docs-dev to launch the docs locally.
You can then use localhost:3000/play to play around with changes locally.

But i do recommend you to install yarn, there isn't much difference syntax wise to NPM, and some scripts are based around them.
It's also a good thing to learn as it's widely used.

[emfluenceindia]

Thanks again!
npm run docs-dev has started the dev server!!

In fact I want to use Yarn as well, but wondering whether installing Yarn globally could have any conflict with npm since it has been installed globally as well. I Googled but could not get a suitable answer to it.

[Hiws]

These variables are defined in Bootstraps _variables.scss file, which contains all the variables (with default values) that they use in their project. You can see this file here.
Be aware that BootstrapVue only supports Bootstrap v4 right now, and that the main Bootstrap branch is for v5.
So if you go looking, remember to go on the v4-dev branch, or the latest v4 tag when viewing the Bootstrap repo.

BootstrapVue has some custom SCSS variables, which are contained in it's own _variables files. You can view this file here.

[Hiws]

Just be aware that the specific variable $nav-link-disabled-color, that I mentioned is from the Bootstrap repo and not BootstrapVue, that you're currently looking at.
So if you want the default value changed, you should not submit a PR to BootstrapVue, but instead Bootstrap, as we get most of the CSS from them. (hence the name).

[emfluenceindia]

If I have understood correctly, if I want this colour to change, I need to work on Bootstrap v4 repo and submit a PR there. If it is accepted, BootstrapVue will automatically be updated as well since it is fetching these variables directly from Bootstrap?

Because https://github.com/twbs/bootstrap/blob/v4.5.2/scss/_variables.scss has $nav-link-disabled-color which is using $gray-600 which is actually $gray-600: #6c757d !default; in the same file.

[Hiws]

If I have understood correctly, if I want this colour to change, I need to work on Bootstrap v4 repo and submit a PR there. If it is accepted, BootstrapVue will automatically be updated as well since it is fetching these variables directly from Bootstrap?

Basically, yes.

However, SCSS allows you to change it freely in your own project without submitting any PRs to Bootstrap.
You can change all the variables you want in your own project. Bootstrap simply supplies some default values that can be changed by the developer in their own projects.

You can read more info on the docs on how to use SCSS in your own project:
Setup: https://bootstrap-vue.org/docs#using-module-bundlers
Theming: https://bootstrap-vue.org/docs/reference/theming

Additional info on theming: https://getbootstrap.com/docs/4.5/getting-started/theming/

[emfluenceindia]

Thank you for you help! I have created a feature request at Bootstrap here