This is Schwifty One Dark a syntax theme based on Atom One Dark. A few differences besides the colors is the addition of italics for certain tokens(i.e. HTML classes, functions, etc...). This helps for reading your code and being able to recognize patterns so you can find things quickly. There are also matching bracket colors to add to your settings so you can easily identify matching brackets and parenthesis. To get full use of italics I added some fonts that would suit you as well as baked them with Firacode ligatures so you get clean fonts and ligatures to have the best-looking syntax. Get Schwifty!
- Open Extensions sidebar panel in VS Code.
View → Extensions
- Search for
Schwifty One Dark
- find the one by decrypteddesign - Click Install to install it.
- Click Reload to reload the your editor
- Code > Preferences > Color Theme > Schwifty One Dark
- Optional: Use the recommended settings below for best experience
- Download (Schwifty-[version].vsix)[https://github.com/mcqua007/schwifty] from repo
- Open terminal and run
code --install-extension [PATH TO]/Schwifty-[version].vsix
- Example of running command from inside the directory containing the Scwhifty
.vsix
package:code --install-extension Schwifty-1.40.1.vsix
With matching brackets
Below is an image of the variant I created of the main Schwifty One Dark theme. You can switch to this variant if you follow the directions above but select Schwifty Purple One Dark
Components styled when Vetur Extension installed
Taiwind apply - has a different style then CSS @ rules (@media,@import, etc...) to make it more readable
*You can take it a step further and install Schwifty theme for fish so your commands etc...also use schwifty theme
This extension used to use Bracket Pair Colorizer extension but VS Code now has it built in nativley,
with 10,000x the performance than the 3rd party extension. Schwifty now nativley themes your brackets you just need
to turn on the bracket matcher in your settings by pasting this line: "editor.bracketPairColorization.enabled": true,
.
To override these colors you can paste the following in your settings and change the hex values:
//There are currently up to 6 bracket colors that can be set editorBracketHighlight.foreground1,2...6
"workbench.colorCustomizations": {
"editorBracketHighlight.foreground1": "#F86AA3",
"editorBracketHighlight.foreground2": "#56cbf9",
"editorBracketHighlight.foreground3": "#9ba2ff",
"editorBracketHighlight.unexpectedBracket.foreground": "#f70582",
}
For those wanting to use the deprecated 'Bracket Pair Colorizer 2' Extension, for matching your brackets.
Paste this in your settings.json
to have the colors match the Schwifty Theme:
"bracket-pair-colorizer-2.colors": ["#f9a571","#56cbf9", "#9ba2ff"]
For Purple variant: "bracket-pair-colorizer-2.colors": [ "#F86AA3", "#56cbf9", "#9ba2ff" ],
Then save, and restart VS code to get matching brackets like above.
I am currenlty using Dank Mono patched w/ Fira Code's Ligatures. I patched these two together with Ligaturizer. Below I have listed some alternatives to the above font and some other cool coding fonts.
-
Paid Alternatives (*I am not affilated with any of the above fonts or companies. )
-
Operator Mono is another great font (though expensive) that you can expand with Fira Code's ligatures using the tool above or I used operator-mono-lig.
-
Cartograph is another decent font. I found a site that sells single variants of it here.
-
-
Free Alternatives
- Plex Mono has a italics variant.
- Ubunut Mono has a italics variant.
- Victor Mono - has italics-script variant & has it's own ligatures.
- Fira Code has no italics version. Below Fira Code is mixed with italics-script fonts
- Fira Code with Pacifco.
- Fire Code with FlottFlott
-
Combined w/ Fira Code Ligatures: I decided to bake Victor Mono, Plex Mono, and Ubuntu Mono with Fira Code Ligatures for all of you.
- Plex Mono Liga
- Ubuntu Mono Liga
- Victor Mono Liga - My Favorite of the 3