1

Current dark and light theme are implementing on each and every component whenever creating new components in react-bootstrap

<Card className={isDarkTheme ? 'bg-dark text-white' : 'bg-white text-dark'}>

<Navbar
 expand="md"
 bg={darkTheme ? 'dark' : 'light'}
 variant={darkTheme ? 'dark' : 'light'}


<ListGroup.Item action variant=={darkTheme ? 'dark' : 'light'}>
  Dark
</ListGroup.Item>

<Toast.Body className={variant === 'Dark' && 'text-white'}>
  Hello, world! This is a toast message.
</Toast.Body>

Is there any other option to switch dark to light and vice versa like customizing bootstrap with variable or https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties ?

The question is not regarding bootstrap sass update. It is about how to set up on react-bootstrap

Mo.
  • 26,306
  • 36
  • 159
  • 225
  • I closed it as you seem to have done no research at all. Probably the easiest (least effort) path to it is adding [two theme files](https://github.com/ForEvolve/bootstrap-dark) and toggling a class on your app/body. – tao Dec 22 '21 at 01:49
  • @tao Sad do to see deleting the question The question is not directly related to sass update. It is simply finding solution how to do on react-bootstrap not on bootstrap itself – Mo. Dec 22 '21 at 12:14
  • The answer is to not apply color related classes at component level, but rather have two (or more) bootstrap themes loaded and have them apply based on the presence of a specific class applied to the app or body element. Read the "How to use" section in the link from my previous comment. – tao Dec 22 '21 at 12:45
  • Also note the [second answer](https://stackoverflow.com/a/68672905/1891677) in the similar question might be more relevant for your case than the accepted one. – tao Dec 22 '21 at 12:48
  • @tao This is not the way I am looking for solution – Mo. Dec 22 '21 at 13:06
  • You're asking: *"Is there any other option to switch dark to light and vice versa like customizing bootstrap with variable?"*. And that answer explains how Bootstrap is not using `@media (prefers-color-scheme: dark)`, but you can create your own wrapper around bootstrap's variables and feed them your colors, based on `prefers-color-scheme: dark` media query. That is the alternative option, which avoids passing colors at component level. That answer covers (and answers) your question, IMHO. – tao Dec 22 '21 at 14:07
  • @tao This is not the way solution is looking for the question. I am disappointed with the closing decision. Any way leave it. – Mo. Dec 23 '21 at 12:37
  • @tao The question is for javascript solution and moderators are giving CSS solution which is not acceptable reason to close the question – Mo. Feb 11 '22 at 13:11
  • I hope you are aware theming in Bootstrap is CSS based and the best way to apply various themes to your elements is to have two or more themes files loaded and switch the className on the root element. You could argue that it can be done at component level and, fair enough, it can, but I would say changing classes on every component of your app is far more costly than classes on only the root element. – tao Feb 11 '22 at 14:59
  • @tao I am looking for `javaScript` based solution – Mo. Feb 11 '22 at 16:03

0 Answers0