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


We first need to install the react-bootstrap and bootswatch packages using npm. Next, we import the desired theme from bootswatch and apply it to our React components using the 'import' and 'className' properties. Lastly, we can easily switch between themes by simply changing the imported theme.

Let us first understand what Bootswatch is.

What is Bootswatch?

  • Bootswatch is a collection of free and open-source themes for Bootstrap, a popular front-end development framework.

  • The themes are available in various styles, such as material design, flat, and dark mode.

  • Bootswatch themes are easy to install and customize, allowing developers to quickly change the appearance of their webpages.

  • Bootswatch themes can be used for creating responsive and mobile-friendly websites and web apps.

  • Bootswatch is compatible with Bootstrap version 4 and can be used in any web development project, including ReactJS, Angular, and Vue.js.

What is ReactJS?

React is a JavaScript library for building user interfaces. It makes it easy to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render the right components when your data changes. You can also build encapsulated components that manage their own state, then compose them to make complex UIs.

Both small and large, complicated applications can be created with ReactJS. It offers a basic yet reliable feature set to get a web application off the ground. It is easy to master both contemporary and legacy applications and is a faster method of coding a functionality. React provides high quantity of ready-made components readily available.

To get started first create a new ReactJS app and run it on our dev server like this −

npx create-react-app theme-app
cd theme-app
npm start

Approach

  • Start by installing Bootswatch and bootstrap into your ReactJS project by running the command npm install bootstrap bootswatch in the terminal.

  • Next, import the Bootswatch CSS file in the index.js file or in the App.js file of your project. You can do this by adding the following line of code −

import 'bootswatch/dist/<themename>/bootstrap.min.css';
  • Replace <themename> with the Bootswatch theme you want to use, for example, "cerulean", "cosmo", or "darkly".

  • Once the CSS file is imported, you should see the theme applied to your webpage when you run your project.

  • To change the theme, simply change the theme name in the import statement and re-run your project.

  • You can also apply different themes to different components or pages by importing the CSS file into those specific components or pages.

  • Finally, make sure to include the Bootstrap CSS file in your project if you haven't already. This can be done by adding import 'bootstrap/dist/css/bootstrap.min.css'; in the index.js file or in the App.js file of your project.

Example

Here is an example of how you can add a Bootswatch theme to your ReactJS project −

App.js −

import React from "react";
import "./style.css";
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootswatch/dist/darkly/bootstrap.min.css';
export default function App() {
   return (
      <div>
         <h1>Hello World!</h1>
         <p>This is my first ReactJS application </p>
      </div>
   );
}

Now, when you run your project, the "darkly" theme will be applied to your webpage.

You can change the theme by replacing "darkly" with any other theme name, such as "cerulean" or "cosmo".

Output

Dark Theme −

Cerulean Theme −

Updated on: 13-Feb-2023

858 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements