Theming#

Arcane Jaspr includes a powerful theme system built on CSS custom properties. The theme controls colors, accent colors, border radius, shadows, and more.

ArcaneApp#

Every Arcane application must be wrapped in an ArcaneApp component which provides the theme context.

import 'package:arcane_jaspr/arcane_jaspr.dart';

ArcaneApp(
  theme: ArcaneTheme.supabase(
    accent: AccentTheme.emerald,
    themeMode: ThemeMode.dark,
  ),
  child: YourApp(),
)

ArcaneTheme#

The ArcaneTheme class configures the visual appearance of your application.

Properties#

Creating a Theme#

Use the ArcaneTheme.supabase() factory for the default Supabase-inspired design:

ArcaneTheme.supabase(
  accent: AccentTheme.emerald,
  themeMode: ThemeMode.dark,
  radius: 0.5,
)

Customizing the Theme#

You can modify any aspect using copyWith():

final theme = ArcaneTheme.supabase(accent: AccentTheme.cyan);

final customTheme = theme.copyWith(
  radius: 0.75,
  surfaceOpacity: 0.9,
);

Switching Accents#

Create a new theme with a different accent:

final newTheme = theme.withAccent(AccentTheme.violet);

AccentTheme#

The AccentTheme enum provides four accent color options:

Accent Colors#

Each accent provides multiple color variants:

AccentTheme.emerald.primaryDark   // Primary color for dark mode
AccentTheme.emerald.primaryLight  // Primary color for light mode
AccentTheme.emerald.hoverDark     // Hover state for dark mode
AccentTheme.emerald.hoverLight    // Hover state for light mode
AccentTheme.emerald.containerDark // Container color for dark mode
AccentTheme.emerald.containerLight // Container color for light mode

ThemeMode#

The ThemeMode enum controls the color scheme:

Getting Brightness#

final brightness = themeMode.brightness; // Brightness.light or Brightness.dark

Accessing the Theme#

From Context#

@override
Component build(BuildContext context) {
  final theme = ArcaneTheme.of(context);
  final colorScheme = theme.colorScheme;

  return ArcaneDiv(
    styles: ArcaneStyleData(
      raw: {
        'color': colorScheme.primary.css,
      },
    ),
    children: [...],
  );
}

Using the Extension#

final theme = context.arcaneTheme;
final colorScheme = context.colorScheme;

CSS Variables#

ArcaneTheme generates 70+ CSS custom properties that you can use throughout your application:

Color Variables#

--arcane-accent           /* Primary accent color */
--arcane-accent-hover     /* Accent hover state */
--arcane-accent-container /* Accent container background */
--arcane-background       /* Page background */
--arcane-surface          /* Surface/card background */
--arcane-card             /* Card background */
--arcane-border           /* Border color */
--arcane-text             /* Primary text color */
--arcane-muted            /* Muted text color */

Status Variables#

--arcane-success          /* Success color */
--arcane-warning          /* Warning color */
--arcane-error            /* Error/destructive color */
--arcane-info             /* Info color */

Radius Variables#

--arcane-radius           /* Base radius */
--arcane-radius-sm        /* Small radius */
--arcane-radius-md        /* Medium radius */
--arcane-radius-lg        /* Large radius */
--arcane-radius-xl        /* Extra large radius */
--arcane-radius-full      /* Full/pill radius */

Shadow Variables#

--arcane-shadow-xs        /* Extra small shadow */
--arcane-shadow           /* Default shadow */
--arcane-shadow-lg        /* Large shadow */
--arcane-shadow-xl        /* Extra large shadow */

Transition Variables#

--arcane-transition-fast  /* 150ms transition */
--arcane-transition       /* 200ms transition */
--arcane-transition-slow  /* 300ms transition */

Using CSS Variables in Styles#

You can reference these variables in your ArcaneStyleData:

ArcaneDiv(
  styles: const ArcaneStyleData(
    raw: {
      'background': 'var(--arcane-surface)',
      'border': '1px solid var(--arcane-border)',
      'color': 'var(--arcane-text)',
      'border-radius': 'var(--arcane-radius-md)',
    },
  ),
  children: [...],
)

Theme Toggle#

Use ArcaneThemeToggle to let users switch between light and dark mode:

ArcaneThemeToggle(
  onToggle: (isDark) {
    // Update your theme state
  },
)

Or the simple version:

ArcaneThemeToggleSimple()