How can I achieve a site logo similar to the Mantine Logo component? | Mantine | Page 1

remote heath Apr 7, 2023, 4:22 AM

#

I would like to switch the image logo during the theme color change. Is there any example? Thanks.

hard dragon Apr 7, 2023, 5:34 AM

#

you can get the theme from useMantineTheme then:

theme.colorScheme === 'dark' ? <DarkLogo /> : <LightLogo />

remote heath Apr 7, 2023, 6:05 AM

#

Currently, I am using the css hide and show two next/image. like this logoDark: {
display: theme.colorScheme === 'dark' ? 'block' : 'none',
},

logoLight: {
display: theme.colorScheme === 'dark' ? 'none' : 'block',
},

#

So do you meant I should created two logo component and use theme.colorScheme to switch each other?

hard dragon Apr 7, 2023, 6:10 AM

#

usually the same logo is used for both theme but in your case I think you can just render the one you need using this condition

#How can I achieve a site logo similar to the Mantine Logo component?