Custom Light, Dark Theme Toggler in React

In this video we are creating a Custom Dark Theme Toggler in ReactJS. We have created this by using jQuery before. Links are in description. We are doing it in React this time. Its so simple. We will use React Hooks namely state and effect hook to create this app. You will be able to toggle dark and light mode for your website. This app will persist its state and it will persist its selected theme even when you reload the page or browse to another page. We will make use of CSS, classes switching, React state and local storage.

1- Custom Dark Theme Toggler – jQuery

2- Multiple Color Themes Switcher – jQuery

3- Custom Dark Theme Toggler – ReactJS

4- Multiple Color Themes Switcher – ReactJS

5- Custom Dark Theme Toggler – VueJS

6- Multiple Color Themes Switcher – VueJS

7- Custom Dark Theme Toggler – Angular

8- Multiple Color Themes Switcher – Angular

You should have nodejs installed in your PC to create and use javascript and command line based applications. You can head over to nodejs website and install the latest stable version. It will give you node package manager / npm / command line utility that you can use to run commands in order to install and manage javascript packages efficiently and to run JavaScript apps based on JavaScript frameworks and libraries. You can also use Yarn package manager to do so. Also you will need a command line utility or a terminal program to run commands. If you are using Windows, git for windows can provide you great terminal utility. and you can run commands by using that. Then you can use create-react-app to create basic react app and then use ‘yarn start’ command from cli to run react app. Use code editor to make changes in your app and follow along video.