Themes
GptMarkdown automatically picks up your app's light/dark theme. You can fine-tune it via a ThemeData extension or wrap specific widgets with GptMarkdownTheme.
App-wide theme via ThemeData
Register GptMarkdownThemeData as a ThemeData extension. Separate light and dark themes are both supported.
main.dart
1import 'package:flutter/material.dart';
2import 'package:gpt_markdown/gpt_markdown.dart';
3
4MaterialApp(
5 theme: ThemeData.light().copyWith(
6 extensions: [
7 GptMarkdownThemeData(
8 brightness: Brightness.light,
9 linkColor: Colors.indigo,
10 linkHoverColor: Colors.indigoAccent,
11 highlightColor: Colors.yellow.withOpacity(0.3),
12 autoAddDividerLineAfterH1: true,
13 ),
14 ],
15 ),
16 darkTheme: ThemeData.dark().copyWith(
17 extensions: [
18 GptMarkdownThemeData(
19 brightness: Brightness.dark,
20 linkColor: Colors.lightBlueAccent,
21 ),
22 ],
23 ),
24 home: const MyApp(),
25)Scoped theme with GptMarkdownTheme
Use the GptMarkdownTheme widget to apply a theme only to a specific part of the widget tree.
scoped_theme.dart
1import 'package:gpt_markdown/gpt_markdown.dart';
2
3// Or wrap a specific widget instead of the whole app
4GptMarkdownTheme(
5 gptThemeData: GptMarkdownThemeData(
6 brightness: Brightness.light,
7 h1: const TextStyle(fontSize: 28, fontWeight: FontWeight.w900),
8 h2: const TextStyle(fontSize: 22, fontWeight: FontWeight.w700),
9 linkColor: Colors.deepPurple,
10 hrLineColor: Colors.grey.shade300,
11 hrLineThickness: 1.5,
12 hrLinePadding: const EdgeInsets.symmetric(vertical: 8),
13 ),
14 child: GptMarkdown(content),
15)All theme properties
theme_properties.dart
1GptMarkdownThemeData(
2 brightness: Brightness.light,
3
4 // Style each heading level independently
5 h1: const TextStyle(fontSize: 32, fontWeight: FontWeight.w900, letterSpacing: -0.5),
6 h2: const TextStyle(fontSize: 24, fontWeight: FontWeight.w700),
7 h3: const TextStyle(fontSize: 20, fontWeight: FontWeight.w600),
8 // h4, h5, h6 follow the same pattern
9
10 // Horizontal rule (--- in Markdown)
11 hrLineColor: Colors.grey.shade300,
12 hrLineThickness: 1.0,
13 hrLinePadding: const EdgeInsets.symmetric(vertical: 12),
14
15 // Inline code / highlight background
16 highlightColor: Colors.amber.withOpacity(0.2),
17
18 // Whether # headings get a divider line below them
19 autoAddDividerLineAfterH1: false,
20)GptMarkdownThemeData reference
| Property | Type | Description |
|---|---|---|
| brightness | Brightness | Required. Sets default colors for light or dark mode. |
| h1 – h6 | TextStyle? | Override heading text styles individually. |
| highlightColor | Color? | Background color for inline code spans. |
| linkColor | Color? | Default link color. |
| linkHoverColor | Color? | Link color on hover (web). |
| hrLineColor | Color? | Color of horizontal rule lines. |
| hrLineThickness | double? | Stroke width of horizontal rules. |
| hrLinePadding | EdgeInsets? | Padding around horizontal rules. |
| autoAddDividerLineAfterH1 | bool? | Insert a divider line below H1 headings. |