How to add theme to your webpage using Bootswatch in ReactJS project ?
We can add an instant theme to the ReactJS project by using Bootwatch.
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 GeeksforGeeks</h1>
<h2>Let's Learn</h2>
{
/* aligning the image at the center */
}
<Row className=
"justify-content-md-center"
>
<Image src=
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.