How to add theme to your webpage using Bootswatch in ReactJS project ?

0 0 2 minutes read

We can add an instant theme to the ReactJS project by using Bootswatch.

Bootswatch: It is an open-source project, that provides a number of free themes for bootstrap that a web developer can use. It helps the developer to get proper UI without spending hours and energy on styling different elements.

Prerequisite:

To start follow the given link. Scroll down a bit, the themes will appear. Some of the most used themes are cosmos, darkly.

Link:

https://bootswatch.com/

Project structure:

Installation of Bootswatch in ReactJS project:

Click on the preview button to have a wider perspective of the different components like forms, dropdown, and others to see how these components will appear if we use this particular theme.
After selecting the theme, click on the download button, to download the bootstrap.min.css file.
Inside your react.js folder open terminal, write command, this will install react-bootstrap in your application.

npm install react-bootstrap bootstrap

As an example we choose Cyborg or https://bootswatch.com/cyborg/ is the theme that is chosen. Now add the downloaded bootstrap.min.css file, in the src folder.
Import the bootstrap.min.css file in index.js. Filename- index.js: Here we will just import the bootstrap.min.css. Now the theme is applicable to the entire application.

Javascript

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
 
// Import downloaded theme
import './bootstrap.min.css';
 
ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);
reportWebVitals();

In the src folder create another folder Components and inside it create a file and name it as Home.js it will be our functional component.
Create a functional component in the file, like below. Now add any bootstrap component in your react.js application and it will be styled according to the theme.

Filename- Home.js:

Javascript

import React from 'react';
import {Image , Row} from 'react-bootstrap';
 
const Home = () => {
 
    return (
        <div>
            <h1>Welcome to zambiatek</h1> 
            <h2>Let's Learn</h2>
 
            {/* aligning the image at the center */}
            <Row className="justify-content-md-center">
               <Image src=
"https://www.zambiatek.com/wp-content/uploads/gfg_200X200-1.png"
                      roundedCircle fluid />
            </Row>
        </div>
    )
}
 
export default Home

Now we just need to import the Home.js component in our App.js root component.

Filename- App.js: Remove the unnecessary things from this file and add the below code.

Javascript

import './App.css';
// Importing Home component
import Home from './component/Home';
 
function App() {
  return (
    <div className="App">
      <Home />
    </div>
  );
}
 
export default App;

Start the Server: Run the below command to start the server.

npm start

Output: The applied theme is Cyborg (dark theme) and here is the output.

Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, zambiatek Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!