How to toggle css style using styled-components?

Question

I have created a toggle switch that changes from dark mode to light mode. I am trying to add style which will change the fill: "" of the svg when I click toggle. path:first-child is upper icon, path:last-child is bottom icon.

import { ReactComponent as ModeIcon} from '../../../assets/icons/mode-icon.svg';
import styled from 'styled-components';
import ThemeContext from "../../../store/themeContext";
import { useContext } from "react";

const Switcher = () => {
  const themeCtx = useContext(ThemeContext);
  const ToggleMode = () => {
    themeCtx.toggleMode()
  }
  return (
    <StyledSwitcher><ModeIcon onClick={ToggleMode}/></StyledSwitcher>
  )
}

export default Switcher;

const StyledSwitcher = styled.div`
svg{

  path:first-child{
    fill: #005FCE;
  }
  path:last-child{
    fill: #white;
  }
}
`;

import React, {useState} from 'react'
import { string } from 'yup';

type ContextObj = {
    toggleMode: any;
    theme: string;
  };

const ThemeContext = React.createContext<ContextObj>({
  toggleMode: () => {},
  theme: "dark",
  });

export const ThemeContextProvider = (props: any) => {
    const [theme, setTheme] = useState("dark");
  
    const themeToggler = ()=> {
      theme ==='light' ? setTheme('dark') : setTheme('light');
      console.log("Swiutch toggle")
    }

      const contextValue: ContextObj = {
        toggleMode: themeToggler,
        theme: theme,
  };
  return (
    <ThemeContext.Provider value={contextValue}>{props.children}</ThemeContext.Provider>
  )
};
export default ThemeContext

Marko Kovačević · Accepted Answer · 2022-04-12 12:53:24Z

1

For first, you should provide 'theme' value from context to you component (like you did with toggleMode()). Then you can add 'theme' class attribute to your StyledSwitcher, for example:

const Switcher = () => {
  const themeCtx = useContext(ThemeContext);
  const ToggleMode = () => {
    themeCtx.toggleMode()
  }

  const themeValue = () => {
    themeCtx.theme()
  }
  return (
    <StyledSwitcher className={themeValue}><ModeIcon onClick={ToggleMode}/></StyledSwitcher>
  )
}

After that, configure you styled component to work with that additional class:

const StyledSwitcher = styled.div`
  &.light{
    svg{
      path:first-child{ fill: #005FCE; }
      path:last-child{ fill: #white; }
    }
  }
  &.dark{
    svg{
      path:first-child{ fill: #white; }
      path:last-child{ fill: #005FCE; }
    }
  }
`;

answered Apr 12, 2022 at 12:53

Marko Kovačević

544 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to toggle css style using styled-components?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related