Flutter themes consistent with Primer style guidelines

DISCLAIMER: This project is not affiliated with the Primer or GitHub organizations.


PrimerThemeData class which provides Brightness-aware colors and text styles to your app

PrimerTheme InheritedWidget which provides the PrimerThemeData to descendant widgets

PrimerApp convenience widget that provides pre-configured, Brightness-aware Primer theme configurations.

Installation Options

  1. From
$ flutter pub add primer_flutter
  1. From Git:

Quick Start

  1. Wrap your app with a PrimerApp widget using your "root" widget's builder property and give it the brightness of the parent widget's theme. Make sure to set the theme and darkTheme properties of the root widget so that the brightness can be retrieved via .of(context) call.
// Use MaterialApp or other "app" root widget that has a builder property 
// (e.g. CupertinoApp, MacosApp, etc.)
  theme: ThemeData.light(),
  darkTheme: ThemeData.dark(),
  // By using ThemeMode.system, we ensure that the correct theme will be shown
  // based on the user's system theme.
  themeMode: ThemeMode.system,
  builder: (context, child) => PrimerApp(
    parentBrightness: Theme.of(context).brightness,
    child: child!,
  home: MyHomePage(),
  1. Access the theme's colors and text styles by calling PrimerTheme.of(context). Here's a small example:
import 'package:flutter/material.dart';

class MyHomePage extends StatelessWidget {
  const MyHomePage({Key? key}) : super(key: key);

  Widget build(BuildContext context) {
    final primerTheme = PrimerTheme.of(context);
    return Scaffold(
      backgroundColor: primerTheme.canvas.dflt,
      body: Center(
        child: Text(
          'Hello, world!',
          style: primerTheme.typography.h1,