Main Content Theming
This page demonstrates main content only theming. The navbar and footer remain unthemed, while the main content area gets the theme colors.
Theming Comparison
Full Page Theming
• Navbar, main content, and footer all themed
• Cohesive color experience
• Best for branded experiences
Main Content Only
• Only main content is themed
• Navigation stays neutral
• Good for content-focused pages
Themed Content Area
Card 1
This card inherits the theme colors from the ThemeContainer.
Card 2
Notice how the colors adapt when you toggle the theme.
Card 3
The navbar and footer above/below remain unaffected.
Implementation
<ThemedLayout
title="My Page"
baseColor="hsl(280, 79%, 54%)"
lightness={0.2}
themeScope="main"
>
<!-- Only this content gets themed -->
</ThemedLayout>