Theming

Customize Honeycomb components with CSS variables and Tailwind CSS.

CSS Variables Required

Honeycomb uses CSS variables with --hive-* prefix. You must define these in your globals.css for components to work correctly.

CSS Files

The package exports 3 CSS files for different use cases:

File	Contents	When to use
`styles.css`	CSS vars + components + Tailwind utilities + theme	Quick start — all-in-one, no Tailwind needed
`base.css`	CSS vars + component styles only	Minimal CSS without Tailwind utilities
`theme.css`	@theme inline tokens only	Add hive-* classes to your own Tailwind project

CSS Variables Reference

Complete list of CSS variables used by Honeycomb components. All values are in HSL format (H S% L%).

Variable	Light	Dark	Description
Brand
`--hive-red`	350 82% 48%	350 82% 48%	Brand primary color
`--hive-dark`	0 0% 10%	0 0% 10%	Brand dark color
Layout
`--hive-background`	0 0% 100%	0 0% 7%	Page background
`--hive-foreground`	0 0% 9%	0 0% 95%	Primary text color
`--hive-border`	0 0% 90%	0 0% 20%	Border color
`--hive-ring`	350 82% 48%	350 82% 48%	Focus ring color
Card
`--hive-card`	0 0% 100%	0 0% 10%	Card background
`--hive-card-foreground`	0 0% 9%	0 0% 95%	Card text color
Popover
`--hive-popover`	0 0% 100%	0 0% 10%	Popover background
`--hive-popover-foreground`	0 0% 9%	0 0% 95%	Popover text color
Muted
`--hive-muted`	0 0% 96%	0 0% 15%	Muted background
`--hive-muted-foreground`	0 0% 45%	0 0% 65%	Muted text color
Status
`--hive-success`	142 76% 36%	142 71% 45%	Success state (connected, healthy)
`--hive-warning`	38 92% 50%	48 96% 53%	Warning state (connecting, reconnecting)
`--hive-destructive`	0 84% 60%	0 63% 31%	Destructive state (error, disconnected)
`--hive-destructive-foreground`	0 0% 100%	0 0% 95%	Destructive text color

Dark Mode

Light

Card

Description

Dark

Card

Description

CSS Variables

:root {
  /* Brand */
  --hive-red: 350 82% 48%;
  --hive-dark: 0 0% 10%;

  /* Layout */
  --hive-background: 0 0% 100%;
  --hive-foreground: 0 0% 9%;
  --hive-border: 0 0% 90%;
  --hive-ring: 350 82% 48%;

  /* Card */
  --hive-card: 0 0% 100%;
  --hive-card-foreground: 0 0% 9%;

  /* Popover */
  --hive-popover: 0 0% 100%;
  --hive-popover-foreground: 0 0% 9%;

  /* Muted */
  --hive-muted: 0 0% 96%;
  --hive-muted-foreground: 0 0% 45%;

  /* Status */
  --hive-success: 142 76% 36%;
  --hive-warning: 38 92% 50%;
  --hive-destructive: 0 84% 60%;
  --hive-destructive-foreground: 0 0% 100%;
}

.dark {
  /* Layout */
  --hive-background: 0 0% 7%;
  --hive-foreground: 0 0% 95%;
  --hive-border: 0 0% 20%;

  /* Card */
  --hive-card: 0 0% 10%;
  --hive-card-foreground: 0 0% 95%;

  /* Popover */
  --hive-popover: 0 0% 10%;
  --hive-popover-foreground: 0 0% 95%;

  /* Muted */
  --hive-muted: 0 0% 15%;
  --hive-muted-foreground: 0 0% 65%;

  /* Status */
  --hive-success: 142 71% 45%;
  --hive-warning: 48 96% 53%;
  --hive-destructive: 0 63% 31%;
  --hive-destructive-foreground: 0 0% 95%;
}

Tailwind CSS 4 Theme

/* Import in your app.css alongside tailwindcss */
@import "tailwindcss";
@import "@hiveio/honeycomb-vue/theme.css";

/* Optional: map hive vars to Tailwind semantic colors */
@theme inline {
  --color-background: hsl(var(--hive-background));
  --color-foreground: hsl(var(--hive-foreground));
  --color-border: hsl(var(--hive-border));
  --color-muted: hsl(var(--hive-muted));
  --color-muted-foreground: hsl(var(--hive-muted-foreground));
  --color-card: hsl(var(--hive-card));
  --color-card-foreground: hsl(var(--hive-card-foreground));
}

Usage Examples

How to use Honeycomb color variables in your components.

<!-- Layout colors - auto adapt to light/dark mode -->
<div class="bg-hive-background text-hive-foreground border-hive-border">
  <p class="text-hive-muted-foreground">Muted text</p>
</div>

<!-- Card component -->
<div class="bg-hive-card text-hive-card-foreground border-hive-border border rounded-lg p-4">
  Card content
</div>

<!-- Status colors -->
<div class="bg-hive-success/10 text-hive-success">Connected</div>
<div class="bg-hive-warning/10 text-hive-warning">Connecting...</div>
<div class="bg-hive-destructive/10 text-hive-destructive">Error</div>

<!-- Brand colors -->
<button class="bg-hive-red text-white hover:bg-hive-red/90">
  Vote on Hive
</button>

Customization

Override any variable in your application to customize the theme.

// In your app's globals.css, override any variable:
:root {
  --hive-red: 220 90% 56%; /* Blue instead of red */
  --hive-success: 160 80% 45%; /* Custom green */
}

.dark {
  --hive-background: 222 47% 11%; /* Darker background */
  --hive-card: 217 33% 17%; /* Slate card background */
}

Component Variables

Which components use which CSS variables.

Component	Variables Used
ApiTracker	`--hive-card--hive-border--hive-foreground--hive-muted--hive-popover--hive-success--hive-warning--hive-destructive`

Hooks API Tracker