Initialize Chakra Theme #100
Conversation
|
@Myrfion can you please rebase on |
Log in screen (button has a brand color scheme):
Log out screen (button has a brand color scheme):
@humphd here it is |
app/theme/index.ts
Outdated
| import { extendTheme } from '@chakra-ui/react'; | ||
| import colors from './colors'; | ||
|
|
||
| const theme = extendTheme({ colors }); |
There was a problem hiding this comment.
Should we set the default colorTheme prop for Buttons, etc. as well (i.e., so you don't have to remember to do it each time)? See chakra-ui/chakra-ui#2840
There was a problem hiding this comment.
I agree, this would be really helpful
There was a problem hiding this comment.
We can do it in a follow-up, @Myrfion/@Ririio if one of you wants to file it.
There was a problem hiding this comment.
I think we can implement the button default theme right now. We do the others later on
|
@Myrfion I was able to test it locally, and it works. Looks good to me. 👍🏼 |
Myrfion
dismissed stale reviews from Eakam1007, SerpentBytes, and humphd
via
bc4db98
| <ChakraProvider theme={theme}> | ||
| <Outlet /> | ||
| </ChakraProvider> |
There was a problem hiding this comment.
we can use ChakraBaseProvider to only focus the theme on components that we actually want to have a different color like, button, box, grids, etc. The website is not big so it's not a big deal, but it's just a suggestion
app/theme/index.ts
Outdated
| import { extendTheme } from '@chakra-ui/react'; | ||
| import colors from './colors'; | ||
|
|
||
| const theme = extendTheme({ colors }); |
There was a problem hiding this comment.
I think we can implement the button default theme right now. We do the others later on
What I did?
I created the folder
themewhere we gonna have all theme-related files. For now, it hasindex.tswhich imports all other files and initializes the theme itself. Another file iscolors.tswhere I added the Seneca colours in spectra from 100 to 900 and that colour I calledbrand(this is how chakra does it in the example in the doc so probably this is the way to go in terms of naming). I also created the button onindex.tsjust to show how the component that uses the theme looks likeHow to test?
Just run the app locally and check the front end, you should see the button with very familiar color