Schwifty

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!

Installation

Install Via VS Code GUI

1. Open Extensions sidebar panel in VS Code. View → Extensions
2. Search for Schwifty One Dark - find the one by decrypteddesign
3. Click Install to install it.
4. Click Reload to reload the your editor
5. Code > Preferences > Color Theme > Schwifty One Dark
6. Optional: Use the recommended settings below for best experience

Install Using the command line

1. Download (Schwifty-[version].vsix)[https://github.com/mcqua007/schwifty] from repo
2. 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

Screenshots

Schwifty One Dark

Schwifty Purple One Dark

Schwifty Atom One Dark

Schwifty One Dark

With matching brackets

Schwifty Purple One Dark (Variant)

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

Shown with php

Components styled when Vetur Extension installed

Taiwind apply - has a different style then CSS @ rules (@media,@import, etc...) to make it more readable

Svelte Custom Styles (When you have the Svelte for Vs Code extension installed)

Svelte Head Tag

Svelte Components

Svelte Each block

Schwifty styles VS Code Terminal

Output from pnpm install

Output from nuxt dev server

*You can take it a step further and install Schwifty theme for fish so your commands etc...also use schwifty theme

Setup Matching Brackets

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.

What Font am I using ?

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. )

  1. 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.

  2. Cartograph is another decent font. I found a site that sells single variants of it here.

• Free Alternatives

  1. Plex Mono has a italics variant.
  2. Ubunut Mono has a italics variant.
  3. Victor Mono - has italics-script variant & has it's own ligatures.
  4. 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.

  1. Plex Mono Liga
  2. Ubuntu Mono Liga
  3. Victor Mono Liga - My Favorite of the 3

This guy gets it