Hone logo
Hone
Problems

Dynamic Theming with CSS Custom Properties in Angular

This challenge focuses on leveraging CSS custom properties (also known as CSS variables) within an Angular application to create a dynamic theming system. By mastering this, you'll be able to easily switch between different visual themes and allow users to personalize their experience, leading to more flexible and engaging web applications.

Problem Description

Your task is to implement a component in Angular that dynamically changes its styling based on user-selected themes. You will use CSS custom properties to define theme-specific values for properties like colors, fonts, and spacing. The application should allow switching between at least two predefined themes.

Key Requirements:

  1. Component Creation: Create an Angular component (e.g., ThemedCardComponent) that will display some content and be styled by the theme.
  2. CSS Custom Properties: Define CSS custom properties in your component's stylesheet (e.g., themed-card.component.scss). These properties should represent styling aspects like:
    • --card-background-color
    • --card-text-color
    • --card-border-radius
    • --card-padding
  3. Theme Definitions: Create at least two distinct sets of values for these custom properties. These definitions should be applied to a host element or a specific CSS class.
    • Theme 1 (e.g., "Light"): Default theme.
    • Theme 2 (e.g., "Dark"): An alternative theme.
  4. Theme Switching Mechanism: Implement a way to switch between these themes. This could be through a dropdown menu, buttons, or by programmatically adding/removing CSS classes to a parent element.
  5. Dynamic Application: Ensure that when a theme is switched, the ThemedCardComponent's styling updates immediately to reflect the new theme's custom property values.
  6. Content: The ThemedCardComponent should have some placeholder content (e.g., a title, description, and a button) that will be styled by the custom properties.

Expected Behavior:

When the application loads, the ThemedCardComponent should display with the default theme's styling. Upon user interaction to switch themes, the component's background color, text color, border-radius, and padding should update according to the selected theme's CSS custom property values.

Edge Cases:

  • Initial Load: Ensure the default theme is correctly applied on initial component render.
  • Rapid Switching: While not strictly required to test extreme performance, the theme switch should be responsive.
  • No Theme Applied: Consider what happens if no theme is explicitly applied (though your implementation will likely ensure one is always active).

Examples

Example 1:

Input: A single ThemedCardComponent displayed on the page. The application is initialized with the "Light" theme applied.

themed-card.component.html (simplified):

<div class="card">
  <h2>My Themed Card</h2>
  <p>This is some content that will be styled by the theme.</p>
  <button>Action</button>
</div>

themed-card.component.scss (simplified, with "Light" theme as default):

:host {
  display: block;
  --card-background-color: #ffffff;
  --card-text-color: #333333;
  --card-border-radius: 8px;
  --card-padding: 20px;
}

.card {
  background-color: var(--card-background-color);
  color: var(--card-text-color);
  border-radius: var(--card-border-radius);
  padding: var(--card-padding);
  border: 1px solid #ccc; // Example of a static property
}

button {
  background-color: #007bff; // Example of a static property
  color: white;
  padding: 10px 15px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

app.component.html (simplified, with theme switcher buttons):

<h1>Dynamic Theming Example</h1>
<button (click)="switchTheme('light')">Light Theme</button>
<button (click)="switchTheme('dark')">Dark Theme</button>
<app-themed-card></app-themed-card>

app.component.ts (simplified):

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  switchTheme(theme: string) {
    const body = document.body;
    if (theme === 'dark') {
      body.classList.add('dark-theme');
      body.classList.remove('light-theme'); // Ensure only one theme is active
    } else {
      body.classList.add('light-theme');
      body.classList.remove('dark-theme');
    }
  }
}

app.component.scss (simplified, defining themes):

// Default theme application (can be on body or a wrapper)
body {
  background-color: #f4f4f4;
  font-family: sans-serif;
  transition: background-color 0.3s ease; // Smooth transition for body background
}

// Light theme overrides for specific custom properties
.light-theme {
  --card-background-color: #ffffff;
  --card-text-color: #333333;
  --card-border-radius: 8px;
  --card-padding: 20px;
  body { // Apply some body styles for context
    background-color: #f4f4f4;
  }
}

// Dark theme overrides
.dark-theme {
  --card-background-color: #333333;
  --card-text-color: #ffffff;
  --card-border-radius: 12px;
  --card-padding: 25px;
  body { // Apply some body styles for context
    background-color: #222222;
  }
}

Output: The ThemedCardComponent will render with a white background, dark text, an 8px border-radius, and 20px padding. The overall page background will be light gray.

Explanation: The themed-card.component.scss defines the default values for CSS custom properties. The app.component.scss defines two CSS classes, .light-theme and .dark-theme, which override these custom properties when applied to the body element. The AppComponent's switchTheme method toggles these classes on the body. When the class is added, the custom property values change, and the .card element automatically updates its styles because it uses var() to reference these properties.

Example 2:

Input: Same as Example 1, but the user clicks the "Dark Theme" button.

Output: The ThemedCardComponent will now render with a dark background, white text, a 12px border-radius, and 25px padding. The overall page background will be dark gray.

Explanation: The switchTheme('dark') method is called. The dark-theme class is added to the body, and light-theme is removed. The CSS custom properties defined within .dark-theme now take precedence, and the ThemedCardComponent's styles update accordingly.

Constraints

  • Angular version: Latest stable version.
  • TypeScript version: Latest stable version.
  • CSS Preprocessor: SCSS is recommended for easier variable management, but plain CSS is acceptable.
  • Theming: Must support at least two distinct themes as described.
  • Responsiveness: The component's styling should adapt correctly without explicit media queries for theme switching itself, relying on CSS custom properties.

Notes

  • Consider how you will manage the application-wide theme selection. Will you apply themes to the body, html element, or a dedicated root component?
  • Think about how to make the CSS custom properties easily accessible and maintainable.
  • This challenge is about implementing the mechanism for dynamic theming. The specific content and complexity of the ThemedCardComponent are less critical than demonstrating the theme switching.
  • You can use Angular's Renderer2 for DOM manipulation if preferred, or directly manipulate the classList on native elements for simplicity in this challenge.
Loading editor...
typescript