Dynamic Styling with Angular: Themeable Components

This challenge focuses on implementing runtime styling in an Angular application. You will build a component that allows users to dynamically change the visual theme of elements by selecting from predefined styles or by providing custom color values. This is a common requirement for applications that need user customization or a flexible theming system.

Problem Description

Your task is to create an Angular component that can apply styles to its child elements based on user selections. This component should:

• Display a list of predefined themes: Users should be able to choose from a set of pre-configured visual styles (e.g., "Dark Mode", "Light Mode", "Corporate").
• Allow custom color input: Users should have an option to input their own primary and secondary colors, which will then be applied to the component's elements.
• Apply styles dynamically: The chosen theme or custom colors should be applied to specific elements within the component in real-time, without requiring a page reload.
• Style specific elements: The styling should affect a designated "content area" and potentially a "header" within the component.

Key Requirements:

1. Component Structure: Create a reusable Angular component.
2. Theme Selection: Implement a UI element (e.g., dropdown, radio buttons) to select predefined themes.
3. Custom Color Inputs: Implement input fields (e.g., <input type="color">) for primary and secondary colors.
4. Style Application: Use Angular's data binding and styling capabilities to apply styles dynamically.
5. CSS Variables (Recommended): Leverage CSS custom properties (variables) for efficient and maintainable dynamic styling.

Expected Behavior:

When a user selects a predefined theme, the "content area" and "header" of the component should update their background color, text color, and potentially border colors according to the theme's definition. When custom colors are entered, these colors should override the selected theme and be applied to the respective elements.

Edge Cases to Consider:

• Initial State: The component should render with a default theme.
• Input Validation: While not strictly required for this challenge, consider how you might handle invalid color inputs in a real-world scenario. For this challenge, assume valid color inputs.
• CSS Specificity: Ensure your dynamic styles have sufficient specificity to override any base styles.

Examples

Example 1: Applying a Predefined Theme

Input (Conceptual User Interaction): User selects "Dark Mode" from a theme dropdown.

Component State (after selection): The component has an internal state variable representing the "Dark Mode" theme.

Output (Visual Change): The "header" might have a dark background and white text. The "content area" might have a slightly lighter dark background and white text.

Explanation: The "Dark Mode" theme configuration (e.g., defined as CSS variables or inline styles in the component logic) is applied to the header and content elements.

Example 2: Applying Custom Colors

Input (Conceptual User Interaction): User selects "Corporate" theme (or no theme initially), then inputs #007bff for primary color and #6c757d for secondary color.

Component State (after input): The component's internal state stores #007bff and #6c757d as custom colors.

Output (Visual Change): The "header" might adopt #007bff as its background and #ffffff as its text color. The "content area" might have a background of #6c757d and a text color of #ffffff.

Explanation: The custom color values provided by the user are used to dynamically set CSS variables that style the header and content area.

Example 3: Theme Selection with Custom Color Override

Input (Conceptual User Interaction): User selects "Light Mode" theme. Then, they input #ffc107 for the primary color.

Component State (after interaction): The component has the "Light Mode" theme selected, but the custom primary color #ffc107 takes precedence for elements it's applied to.

Output (Visual Change): The "header" might have a light background (from "Light Mode"), but a text color of #ffc107 (from custom input). The "content area" might retain its "Light Mode" styling.

Explanation: This demonstrates that custom color inputs can override specific styling aspects of a selected predefined theme, allowing for more granular control.

Constraints

• Angular Version: Compatible with Angular 14+ (or a specified recent version).
• TypeScript: Solution must be written in TypeScript.
• No External Styling Libraries: Do not rely on third-party CSS frameworks like Bootstrap or Material Design for the core styling logic. You can use them for basic layout if desired, but the dynamic styling mechanism itself should be pure Angular/CSS.
• Performance: Styling updates should be performant and not cause noticeable lag, even with rapid changes.

Notes

• Consider using Angular's HostBinding or [ngStyle] and [ngClass] directives.
• Using CSS Custom Properties (variables) is highly recommended for managing dynamic styles. You can set these variables on the component's host element or a specific container within the component.
• Think about how you will represent your predefined themes. An array of objects, where each object defines a theme's color values, would be a good approach.
• The structure of your component's template will influence how you apply styles. Design it with styling in mind.