Home

Awesome

Enfocado for VS Code

Banner

License Badge README Style Badge Preview in vscode.dev

Enfocado is more than a theme, it is a concept of "how themes should be", focusing on what is really important to developers: the code and nothing else.

What you won't have if you don't install Enfocado:

<div align="center"> <img src="https://raw.githubusercontent.com/wuelnerdotexe/enfocado/main/assets/vscode-dark-nature.png"> <img src="https://raw.githubusercontent.com/wuelnerdotexe/enfocado/main/assets/vscode-light-nature.png"> <strong>Nature:</strong> go for the <code>nature</code> style if you are a minimalist developer who is always <strong>connected to nature</strong>. </div> <br /> <div align="center"> <img src="https://raw.githubusercontent.com/wuelnerdotexe/enfocado/main/assets/vscode-dark-neon.png"> <img src="https://raw.githubusercontent.com/wuelnerdotexe/enfocado/main/assets/vscode-light-neon.png"> <strong>Neon:</strong> go for the <code>neon</code> style if you are an outgoing developer that is always <strong>surrounded by RGBs</strong>. </div>

Installation

  1. Go to VS Marketplace.
  2. Click on the "Install" button.
  3. Then select a theme:
    • Enfocado Light Nature
    • Enfocado Light Neon
    • Enfocado Dark Nature
    • Enfocado Dark Neon
  4. Lastly, rate us !! we are eager to hear your priceless review. ✨

Usage

Syntax

Master your theme, understand and recognize minimal syntax, improve your muscle memory.

SELENIZED COLORHEX COLORHEX COLOR (light)TEXT TYPENATURE SYNTAX TOKENSNEON SYNTAX TOKENS
Dimmed#777777#878787ItalicCommentsComments
Foreground 0#b9b9b9#474747NONEConstants, punctuation, textConstants, punctuation, text
Foreground 1#dedede#282828BoldTitlesTitles
Red#ed4a46#d6000cNONENot used in the syntaxNot used in the syntax
Yellow#dbb32d#c49700NONEConstant and readonly identifiersConstant and readonly identifiers
Green#70b433#1d9700NONEIdentifiersLanguage identifiers
Blue#368aeb#0064e4NONEKeywordsSupport keywords
Magenta#eb6eb7#dd0f9dNONELanguage identifiersIdentifiers
Cyan#3fc5b7#00ad9cNONEStringsStrings
Orange#e67f43#d04a00NONEExceptions (trycatch)Exceptions (trycatch)
Violet#a580e2#7f51d6NONESupport keywordsKeywords
Bright red#ff5e56#bf0000BoldErrorsErrors
Bright yellow#efc541#af8500NONENot used in the syntaxNot used in the syntax
Bright green#83c746#008400ItalicMethodsLanguage methods
Bright blue#4f9cfe#0054cfBoldTypesSupport types
Bright magenta#ff81ca#c7008bItalicLanguage methodsMethods
Bright cyan#56d8c9#009a8aUnderlineLinksLinks
Bright orange#fa9153#ba3700NONENot used in the syntaxNot used in the syntax
Bright violet#b891f5#6b40c3BoldSupport typesTypes

DISCLAIMER: Enfocado doesn't customize individual tokens for each language, it just defines the default base, if your syntax doesn't look as described here, it's not our responsibility, it's the responsibility of those who assign wrong tokens to some language's syntax, and we don't correct those problems constantly.

Recommendations

Settings

For the best Enfocado experience, I recommend adding this setting to your VS Code settings.json file:

// ENFOCADO INDISTRACTABLE SETUP: {{{

// Clean the editor of useless stuff.
"window.menuBarVisibility": "compact",
"editor.renderLineHighlight": "none",
"editor.minimap.enabled": false,
"breadcrumbs.enabled": true,
"breadcrumbs.filePath": "off",

// Disable unseless icons.
"workbench.editor.showIcons": false,
"workbench.editor.tabSizing": "shrink",

// Disable explorer and tabs colors in filenames.
"explorer.decorations.colors": false,
"workbench.editor.decorations.colors": false,

// Enable explorer and tabs colors in filename's badges.
"explorer.decorations.badges": true,
"workbench.editor.decorations.badges": true,

// Enable semantic highlighting syntax.
"editor.semanticHighlighting.enabled": true,

// Enable bracket pair colorization.
"editor.bracketPairColorization.enabled": true,

// Enable indent lines with colorization pairs.
"editor.guides.indentation": true,
"editor.guides.bracketPairs": true,

// Show only trailing whitespaces.
"editor.renderWhitespace": "trailing",

// Customize only the editor font to make it stand out from the rest.
"editor.fontSize": 18,
"editor.fontWeight": "500",
"editor.letterSpacing": 1.2,
"editor.lineHeight": 1.8,

// Lastly and most importantly, enable Enfocado theme and enjoy coding.
"workbench.preferredLightColorTheme": "Enfocado Light {Nature or Neon}",
"workbench.preferredDarkColorTheme": "Enfocado Dark {Nature or Neon}",
"workbench.colorTheme": "Enfocado {Light or Dark} {Nature or Neon}",
// Choose only one option inside the curly braces and then delete them.

// }}}

Fonts

In order for the Human Writing simulation to work as it should, I recommend that you use either of these three beautiful fonts, which align with the "Mankind and Machine" concept.

Extensions

Extras

Maintainer

Hi 👋, I'm Wuelner, a software developer from Guatemala, passionate about creating minimalist solutions using solid fundamentals focused on "how things should be".

Contributing

All your ideas and suggestions are welcome! 🙌

Let me see your captures and let me know what you think with the hashtag #HowThemesShouldBe. 👀

And of course, if you want to motivate me to constantly improve this theme, your donations are welcome at PayPal. 👉👈

Credits

License

MIT © Wuelner Martínez.

<p align="center">¡With 💖 from <strong>LATAM</strong> to the world!</p>