Flutter Theme Consumption

Visor generates Material 3 ThemeData for every stock theme into a single packages/visor_themes/ package. Each theme exposes a .light and .dark ThemeData via the VisorThemes sealed class. Custom/private themes are generated the same way from your own custom-themes/ directory — they are never committed to this public repo.

Setup

Add visor_themes as a path dependency in your pubspec.yaml:

dependencies:
  visor_themes:
    path: ../visor_themes   # adjust relative path as needed

If visor_core is not yet on pub.dev, add a path override in pubspec_overrides.yaml:

dependency_overrides:
  visor_core:
    path: ../visor-flutter

Run flutter pub get to resolve.

Basic Usage

import 'package:flutter/material.dart';
import 'package:visor_themes/visor_themes.dart';

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: VisorThemes.blackout.light,
      darkTheme: VisorThemes.blackout.dark,
      home: const HomePage(),
    );
  }
}

Available Themes

Custom themes generated from custom-themes/ add their own getters (e.g. a custom-themes/my-app.visor.yaml produces VisorThemes.myApp).

VisorThemePair

Each getter returns a VisorThemePair:

class VisorThemePair {
  final ThemeData light;
  final ThemeData dark;
}

Accessing VisorColorsData

The VisorColorsData ThemeExtension is automatically attached to every ThemeData:

final colors = Theme.of(context).extension<VisorColorsData>()!;
Text('Hello', style: TextStyle(color: colors.textPrimary));

Regenerating Themes

Themes are generated from .visor.yaml files in themes/ (stock) and custom-themes/ (custom). To regenerate after changing a YAML:

npm run themes:apply-flutter

This runs visor theme batch-apply-flutter which:

1. Discovers all .visor.yaml files in themes/ and custom-themes/
2. Calls the flutter adapter for each
3. Writes token files to packages/visor_themes/lib/src/<slug>/
4. Regenerates the lib/visor_themes.dart meta-barrel

The script is idempotent — re-running produces identical output.

Custom Themes

Add a new .visor.yaml to custom-themes/ with at minimum name and colors.primary:

name: my-app
version: 1
group: Custom

colors:
  primary: "#6366F1"

Then run npm run themes:apply-flutter. A new VisorThemes.myApp getter will appear.