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,
    ),
  );
}