Custom CSS

PicFast lets you inject custom CSS into the site via the Settings → Site Settings page in the admin panel. The CSS is saved and injected directly into a <style> tag on every page.

CSS Variables Reference

All PicFast theme tokens are exposed as CSS custom properties. Override these to change colors, radii, spacing, and more:

Variable	Purpose	Example
`--background`	Page background	`oklch(0.985 0 0)`
`--foreground`	Text color	`oklch(0.145 0 0)`
`--card`	Card/panel background	`oklch(1 0 0)`
`--primary`	Primary accent color	`oklch(0.55 0.18 260)`
`--primary-foreground`	Text on primary	`oklch(0.985 0 0)`
`--secondary`	Secondary surface	`oklch(0.97 0 0)`
`--accent`	Accent surface	`oklch(0.97 0 0)`
`--muted`	Muted surface	`oklch(0.97 0 0)`
`--muted-foreground`	Muted text	`oklch(0.556 0 0)`
`--border`	Border color	`oklch(0.922 0 0)`
`--radius`	Base border radius	`0.625rem`
`--destructive`	Danger/delete color	`oklch(0.577 0.245 27.3)`
`--success`	Success color	`oklch(0.6 0.18 145)`
`--warning`	Warning color	`oklch(0.75 0.15 80)`
`--info`	Info color	`oklch(0.55 0.18 260)`
`--pf-logo-radius`	Logo border-radius	`0.75rem`
`--pf-density`	UI density multiplier	`1`
`--pf-motion-duration`	Animation speed	`150ms`
`--sidebar`	Sidebar background	`oklch(0.985 0 0)`
`--popover`	Popover background	`oklch(1 0 0)`

Target Selectors

These are the key CSS classes you can override for targeted changes:

Selector	Scope	What it controls
`.pf-public-glow`	Public pages	Decorative background glow effect
`.pf-site-logo`	All pages	Site logo appearance (border-radius driven by `--pf-logo-radius`)
`.pf-console-shell`	Console layout	Main sidebar + content wrapper
`.pf-console-content`	Console layout	Main content area inside console

Common Recipes

Change the primary accent color

:root {
  --primary: oklch(0.55 0.22 280);
  --primary-foreground: oklch(0.985 0 0);
}

.dark {
  --primary: oklch(0.65 0.22 280);
}

Make the site feel more rounded

:root {
  --radius: 1.25rem;
  --pf-logo-radius: 1rem;
}

Hide the public page glow effect

.pf-public-glow {
  display: none;
}

Custom console sidebar background

.pf-console-shell {
  background: linear-gradient(180deg, oklch(0.2 0.01 260) 0%, oklch(0.13 0 0) 100%);
}

Live Playground

Edit the CSS below and see changes applied to mock PicFast UI elements in real time.

custom.css

Preview

Generate CSS with AI

Copy a prompt template below and paste it into DeepSeek, ChatGPT, or any LLM to generate custom CSS for your PicFast instance:

I want to customize my PicFast image hosting site. It uses CSS custom properties (variables) for theming.

Available selectors:
- .pf-public-glow (background glow on public pages)
- .pf-site-logo (the logo element)
- .pf-console-shell (console sidebar + content wrapper)
- .pf-console-content (console main content area)

Available CSS variables (oklch colors):
--background, --foreground, --card, --card-foreground, --primary, --primary-foreground,
--secondary, --secondary-foreground, --accent, --accent-foreground, --muted,
--muted-foreground, --border, --radius, --pf-logo-radius, --pf-density,
--pf-motion-duration, --destructive, --success, --warning, --info,
--sidebar, --sidebar-foreground, --popover, --popover-foreground

Light mode variables go under :root { }, dark mode under .dark { }.

Please generate CSS for: [DESCRIBE YOUR DESIRED LOOK HERE - e.g. "a dark theme with neon pink accents and large rounded corners"]