Skip to main content

Theming System

QwickApps React Framework provides a comprehensive theming system that supports both light and dark modes, custom color palettes, and responsive design patterns.

Theme Architecture​

The theming system is built on three core concepts:

  • 🎨 Themes (Light/Dark Mode) - Control overall appearance and contrast levels across your application.
  • 🌈 Palettes (Color Schemes) - Define color relationships and brand identity with predefined or custom color palettes.
  • 📱 Responsive Breakpoints - Ensure consistent behavior across all device sizes with mobile-first design.

Quick Start​

Basic Theme Setup​

import { QwickApp } from '@qwickapps/react-framework';

function App() {
  return (
    <QwickApp
      appId="my-app"
      appName="My Application"
      showThemeSwitcher={true}
      showPaletteSwitcher={true}
    >
      {/* Your app content */}
    </QwickApp>
  );
}

Theme Switcher Component​

import { ThemeSwitcher } from '@qwickapps/react-framework';

function Header() {
  return (
    <div>
      <h1>My App</h1>
      <ThemeSwitcher />
    </div>
  );
}

Available Palettes​

QwickApps React Framework includes several built-in color palettes:

🔘 Default​

Clean neutral palette for general applications

  • Primary: Professional blues and grays
  • Secondary: Subtle accent colors
  • Best for: Documentation, general purpose apps

🔵 Ocean​

Professional blue tones perfect for business applications

  • Primary: Deep ocean blue
  • Secondary: Teal accents
  • Best for: Corporate sites, SaaS platforms

🟣 Cosmic​

Modern purple gradient for creative and tech brands

  • Primary: Deep purple
  • Secondary: Violet accents
  • Best for: Creative agencies, tech startups

🍂 Autumn​

Warm earth tones for seasonal and cozy brands

  • Primary: Rich amber and brown
  • Secondary: Golden accents
  • Best for: Food, lifestyle, seasonal apps

🌸 Spring​

Fresh and vibrant colors for growth and renewal

  • Primary: Fresh greens and pinks
  • Secondary: Light, airy accents
  • Best for: Health, wellness, growth-focused apps

❄️ Winter​

Cool, crisp colors for modern and clean designs

  • Primary: Cool blues and whites
  • Secondary: Icy accents
  • Best for: Tech, minimal design, professional services

Customizing Colors​

CSS Custom Properties​

QwickApps React Framework uses CSS custom properties that you can override:

:root {
  /* Primary color family */
  --theme-primary: #0066cc;
  --theme-primary-dark: #0052a3;
  --theme-primary-light: #3385e6;
  
  /* Secondary color family */
  --theme-secondary: #00a6b8;
  --theme-secondary-dark: #008c9b;
  --theme-secondary-light: #33c2d1;
  
  /* Semantic colors */
  --theme-success: #28a745;
  --theme-warning: #ffc107;
  --theme-error: #dc3545;
  --theme-info: #17a2b8;
}

Dark Mode Support​

All QwickApps components automatically support dark mode:

Automatic Detection​

// Respects user's system preference
<QwickApp 
  appId="my-app"
  themeMode="auto"
/>

Manual Control​

// Force light or dark mode
<QwickApp 
  appId="my-app"
  themeMode="dark"
/>

Dark Mode CSS Variables​

[data-theme='dark'] {
  --theme-background: #121212;
  --theme-surface: #1e1e1e;
  --theme-text: #ffffff;
  --theme-text-secondary: rgba(255, 255, 255, 0.7);
}

Responsive Design​

Breakpoints​

QwickApps React Framework uses mobile-first breakpoints:

/* Mobile First (default) */
.component { /* Mobile styles */ }

/* Tablet */
@media (min-width: 768px) {
  .component { /* Tablet styles */ }
}

/* Desktop */
@media (min-width: 1024px) {
  .component { /* Desktop styles */ }
}

/* Large Desktop */
@media (min-width: 1440px) {
  .component { /* Large desktop styles */ }
}

Responsive Components​

All framework components adapt automatically:

<Button 
  label="Responsive Button"
  size="responsive" // Adjusts based on screen size
/>

<HeroBlock 
  title="Welcome"
  subtitle="Responsive by default"
  backgroundImage={{
    mobile: "/hero-mobile.jpg",
    tablet: "/hero-tablet.jpg", 
    desktop: "/hero-desktop.jpg"
  }}
/>

Advanced Theming​

Component-Level Customization​

<Button
  label="Custom Button"
  sx={{
    backgroundColor: 'var(--theme-primary)',
    '&:hover': {
      backgroundColor: 'var(--theme-primary-dark)',
    }
  }}
/>

Theme Context Access​

import { useTheme } from '@qwickapps/react-framework';

function ThemeControls() {
  const { themeMode, switchTheme } = useTheme();
  
  return (
    <div>
      <button onClick={() => switchTheme('light')}>Light</button>
      <button onClick={() => switchTheme('dark')}>Dark</button>
      <button onClick={() => switchTheme('system')}>System</button>
      <p>Current theme: {themeMode}</p>
    </div>
  );
}

Best Practices​

✅ Do​

  • Use semantic color names (primary, secondary) instead of specific colors
  • Test your theme in both light and dark modes
  • Ensure sufficient contrast ratios (4.5:1 minimum)
  • Use the built-in theme switcher components
  • Leverage CSS custom properties for consistency

❌ Don't​

  • Hard-code colors in your components
  • Forget to test dark mode
  • Use too many different colors (stick to your palette)
  • Override framework CSS directly (use custom properties)
  • Ignore accessibility guidelines

What's Next?​