Skip to content

YasasBanuka/react-theme-switcher

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

7 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

react-theme-switcher

This project demonstrates a basic theme switcher implementation in a React application, inspired by the React Advanced course by Meta in Coursera.

Author: Yasas Banuka Malavige

React Theme Switcher Project

Description: This project demonstrates a basic theme switcher implementation in a React application, inspired by the React Advanced course by Meta in Coursera.

Features:

Implements a toggle switch component to switch between light and dark themes. Dynamically updates the application background color based on the selected theme. Uses React Context to manage the theme state and provide it to child components. Includes detailed comments throughout the code for better understanding.

Technologies Used:

React

Instructions:

  1. Clone or Download the Repository: Access this project's code through your preferred method (e.g., Git clone or download).
  2. Install Dependencies: Open your terminal or command prompt and navigate to the project's root directory. Run the npm install or yarn install command to install the necessary dependencies
  3. Run the Application: Start the development server using npm start or yarn start The application will be accessible at http://localhost:3000 by default.

Enjoy!

Further Enhancements (Optional):

  1. Implement theme persistence to store user preference across sessions (e.g., local storage, cookies).
  2. Add more theme options beyond light and dark.
  3. Explore integrating with a CSS preprocessor (e.g., SASS, LESS) for more organized styling.
  4. Enhance accessibility features for the switch component.

Course Reference:

This project aligns with concepts covered in the React Advanced course by Meta in Coursera. https://www.coursera.org/learn/advanced-react/

Feel free to fork this repository and contribute your own enhancements or bug fixes. We welcome community engagement to further refine this project.

Happy Coding!

"theme_switcher_design.png" "code.png"

About

This project demonstrates a basic theme switcher implementation in a React application, inspired by the React Advanced course by Meta in Coursera.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors