Custom Themes

Overview

Custom themes in Cristalyse offer complete flexibility to express your brand’s unique style. Design themes with specific colors, typography, spacing, and other visual elements to ensure consistency across all charts.

Designing a Custom Theme

Theme Properties

Customize various properties:

Colors: Define primary, secondary, background, and accent colors.
Typography: Adjust fonts, sizes, and weights.
Dimensions: Set padding, margins, and element sizes.

Creating Themes

Design a theme matching your brand:

final customTheme = ChartTheme(
  backgroundColor: const Color(0xFFF0F0F0),
  plotBackgroundColor: Colors.white,
  primaryColor: const Color(0xFF0050AC), // Brand primary
  borderColor: const Color(0xFFCCCCCC),
  gridColor: const Color(0xFFE0E0E0),
  axisColor: const Color(0xFF333333),
  gridWidth: 1.0,
  axisWidth: 1.5,
  pointSizeDefault: 6.0,
  colorPalette: [
    const Color(0xFF0050AC), // Primary
    const Color(0xFFFF9500), // Accent
    const Color(0xFF5A2EA6), // Secondary
    const Color(0xFF34C759), // Success
  ],
  padding: const EdgeInsets.all(20),
  axisTextStyle: const TextStyle(
    fontSize: 12,
    color: Color(0xFF333333),
    fontWeight: FontWeight.w400,
  ),
);

Applying Themes

Apply themes in charts:

CristalyseChart()
  .data(chartData)
  .mapping(x: 'month', y: 'visitors')
  .geomBar()
  .theme(customTheme)
  .build()

Theme Variants

Light and Dark Modes

Create matching themes for light and dark modes:

final lightTheme = ChartTheme.defaultTheme();
final darkTheme = ChartTheme.darkTheme();

CristalyseChart()
  .data(data)
  .mapping(x: 'category', y: 'count')
  .geomBar()
  .theme(isDarkMode ? darkTheme : lightTheme)
  .build();

Responsive Themes

Adjust theme properties based on screen size:

ChartTheme responsiveTheme(BuildContext context) {
  final width = MediaQuery.of(context).size.width;
  if (width > 1200) { // Desktop
    return ChartTheme.defaultTheme().copyWith(
      padding: const EdgeInsets.all(32),
      axisTextStyle: const TextStyle(fontSize: 14),
    );
  } else if (width > 800) { // Tablet
    return ChartTheme.defaultTheme().copyWith(
      padding: const EdgeInsets.all(24),
    );
  } else { // Mobile
    return ChartTheme.defaultTheme().copyWith(
      padding: const EdgeInsets.all(16),
      axisTextStyle: const TextStyle(fontSize: 10),
    );
  }
}

Gradient Themes (Experimental)

New Experimental Feature in v1.6.0:Create stunning gradient effects for your charts with category-specific gradient mapping.Not advisable for Production use as of v1.6.0.

Creating Gradient Themes

Define gradients for specific categories in your data:

// Create gradients map for use with .customPalette()
final productGradients = {
  // Linear gradients for different product tiers
  'Enterprise': const LinearGradient(
    colors: [Color(0xFF8B5CF6), Color(0xFFA78BFA)],
    begin: Alignment.bottomLeft,
    end: Alignment.topRight,
    stops: [0.0, 1.0],
  ),
  'Professional': const LinearGradient(
    colors: [Color(0xFF3B82F6), Color(0xFF60A5FA)],
    begin: Alignment.bottomCenter,
    end: Alignment.topCenter,
  ),
  // Radial gradient for special categories
  'Premium': const RadialGradient(
    colors: [Color(0xFFDC2626), Color(0xFFEF4444), Color(0xFFFCA5A5)],
    center: Alignment.center,
    radius: 1.2,
    stops: [0.0, 0.7, 1.0],
  ),
  // Sweep gradient for dynamic effects
  'Special': const SweepGradient(
    colors: [
      Color(0xFFEAB308),
      Color(0xFFF59E0B),
      Color(0xFFDC2626),
      Color(0xFFEAB308),
    ],
    center: Alignment.center,
    startAngle: 0.0,
    endAngle: 2 * math.pi,
  ),
};

Gradient Types

Linear Gradients

Smooth color transitions along a line:

const LinearGradient(
  colors: [Color(0xFF4F46E5), Color(0xFF7C3AED)],
  begin: Alignment.bottomCenter, // Start point
  end: Alignment.topCenter,      // End point
  stops: [0.0, 1.0],            // Optional color stops
)

Radial Gradients

Circular color transitions from center outward:

const RadialGradient(
  colors: [Color(0xFF059669), Color(0xFF10B981)],
  center: Alignment.center,    // Center point
  radius: 0.8,                // Radius (0.0 to 1.0+)
  focal: Alignment.center,     // Optional focal point
  focalRadius: 0.1,           // Optional focal radius
)

Sweep Gradients

Angular color transitions around a center point:

const SweepGradient(
  colors: [Color(0xFFEAB308), Color(0xFFF59E0B), Color(0xFFEAB308)],
  center: Alignment.center,     // Center point
  startAngle: 0.0,             // Start angle in radians
  endAngle: 2 * math.pi,       // End angle in radians
)

Applying Gradient Themes

Use gradient themes with color mapping:

CristalyseChart()
  .data(productData)
  .mapping(x: 'month', y: 'sales', color: 'tier') // Color mapping required
  .geomBar()
  .customPalette(categoryGradients: productGradients)
  .build()

Important: Gradients only work when you specify color mapping in your chart. Without color: 'columnName', charts will use solid colors from the color palette.

Supported Chart Types

Gradient themes currently support:

Bar Charts - Full gradient support with alpha blending
Point/Scatter Charts - Gradient fills for data points
Line Charts - Not yet supported (solid colors only)
Area Charts - Not yet supported (solid colors only)
Bubble Charts - Not yet supported (solid colors only)

Advanced Customization

Theme Extensions

Add additional properties using extensions:

extension ChartThemeExtras on ChartTheme {
  ChartTheme get withCustomColors => copyWith(
    primaryColor: Colors.teal,
    colorPalette: [Colors.teal, Colors.amber, Colors.purple],
  );
}

final extendedTheme = ChartTheme.defaultTheme().withCustomColors;

Dynamic Themes

Change themes in response to user actions and preferences:

class ThemeSwitcher extends StatefulWidget {
  final ChartTheme lightTheme;
  final ChartTheme darkTheme;
  final List<Map<String, dynamic>> data;

  const ThemeSwitcher({
    required this.lightTheme,
    required this.darkTheme,
    required this.data,
    super.key,
  });

  @override
  _ThemeSwitcherState createState() => _ThemeSwitcherState();
}

class _ThemeSwitcherState extends State<ThemeSwitcher> {
  bool isDark = false;

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Switch(
          value: isDark,
          onChanged: (value) {
            setState(() {
              isDark = value;
            });
          },
        ),
        Expanded(
          child: CristalyseChart()
            .data(widget.data)
            .mapping(x: 'time', y: 'value')
            .geomLine()
            .theme(isDark ? widget.darkTheme : widget.lightTheme)
            .build(),
        ),
      ],
    );
  }
}

Example Gallery

Corporate Branding

Match your organization’s color scheme and brand identity.

Responsive Design

Automatic adjustments for different device sizes and resolutions.

Theme Persistence

Save and restore user preferences for consistent experiences.

Interactive Theming

Real-time adjustments and theme switching based on user actions.

Next Steps

Performance

Enhance theme application with performance optimizations.

Export

Export charts with customized themes for visual consistency.

Data Mapping

Explore data mapping techniques for thematic accuracy.

Animations

Combine custom themes with dynamic animations for engaging visuals.

Conclusion

Utilize custom themes to ensure charts are a seamless part of your application’s visual identity. By leveraging Cristalyse’s flexible theming capabilities, create charts that not only convey data but also resonate with your brand’s aesthetics.

Get Started

Chart Types

Features

Advanced

Overview

Designing a Custom Theme

Theme Properties

Creating Themes

Applying Themes

Theme Variants

Light and Dark Modes

Responsive Themes

Gradient Themes (Experimental)

Creating Gradient Themes

Gradient Types

Linear Gradients

Radial Gradients

Sweep Gradients

Applying Gradient Themes

Supported Chart Types

Advanced Customization

Theme Extensions

Dynamic Themes

Example Gallery

Corporate Branding

Responsive Design

Theme Persistence

Interactive Theming

Next Steps

Performance

Export

Data Mapping

Animations

Conclusion

​Overview

​Designing a Custom Theme

​Theme Properties

​Creating Themes

​Applying Themes

​Theme Variants

​Light and Dark Modes

​Responsive Themes

​Gradient Themes (Experimental)

​Creating Gradient Themes

​Gradient Types

​Linear Gradients

​Radial Gradients

​Sweep Gradients

​Applying Gradient Themes

​Supported Chart Types

​Advanced Customization

​Theme Extensions

​Dynamic Themes

​Example Gallery

Corporate Branding

Responsive Design

Theme Persistence

Interactive Theming

​Next Steps

Performance

Export

Data Mapping

Animations

​Conclusion

Overview

Designing a Custom Theme

Theme Properties

Creating Themes

Applying Themes

Theme Variants

Light and Dark Modes

Responsive Themes

Gradient Themes (Experimental)

Creating Gradient Themes

Gradient Types

Linear Gradients

Radial Gradients

Sweep Gradients

Applying Gradient Themes

Supported Chart Types

Advanced Customization

Theme Extensions

Dynamic Themes

Example Gallery

Next Steps

Conclusion