← Back to Home

Theme System Demo

January 18, 2024

This post showcases Krik’s powerful theme system with automatic light/dark mode detection and smooth transitions.

Automatic Theme Detection

Krik automatically detects your operating system’s theme preference:

  • macOS: Follows System Preferences → General → Appearance
  • Windows: Follows Settings → Personalization → Colors → Choose your color
  • Linux: Follows your desktop environment’s theme setting
  • Mobile: Follows iOS/Android system theme

Manual Theme Toggle

Look for the 🌙/☀️ button in the top navigation bar. Clicking it will:

  1. Toggle between light and dark modes
  2. Save your preference to localStorage
  3. Override the automatic OS detection
  4. Animate the transition smoothly

Theme Features

Color Scheme

The theme system uses CSS custom properties for easy customization:

Light Mode Colors:

  • Background: Clean white and light grays
  • Text: Dark grays for excellent readability
  • Links: Blue tones for accessibility
  • Surfaces: Subtle shadows and borders

Dark Mode Colors:

  • Background: Deep grays and blacks
  • Text: Light grays and whites
  • Links: Lighter blue tones
  • Surfaces: Darker shadows with subtle highlights

Responsive Design

The theme adapts to different screen sizes:

  • Desktop: Full sidebar navigation and wide content area
  • Tablet: Collapsible navigation with optimized spacing
  • Mobile: Touch-friendly interface with larger tap targets

Smooth Transitions

All theme changes animate smoothly with 0.3-second transitions on:

  • Background colors
  • Text colors
  • Border colors
  • Shadow effects
  • Button states

Cross-Platform Support

The theme detection works across:

  • Browsers: Chrome, Firefox, Safari, Edge
  • Operating Systems: Windows, macOS, Linux, iOS, Android
  • Devices: Desktop, laptop, tablet, smartphone

Accessibility

The theme system is designed with accessibility in mind:

  • High Contrast: Both themes meet WCAG guidelines
  • Focus Indicators: Clear focus states for keyboard navigation
  • Screen Readers: Proper ARIA labels and semantic HTML
  • Color Independence: Information isn’t conveyed by color alone

Try switching between light and dark modes to see the smooth transitions in action!

themesdesigncss