search

ForEvolve / bootstrap-dark

Bootstrap 4 dark theme that supports togging dark/light themes as well. There is no fluff, it changes the color of Bootstrap and that's it, no new thing to learn or unlearn, just Bootstrap, but Dark!
MIT License
298 stars 44 forks source link

How to replace dark theme variables? #45

Closed JoaoAntonio2 closed 3 years ago

JoaoAntonio2 commented 3 years ago

I want to replace the dark variables, not the style, but without affecting the bootstrap default theme, how can i do it?

Carl-Hugo commented 3 years ago

If I understand what you want to do, you will have to create your own version of bootstrap-dark.scss or toggle-bootstrap-dark.scss. There is no way that I know of to "pre-override" the values of dark variables since I already do that in this project (i.e., there is no !default in this project)­.

Assuming you are using npm, you can:

  1. npm i @forevolve/bootstrap-dark --save
  2. Copy the content of one of those two files into a new file in your project (say my-custom-dark.scss)
  3. Add your overrides somewhere after @import 'dark-variables';

Example:

@import 'node_modules/bootstrap/scss/functions';
@import 'node_modules/bootstrap/scss/variables';
@import 'node_modules/@forevolve/bootstrap-dark/dark-variables';

@import 'your-custom-variables';

@import 'node_modules/bootstrap/scss/mixins';
@import 'node_modules/@forevolve/bootstrap-dark/dark-mixins';

// ...

_You could get rid of the node_modules/* suffix if you want to_