---
title: "Theme Aware video — Framer component · Best of Framer"
description: "$5.00 · Framer component · by Taha · Buttons. Theme Aware Video is the ultimate utility for designers who care about mood and accessibility."
canonical: "https://framer.elliotli.dev/component/themeawarevideo"
---

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

# Theme Aware video

Videos adapt to Light & Dark mode

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

![Theme Aware video preview image 1](https://framer.elliotli.dev/og/component/themeawarevideo/6945385ed2e22244/1600x1200.jpg)

## Summary

Theme Aware Video is the ultimate utility for designers who care about mood and accessibility.

## Description

## 🌗 Dynamic Media for Modern Themes

Don't let your videos break your design aesthetic. **Theme Aware Video** is the ultimate utility for designers who care about mood and accessibility. It detects the visitor's theme (Light, Dark, or System) and instantly serves the correct video file for a seamless, professional experience.

### ✨ Key Features

-   **Instant Theme Switching:** Automatically swaps video sources when the user toggles their theme.
    
-   **Cinematic Transitions:** Features built-in fade effects so the switch feels like a premium production choice, not a technical glitch.
    
-   **Smart Memory:** Choose whether the new video restarts from the beginning or resumes exactly where the previous one left off.
    
-   **Total Media Control:** Full property panel access for Autoplay, Mute, Loop, Volume, and Controls.
    
-   **Optimized Loading:** Uses "Poster Images" and smart-loading to ensure your site speed stays lightning-fast.
    

### 🎯 Perfect For:

-   **Hero Sections:** High-contrast dark backgrounds for night mode and clean, bright visuals for day mode.
    
-   **Product Demos:** Show your software or app in the exact theme the user is currently browsing.
    
-   **Ambient Backgrounds:** Shift the mood of your site's atmosphere as the sun goes down.
    

### 🛠️ Pro Setup in Seconds

1.  **Upload:** Add your Light-mode and Dark-mode video files (or links).
    
2.  **Configure:** Set your "Poster" thumbnails for instant loading.
    
3.  **Customize:** Choose your transition style and playback logic (Restart vs. Resume).
    
4.  **Publish:** Deliver a polished, theme-synced experience that impresses clients and users alike.
    

### 🧩 Technical Specs

-   **SSR Ready:** Works perfectly with Framer's server-side rendering.
    
-   **Responsive:** Full control over "Video Fit" (Cover, Fill, Contain).
    
-   **Zero Code:** All logic is handled under the hood—you just design.
    
-   **Works will all the theme toggles in the marketplace but one**
    

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

-   All · #9384

## Details

- **Author**: Taha
- **Price**: $5.00
- **Published**: 2025-09-30
- **Updated**: 2026-10-11
- **Added**: 2025-09-23
- **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