ReactJSDallas Meetup (12/10/2019) - Styled Theming

Learn how to create themes in your ReactJS application using the styled-theming library.

Presented at Dialexa for the ReactJSDallas Meetup

Transcript

1. 1 Dark Mode with Styled-Theming Presented by Doug Lasater ReactJS Dallas Meetup
2. A L I T T L E About Me 2
3. How Do We Create Dark Modes Why Dark Mode? Real World Examples Questions What Is Dark Mode?
4. 4 ALL THE RAGE What Is Dark Mode?
5. How Do We Create Dark Modes Why Dark Mode Real World Examples Capabilities What Is Dark Mode
6. It enhances visual ergonomics by • reducing eye strain • facilitating screens to adjust according to current light conditions • providing comfort of use at night or in dark environments 6 Why Dark Mode? BECAUSE IT LOOKS KOOL!
7. Why Dark Mode How Do We Create Dark Modes Real World Examples Capabilities What Is Dark Mode
8. How Do We Create Dark Modes Many Different Options • Use a library that already has theming enabled • React Material UI • Roll your own using CSS/SASS • Use styled-theming 8
9. 9 https://codesandbox.io/s/ycle2
10. Why Dark Mode Real Work Examples How Do We Create Dark Modes Capabilities What Is Dark Mode
11. Real World Examples Dialexa Pulse Light Mode Dark Mode 11
12. Real World Examples KIS Kiosk Client Theme KIS and Client Theme at Once 12
13. Q U E S T I O N S ? 13