TextThemeToggle

TextThemeToggle

About TextThemeToggle

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
Property Controls