My input field undergoes color changes depending on whether it's in dark mode or light mode. However, I'm struggling to maintain a distinct color for the input field border and text. The client prefers a very light border for the input field but wants the input text to have more contrast while typing. Despite my efforts to modify the code, both the text and border continue to stay the same color.
function App() {
const [bg, setBg] = React.useState('light');
const toggleMode = () => {
setBg((prev) => {
if (prev === 'light') return 'dark';
return 'light';
});
};
return (
<div>
<button onClick={toggleMode}>Toggle Mode</button>
<p>Mode is {bg}</p>
<div className="form-input">
<div
className="form-input-title"
style={{
fontFamily: "'Lato', sans-serif",
color: bg === 'light' ? 'black' : '#CBCBCB',
}}
>
Email
</div>
<div className="form-input-input">
<input
type="text"
name="name"
style={{
color: bg === 'light' ? '#DCDCE4' : '#48484D',
}}
/>
</div>
</div>
</div>
);
}
const rootElement = document.getElementById('root');
const root = ReactDOM.createRoot(rootElement);
root.render(<App />);.form-input {
text-align: left;
width: 100%;
max-width: 400px;
padding: 7px 0px;
font-weight: 700;
letter-spacing: 1px;
}
.form-input-title {
color: #CBCBCB;
font-size: 14px;
}
.form-input-input {
width: 100%;
text-align: left;
font-family: "Fira Sans", sans-serif;
border-radius: 5px;
border: 2px;
position: relative;
display: inline-block;
}
.form-input input {
width: 100%;
padding: 12px 10px;
font-size: 14px;
height: 41.77px;
border-radius: 5px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js"></script>
<div id="root"></div>