Flutter tweakcn Generator

Overview

tweakcn is a web tool for customizing shadcn/ui-style CSS themes. But CSS variables don't translate directly to Flutter. flutter_tweakcn_generator bridges that gap — feed it a CSS theme file from tweakcn, and it generates Flutter ThemeData, ColorScheme, and ThemeExtension classes automatically.

Key Features

• Full CSS color format support: Parses hex, rgb(), hsl(), and oklch()
• Automatic light/dark mode splitting: Detects :root and .dark CSS blocks to generate both theme variants
• ThemeExtension generation: Creates Colors, Radius, and Shadows as ThemeExtensions, enabling intuitive access like context.tweakcnColors
• Google Fonts integration: Auto-detects font names from the --font-sans CSS variable, generates GoogleFonts.xxxTextTheme() code, and supports multi-font fallback for CJK languages
• Local font mode: With font_mode: local, .ttf files are downloaded at build time for offline use without runtime dependencies
• CLI & build_runner: Works both as a standalone CLI tool and as a build_runner builder

Supported Platforms

Android, iOS, Web, macOS, Windows, Linux

Technical Highlights

• Custom CSS parser: Parses :root (light) and .dark (dark) blocks to extract color, radius, and shadow tokens. Notably supports modern CSS color formats like oklch.
• ColorScheme mapping strategy: Systematically maps tweakcn CSS variable names (--background, --primary, --destructive, etc.) to Material 3 ColorScheme properties — for example, --background maps to surface, --destructive to error.
• Automated font management: The font_exclusive: true option automatically cleans up old font files and pubspec.yaml declarations when switching fonts, keeping the project tidy.
• build_runner integration: Using the *.tweakcn.css extension enables automatic generation via build_runner, fitting naturally into existing Flutter build pipelines.

Why It Stands Out

The shadcn/ui design system has gained massive popularity on the web, but adopting it in Flutter has been a manual process. flutter_tweakcn_generator acts as a bridge — letting Flutter developers directly use themes created by web designers in tweakcn. It fully automates the tedious task of manually converting CSS variables while leveraging Material 3's ThemeExtension for type-safe access. The dual font mode (Google Fonts for convenience, local fonts for offline use) and the comprehensive color format support make it a practical tool for real-world cross-platform projects.