Skip to main content

Coastal Blues

/* ============================================
   Lovable Theme: Coastal Blues
   Generated from: [URL]
   ============================================ */

:root {
  /* Primary */
  --primary: 226 71% 40%;
  --primary-foreground: 0 0% 98%;

  /* Secondary */
  --secondary: 217 91% 60%;
  --secondary-foreground: 270 4% 21%;

  /* Accent */
  --accent: 213 94% 68%;
  --accent-foreground: 270 4% 21%;

  /* Base */
  --background: 212 96% 78%;
  --foreground: 214 95% 93%;

  /* Card */
  --card: 0 0% 100%;
  --card-foreground: 270 3% 13%;

  /* Popover */
  --popover: 0 0% 100%;
  --popover-foreground: 270 3% 13%;

  /* Muted */
  --muted: 0 0% 97%;
  --muted-foreground: 256 5% 55%;

  /* Destructive */
  --destructive: 26 25% 58%;
  --destructive-foreground: 0 0% 100%;

  /* Border & Input */
  --border: 0 0% 93%;
  --input: 0 0% 93%;
  --ring: 250 4% 71%;

  /* Chart */
  --chart-1: 226 71% 40%;
  --chart-2: 217 91% 60%;
  --chart-3: 213 94% 68%;
  --chart-4: 0 0% 97%;
  --chart-5: 256 5% 55%;
}

.dark {
  /* Primary */
  --primary: 226 71% 40%;
  --primary-foreground: 0 0% 98%;

  /* Secondary */
  --secondary: 217 91% 60%;
  --secondary-foreground: 270 4% 21%;

  /* Accent */
  --accent: 213 94% 68%;
  --accent-foreground: 270 4% 21%;

  /* Base */
  --background: 0 0% 4%;
  --foreground: 0 0% 98%;

  /* Card */
  --card: 240 5% 7%;
  --card-foreground: 0 0% 98%;

  /* Popover */
  --popover: 240 5% 7%;
  --popover-foreground: 0 0% 98%;

  /* Muted */
  --muted: 240 6% 13%;
  --muted-foreground: 240 4% 46%;

  /* Destructive */
  --destructive: 26 25% 58%;
  --destructive-foreground: 0 0% 100%;

  /* Border & Input */
  --border: 240 4% 16%;
  --input: 240 4% 16%;
  --ring: 240 5% 26%;

  /* Chart */
  --chart-1: 226 71% 40%;
  --chart-2: 217 91% 60%;
  --chart-3: 213 94% 68%;
  --chart-4: 240 6% 13%;
  --chart-5: 240 4% 46%;
}

/* ============================================
   Created with love, by www.lovablethemes.app and Jorge Juan
   ============================================ */

💡How to use in Lovable

  1. 1.Copy the CSS code above
  2. 2.In Lovable, go to Settings → Manage Themes
  3. 3.Select Custom and paste the code
  4. 4.Done! Your theme is applied