🎨 Appearance & Themes

Everything visual lives at /admin/design (Theme · Banner · Branding · SEO). Changes preview instantly in the phone on the right (tap the preview button on mobile).

⚡ Quick Look

• Presets: 7 themes (14 variants).
• Custom: Override any color.
• Banners: Gradients or custom images.
• Social icon shape: Circle or rounded square.
• Consent banner: Optional cookie/privacy notice.
• CSS: Full custom code support.

🌈 Theme Presets

Pick from 7 built-in themes. Each has a Light, Dark, and Auto mode.

Tip: Click any card to apply. Color pickers update automatically.

🎨 Custom Colors

Override individual colors on top of any preset.

• Primary: Buttons & Links.
• Secondary: Supporting elements.
• Accent: Highlights.
• Background: Page background.

Note: Custom overrides apply in Light Mode only. Dark mode uses the preset palette for accessibility.

🌓 Color Mode

Control what visitors see first.

• Light: Always light.
• Dark: Always dark.
• System: Matches their device (iOS/Android/Windows).

🖼️ Banners & Profile

Customize the top of your page.

• Avatar: Upload or URL.
• Display Name: 50 chars max.
• Bio: 300 chars max.
• Verified Badge: Toggle a blue checkmark (cosmetic).

Banner Types

1. Preset Gradients: Adapts to your theme colors automatically.
2. Custom Image: Upload anything.

🔵 Social Icon Shape

Choose how social network icons appear on your public page.

Setting lives at /admin/design → Social icon shape.

🏷️ Branding / Whitelabel

Control the footer on your public page. Fully Allowed (MIT).

• Show footer: On/Off.
• Custom Text: Replace "Powered by LinkDen".
• Custom Link: Change where it links.

🍪 Consent Banner

Show a privacy/cookie notice at the bottom of your public page.

1. Go to /admin/design/branding → Consent Banner.
2. Toggle Show consent banner on.
3. Edit the banner text (e.g. "We use cookies to improve your experience.").

The banner is purely informational — no cookie blocking logic is attached. Style it with Custom CSS if needed.

💻 Custom CSS

For advanced users. Add your own styles.

Useful Classes

• .ld-page - Main container.
• .ld-profile - Profile section.
• .ld-link-block - Link buttons.
• .ld-social-block - Social icons.

CSS Variables

--ld-primary, --ld-accent, --ld-background, --ld-foreground, --ld-card, --ld-card-foreground, --ld-border, --ld-muted, --ld-muted-foreground

/* Example: Gradient Background */
.ld-page {
  background: linear-gradient(135deg, var(--ld-primary), var(--ld-accent));
}