change color of burger menu depending on the background of the section

Question

I am making a hamburger menu as a component and fixed that is with the fixed property, this has the three lines of the menu characteristic these are white what I need is that when it is in a section that is white it changes to black, even I occupied the Methods for Contrasting Text Against Backgrounds but it did not work since for it to work the bg must be in the parent div of the component and not where I send it to call it, so if someone could help me how to make it change color or if there is already some npm of a hamburger that changes color with respect to the bg .

Also, it is necessary to take into account that in each different page it has a different bg and in all the pages I command to call the nav as a component.

This would be my code on the menu occupied with nextjs with typescript

import { StyledHamburger } from "./Hamburger.styled";

export type Props = {
  open: boolean;
  setOpen: (v: boolean) => void;
};

const Hamburger = (props: Props) => (
  <StyledHamburger open={props.open} onClick={() => props.setOpen(!props.open)}>
    <div />
    <div />
    <div />
  </StyledHamburger>
);

export default Hamburger;

styles:

import styled from "styled-components";

import { colors } from "../global";

export const StyledHamburger = styled.button<{ open: boolean }>`
  position: fixed;

  width: 2rem;
  height: 2rem;
  padding: 0;
  background: transparent;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;

  border: none;
  cursor: pointer;
  outline: none;
  z-index: 2;

  div {
    position: relative;
    width: 2rem;
    height: 0.25rem;
    border-radius: 0px;
    transition: all 0.3s linear;
    transform-origin: 1px;
    background-color: ${({ open }) =>
      open ? colors.pearl : colors.pearl};

    :first-child {
      transform: ${({ open }) => (open ? "rotate(45deg)" : "rotate(0)")};
    }

    :nth-child(2) {
      opacity: ${({ open }) => (open ? "0" : "1")};
      transform: ${({ open }) => (open ? "translateX(20px)" : "translateX(0)")};
    }

    :nth-child(3) {
     
      transform: ${({ open }) => (open ? "rotate(-45deg)" : "rotate(0)")};
    }
  }
  p {
    position: relative;
    border-radius: 0px;
    transition: all 0.3s linear;
    transform-origin: 1px;
    background-color: ${({ open }) =>
      open ? colors.pearl : colors.pearl};
      transform: ${({ open }) => (open ? "translateX(20px)" : "translateX(0)")};
  }
`;

Answer 1

I'm not sure there is an easy solution to check the background of an element and make changes.

I would use an intersection observer to check for each section and its background color. Then apply the correct styles to the hamburger element. It's not as automated as an auto-contrast tool like you're talking about, but should be fairly easy to control and work with.

Answer 2

If each of the hamburger menus are on their own page with different backgrounds, you can use CSS to style the menu per page. What you can do is assign each page an id attached to the body and then call that ID and hamburger menu in CSS to style it.

Example:

<body id="homepage">
<nav class="hamburger">
</body>

For page 2:

<body id="about-us">
<nav class="hamburger">
</body>

Then in the CSS:

#homepage .hamburger {
your styles
}
#about-us .hamburger {
your styles
}

change color of burger menu depending on the background of the section

Question

2 answers

solution1
0 ACCPTED 2021-07-20 15:30:05

solution2
0 2021-07-20 15:34:41

change color of burger menu depending on the background of the section

Question

2 answers

solution1 0 ACCPTED 2021-07-20 15:30:05

solution2 0 2021-07-20 15:34:41

solution1
0 ACCPTED 2021-07-20 15:30:05

solution2
0 2021-07-20 15:34:41