Theming

Setup

Import the default stylesheet:

import '@loopkit/react/styles.css';

CSS Custom Properties

Override these custom properties in your CSS to customize the look:

:root {
    --loopkit-primary: #8b5cf6;
    --loopkit-grade-again: #dc2626;
    --loopkit-grade-hard: #ea580c;
    --loopkit-grade-good: #16a34a;
    --loopkit-grade-easy: #2563eb;
    --loopkit-bg: #ffffff;
    --loopkit-text: #111827;
    --loopkit-border: #d1d5db;
    --loopkit-radius: 12px;
    --loopkit-font: 'Inter', sans-serif;
}

Property	Default	Description
`--loopkit-primary`	`#8b5cf6`	Primary accent color (purple)
`--loopkit-grade-again`	`#dc2626`	"Again" button color (red)
`--loopkit-grade-hard`	`#ea580c`	"Hard" button color (orange)
`--loopkit-grade-good`	`#16a34a`	"Good" button color (green)
`--loopkit-grade-easy`	`#2563eb`	"Easy" button color (blue)
`--loopkit-bg`	`#ffffff`	Background color
`--loopkit-text`	`#111827`	Text color
`--loopkit-border`	`#d1d5db`	Border color
`--loopkit-radius`	`12px`	Border radius
`--loopkit-font`	`'Inter', sans-serif`	Font family

Dark Mode

Override the properties in a dark mode context:

.dark, [data-theme="dark"] {
    --loopkit-bg: #1f2937;
    --loopkit-text: #f9fafb;
    --loopkit-border: #4b5563;
    --loopkit-primary: #a78bfa;
}

Custom Styling Example

/* Rounded cards with shadow */
:root {
    --loopkit-radius: 16px;
}

.loopkit-card {
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
}

/* Compact grade buttons */
.loopkit-grade-buttons {
    gap: 0.5rem;
}

Headless Alternative

If you prefer full control, skip the stylesheet and build your own components using the hooks. Every component in LoopKit has a corresponding hook that exposes all state and actions.