ThryndThrynd Docs
GitHub

Themes

Thrynd includes 6 complete themes. Switch themes by changing the class on your <body> tag.

Try it now: Click on any theme below to see this entire page change instantly. All components adapt automatically!

Modern

Active

Clean, contemporary design with vibrant blue colors and smooth transitions. Perfect for modern web applications.

Vibrant blue primarySmooth animationsContemporary feel

Classic

Traditional, elegant design with serif fonts and muted colors. Ideal for content-heavy sites and professional applications.

Serif typographyElegant colorsTraditional styling

Minimal

Brutalist, monochrome design with stark contrasts and sharp edges. For bold, statement-making interfaces.

Monochrome paletteSharp edgesHigh contrast

Neon

Cyberpunk aesthetic with electric colors and glowing effects on dark background. Perfect for gaming and creative applications.

Electric colorsGlowing effectsDark background

Nature

Earthy, organic design with natural colors and warm background textures. Great for eco-friendly and wellness brands.

Natural colorsWarm texturesOrganic feel

Corporate

Professional, trustworthy design inspired by enterprise software. Perfect for business applications and dashboards.

Professional blueEnterprise feelHigh readability

Usage

Apply a theme by adding the theme class to your <body> tag:

<!DOCTYPE html>
<html lang="en">
<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/thrynd@latest/dist/thrynd.min.css">
</head>
<body class="theme-modern">  <!-- Change this class to switch themes -->
  <div class="container">
    <h1>Hello Thrynd!</h1>
  </div>
</body>
</html>

Dynamic Theme Switching

Switch themes dynamically with JavaScript:

// Switch to neon theme
document.body.className = 'theme-neon';

// Save user preference
localStorage.setItem('theme', 'theme-neon');

// Load saved theme on page load
const savedTheme = localStorage.getItem('theme') || 'theme-modern';
document.body.className = savedTheme;

Theme Characteristics

Each theme customizes:

  • Color Palette: Primary, secondary, success, danger, and warning colors
  • Typography: Font families, sizes, and weights
  • Borders: Border radius and styles
  • Shadows: Shadow depths and styles
  • Backgrounds: Page and component backgrounds
  • Effects: Transitions, animations, and hover states

Component Examples

Here are some components in the current theme (Modern):

Buttons

Alerts

Success! Operation completed successfully
Warning: Please review this information
Error: Something went wrong

Form

Stats

Total Users
12,345
↑ 12%
Revenue
$45.2K
↑ 8.3%
Conversion
3.24%
↓ 2.1%
Explore More: Visit the Interactive Playground to experiment with all themes and components.
← Getting StartedNext: Components →