Themed Layout Demo

This page demonstrates the ThemedLayout component with full page theming. The ThemeContainer wraps the entire page including navbar and footer.

Toggle Theme

Full Page Theming

The entire page, including navigation and footer, adapts to the theme colors. This creates a cohesive visual experience.

Dynamic Colors

Colors automatically adjust based on the theme toggle, maintaining proper contrast and readability.

Architecture Benefits

Separation of Concerns

The Layout handles document structure (HTML, head, SEO) while ThemeContainer manages theming and color logic.

Flexibility

You can choose between full page theming or main content only theming using the `themeScope` prop.

Reusability

The same ThemeContainer can be used in different contexts - full pages, sections, or individual components.

Usage Example

<ThemedLayout
  title="My Page"
  baseColor="hsl(220, 79%, 54%)"
  lightness={0.15}
  themeScope="full"
>
  <Container>
    <!-- Your content here -->
  </Container>
</ThemedLayout>