Gatsby-theme-novela: Dynamic logo fill color

Created on 8 Oct 2019 · 5Comments · Source: narative/gatsby-theme-novela

Thanks for the amazing work, @brotzky!

I've gone through the documentation and examples and I cannot find a way to use the Theme-UI variables as a fill={'primary'} for the Logo/index.js component shadowing.

What I'm trying to do is to change the fill color of some svg path's when the dark mode kicks in. Is there a way of doing this?

Source

perteraul

Most helpful comment

Hey there,

I used {fill} for mine and it worked - switching with the dark mode.

See code at https://github.com/MontrealPhotoClub/montrealphotoclub.en/blob/master/src/%40narative/gatsby-theme-novela/components/Logo/Logo.tsx

And demo at https://montrealphoto.club

Hope this can help!

jpvalery on 8 Oct 2019

👍3 ❤2

All 5 comments

Should also mention that passing the fill={'primary'} doesn't work.

perteraul on 8 Oct 2019

Hey there,

I used {fill} for mine and it worked - switching with the dark mode.

See code at https://github.com/MontrealPhotoClub/montrealphotoclub.en/blob/master/src/%40narative/gatsby-theme-novela/components/Logo/Logo.tsx

And demo at https://montrealphoto.club

Hope this can help!

jpvalery on 8 Oct 2019

👍3 ❤2

That did it! Thanks @jpvalery.

perteraul on 8 Oct 2019

Thanks @jpvalery

brotzky on 8 Oct 2019

Hi, @jpvalery . I am new to web dev. Could you be so kind to point me to some link about how to generate a Logo.tsx like the one on your site? Thanks in advance!