---
title: "TextThemeToggle — Free Framer component · Best of Framer"
description: "Free Framer component · by Harsh Works · Buttons. TextThemeToggle is a clean, minimal theme switcher component for Framer that uses text-based buttons to toggle between Light and Dark modes."
canonical: "https://framer.elliotli.dev/component/textthemetoggle"
---

[Home](/)/[Components](/components)/[Buttons](/components/category/buttons)/TextThemeToggle

# TextThemeToggle

Text-based light & dark toggle

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

![TextThemeToggle preview image 1](https://framer.elliotli.dev/og/component/textthemetoggle/1cbd9dd53c023d9b/1600x1200.jpg)

## Summary

TextThemeToggle is a clean, minimal theme switcher component for Framer that uses text-based buttons to toggle between Light and Dark modes.

## Description

**TextThemeToggle** is a clean, minimal theme switcher component for Framer that uses text-based buttons to toggle between Light and Dark modes. It’s designed for designers who want subtle, flexible theme switching without visual clutter or custom code.

The component gives you full control over labels, typography, colors, spacing, corner radius, hover scale, and transition timing directly from the properties panel. You can choose between horizontal or vertical layouts, adjust alignment, and optionally show a separator between buttons.

**TextThemeToggle** works seamlessly with Framer’s theme system and adapts easily to different layouts and breakpoints, making it ideal for headers, navigation bars, and UI controls in modern websites.

### Features

-   Text-based **Light / Dark** theme toggle
    
-   Custom labels for each theme
    
-   Full typography control
    
-   Customizable active & inactive colors
    
-   Adjustable padding, gap, and radius
    
-   Hover scale interaction with smooth transitions
    
-   Optional separator between buttons
    
-   Horizontal or vertical layout support
    
-   No-code setup inside Framer
    
-   Responsive and breakpoint-friendly
    

![Property Controls](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-q1zcfok1-EX1BvTqkfQhFqiJZsTnbvkFiNcA8J5)Property Controls

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

-   All · #4460

## Details

- **Author**: Harsh Works
- **Published**: 2026-02-10
- **Updated**: 2026-09-13
- **Added**: 2026-01-24
- **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