https://github.com/davidyslu/React-Challenges-DarkMode

https://github.com/davidyslu/React-Challenges-DarkMode

Last synced: 11 months ago
JSON representation

• Host: GitHub
• URL: https://github.com/davidyslu/React-Challenges-DarkMode
• Owner: davidyslu
• Created: 2021-04-07T10:50:23.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2021-04-07T10:56:35.000Z (over 5 years ago)
• Last Synced: 2025-05-14T10:33:11.841Z (about 1 year ago)
• Language: JavaScript
• Size: 218 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# Dark Mode Coding Challenge 🌙   ![medium](https://img.shields.io/badge/-Medium-yellow) ![time](https://img.shields.io/badge/%E2%8F%B0-30m-blue) 

 

# Goals / Outcomes ✨

- Using state and global state

- DOM manipulation

 

# Pre-requisites ✅

None

 

# Requirements 📖

- Add dark-mode switching functionality to the *existing* dark-mode button

  - Utilise the *existing* dark-mode scss file by adding a `dark-mode` class to the root `html` element

- When in Dark mode:

  - The button icon should be `faSun`

  - The button icon colour should be `(#FFA500)`. You can use the `color` prop on the `Icon` component.

 

# Think about 💡

- How we would use Dark mode on other potential routes/components in a bigger application. Would your solution work for this?

- How we can apply a class to the `html` DOM element

 

# What's Already Been Done 🏁

- Basic app UI (mobile responsive)

- Dark mode and light mode styles/themes

 

# Screenshots 🌄

 

![screenshot-light](https://puu.sh/Fq13d/04a9e5ad48.png)

![screenshot-dark](https://puu.sh/Fq132/caa2fa0c6d.png)