Theme System

MYMUSICK includes two distinct visual themes, each with its own design philosophy and use case. Both themes share the same component structure but differ in color schemes, typography, and overall aesthetic.

Original Theme

Bold, vibrant design with Gyanko custom font

Formal Theme

Modern, sophisticated late-night vinyl lounge aesthetic

Theme Comparison

Original Theme
Formal Theme

Design Philosophy

The original theme (estilooriginal.css) features a bold, energetic aesthetic designed for music enthusiasts who want a vibrant, eye-catching interface.

Key Characteristics

Custom Typography: Gyanko font for brand identity
High Contrast: Bright accent colors against dark backgrounds
Playful Interactions: Scale transforms and bold hover effects
Compact Layout: Sidebar-focused navigation

Color Palette

:root {
  --primary: #04CDA8;    /* Teal primary */
  --accent: #FF5757;     /* Coral accent */
  --bg-dark: #111;       /* Dark background */
  --text-light: white;   /* Light text */
}

Typography Stack

@font-face {
  font-family: 'Gyanko';
  src: url("fonts/gyanko-regular.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
}

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.title, .bttlg, .sidebar a {
  font-family: 'Gyanko', sans-serif;
}

Layout Specifications

Header Height: 150px minimum
Sidebar Width: 170px fixed
Player Height: 80px fixed
Border Radius: 15px-25px (rounded)

Design Philosophy

The formal theme (estiloformal2.css) embodies a late-night vinyl lounge aesthetic with sophisticated design patterns and modern web technologies.

Key Characteristics

Professional Typography: Bebas Neue (display) + DM Sans (body)
Subtle Interactions: Glass morphism and smooth transitions
Modern Layout: CSS Grid for responsive cards
Texture & Depth: SVG noise texture overlay

Color Palette

:root {
  --bg:           #0b0c0f;                    /* Deep background */
  --surface:      #111318;                    /* Card surface */
  --surface2:     #181b22;                    /* Elevated surface */
  --border:       rgba(255,255,255,0.07);     /* Subtle border */
  --accent:       #e8ff47;                    /* Neon yellow accent */
  --accent2:      #ff5c5c;                    /* Secondary coral */
  --text:         #e8e6df;                    /* Warm text */
  --muted:        #6b6b72;                    /* Muted text */
  --glow:         rgba(232,255,71,0.18);      /* Accent glow */
}

Typography Stack

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=DM+Sans:ital,wght@0,300;0,400;0,500;1,300&display=swap');

:root {
  --font-display: 'Bebas Neue', sans-serif;
  --font-body:    'DM Sans', sans-serif;
}

body {
  font-family: var(--font-body);
  font-size: 15px;
}

.title, .intxt, .login-form h3 {
  font-family: var(--font-display);
}

Layout Specifications

Header Height: 68px (compact)
Sidebar Width: 220px with fixed positioning
Player Height: 90px
Border Radius: 8px-40px (context-dependent)

Advanced Features

/* Glass morphism header */
header {
  background: rgba(11,12,15,0.88);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

/* SVG noise texture */
body {
  background-image: url("data:image/svg+xml,%3Csvg...");
}

/* Smooth animations */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

Component Style Differences

Header Styles

header {
  display: flex;
  justify-content: space-around;
  align-items: center;
  min-height: 150px;
  padding: 0 20px;
  background: var(--primary);  /* Solid teal */
  box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}

.title {
  font-family: 'Gyanko', sans-serif;
  font-size: 40px;
  letter-spacing: 2px;
  color: var(--accent);  /* #FF5757 */
}

Button Styles

.bttlg {
  width: 120px;
  height: 40px;
  border-radius: 25px;
  border: 2px solid var(--accent);
  background: black;
  color: white;
  font-family: 'Gyanko', sans-serif;
}

.bttlg:hover {
  background: white;
  color: black;
  transform: scale(1.05);
}

Song Card Styles

.song {
  min-width: 160px;
  padding: 12px;
  background: var(--bg-dark);
  border-radius: 15px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.song:hover {
  background: #1e1e1e;
  border-color: var(--accent);
  transform: translateY(-6px);
}

Responsive Behavior

Original
Formal

@media (max-width: 600px) {
  header {
    flex-direction: column;
    gap: 15px;
    padding: 20px;
  }

  .sidebar {
    display: none;
  }

  #results {
    margin-left: 0;
    padding: 10px;
  }

  .title {
    font-size: 28px;
  }
}

@media (max-width: 768px) {
  :root {
    --sidebar-w: 0px;
    --header-h: 120px;
  }

  header {
    flex-direction: column;
    height: auto;
    padding: 16px 20px;
  }

  #results {
    grid-template-columns: 1fr;
  }
}

Switching Themes

Update HTML Link

Change the CSS file reference in your HTML:

<!-- Original Theme -->
<link rel="stylesheet" href="estilooriginal.css">

<!-- Formal Theme -->
<link rel="stylesheet" href="estiloformal2.css">

No Code Changes Required

Both themes use the same HTML structure and class names, so no JavaScript or markup changes are needed.

Verify Font Loading

Original: Ensure fonts/gyanko-regular.otf is available
Formal: Google Fonts loads automatically

Both themes maintain identical functionality and component structure. The only differences are visual styling, color schemes, and typography.

Best Practices

Use Original For

Music streaming apps
Entertainment platforms
Youth-oriented services
High-energy brands

Use Formal For

Professional audio tools
B2B music services
Corporate deployments
Modern web applications

Do not mix CSS custom properties from both themes. Each theme should be loaded independently.

Get Started

Features

Styling

Development

Themes

Theme System

Original Theme

Formal Theme

Theme Comparison

Design Philosophy

Key Characteristics

Color Palette

Typography Stack

Layout Specifications

Design Philosophy

Key Characteristics

Color Palette

Typography Stack

Layout Specifications

Advanced Features

Component Style Differences

Header Styles

Button Styles

Song Card Styles

Responsive Behavior

Switching Themes

Best Practices

Use Original For

Use Formal For

Build docs developers (and LLMs) love

Get Started

Features

Styling

Development

​Theme System

Original Theme

Formal Theme

​Theme Comparison

​Design Philosophy

​Key Characteristics

​Color Palette

​Typography Stack

​Layout Specifications

​Design Philosophy

​Key Characteristics

​Color Palette

​Typography Stack

​Layout Specifications

​Advanced Features

​Component Style Differences

​Header Styles

​Button Styles

​Song Card Styles

​Responsive Behavior

​Switching Themes

​Best Practices

Use Original For

Use Formal For

Build docs developers (and LLMs) love

Theme System

Theme Comparison

Design Philosophy

Key Characteristics

Color Palette

Typography Stack

Layout Specifications

Design Philosophy

Key Characteristics

Color Palette

Typography Stack

Layout Specifications

Advanced Features

Component Style Differences

Header Styles

Button Styles

Song Card Styles

Responsive Behavior

Switching Themes

Best Practices