search

nejomi / samewords

Web application for synonyms.
https://samewords.netlify.app/
0 stars 0 forks source link

Add light mode theme. #1

Open nejomi opened 3 years ago

nejomi commented 3 years ago

The overall theme of the website depends on the theme constant in App.js. I made all the colors in the css depend on that variable so that it is possible to add a light or dark theme colors handler.

const theme = { primaryBg: '#18191A', secondaryBg: '#242526', specialBg: '#3A3B3C', bodyColor: '#E4E6EB', headerColor: '#ffffff', specialColor: '#5E8BFB', hoverColor: '#404e5d', };

  1. Create a light theme pallette.
  2. Check if user is currently using a light or dark theme and use the appropriate theme.
  3. Add a button (preferably top right) with react-icons to switch between light or dark themes.