Themes

Theme Library

Customize CURSY Framework with pre-built themes. So everyone's sites don't look the same!

How Themes Work

Simply include a theme CSS file after the main CURSY Framework CSS. Themes override color variables and add custom styling while maintaining the same component structure.

<link rel="stylesheet" href="cursy.css">
<link rel="stylesheet" href="themes/neon-nights.css">
          

Available Themes

Default Synthwave

The original CURSY theme with green-cyan-purple-orange palette.

Use Theme

Neon Nights

Purple-pink-orange gradient theme for vibrant cyberpunk vibes.

Use Theme

Ocean Depth

Cool blue-cyan-indigo palette for deep, calming interfaces.

Use Theme

Sunset Drive

Warm orange-red-pink gradient for energetic, passionate projects.

Use Theme

Forest Dreams

Green gradient theme for nature, growth, and organic projects.

Use Theme

Monochrome

Elegant grayscale theme for minimalist, professional designs.

Use Theme

Creating Custom Themes

Theme Structure

Create a new CSS file that overrides CURSY variables:

/* themes/my-theme.css */
:root {
  --cursy-green: #your-color;
  --cursy-cyan: #your-color;
  --cursy-purple: #your-color;
  --cursy-orange: #your-color;
}

/* Add custom component overrides */
.btn-primary {
  background: your-gradient;
}
          