CODEWITHSUNDEEP
reactjstwitter-bootstrapreact-bootstrapdarkmodelightmode
RUCK FULES
RUCK FULES

Reputation: 249

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

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.

Upvotes: 2

Views: 11580

Answers (5)

spatialaustin
spatialaustin

Reputation: 706

You can set the bootstrap theme (light or dark) globally by adding the data-bs-theme attribute to your app's html element.

You must use a custom _document file, and the NextJS docs cover in this in detail.

TL;DR save this as _document.jsx in the root of your ./pages directory and set the data-bs-theme attribute accordingly:

import { Html, Head, Main, NextScript } from "next/document";

export default function Document() {
  return (
    <Html lang="en" data-bs-theme="dark">
      <Head />
      <body className="antialiased">
        <Main />
        <NextScript />
      </body>
    </Html>
  );
}

You don't have to add data-bs-theme to your html tag, you can assign it to any element, and you can do so dynamically using state variables, local storage, what have you.

Hope that helps!

Upvotes: 0

Syed Usman Hassan
Syed Usman Hassan

Reputation: 25

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">

Upvotes: 0

Pratik Thacker
Pratik Thacker

Reputation: 67

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

Upvotes: 2

enrico
enrico

Reputation: 71

bootstrap 5.3 introduced color modes to solve your problem

Upvotes: 4

Adarsh Urmaliya
Adarsh Urmaliya

Reputation: 21

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.

Upvotes: 2

Related Questions