Fitz Dark Italic Theme for VS Code

Fitz Dark Italic Theme for VS Code
- Setup
- Theme Details
  - Highlights
  - Colors
- Getting Started
  - Installation
- Contributing
- Versioning
- Authors
- License
- Acknowledgments
- Notes
- Todo
- FAQ

Preview

Setup

(for screen shot above)

Fitz Dark Italic Theme
Material Icon Theme
Sublime Babel !important: adds extra token definitions that are colored by the theme
Rainbow Brackets
indent-rainbow
Fura Code Nerd Font in editor (Also looks great with Operator Mono)
Hack Nerd Font in Terminal

Theme Details

Highlights

30 different color shades used
Distinct colors for JSON levels (to 16 levels deep)
add-on CSS file for:
- Dirty (unsaved) tab red dot
- Active tab top border
- Minimap vertical borders

Colors

Grayscale

#1e1e1e
- UI
  - main background
  - active tab background
  - terminal background
  - terminal black (00)
- Syntax
  - Global
    - N/A
#3c3c3c
- UI
  - secondary background
  - inactive indent guides
  - terminal bright black (08)
- Syntax
  - Global
    - N/A
#555555
- UI
  - hover background
  - drop background
- Syntax
  - Global
    - N/A
#777777
- UI
  - editor whitespace
  - git decoration - ignored
- Syntax
  - Global
    - comments
#c3c3c3
- UI
  - selection background
  - terminal white (07)
- Syntax
  - Global
    - strings
  - Markdown
    - quotes
#e1e1e1
- UI
  - editor foreground
  - editor selection background
  - terminal foreground
  - terminal bright white (15)
- Syntax
  - Global
    - text
  - INI
    - source
  - Markdown
    - paragraph
  - Shell
    - logical expression

Chromatic

#f9690e
- UI
  - git merge common
  - git decoration - modified
- Syntax
  - Global
    - property name support types
  - JSON
    - level 2 keys
  - Powershell
    - script blocks
#f39c12
- UI
  - N/A
- Syntax
  - Global
    - support types
    - other variables
  - JSON
    - level 11 keys
  - Python
    - item access
#f0f040
- UI
  - terminal yellow (06)
  - git decoration - un-tracked
- Syntax
  - Global
    - section name entities
    - arithmetic operator keywords
    - assignment operator keywords
    - logical operator keywords
    - arrow function storage type
    - variable punctuation variable
  - CSS
    - id attribute name entities
  - JSON
    - level 4 keys
  - Markdown
    - level 3 headings
#fcf270
- UI
  - input foreground
  - terminal bright yellow (14)
- Syntax
  - Global
    - attribute name entities
  - JS
    - object properties
  - JSON
    - level 13 keys
  - TS
    - object properties
  - Markdown
    - level 6 headings
#28a228
- UI
  - git merge current
- Syntax
  - Global
    - class name entities
    - inherited class entities
    - support classes
    - class variables
  - JS
    - class constructor function
  - JSON
    - level 6 keys
#76ff76
- UI
  - N/A
- Syntax
  - Global
    - type name entities
  - CSS
    - class attribute name entities
#20df20
- UI
  - terminal green (02)
- Syntax
  - Global
    - braces
    - punctuation
  - Markdown
    - quote definition punctuation
    - list definition punctuation
    - separator
#9cff4c
- UI
  - active tab borders
  - cursor
  - line highlight
  - terminal bright green (10)
- Syntax
  - Global
    - function / method name entities
    - support functions
  - JSON
    - level 15 keys
#0047ff
- UI
  - git merge incoming
- Syntax
  - Global
    - new operator keyword
  - JSON
    - level 9 keys
#22a7ff
- UI
  - N/A
- Syntax
  - Global
    - other constants
    - markup fenced code block language
    - markup raw
    - markup raw inline
    - support constants
  - CSS
    - property values
  - JS
    - object properties
  - JSON
    - level 16 keys
  - Markdown
    - fenced code block embedded block
    - link titles
  - TS
    - object properties
#0080ff
- UI
  - terminal blue (01)
- Syntax
  - Global
    - tag name entities
    - storage modifiers
    - storage types
  - CSS
    - tag name entities
  - HTML
    - embedded attribute name entities
  - JSON
    - level 1 keys
#80beff
- UI
  - widget shadows
  - button backgrounds
  - horizontal borders
  - terminal bright blue (09)
- Syntax
  - Global
    - character constants
  - JSON
    - level 10 keys
  - Markdown
    - level 5 headings
#23d6f1
- UI
  - terminal cyan (03)
  - git decoration - submodule
- Syntax
  - Global
    - control keywords
    - operator keywords
    - markup underlined link
  - JSON
    - level 3 keys
  - Markdown
    - link reference
#00ffff
- UI
  - activity bar icons
  - line numbers
  - terminal bright cyan (11)
- Syntax
  - Global
    - other keywords
  - JSON
    - level 12 keys
  - Markdown
    - level 2 headings
  - PHP
    - variable definition punctuation
#804bff
- UI
  - terminal magenta (05)
  - git decoration - conflicting
- Syntax
  - Global
    - parameter variables
  - JS
    - function arguments
  - JSON
    - level 5 keys
  - Python
    - function arguments
#877fff
- UI
  - vertical borders
  - editor rulers
  - extension buttons
  - terminal bright magenta (13)
- Syntax
  - Global
    - fenced code blocks
  - JSON
    - level 14 keys
#e13b74
- UI
  - N/A
- Syntax
  - Global
    - language variables
    - read-write variables
  - JSON
    - level 7 keys
  - Python
    - item access arguments
  - Shell
    - scope group
#e26a9b
- UI
  - N/A
- Syntax
  - Global
    - numeric constants
#ff7fff
- UI
  - terminal red (04)
  - git decoration - deleted
- Syntax
  - Global
    - logical operator keywords
  - JSON
    - level 8 keys
  - Markdown
    - level 1 headings
#ffb3ff
- UI
  - badges
  - active line number
  - active indent guide
  - widget borders
  - terminal bright red (12)
  - terminal selection background
  - terminal cursor
- Syntax
  - Global
    - language constants
  - Markdown
    - level 4 headings

Validation

#00ff00
- UI
  - info
- Syntax
  - Global
    - info tokens
#ffa500
- UI
  - warnings
- Syntax
  - Global
    - warning tokens
#ff0000
- UI
  - errors
- Syntax
  - Global
    - invalid
    - error tokens
#ffff00
- UI
  - debug
- Syntax
  - Global
    - debug tokens

Opacity Levels

00 11 22 33 44 55 66 77 88 99 aa bb cc dd ee ff

Getting Started

Installation

Install & launch Visual Studio Code
Choose "Extensions" from menu
Search for vscode-theme-fitz-dark-italic
Click "Install" to install it
Click "Reload" to reload Visual Studio Code
Navigate to "File" > "Preferences" > "Color Theme" > "Fitz Dark Italic"

Contributing

Please read CONTRIBUTING.md for the process of filing an issue or submitting a pull request. For details on our code of conduct, read CODE_OF_CONDUCT.md.

Versioning

We use SemVer for versioning. For the versions available, see the tags on this repository.

Authors

Shea Fitzek - Initial work - sheafitzek

See also the list of contributors who participated in this project.

License

This project is licensed under the MIT License - see the LICENSE.md file for details

Acknowledgments

I took a lot of inspiration and borrowed from the Cobalt2 & Night Owl themes. Also Sarah Drasner's post Creating a VS Code Theme on CSS Tricks helped a ton to just get up and going.

Notes

This palette was selected not because I think these are all the best colors in an aesthetic sense, but because I wanted as many colors as possible for tokens while still being able to tell them apart if they are side by side or on top of one another. I'm sure there are some better colors that could be plugged in while still achieving the contrast I'm looking for, so feel free to send a pull request. You can play with the palette over on colourco.de. You will have to copy & paste this url into your browser to get it to pull up:

https://colourco.de/none/%23f9690e%2C%23f39c12%2C%23f0f040%2C%23fcf270%2C%2328a228%2C%2376ff76%2C%2320df20%2C%239cff4c%2C%230047ff%2C%2322a7ff%2C%230080ff%2C%2380beff%2C%2323d6f1%2C%2300ffff%2C%23804bff%2C%23877fff%2C%23e13b74%2C%23e26a9b%2C%23ff7fff%2C%23ffb3ff/

All braces / brackets have been left the same color as punctuation because I use the Rainbow Brackets extension (link above) to color them.
There is a demo folder in the repo with sample files for many different languages for testing purposes, but I mainly just use HTML, CSS, JavaScript, JSON, React & Markdown, so I'm sure some of the coverage is missing in the other languages. If you see any red tokens that aren't invalid, open up the command palette (Ctrl + Shift + P) and use the Developer: Inspect TM Scopes command to check them out. If the color comes up as #ff1111, then there is missing coverage. File an issue and please make sure to indicate whether or not you have the Sublime Babel extension installed. Then paste a snippet of the code at the end of the corresponding language file in the demo folder and make a pull request.
To use the add-on CSS file, see Custom CSS and JS Loader.

Todo

[ ] figure out how to change whitespace tab character

FAQ

None yet...

Fitz Dark Italic

Shea Fitzek