Framework7 Color Themes — Built-in Colors, CSS Variables, and Dynamic Theming

In this tutorial, you will learn about Framework7 Color Themes. We cover key concepts, practical examples, and best practices to help you master this topic.

Framework7 provides built-in color themes, CSS custom property overrides, and dynamic theme switching for iOS and Material Design styling across all components.

What You'll Learn

• Built-in color themes
• CSS variable customization
• Dynamic theme switching
• Dark mode implementation
• Platform-specific themes

Why It Matters

Brand consistency across all app components requires a unified color system. Framework7's theme system applies colors to all components — buttons, navbars, lists, toggles — through global variables.

Real-World Use

A fintech app with brand blue colors, a dark mode for night trading, and a high-contrast Accessibility theme that users can switch in settings.

Theme Architecture

flowchart TD
    A[Theme System] --> B[Built-in Colors]
    A --> C[CSS Variables]
    A --> D[Dynamic Themes]
    B --> E[iOS Theme]
    B --> F[Material Theme]
    C --> G[Component Colors]
    D --> H[Dark Mode]
    D --> I[Brand Theme]
    style A fill:#e6f3ff,stroke:#4a90d9,stroke-width:2px

Built-in Colors

<div class="block">
  <p class="color-red">Red text</p>
  <p class="color-green">Green text</p>
  <p class="color-blue">Blue text</p>
  <p class="color-orange">Orange text</p>
  <p class="color-pink">Pink text</p>
  <p class="color-purple">Purple text</p>
  <p class="color-gray">Gray text</p>
</div>

<div class="block bg-color-red" style="padding:15px">
  <p style="color:white">Red background</p>
</div>

<button class="button button-fill button-red">Red Button</button>
<button class="button button-fill button-green">Green Button</button>
<button class="button button-fill button-blue">Blue Button</button>

Expected output: Text and backgrounds show built-in colors. Buttons use color classes. Navbar changes color.

CSS Variable Customization

:root {
  --f7-color-primary: #1a237e;
  --f7-color-secondary: #ff6f00;
  --f7-bars-bg-color: var(--f7-color-primary);
  --f7-bars-text-color: #ffffff;
  --f7-text-color: #212121;
  --f7-bg-color: #ffffff;
  --f7-card-bg-color: #ffffff;
  --f7-button-border-radius: 8px;
  --f7-card-border-radius: 12px;
  --f7-font-size: 16px;
  --f7-font-family: 'Inter', -apple-system, sans-serif;
}

Expected output: All Framework7 components use the custom brand colors, border radius, and font family.

Dynamic Theme Switching

var ThemeController = {
  themes: {
    light: {
      '--f7-bars-bg-color': '#1a237e',
      '--f7-bg-color': '#ffffff',
      '--f7-text-color': '#212121'
    },
    dark: {
      '--f7-bars-bg-color': '#121212',
      '--f7-bg-color': '#121212',
      '--f7-text-color': '#e0e0e0',
      '--f7-card-bg-color': '#1e1e1e'
    }
  },
  applyTheme: function(themeName) {
    var vars = this.themes[themeName];
    Object.keys(vars).forEach(function(key) {
      document.documentElement.style.setProperty(key, vars[key]);
    });
    localStorage.setItem('f7-theme', themeName);
  },
  loadSavedTheme: function() {
    var saved = localStorage.getItem('f7-theme') || 'light';
    this.applyTheme(saved);
  }
};

ThemeController.loadSavedTheme();

Expected output: Tapping theme buttons switches between light and dark themes instantly. Selection persists across page loads.

Dark Mode with System Preference

var darkModeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)');

function handleSystemDarkMode(event) {
  if (localStorage.getItem('f7-theme-override')) return;
  ThemeController.applyTheme(event.matches ? 'dark' : 'light');
}

darkModeMediaQuery.addListener(handleSystemDarkMode);
handleSystemDarkMode(darkModeMediaQuery);

Expected output: The app follows the system dark mode preference. Override toggle allows forcing a specific theme.

Platform-Specific Theming

var app = new Framework7({
  on: {
    init: function() {
      if (this.device.ios) {
        document.documentElement.style.setProperty('--f7-navbar-height', '44px');
        document.documentElement.style.setProperty('--f7-toolbar-height', '44px');
      } else {
        document.documentElement.style.setProperty('--f7-navbar-height', '56px');
        document.documentElement.style.setProperty('--f7-toolbar-height', '48px');
      }
    }
  }
});

Expected output: iOS devices get thinner navbars. Android devices get taller navbars with Material Design spacing.

Common Mistakes

1. Not scoping CSS variable overrides - CSS variables set on :root affect all components. Scope changes to specific containers when needed.

2. Not testing contrast ratios - Custom colors can create accessibility issues. Ensure text/background contrast meets WCAG guidelines.

3. Forgetting to apply theme on app init - If the theme is changed, the app must apply it before rendering to avoid a flash of default theme.

4. Overriding too many variables - Start with primary color and a few key variables. Overriding everything creates maintenance burden.

5. Not considering platform differences - iOS and Material themes have different spacing, heights, and typography. Test both.

Practice Questions

1. How do you apply a built-in color theme to a navbar?
2. How do you override CSS variables for a custom brand color?
3. How do you implement dark mode with a toggle?
4. How do you detect system dark mode preference?
5. How do you apply different styles for iOS vs Material platforms?

Challenge: Build a theme settings panel with light/dark/high-contrast toggles, color picker for brand color, font size slider, platform-specific detection, persistence in localStorage, and a live preview of themed components.

FAQ

Mini Project

Build a theming demo app with three preset themes (Light, Dark, High Contrast), a color picker, font size slider, border radius slider, system dark mode detection, platform-specific navbar heights, live preview, and settings persisted in localStorage.

What's Next

Theming customizes appearance. Learn how Framework7 Animations and Transitions add motion effects and page transitions.