|
|
# Structure
|
|
# Structure
|
|
|
Theme.ts file should contains all colors and global stylings used in the app. Theme.ts contains `makeTheme function` which takes `mode: PaletteMode` as parameter. PaletteMode is always dark or light.
|
|
Theme.ts file should contains all colors and global stylings used in the app. Theme.ts contains `makeTheme function` which takes `mode: PaletteMode, color: string, style: string` as parameters. PaletteMode is always dark or light.
|
|
|
makeTheme has two parts:
|
|
makeTheme has two parts:
|
|
|
- First part contains palette with all the colors for dark and light modes and it creates `theme`
|
|
- First part contains palette with all the colors for dark and light modes and it creates `theme` based on color parameter
|
|
|
- Second part adds global styles for the components to the `theme` and returns `theme`
|
|
- Second part selects global styles for the components based on style parameter and adds them to the `theme` and returns `theme`
|
|
|
|
|
|
|
|
App.tsx uses `makeTheme()` to create a theme for the app based on users preferense.
|
|
App.tsx uses `makeTheme()` to create a theme for the app based on users preferense.
|
|
|
|
|
|
|
|
# Usage
|
|
# Usage
|
|
|
First time user comes to the site App.tsx uses MediaQuary to check if users browser is using dark or light mode and saves "dark" or "light" to the localStorage with a key "mode". After the first visit app.tsx uses localStorege to make a right theme. Setting.tsx contains switch which changes localStorage key "mode" to new value and tells App.tsx to make a new theme.
|
|
First time user comes to the site App.tsx uses MediaQuary to check if users browser is using dark or light mode and saves "dark" or "light" to the localStorage with a key "theme" which contains "mode". After the first visit app.tsx uses localStorege to make a right theme. Setting.tsx contains selectors which changes localStorage key "theme" to new value and tells App.tsx to make a new theme.
|
|
|
|
|
|
|
|
# Adding new themes
|
|
# Adding new themes
|
|
|
To only add new colors:
|
|
To add new colors:
|
|
|
- make a copy of `theme` in Theme.ts
|
|
- make a copy of `palette` in Theme.ts
|
|
|
- add it within `makeTheme function`
|
|
- add it within switch case
|
|
|
- change colors to new values
|
|
- change colors to new values
|
|
|
- make a new functionality to pick which theme to return
|
|
- in settings add switch that sets the new value to the localStorage like the existing switches
|
|
|
|
|
|
|
|
TODO add more |
|
# Adding new style
|
|
\ No newline at end of file |
|
Adding new style is same as adding new colors. Just copy existing stylings into new case in switch case and add switch to settings. |
|
|
|
\ No newline at end of file |