Jolocky is engineered around modern CSS custom properties and the Tailwind CSS @theme engine. This architecture gives you total control over light and dark aesthetics, glassmorphic panel translucency, and accent glows without touching component markup.
Token System#
Jolocky uses semantic background and foreground variable pairings. The base token sets the surface color, and the corresponding -foreground token defines the high-contrast text or icon color for that layer.
--primary: oklch(0.205 0 0);
--primary-foreground: oklch(0.985 0 0);When rendered, the component uses bg-primary for the background surface and text-primary-foreground for the typography.
Standard Theme Tokens#
These tokens live in your stylesheet under the :root and .dark selectors:
| Token | Purpose | Applied To |
|---|---|---|
background / foreground | Canvas background and base text | Page container, main layout wrapper |
card / card-foreground | Elevated content blocks and cards | Bento grid cards, showcase previews |
popover / popover-foreground | Floating surfaces and menus | Dynamic island menus, dropdown docks |
primary / primary-foreground | High-impact actions and key highlights | Primary CTA buttons, active states |
secondary / secondary-foreground | Supporting interactive surfaces | Subtle buttons, secondary filters |
muted / muted-foreground | Low-emphasis information | Subheadings, dates, helper descriptions |
accent / accent-foreground | Interactive hover highlights | Navigation item hover states |
border | Borders and hairline dividers | Section splitters, card outlines |
ring | Focus rings and interaction halos | Keyboard focus states, active inputs |
radius | Base corner radius variable | Scaled border-radius properties |
Tailwind CSS Setup#
In Tailwind CSS, tokens are declared directly inside your stylesheet using @theme inline. There is no JavaScript configuration file required:
@import "tailwindcss";
@custom-variant dark (&:is(.dark *));
@theme inline {
--color-background: var(--background);
--color-foreground: var(--foreground);
--color-card: var(--card);
--color-card-foreground: var(--card-foreground);
--color-popover: var(--popover);
--color-popover-foreground: var(--popover-foreground);
--color-primary: var(--primary);
--color-primary-foreground: var(--primary-foreground);
--color-secondary: var(--secondary);
--color-secondary-foreground: var(--secondary-foreground);
--color-muted: var(--muted);
--color-muted-foreground: var(--muted-foreground);
--color-accent: var(--accent);
--color-accent-foreground: var(--accent-foreground);
--color-border: var(--border);
--color-ring: var(--ring);
--radius-sm: calc(var(--radius) * 0.6);
--radius-md: calc(var(--radius) * 0.8);
--radius-lg: var(--radius);
--radius-xl: calc(var(--radius) * 1.4);
}Dark Mode Values#
Modern creative websites frequently use deep dark backgrounds with subtle luminous borders. Here is the recommended baseline theme for Jolocky projects:
:root {
--radius: 0.625rem;
--background: oklch(1 0 0);
--foreground: oklch(0.145 0 0);
--card: oklch(1 0 0);
--card-foreground: oklch(0.145 0 0);
--popover: oklch(1 0 0);
--popover-foreground: oklch(0.145 0 0);
--primary: oklch(0.205 0 0);
--primary-foreground: oklch(0.985 0 0);
--secondary: oklch(0.97 0 0);
--secondary-foreground: oklch(0.205 0 0);
--muted: oklch(0.97 0 0);
--muted-foreground: oklch(0.556 0 0);
--accent: oklch(0.97 0 0);
--accent-foreground: oklch(0.205 0 0);
--border: oklch(0.922 0 0);
--ring: oklch(0.708 0 0);
}
.dark {
--background: oklch(0.145 0 0);
--foreground: oklch(0.985 0 0);
--card: oklch(0.205 0 0);
--card-foreground: oklch(0.985 0 0);
--popover: oklch(0.205 0 0);
--popover-foreground: oklch(0.985 0 0);
--primary: oklch(0.985 0 0);
--primary-foreground: oklch(0.205 0 0);
--secondary: oklch(0.269 0 0);
--secondary-foreground: oklch(0.985 0 0);
--muted: oklch(0.269 0 0);
--muted-foreground: oklch(0.708 0 0);
--accent: oklch(0.269 0 0);
--accent-foreground: oklch(0.985 0 0);
--border: oklch(1 0 0 / 12%);
--ring: oklch(0.556 0 0);
}Adding Custom Animation Keyframes#
When an interactive section uses custom CSS keyframe animations (such as continuous marquees or pulsing glow effects), define them within the @theme inline block so they can be consumed by Tailwind utility classes:
@theme inline {
--animate-marquee: marquee 25s linear infinite;
@keyframes marquee {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
}