Giter Club home page Giter Club logo

mcqua007 / schwifty Goto Github PK

View Code? Open in Web Editor NEW
10.0 2.0 0.0 39.34 MB

Schwifty, a simple VS Code theme based on Atom One Dark Theme. As you will find the colors are a bit different. That's it and that's all. Get schwifty!

Home Page: https://marketplace.visualstudio.com/items?itemName=decrypteddesign.Schwifty

License: MIT License

matching-brackets theme vscode-theme vscode-extension atom atom-one-dark schwifty victor-mono italics-variant schwifty-theme

schwifty's Introduction

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 ScreenShot one

Schwifty Purple One Dark ScreenShot purple

Schwifty Atom One Dark screenshot atom

Schwifty One Dark

ScreenShot

ScreenShot

ScreenShot

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

Purple

Shown with php

Purple php

Components styled when Vetur Extension installed

Purple Vetur Component Style

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

ScreenShot

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

Svelte Head Tag ScreenShot

Svelte Components ScreenShot

Svelte Each block ScreenShot

Schwifty styles VS Code Terminal

Output from pnpm install ScreenShot

Output from nuxt dev server ScreenShot

*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
  • 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

ScreenShot

schwifty's People

Contributors

mcqua007 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.