Arcane Lexicon uses the arcane_jaspr stylesheet system for theming. Swap themes with a single line of code.

Basic Usage#

import 'package:arcane_lexicon/arcane_lexicon.dart' hide runApp;

void main() async {
  Jaspr.initializeApp(options: defaultServerOptions);

  runApp(
    await KnowledgeBaseApp.create(
      config: const SiteConfig(name: 'My Docs'),
      // Single line theming:
      stylesheet: const ShadcnStylesheet(theme: ShadcnTheme.midnight),
    ),
  );
}

Available Stylesheets#

ShadcnStylesheet#

Clean, modern design based on shadcn/ui:

• Rounded corners and minimal shadows
• Border-focused design
• Inter font family
• Multiple color themes

stylesheet: const ShadcnStylesheet(theme: ShadcnTheme.midnight)

NeonStylesheet#

Gamer-inspired design with neon aesthetics:

• OLED-optimized dark backgrounds
• Vibrant neon accent colors
• Glow effects on shadows
• Custom gaming-style fonts

stylesheet: const NeonStylesheet(theme: NeonTheme.green)

NeubrutalismStylesheet#

Comic-book inspired NeuBrutalism aesthetic with bold flat colors:

• Thick black borders (2-4px solid)
• Hard-offset drop shadows (no blur)
• Press-down interaction on :active (translate + shadow shrink)
• Pop-art saturated palettes paired with pure black/white
• Archivo Black headings, Space Grotesk body, JetBrains Mono code

stylesheet: const NeubrutalismStylesheet(theme: NeubrutalismTheme.yellow)

ShadcnTheme Options#

Neutral Themes#

These themes use auto-tinted surfaces derived from the primary color:

Pastel Themes#

Vibrant colored surfaces with matching accents:

Examples#

// OLED-optimized (pure black dark mode)
ShadcnStylesheet(theme: ShadcnTheme.midnight)

// Warm and inviting
ShadcnStylesheet(theme: ShadcnTheme.cream)

// Cool and professional
ShadcnStylesheet(theme: ShadcnTheme.slate)

// Colorful pastel
ShadcnStylesheet(theme: ShadcnTheme.lavender)

NeonTheme Options#

Neon accent colors for the Neon stylesheet:

Examples#

// Emerald gamer aesthetic
NeonStylesheet(theme: NeonTheme.green)

// Cyberpunk purple
NeonStylesheet(theme: NeonTheme.purple)

// Animated rainbow
NeonStylesheet(theme: NeonTheme.rainbow)

NeubrutalismTheme Options#

Bold pop-art accent colors paired with thick black borders and hard shadows:

Examples#

// Default high-vis yellow
NeubrutalismStylesheet(theme: NeubrutalismTheme.yellow)

// Bubblegum pop
NeubrutalismStylesheet(theme: NeubrutalismTheme.pink)

// Acid lime
NeubrutalismStylesheet(theme: NeubrutalismTheme.lime)

Theme Toggle#

Users can toggle between light and dark modes using the theme toggle button in the sidebar. The preference is saved to localStorage.

Configuration#

SiteConfig(
  name: 'My Docs',
  themeToggleEnabled: true,        // Show toggle (default: true)
  defaultTheme: KBThemeMode.dark,  // Initial theme
)

KBThemeMode Options#

Font Customization#

ShadcnStylesheet Fonts#

• Body: Inter (loaded from Google Fonts)
• Monospace: System monospace stack

NeonStylesheet Fonts#

The Neon theme uses custom fonts that must be included in your assets:

• Headings: ITCAvantGardeStd
• Body: Akzidenz-GroteskPro
• Code: Hack

NeubrutalismStylesheet Fonts#

The NeuBrutalism theme loads three Google Fonts (no asset setup required):

• Headings: Archivo Black
• Body: Space Grotesk
• Code: JetBrains Mono

Custom CSS#

Add custom styles via a /styles.css file in your web directory:

/* Custom overrides */
.prose h1 {
  color: var(--primary);
}

.kb-sidebar {
  background: var(--surface);
}

CSS Variables#

Both stylesheets expose CSS variables for customization:

Colors#

--primary          /* Primary accent color */
--primary-foreground
--background       /* Page background */
--foreground       /* Text color */
--muted            /* Muted backgrounds */
--muted-foreground /* Muted text */
--border           /* Border color */
--ring             /* Focus ring color */

Typography#

--font-sans        /* Body font */
--font-mono        /* Code font */
--font-heading     /* Heading font (Neon only) */

Spacing and Radius#

--radius-sm
--radius-md
--radius-lg
--radius-xl

Dark Mode Classes#

Both themes add a .dark class to the root element in dark mode:

/* Light mode styles */
.my-component {
  background: white;
}

/* Dark mode styles */
.dark .my-component {
  background: black;
}

Theme Persistence#

Theme preference is stored in localStorage under the key arcane-theme-mode. The stored value is either 'dark' or 'light'.

Syntax Highlighting#

Code blocks use Highlight.js for syntax highlighting. All stylesheets include theme-appropriate colors:

• ShadcnStylesheet: GitHub-style highlighting (light in light mode, dark in dark mode)
• NeonStylesheet: Neon terminal-style highlighting with primary color accents
• NeubrutalismStylesheet: Flat high-contrast palette with hard borders and accent-tinted code backgrounds