How to change primary color in dark theme?

[AucT]

I have few questions:

1. How to change primary color for links, buttons, etc in dark theme? (For light theme I've managed to change it in vendor/bootstrap/variables, but for dark, variables.scss doesn't apply)
2. How to make .bg-light in dark theme to work like .bg-dark. (not interested in themed class).

I know this is noob questions, I don't even know scss and other fronted stuff.

[Carl-Hugo]

Hi there,

1. I suspect this is what you are looking for: https://github.com/ForEvolve/bootstrap-dark/blob/master/scss/_dark-variables.scss#L32
2. I don't understand the question; Do you want the light to be dark and the dark to be light?

[AucT]

Sorry to bother you, sir, but it doesn't work for me.

1st question

I cloned repo, run npm install, changed line as you say, run gulp build-theme, run gulp build-combined-theme And I copied file dist/bootstrap-light-prefers-dark.min.css

But my primary color from dark-variables.scss#L32 is not working!

2nd question

I don't need bg-light. I want to paint it black. In my case to behave as bg-dark

conclusion

Can you look at my steps with primary color? Seems like buttons, badges are blue like in /node_modules/bootstrap/..

[Carl-Hugo]

This is related to #54, I'll do my best to push an update this week

[Carl-Hugo]

Please try version 3.0.0-g4b3ea67271 and let me know if this fixes the issue. If so, I'll merge the changes to master.

As for the 2nd question, I'd say use bg-dark directly or use the .bg-themed and .text-themed utilities that will change color depending on the current color scheme of the user.

[AucT]

That's perfect! Even _dark-styles.scss works and I've managed recolor bg-light. I've paint it black and it's awesome!

p.s. I've used git branch fix-the-dark-variable-maps if smthing

[AucT]

I have been using it for a while and there are some problems.

.nav-pills .nav-link.active, .nav-pills .show>.nav-link {
    color: #fff;
    background-color: _is_used_from_light_theme_
}

Also there is bug from version before. I've overwrite it with style, but imo this should be fixed.

.list-group-item.active {
    color: #000; //should be white
}

and I like old color blending, but it's matter of taste. I've changed it for myself so don't care, but you can consider.

$yiq-text-dark:             $gray-900 !default;
$yiq-text-light:            $white !default;

Epilogue

I've created issue 6 days ago. I've made a workaround few days ago - I've changed colors in bootstrap scss (official) and generate dark theme. So I don't need it very much if it is hard to do. But it would be noice if it would work, so I can get also light_prefer_dark. But not necessary.

[Carl-Hugo]

White looks better for .list-group-item.active. I'll look at the other elements that use $component-active-color and see if they all look better (which should) and if so, leverage the major bump to 3.0 to push this change as well.

[Carl-Hugo]

As much as I prefer white text for .active, the black text has better contrast, as shown below. I cannot say that the whole dark theme is accessible, contrast-wise, but I'll keep it black to ensure I don't make it worst.

[AucT]

Sorry to bother you again, sir, but you missed my first bug report:

.nav-pills .nav-link.active, .nav-pills .show>.nav-link {
    color: #fff;
    background-color: _is_used_from_light_theme_
}

Try to change color in light theme (in node modules to red). And check nav-pills in dark theme. For example, this code:

<ul class="nav nav-pills nav-fill">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Much longer nav link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled">Disabled</a>
  </li>
</ul>

Again, I don't need this, but it would be responsible to fix obvious bugs. Furthermore, I think you should add nav-pills code https://getbootstrap.com/docs/4.6/components/navs/ to your samples

Have a nice day!

[AucT]

One more thing. The contrast site you've using for my color says different story. For dark I use color #4673a3 (links, buttons), list-group gets color #375a7f (i'm fine with it as long as it would have white text, but maybe, just maybe it is another bug?).

//_dark-variables.scss
$blue:    #4673a3;

Here some screenshots

I hope it helps.

Again, I don't need this, I've added some custom css to repaint it to white.

[Carl-Hugo]

One more thing. The contrast site you've using for my color says different story. For dark I use color #4673a3 (links, buttons), list-group gets color #375a7f (i'm fine with it as long as it would have white text, but maybe, just maybe it is another bug?).

//_dark-variables.scss
$blue:    #4673a3;

Here some screenshots

I hope it helps.

Again, I don't need this, I've added some custom css to repaint it to white.

By changing the background color, you are changing the contrast ratio with the foreground color, so it is up to you to ensure your updated theme fits your need and taste.

I created another issue with the nav-pill to investigate separately.