Theme Generator

Create a comprehensive \`RefractionThemeData\` configuration for your Flutter app. The design tokens map 1:1 with React and Astro!

1. Import Refraction CSS (Optional)

If you used the LLM Prompt Generator from the React docs, paste the generated CSS here to instantly populate all Flutter theme variables.

2. Tweak Visual Variables

Typography & Shape

Semantic Colors (HSL Format)

3. Exported Dart Theme
dart
import 'package:flutter/material.dart';
import 'package:refraction_ui/refraction_ui.dart';

final myCustomTheme = RefractionThemeData(
  borderRadius: ${borderRadius},
  fontFamily: '${fontFamily}',
  colors: RefractionColors(
${colorsCode.trimEnd()}
  ),
);