Skip to content

Latest commit

 

History

History
551 lines (496 loc) · 37 KB

README.md

File metadata and controls

551 lines (496 loc) · 37 KB
Logo

Logo

License badge - BSD-3 clause Version

Publish release badge

NEW ✨ Comments and editor selection colours have been updated to meet WCAG AA standards.

A professional theme with hand-picked & bold colours for your VS Code editor and terminal. The theme is heavily inspired by the Pantone colour of the year 2018 and the Outrun aesthetics. However, colours are on the pastel side to help provide contrast and highlight what is essential. Color choices have taken into consideration what is accessible to people with colorblindness and in low-light circumstances.
A FOSS (Free & Open Source Software) project developed by Tania Allard.
Follow Tania's #FOSS work on GitHub @trallard — Say Hi on Twitter @ixek 👋

✨ If you wish to disable italics, there is now a no-italic theme available. You will have access to both; select Pitaya Smoothie No Italics as your colour theme.

Installation Cog icon

  1. Install Visual Studio Code
  2. Open the extensions' sidebar on Visual Studio Code
  3. Search for Pitaya Smoothie
  4. Click Install to install it.
  5. Click Reload to reload your editor.
  6. Code/File > Preferences > Color Theme > Pitaya Smoothie

Pitaya Smoothie Syntax Colours Marker icon

Outrun aesthetics profoundly inspires this theme. The colour choices for the theme were made also taking into consideration accessibility for those users with colourblindness. By default, the theme is suitable for multiple types of colourblindness - no settings tweaking required.

The theme consists of a reasonably dark background and popping contrast colours. I also made decisions to allow for meaningful contrast for reading comprehension and optimal colour-popping ✨.

USAGE COLOUR HEX CODE
Background #181036
Foreground #fefeff
Comment #8786ac
Keyword #f26196
String #7998F2
Number #f3907e
Built-in constant #CAF884
Constant #A267F5
Other #66E9EC
Diff deleted #FF6E9C
Diff inserted #18c1c4
Diff changed #ffe46b

UI elements colours Code terminal icon

UI ELEMENT HEX CODES
Activity bar background #181036
Activity bar foreground #7A76C2
Activity bar foreground #181036
Sidebar background #130C29
Sidebar section header background #181036
Sidebar section header foreground #7d79d1
Sidebar section header foreground #18c0c4
Deletion highlights #ff6e9c98
Addition highlights #18c1c4a6
Modified highlights #AD70FC46

Snapshots Code editor icon

Python Syntax
Pitaya smoothie italics - Python code demo

✨ Using bracket-style colorizer 👆🏼✨

Pitaya smoothie - R Syntax
Pitaya smoothie italics - R code demo

Pitaya Smoothie -React Syntax
Pitaya smoothie italics - React code

Pitaya Smoothie - cpp Syntax
Pitaya smoothie italics - c++ code demo

Pitaya Smoothie - HTML Syntax Pitaya smoothie italics - HTML code demo

Accessibility Web text icon

Colourblindness

Accessibility was kept close in mind when designing this theme. The colours were chosen such that they would be accessible to folks with colourblindness.

Pitaya Soothie colour palette - simulated for Protanopia, Deuteranopia, and Tritanopia

Badge - python code with Protanopia filter Pitaya Smoothie italics - python code with Protanopia filter

Badge - R code with Tritanopia filter Pitaya Smoothie italics - R code with Tritanopia filter

Colour contrast

Additionally, all the colours used in the theme are compliant with WCAG 2.1 standards.

Background Text
default foreground
#FEFEFF
comments
#8786AC
#F26196
#7998F2
#F3907E
#CAF884
#66E9EC
#B07AFC
diff-changed
#FFE46B
diff-inserted
#18C1C4
diff-deleted
#FF6E9C
#181036
Text
AAA 17.8
Text
AA 5.1
Text
AA 5.9
Text
AA 6.5
Text
AAA 7.8
Text
AAA 14.8
Text
AAA 12.3
Text
AA 6
Text
AAA 14.2
Text
AAA 8.1
Text
AA 6.8
selection and highlight
#231458
Text
AAA 15.8
Text
AA 4.6
Text
AA 5.2
Text
AA 5.7
Text
AA 6.9
Text
AAA 13.1
Text
AAA 11
Text
AA 5.3
Text
AAA 12.6
Text
AAA 7.2
Text
AA 6
AAA Pass, AAA (7+)
AA Pass, AA (4.5+)
AA18 Pass, Large Text Only (3+)
DNP Does Not Pass
About WCAG 2.0 contrast

See the persisent HTML contract grid online

Contributing Hands meeting icon

🚧 This project is always a work in progress, and everyone is welcome and encouraged to collaborate in it. 🚧

Everyone should follow our code of conduct and to check out our contributing guidelines for more information on how to get started.

Preferences shown in the previews Cog with pencil icon

The font in the previews is Fira Code. Editor settings to activate font ligatures:

"editor.fontFamily": "Fira Code",
"editor.fontLigatures": true,

The preview image for the Python syntax is using Bracket Pair Colorizer, a cool extension that highlights matching brackets. Using this extension can help reduce unwanted errors.

I defined the following colours in my settings.json:

"bracket-pair-colorizer-2.colors": [
 "#f18fac", // soft pink
 "#facd49", // golden
 "#c56cf0", // bright lilac
 "#f85e9f" // hot pink
 ]

Pitaya Smoothie in other places Medal icon

You can find Pitaya Smoothie in the following places:

Matplotlib Pitaya Smoothie light demo Matplotlib Pitaya Smoothie dark demo

If you want to port Pitaya Smoothie to other places let us know and we'll add a link to your port and add you to our contributors list ✨💜

License documents

Licensed as BSD-3 ⓒ Tania Allard.

Attributions star