---
title: "Theme Variant — Framer component · Best of Framer"
description: "$9.00 · Framer component · by Soyeb · Buttons. Overview The Theme Variant component makes it easy to build theme-aware content in Framer."
canonical: "https://framer.elliotli.dev/component/theme-variant"
---

[Home](/)/[Components](/components)/[Buttons](/components/category/buttons)/Theme Variant

# Theme Variant

Auto-switching content for Light & Dark

[View on Framer](https://framer.com/marketplace/components/theme-variant/?via=elliot-li)

![Theme Variant preview image 1](https://framer.elliotli.dev/og/component/theme-variant/66de4443cf93f610/1600x1200.jpg)

## Summary

Overview The Theme Variant component makes it easy to build theme-aware content in Framer.

## Description

## Overview

The **Theme Variant** component makes it easy to build **theme-aware content** in Framer. You only need to connect two variants and the component automatically shows the correct one based on theme preference or [toggle button preference](https://www.framer.com/marketplace/components/theme-switcher/).

It works as a **theme variant switch** and **theme switching component** that displays the right layer using **automatic theme detection**. Whether a visitor changes theme using a toggle, system settings, or browser preference, the component updates instantly without flicker.

This enables true theme adaptive content and dynamic theme content across your site with no manual conditional logic.

## Instructions

### Getting Started

1.  **Add the Component:**Copy and paste **Theme Variant** into your Framer project.
    
2.  **Create Your Variants:**Design two versions of your content - one for light mode and one for dark mode. These can be images, sections, layouts, or full components. This supports any **theme-based content** or **theme-based layer**.
    
3.  **Connect Your Designs:**Choose your light version into the **Light Variant** option and your dark version into the **Dark Variant** option in the property panel. This defines which content should appear for each **theme variant display**.
    
4.  **Adjust Sizing:**Use Width and Height controls:
    
    -   Fit Content - keeps original size
        
    -   Fill Container - stretches to available space
        
5.  **Preview in Canvas:**Use Canvas Preview to simulate theme variant change while designing.
    
6.  **Publish:**Your site will automatically use theme preference detection and display the correct variant.
    

**Pro Tip:** Pair it with a theme toggle button to create a complete light/dark mode system.

### Choose from these options:

**1\. Theme Switcher:** [https://www.framer.com/marketplace/components/theme-switcher/](https://www.framer.com/marketplace/components/theme-switcher/)

**2\. Mask Theme Toggle:** [https://www.framer.com/marketplace/components/mask-theme-toggle/](https://www.framer.com/marketplace/components/mask-theme-toggle/)

## How It Works

The Theme Variant component includes 5 simple controls for managing **conditional theme display** and **theme based display** behavior.

### Properties Control

![theme variant change framer component controllers](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-7ekypovi-6ocugZZxDPJzTyDvOjgo73dH5feGW2)theme variant change framer component controllers

### \- Light Variant (Connection Slot)

-   Connect the component, image, or layout for light mode
    
-   Supports any Framer layer or component
    

### \-Dark Variant (Connection Slot)

-   Connect the content for dark mode
    
-   Updates instantly when a theme variant switch is detected
    

### \- Width

-   Fit Content: keeps original width
    
-   Fill Container: stretches to container width
    

### \- Height

-   Fit Content: keeps original height
    
-   Fill Container: stretches to container height
    

### \- Canvas Preview

-   Toggle theme while designing
    
-   Only affects editor preview, not published site
    

## Key Features

-   Zero-flash switching with instant **automatic theme detection**
    
-   Works as a reliable theme switching component
    
-   Syncs with system and browser theme preference
    
-   Compatible with manual theme toggle buttons
    
-   Real-time updates on theme change
    
-   Persistent theme memory across navigation
    
-   Flexible sizing controls
    
-   Production-ready performance
    
-   No-code setup with drag-and-drop connections
    
-   Cross-browser support
    
-   Accessibility-friendly (respects prefers-color-scheme)
    
-   Built with TypeScript and optimized rendering
    

Supports theme aware design, adaptive design in Framer, and theme component change.

## Use Cases

-   **Hero Sections:** Create dramatic light/dark hero backgrounds with different images, videos, or illustrations that match each theme perfectly.
    
-   **Product Showcases:** Display product images with light backgrounds in light mode and dark backgrounds in dark mode for optimal contrast.
    
-   **Logo Display:** Show your full-color logo in light mode and a white/outlined version in dark mode for consistent branding.
    
-   **Illustration Variations:** Present colorful illustrations in light mode and darker, muted versions in dark mode for visual harmony.
    
-   **Landing Page Sections:** Create alternating sections with different background treatments that automatically adapt to visitor preferences.
    
-   **Card Designs:** Display card components with different shadows, borders, and background colors optimized for each theme.
    
-   **CTA Sections:** Present call-to-action blocks with contrast-optimized designs that drive conversions in any theme.
    
-   **Navigation Backdrops:** Switch between transparent/solid navigation backgrounds based on theme for optimal header visibility.
    
-   **Testimonial Sections:** Display customer quotes with theme-appropriate typography and background treatments.
    

Made with ❤️ by [Soyeb](https://framer.link/market)

**Refund Policy:** Due to the digital nature of these components, all sales are final, and once delivered they cannot be returned or refunded. Please review product details and demos before purchasing, and feel free to reach out if anything is unclear.

Have questions or need a custom Framer component? Reach out at [**heysoyebali@gmail.com**](mailto:heysoyebali@gmail.com)

## Rank history [How rankings work →](/terms#rankings)

-   All · #3903

## Details

- **Author**: Soyeb
- **Price**: $9.00
- **Published**: 2026-02-18
- **Updated**: 2026-04-08
- **Added**: 2026-02-17
- **Categories**: Buttons

## More like this

-   [Eye Glow Button](/component/eye-glow-button) — Frame Native · Free — Cursor-following eyes, soft glow
-   [Dash Stretch Button](/component/dash-stretch-button) — Pentaclay · Free — Animated Hover Button With a Dash
-   [Nova Theme Toggle](/component/nova-theme-toggle) — Shouvik Biswas · $12 — Three-Mode Theme Toggle
-   [Nabby: Copy Button](/component/nabby-copy-button) — Francesco Gallo · Free — Plug in your button, copy anything