Skip to content

theme.md

Latest commit

 

History

History
34 lines (26 loc) · 2.18 KB

theme.md

File metadata and controls

34 lines (26 loc) · 2.18 KB

Sonar IDE Website Color Palette

Here is the complete color palette for the Sonar IDE website's Aurora Borealis theme, providing a calming but energetic glowing emerald-to-sapphire gradient.

🌌 Primary Accent Colors (Aurora Borealis)

These are used for buttons, links, active states, and glowing gradients.

  • Primary Base: emerald-500 (#10b981) - Used for badges, pulses, and dark mode buttons.
  • Action Default (Light): emerald-600 (#059669) - Used for primary buttons and text emphasis in light mode.
  • Action Hover (Light): emerald-700 (#047857) - Used for hover states on primary buttons.
  • Secondary/Gradient Transition: cyan-500 (#06b6d4) - Used alongside emerald to create that smooth shiny gradient (like the Aurora Borealis) on hero text and UI accents.

🌙 Dark Mode Theme (Calm & Premium)

A deep, dark slate theme designed to make the bright green/cyan gradients pop beautifully without straining the eyes.

  • Main Background: #0f172a (Deep Slate) - The absolute background canvas.
  • Surface/Card Background: #1e293b or #334155 - Used for the feature cards, panels, and active backgrounds.
  • Borders & Dividers: white/5 to white/10 (Translucent white) - Creates subtle depth without harsh light lines.
  • Primary Text: slate-50 (#f8fafc) - Used for headings.
  • Secondary Text: slate-400 (#94a3b8) - Used for paragraphs and descriptions.
  • Subtle Highlights: emerald-500/10 - Used for the glowing background behind icons.

☀️ Light Mode Theme (Clean & Crisp)

A high-contrast, universally accessible mode complementing the emerald aesthetic.

  • Main Background: white (#ffffff) - The primary canvas.
  • Surface/Section Background: slate-50 (#f8fafc) to slate-100 (#f1f5f9) - Used for alternating sections or feature cards.
  • Borders & Dividers: slate-200 (#e2e8f0) - Clean, soft borders matching standard modern UI trends.
  • Primary Text: slate-900 (#0f172a) - Used for heavy contrast headings.
  • Secondary Text: slate-600 (#475569) - Used for readable paragraph text.
  • Subtle Highlights: emerald-50 (#ecfdf5) - Used for soft badge backgrounds.

Generated for the Sonar-Code-Editor SvelteKit documentation site and Main Electron App.