|
|
# 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` as parameter. PaletteMode is always dark or light.
|
|
|
makeTheme has two parts:
|
|
makeTheme has two parts:
|
|
|
- First part contains palette with all the colors used in the app and it creates `theme`
|
|
- First part contains palette with all the colors for dark and light modes and it creates `theme`
|
|
|
- Second part adds global styles to the theme and return `theme`
|
|
- Second part adds global styles for the components 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.
|
|
|
|
|
|
|
|
# Adding new themes
|
|
|
|
To only add new colors:
|
|
|
|
- make a copy of `theme` in Theme.ts
|
|
|
|
- add it within `makeTheme function`
|
|
|
|
- change colors to new values |
|
|
|
\ No newline at end of file |
