Gatsby-theme-novela: How to make the logo dark mode compatible

[ghost]

Hi everyone, first I must say that I'm in love with what you have created. I really want to thank you for making this open-source and free to use. I made my own blog which is about to be done but I came across this issue where the logo I use doesn't change its color to white when dark mode is enabled like the default one.

[Ba2dones]

By using component shadowing which allows you to override a component to customize its rendering, in your case use the Logo component as described.

Here is my Logo.tsx file, all you have to do is adding your SVG path and change the width, height, and viewBox values with your SVG ones.

import React from "react";
import styled from "@emotion/styled";

import mediaqueries from "@styles/media";

import { Icon } from '@types';

const Logo: Icon = ({ fill = "white" }) => {
  return (
    <LogoContainer>
      <svg
        width="140"
        height="51"
        viewBox="0 0 140 51"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
        className="Logo__Desktop"
      >
        <g clipPath="url(#clip0)">
          <path d="add your d attribute value here" fill={fill}/>
        </g>
        <defs>
          <clipPath id="clip0">
            <rect width="140" height="51" fill="white" />
          </clipPath>
        </defs>
      </svg>

      <svg
        width="140"
        height="51"
        viewBox="0 0 140 51"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
        className="Logo__Mobile"
      >
        <path d="add the same d attribute value here" fill={fill}/>
      </svg>
    </LogoContainer>
  );
};

export default Logo;

const LogoContainer = styled.div`
  .Logo__Mobile {
    display: none;
  }

  ${mediaqueries.tablet`
    .Logo__Desktop {
      display: none;
    }

    .Logo__Mobile{
      display: block;
    }
  `}
`;

[ghost]

@Ba2dones thanks a lot for your fast and great response. The thing is, even though I did it differently I had imported a vector icon using component shadowing.

I’m trying to see if I could make my imported black home button (https://feathericons.com/?query=Home) transition to a white one when the dark mode is on. Thanks again for the snippet, I’ll update mine :)

[brotzky]

I'm not entirely sure if component shadowing would give you the context of the providers in the codebase, but you could use theme-ui like this

import { useColorMode } from "theme-ui";

...

const [colorMode] = useColorMode();

const fill = colorMode === "dark" ? "#fff" : "#000";
return <Logo fill={fill} />

That's how we're able to get the novela.narative.co logo to switch
https://github.com/narative/gatsby-theme-novela/blob/master/@narative/gatsby-theme-novela/src/components/Navigation/Navigation.Header.tsx#L124

[ghost]

Thanks everyone, this seems like the way to go. I'll try to implement it.

[McSteve7]

@Ba2dones Thanks for the help but it doesn't seem to work with a .js file and the logo remains black if only the height, width, and viewbox are changed. What do I have to do following the required folder structure (

novela-site
└── src
└── @narative
└── gatsby-theme-novela
└── components
└── Logo
└── index.js
)

Looking forward to your response. Thanks