0

I'm stuck with developing a light/dark mode with bootstrap in react, how can I do this? Is there any example video or code or anything you know about it? I found in youtube only plain css and since I'm using bootstrap I'm afraid that won't work for my project, it could just change my background but I want to change also some structures of my site.

Thom A
  • 88,727
  • 11
  • 45
  • 75
сꝛıϻѕοɴ ᴠᴇɴoϻ
  • 1
  • 3
  • 17

4 Answers4

3

bootstrap 5.3 introduced color modes to solve your problem

enrico
  • 41
  • 5
2

Yeah I can help ! You need to use states as the theme btn is toggled, and update properties according to that, I have previously worked upon that so I am sharing link of that project: https://satellite-system.github.io/TextUtils---React-js-Web/ , github link : https://github.com/Satellite-system/TextUtils---React-js-Web

Hope it will help. It was actually a project from youtube, but I have forgot its channel.

Adarsh Urmaliya
  • 21
  • 2
  • 1
    I think passing all the theme modes as props is not good way. Need global styling for that – sayinmehmet47 Sep 27 '22 at 14:11
  • I agree with @sayinmehmet47 that passing the theme (or `mode`) as a prop to individual components is likely not a healthy way to go. Likely use of Context API or building your own hook (useTheme??) would be cleaner. – Greg Fenton Nov 09 '22 at 14:58
1

how I would approach this

  1. use LocalStorage to store user selected mode 2.create a component which fetches this data from LS and usesContext
  2. export the context and use it in component wherever required
Pratik Thacker
  • 57
  • 8
0

Copy Paste this Line in your Html Head tag

enter code here
<link 
 ref="https://cdn.jsdelivr.net/npm/bootstrap-dark-5@1.1.3/dist/css/bootstrap-dark.min.css" rel="stylesheet">
Syed Usman Hassan
  • 23
  • 5