Theme PreviewLink to section

This page demonstrates how content appears across different theme modes. The site supports automatic theme switching based on system preferences, with manual override options.

Theme ModesLink to section

The site supports three theme modes:

1. Light Mode - Clean, bright interface for daytime use
2. Dark Mode - Easy on the eyes for nighttime browsing
3. System - Automatically matches your OS preference

Color PaletteLink to section

Primary ColorsLink to section

The primary theme color adapts based on the current mode:

• Light Mode Primary: A vibrant blue (#3B82F6)
• Dark Mode Primary: A softer blue (#60A5FA)

Text ColorsLink to section

Text automatically adjusts for optimal readability:

• Light Mode Text: Dark gray (#1F2937) on white background
• Dark Mode Text: Light gray (#F3F4F6) on dark background

Component ExamplesLink to section

HeadingsLink to section

Level 1 HeadingLink to section

Level 2 HeadingLink to section

Level 3 HeadingLink to section

Level 4 HeadingLink to section

Notice how heading colors maintain proper contrast in both themes.

Links and Interactive ElementsLink to section

• Regular link - Theme-aware hover states
• External link - Opens in new tab with proper styling
• Inline code adapts background color

Code BlocksLink to section

Code blocks have theme-specific syntax highlighting:

// This code block adapts to the theme
const theme = {
  light: {
    background: '#FFFFFF',
    text: '#1F2937',
    primary: '#3B82F6'
  },
  dark: {
    background: '#111827',
    text: '#F3F4F6',
    primary: '#60A5FA'
  }
};

function getTheme(mode) {
  return theme[mode] || theme.light;
}

BlockquotesLink to section

Blockquotes also adapt their styling. The border color and text opacity adjust to maintain readability while preserving the quoted appearance.

TablesLink to section

UI ComponentsLink to section

Buttons and ControlsLink to section

The theme system extends to all interactive components:

• Navigation links - Proper contrast and hover states
• Table of Contents - Sidebar styling adapts
• Project Sidebar - Icons and text remain visible

Badges and CardsLink to section

Badge components automatically adjust:

• Background colors invert appropriately
• Borders maintain subtle definition
• Shadows adapt to theme context

Theme ImplementationLink to section

CSS VariablesLink to section

The theme system uses CSS custom properties:

/* Light mode variables */
[data-theme-mode="light"] {
  --color-bg: #FFFFFF;
  --color-text: #1F2937;
  --color-primary: #3B82F6;
}

/* Dark mode variables */
[data-theme-mode="dark"] {
  --color-bg: #111827;
  --color-text: #F3F4F6;
  --color-primary: #60A5FA;
}

Prose StylingLink to section

The Tailwind prose classes include dark variants:

<article class="prose dark:prose-invert">
  <!-- Content automatically inverts in dark mode -->
</article>

Accessibility ConsiderationsLink to section

Contrast RatiosLink to section

All color combinations meet WCAG AA standards:

• Normal text: 4.5:1 minimum contrast
• Large text: 3:1 minimum contrast
• Interactive elements: Clear focus indicators

Reduced MotionLink to section

Theme transitions respect user preferences:

@media (prefers-reduced-motion: reduce) {
  * {
    transition-duration: 0.01ms !important;
  }
}

Testing ThemesLink to section

To test different themes:

1. System Toggle: Change your OS theme preference
2. Browser DevTools: Emulate light/dark preference
3. Manual Override: Future theme toggle component

Best PracticesLink to section

Content CreationLink to section

When creating content:

1. Avoid hardcoded colors - Use theme variables
2. Test both modes - Ensure readability in both themes
3. Check images - Some images may need dark variants
4. Validate contrast - Use accessibility tools

Component DevelopmentLink to section

For new components:

1. Use semantic colors - Not absolute values
2. Include dark variants - Tailwind’s dark: prefix
3. Test transitions - Smooth theme switching
4. Consider borders - They may need adjustment

PerformanceLink to section

Theme switching is optimized for performance:

• CSS-only implementation (no JavaScript required)
• Instant switching with no layout shift
• Cached preference in localStorage
• Minimal CSS overhead with purging

The theme system ensures a comfortable reading experience regardless of lighting conditions or user preference!