https://github.com/pktcodes/dark-mode-react-project

Dark Mode Project using React
https://github.com/pktcodes/dark-mode-react-project

css3 dark-mode ecmascript html5 javascript localstorage momentjs react react-hooks useeffect usestate

Last synced: 20 days ago
JSON representation

Dark Mode Project using React

• Host: GitHub
• URL: https://github.com/pktcodes/dark-mode-react-project
• Owner: pktcodes
• Created: 2022-06-26T23:50:18.000Z (over 2 years ago)
• Default Branch: master
• Last Pushed: 2022-08-15T16:50:59.000Z (over 2 years ago)
• Last Synced: 2024-11-08T23:58:22.428Z (2 months ago)
• Topics: css3, dark-mode, ecmascript, html5, javascript, localstorage, momentjs, react, react-hooks, useeffect, usestate
• Language: JavaScript
• Homepage: https://react-dark-mode-prod.netlify.app/
• Size: 373 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Dark Mode 🌓

> PROD [Live] : https://react-dark-mode-prod.netlify.app/

#### Dark Mode consists of a straightforward user interface where there is a

- Blog with a list of static text posts, navbar with a title *Overreacted* and a **Toggle** button.

- Toggle button has the functionality to switch between the **light** and **dark** modes of the blog on click and its logic is handled by CSS.

- By default, the site is set to a light theme with a `background: white`, `font: black and a dark shade of pink`. When switched to a dark theme using the toggle, colors are changed to `background: black`,  `font: white and a light shade of pink` for a flexible user experience.

- **Local Storage** has been implemented to remember the mode of theme the user has been using. So, when the user revisits the site or on page reloads the mode of theme is still saved up.

- To run the project locally, clone the repo, `npm install` to install the dependencies, and `npm start` to start up the development server on default port 3000.

#### Languages 

HTML, CSS, JavaScript, ECMAScript, React - Hooks ~ useState, useEffect

#### Packages

[Moment.js](https://momentjs.com/)

#### Deployment / Hosting

Netlify

---

**To install Moment.js**

```sh

npm install moment

```

*Note: I have developed this project ~ [20] as part of React and Projects Course taught by John Smilga..*