How to create dark/light theme in Bootstrap 5 with React

Question

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.

Answer 1

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.

Answer 2

bootstrap 5.3 introduced color modes to solve your problem

Answer 3

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

Answer 4

Copy Paste this Line in your Html Head tag

enter code here
<link 
 ref="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-dark.min.css" rel="stylesheet">