Link to Image Showing the Issue. I have implemented themes and colors in my React application successfully, but I am encountering a peculiar problem with the labels. Whenever I switch the theme from green to blue and then back to green, focusing on the input causes the label color to revert to the opposite theme. This behavior is confusing me as initially, when I focus on the input, the label remains in blue color. https://i.sstatic.net/wy0ur.png
Below is the code snippet related to the theme implementation:
{
type: "light",
primaryColor1: "#33b2ff", //lightest
primaryColor2: themeColor === "blue" ? "#009fff" : "#00b05d", //ChangeColor()
primaryColor3: "#007fcc", //darkest
textColor1: "#111", //darkest
textColor2: "#555",
textColor3: "#888", //lightest
backgroundColor1: "#fcfcfc", //lightest
backgroundColor2: "#e3e3e3",
backgroundColor3: "#cacaca", //darkest
borderColor: "009fff",
white: "#fff",
black: "000",
}
The above object defines all the colors for theming in the application, with the primary color dynamically changing based on the state of 'themeColor'. The entire application's theme is provided using useContext's Provider and passed via styled-components' ThemeProvider like so:
import { ThemeProvider } from "styled-components";
<ThemeContext.Provider value={{theme,themeToggler,themeColor,setThemeColor}}>
<ThemeProvider theme={themeStyle}>
{children}
</ThemeProvider>
</ThemeContext.Provider>
The CSS styling for Input and Label elements using styled-components is shown below:
export const Input = styled.input( ({theme}) => `
border-radius: 10px;
width: 100%;
font-size: 1rem;
background: ${theme.backgroundColor3};
border: 0;
color: ${theme.textColor1};
line-height: 50px;
padding: 5px 20px;
box-sizing: border-box;
font-family: Montserrat;
&:focus
{
outline: none;
}
&[type=password]
{
font-size: 1.75rem;
}
`);
export const Label = styled.label( ({theme}) => `
font-size: 1rem;
font-family: Montserrat;
color: ${theme.textColor3};
cursor: text;
position: absolute;
top: 30%;
left: 5.5%;
border: 1px solid ${theme.borderColor};
transition: 0.2s ease all;
background: none;
${Input}:focus + &,
${Input}:not(:placeholder-shown) + &
{
background: ${theme.primaryColor2};
padding: 0.2rem 0.5rem 0.2rem;
border-radius: 0.5rem;
top: -15%;
left: 3%;
font-size: 0.9rem;
color: #fff;
}
`);