import styled from "styled-components"; // Define color constants based on the theme provided const colors = { primary: "#8261CF", // Slate Blue secondary: "#7551CA", // Darker Slate Blue accent: "#CFC2EC", // Periwinkle neutralBg: "#E5DEF4", // Lavender Web white: "#FFFFFF", // White success: "#3CB371", // Sea green for success (example) error: "#FF6B6B", // Red pink for error (example) warning: "#FFD93D", // Yellow for warning (example) text: "#4A4A4A", // Dark grey for text }; // Define your styled components with new theme colors const Header = styled.header` background-color: ${colors.primary}; color: ${colors.white}; // ... rest of your styles `; const NavMenu = styled.nav` background-color: ${colors.secondary}; color: ${colors.white}; // ... rest of your styles `; const MainContent = styled.main` background-color: ${colors.neutralBg}; // ... rest of your styles `; const Heading = styled.h1` color: ${colors.primary}; // ... rest of your styles `; const BodyText = styled.p` color: ${colors.text}; // ... rest of your styles `; const PrimaryButton = styled.button` background-color: ${colors.primary}; color: ${colors.white}; // ... rest of your styles `; const SecondaryButton = styled.button` background-color: ${colors.accent}; color: ${colors.primary}; // ... rest of your styles `; const InputField = styled.input` background-color: ${colors.white}; border: 1px solid ${colors.neutralBg}; &:focus, &:hover { border-color: ${colors.primary}; // Optionally add a shadow or other effect } // ... rest of your styles `; const Footer = styled.footer` background-color: ${colors.secondary}; color: ${colors.accent}; // ... rest of your styles `; // Assuming you are using these styled components within a React component return ( <MainContent> <Header>Header content here</Header> <NavMenu>Navigation menu here</NavMenu> {/* Rest of your content */} <Footer>Footer content here</Footer> </MainContent> );