ChartTheme.dark constructor
ChartTheme.dark()
Create dark theme with enhanced colors.
Returns a professionally designed dark theme with:
- Dark background (slate gray)
- Light text for contrast
- Muted grid and axis colors
- Bright gradient color palette
- Modern rounded corners
Example
final theme = ChartTheme.dark();
Implementation
factory ChartTheme.dark() {
return const ChartTheme(
backgroundColor: Color(0xFF1F2937), // Gray 800
textColor: Color(0xFFF9FAFB), // Gray 50
gridColor: Color(0xFF374151), // Gray 700
axisColor: Color(0xFF6B7280), // Gray 500
cardBorderColor: Color(0x1AFFFFFF),
overlayColor: Color(0x14FFFFFF),
crosshairColor: Color(0x66FFFFFF),
tooltipBackgroundColor: Color(0xFF0B1220),
tooltipBorderColor: Color(0x1AFFFFFF),
tooltipShadow: [
BoxShadow(
color: Color(0x66000000),
blurRadius: 22,
offset: Offset(0, 12),
spreadRadius: -10,
),
BoxShadow(
color: Color(0x33000000),
blurRadius: 12,
offset: Offset(0, 6),
spreadRadius: -10,
),
],
gradientColors: [
Color(0xFF818CF8), // Indigo 400
Color(0xFFA78BFA), // Violet 400
Color(0xFFF472B6), // Pink 400
Color(0xFF34D399), // Emerald 400
Color(0xFFFBBF24), // Amber 400
],
shadowElevation: 8.0,
axisLabelStyle: TextStyle(
fontSize: 11,
fontWeight: FontWeight.w500,
color: Color(0xFF9CA3AF), // Gray 400
),
tooltipStyle: TextStyle(
fontSize: 12,
fontWeight: FontWeight.w600,
color: Color(0xFFF9FAFB),
letterSpacing: -0.1,
),
);
}