Flat-Cap Theme

Flat Cap is a dark, minimalist, and eye-friendly theme for Visual Studio Code, meticulously crafted to provide a comfortable and focused coding experience.

Sintaxis Highlight

Installation

1. Open Visual Studio Code.
2. Go to the Extensions view (Ctrl+Shift+X).
3. Search for Flat Cap.
4. Click Install to apply the theme.
5. Set the theme by going to File > Preferences > Color Theme and selecting Flat Cap.

Philosophy

Flatcap draws inspiration from the fantastic design logic of the Nord theme, embracing its principles of calm, clean aesthetics, and a dimmed pastel color approach. This results in a theme that is both familiar in its minimalist comfort and fresh in its distinct, modern color scheme.

Color Palette

The Flatcap theme is built upon a carefully curated and expanded color palette, designed for granular control and visual harmony across various UI elements and syntax highlighting. The palette is divided into four main categories: Deep Twilight, Dawnlight, Ocean Blues, and Vivid Accents.

Deep Twilight (Dark Backgrounds & Base Elements)

These colors form the foundational layers of a dark interface, creating a sense of depth and focus. They are ideal for establishing a clear visual hierarchy, from the main application window to interactive surfaces.

• Flatcap 0: #121418 - Main Background: The deepest shade, perfect for the primary application background or the editor surface. It makes foreground elements stand out, reducing visual noise and helping the user focus on the content.
• Flatcap 1: #191c22 - Secondary Surfaces: Slightly lighter, this color is ideal for secondary panels like sidebars, tree views, or inactive tabs. It subtly separates auxiliary sections from the main content area without creating a harsh contrast.
• Flatcap 2: #23272f - Elevated Elements & Hover States: Used for surfaces that appear "closer" to the user, such as modal dialogs, pop-up menus, or cards. It also works perfectly as a hover state for elements using Flatcap 1, providing clear interactive feedback.
• Flatcap 3: #303540 - Borders & Dividers: The ideal choice for creating subtle separation. Use it for borders on panels, dividers in lists, or rulers in an editor. It's also excellent for secondary text, like code comments or placeholder hints in input fields, that should be present but not distracting.
• Flatcap 4: #484f5c - Subtle Details & Disabled States: Perfect for UI details that require minimal emphasis, such as subtle drop shadows, scrollbar tracks, or the background of a disabled button. It can also be used for highly muted, non-essential text.

Dawnlight (Light Text & UI Elements)

This group provides the clean, legible text and bright surfaces essential for a comfortable reading experience and a crisp, modern look in both dark and light themes. The tonal progression has been softened to offer a more delicate and refined contrast.

• Flatcap 5: #b2b6bf - Low-Priority & Hint Text: This darker, subtle shade is perfect for non-essential text like metadata, timestamps, or breadcrumbs. Its low contrast makes it ideal for information that should be available without drawing attention.
• Flatcap 6: #bfc2ca - Secondary Text & Comments: A medium-contrast color, excellent for secondary text, descriptions, or code comments. It's clearly legible but distinct from the main text, helping to establish an informational hierarchy.
• Flatcap 7: #cbced5 - Primary Text: The standard for all primary body text in a dark interface. It offers exceptional readability against the Deep Twilight backgrounds without causing eye strain, striking a perfect balance between clarity and comfort.
• Flatcap 8: #d8dadf - Highlight Text & Titles: Used to give prominence to headings, titles, or active menu items. Its added brightness sets it apart as an element of higher importance. In a light theme, it serves as an excellent base background.
• Flatcap 9: #e4e6e9 - High-Impact Text & Focus Accents: Reserved for the most important text elements or for the hover state on interactive text. Its maximum brightness ensures high visibility and can be used for high-contrast accents, like the fill of an active checkbox.

Ocean Blues (Primary UI Components & Syntax)

This family of blues brings a calm yet confident energy to the interface. These colors are the primary actors, guiding the user's attention to interactive elements and making the UI feel responsive and intuitive.

• Flatcap 10: #5e81ac - Subtle Actions & Informational Icons: A darker, more reserved blue ideal for secondary buttons, informational icons, or unselected tabs. It indicates interactivity without demanding immediate attention.
• Flatcap 11: #81a1c1 - Primary Buttons & Links: The quintessential color for primary actions. Use it for "Submit", "Save", or "Apply" buttons. It's also perfect for hyperlinks within text, providing a clear visual cue for navigation.
• Flatcap 12: #88c0d0 - Selection & Focus Highlights: A brighter, more distinct blue perfect for highlighting selected items in a list, the active line in a code editor, or the border of a focused input field. It clearly communicates "what's currently active."
• Flatcap 13: #8fbcbb - Active States & Progress Indicators: This vibrant, almost turquoise blue is excellent for the active state of a toggle switch, a pressed button, or a progress bar. It draws the eye and confirms an action is underway or a state is "on."
• Flatcap 14: #95b1b0 - Decorative Accents & Subtle Backgrounds: A soft, ethereal blue perfect for decorative elements like notification dots, subtle background highlights for the "featured" section of a card, or the glow effect on a focused element.

Vivid Accents (States & Special Syntax)

A palette of expressive colors used to communicate important states and draw attention to critical information. They should be used purposefully to ensure their impact is not diluted.

• Flatcap 15: #ff70a6 - Errors & Deletion: Use for form validation errors, failed connection messages, or the background of a "Delete" confirmation button. It immediately signals a problem or a destructive action.
• Flatcap 16: #ffd670 - Warnings & Attention: Ideal for warning notifications, highlighting potentially risky actions, or indicating that a feature is in "beta." It urges caution without being as alarming as the error color.
• Flatcap 17: #84dcc6 - Success & Confirmation: Perfect for success messages ("Your changes have been saved"), validation checkmarks, or confirming a successful transaction. It provides positive reinforcement to the user.
• Flatcap 18: #68b6ef - Informational Tips & New Features: A friendly, neutral color for informational alerts, "did you know?" tips, or highlighting a new feature. It invites discovery without interrupting the user's workflow.
• Flatcap 19: #00a8e0 - Key Syntax & Call-to-Action: A vibrant cyan that serves as a powerful accent. Use it to highlight the most important keywords in code, or for a special call-to-action button that needs to stand out from the primary blue actions.

Recommended Settings

For the best experience, I recommend using a font that supports ligatures, such as Fira Code or JetBrains Mono. You can enable ligatures in your settings.json:

{
  "editor.fontFamily": "'Fira Code', 'JetBrains Mono', Consolas, 'Courier New', monospace",
  "editor.fontLigatures": true
}