pitaya_smoothie

KO | EN

gitlite — search

#javascript #hacktoberfest #ai #typescript #go #android #machine-learning #deep-learning #nodejs #macos #java #windows #ios #openai

pitaya_smoothie

(★ 48)

🦄✨Pitaya smoothie — A professional theme with hand-picked colours, heavily inspired by the Pantone colour of the year 2018.

pitaya_smoothie 최신버젼 다운로드

최종 버전 다운로드 (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

![License badge - BSD-3 clause](https://img.shields.io/badge/License-BSD%203--Clause-gray.svg?colorA=2D2A56&colorB=7A76C2&style=flat.svg)
[![Version](https://vsmarketplacebadge.apphb.com/version/trallard.pitaya-smoothie.svg?subject=Pitaya%20Smoothie&colorA=2D2A56&colorB=7A76C2&style=flat.svg)](https://marketplace.visualstudio.com/items?itemName=trallard.pitaya-smoothie)

![Publish release badge](https://github.com/trallard/pitaya_smoothie/workflows/Publish%20release/badge.svg?branch=main)

![NEW](https://img.shields.io/badge/-NEW-gray.svg?colorB=12CBC4) ✨ Comments and editor selection colours have been updated to meet WCAG AA standards.

<table width='100%' align="center">
 <tr>
 <td align='left' width='100%' colspan='2'>
 A professional theme with hand-picked & bold colours for your <a href="https://code.visualstudio.com/?WT.mc_id=academic-0000-taallard" target="_blank"> VS Code </a> editor and terminal. The theme is heavily inspired by the <a href="https://www.pantone.com/color-intelligence/color-of-the-year/color-of-the-year-2018">Pantone colour of the year 2018</a> 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.
 </td>
 </tr>
 <tr>
 <td>
 A FOSS (Free & Open Source Software) project developed by <a href='https://github.com/trallard' target="_blank">Tania Allard</a>.
 </td>
 <td align='center'>
 <a target="_blank" href='https://bitsandchips.me/'>
 <img src='https://img.shields.io/badge/%E2%86%92-TANIA%20ALLARD-gray.svg?colorA=2D2A56&colorB=7A76C2&style=flat' width='100' />
 </a>
 </td>
 </tr>
 <tr><td><sup> Follow Tania's #FOSS work on GitHub <a href='https://github.com/trallard'>@trallard</a> — Say Hi on Twitter <a href="https://twitter.com/ixek/">@ixek</a></sup></td><td align='center'> <a target="_blank" href='https://bitsandchips.me/'>👋 </a></td></tr>
</table>

✨ 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 <img alt="Cog icon" src="./images/icons/settings.png" width="50"/>

1. Install [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-0000-taallard)
1. Open the extensions' sidebar on Visual Studio Code
1. Search for `Pitaya Smoothie`
1. Click **Install** to install it.
1. Click **Reload** to reload your editor.
1. Code/File ＞ Preferences ＞ Color Theme ＞ **Pitaya Smoothie**

## Pitaya Smoothie Syntax Colours <img alt="Marker icon" src="./images/icons/highlighter.png" width="50" />

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 <img alt="Code terminal icon" src="./images/icons/browser.png" width="50" />

| 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 <img alt="Code editor icon" src="./images/icons/code.png" width="50" />

![Python Syntax](https://img.shields.io/badge/SYNTAX-Python-gray.svg?colorA=2D2A56&colorB=7A76C2&style=flat.svg)
</br>
<img alt="Pitaya smoothie italics - Python code demo" src="./images/demos/python.png"/>

✨ Using bracket-style colorizer 👆🏼✨

![Pitaya smoothie - R Syntax](https://img.shields.io/badge/SYNTAX-R-gray.svg?colorA=2D2A56&colorB=7A76C2&style=flat.svg)
</br>
<img alt="Pitaya smoothie italics - R code demo" src="./images/demos/R.png"/>

![Pitaya Smoothie -React Syntax](https://img.shields.io/badge/SYNTAX-React-gray.svg?colorA=2D2A56&colorB=7A76C2&style=flat.svg)
</br>
<img alt="Pitaya smoothie italics - React code" src="./images/demos/react.png"/>

![Pitaya Smoothie - cpp Syntax](https://img.shields.io/badge/SYNTAX-c++-gray.svg?colorA=2D2A56&colorB=7A76C2&style=flat.svg)
</br>
<img alt="Pitaya smoothie italics - c++ code demo" src="./images/demos/cpp.png"/>

![Pitaya Smoothie - HTML Syntax](https://img.shields.io/badge/SYNTAX-HTML-gray.svg?colorA=2D2A56&colorB=7A76C2&style=flat.svg)
<img alt="Pitaya smoothie italics - HTML code demo" src="./images/demos/html.png"/>

</div>

## Accessibility <img alt="Web text icon" src="./images/icons/access.png" width="50" />

### 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.
<div align="center">
<img alt="Pitaya Soothie colour palette - simulated for Protanopia, Deuteranopia, and Tritanopia" src="./images/access/Coloring_for_Colorblindness.png" width="300" />

![Badge - python code with Protanopia filter](https://img.shields.io/badge/PROTANOMALY-Python-gray.svg?colorA=2D2A56&colorB=7A76C2&style=flat.svg)
<img alt="Pitaya Smoothie italics - python code with Protanopia filter" src="./images/demos/python-protanomaly.png"/>

![Badge - R code with Tritanopia filter](https://img.shields.io/badge/TRITANOPIA-R-gray.svg?colorA=2D2A56&colorB=7A76C2&style=flat.svg)
<img alt="Pitaya Smoothie italics - R code with Tritanopia filter" src="./images/demos/R-tritanopia.png"/>

</div>

### Colour contrast

Additionally, all the colours used in the theme are compliant with [WCAG 2.1 standards](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html).

<div class="es-contrast-grid es-contrast-grid--compact">
    <div class="es-contrast-grid__inner">
        <table class="es-contrast-grid__table">
            <thead>
                <tr class="es-contrast-grid__foreground-key">
                    <th>
                        <div class="es-contrast-grid__key-swatch-spacer">
                            <span class="es-contrast-grid__key-swatch-label es-contrast-grid__key-swatch-label--background">Background</span>
                            <span class="es-contrast-grid__key-swatch-label es-contrast-grid__key-swatch-label--text">Text</span>
                        </div>
                    </th>
                    <th class="es-contrast-grid__foreground-key-cell">
                        <div class="es-contrast-grid__key-swatch es-contrast-grid__key-swatch--foreground es-contrast-grid--dark-label" data-hex="#FEFEFF" style="background-color: #fefeff;">
                            <div class="es-contrast-grid__key-swatch-label">
                                <div class="es-contrast-grid__key-swatch-label-text">default foreground</div>
                                <div class="es-contrast-grid__key-swatch-label-hex">#FEFEFF</div>
                            </div>
                        </div>
                    </th>
                    <th class="es-contrast-grid__foreground-key-cell">
                        <div class="es-contrast-grid__key-swatch es-contrast-grid__key-swatch--foreground es-contrast-grid--dark-label" data-hex="#8786AC" style="background-color: #8786ac;">
                            <div class="es-contrast-grid__key-swatch-label">
                                <div class="es-contrast-grid__key-swatch-label-text">comments</div>
                                <div class="es-contrast-grid__key-swatch-label-hex">#8786AC</div>
                            </div>
                        </div>
                    </th>
                    <th class="es-contrast-grid__foreground-key-cell">
                        <div class="es-contrast-grid__key-swatch es-contrast-grid__key-swatch--foreground es-contrast-grid--dark-label" data-hex="#F26196" style="background-color: #f26196;">
                            <div class="es-contrast-grid__key-swatch-label">
                                <div class="es-contrast-grid__key-swatch-label-text">#F26196</div>
                                <div class="es-contrast-grid__key-swatch-label-hex">
                                </div>
                            </div>
                        </div>
                    </th>
                    <th class="es-contrast-grid__foreground-key-cell">
                        <div class="es-contrast-grid__key-swatch es-contrast-grid__key-swatch--foreground es-contrast-grid--dark-label" data-hex="#7998F2" style="background-color: #7998f2;">
                            <div class="es-contrast-grid__key-swatch-label">
                                <div class="es-contrast-grid__key-swatch-label-text">#7998F2</div>
                                <div class="es-contrast-grid__key-swatch-label-hex">
                                </div>
                            </div>
                        </div>
                    </th>
                    <th class="es-contrast-grid__foreground-key-cell">
                        <div class="es-contrast-grid__key-swatch es-contrast-grid__key-swatch--foreground es-contrast-grid--dark-label" data-hex="#F3907E" style="background-color: #f3907e;">
                            <div class="es-contrast-grid__key-swatch-label">
                                <div class="es-contrast-grid__key-swatch-label-text">#F3907E</div>
                                <div class="es-contrast-grid__key-swatch-label-hex">
                                </div>
                            </div>
                        </div>
                    </th>
                    <th class="es-contrast-grid__foreground-key-cell">
                        <div class="es-contrast-grid__key-swatch es-contrast-grid__key-swatch--foreground es-contrast-grid--dark-label" data-hex="#CAF884" style="background-color: #caf884;">
                            <div class="es-contrast-grid__key-swatch-label">
                                <div class="es-contrast-grid__key-swatch-label-text">#CAF884</div>
                                <div class="es-contrast-grid__key-swatch-label-hex">
                                </div>
                            </div>
                        </div>
                    </th>
                    <th class="es-contrast-grid__foreground-key-cell">
                        <div class="es-contrast-grid__key-swatch es-contrast-grid__key-swatch--foreground es-contrast-grid--dark-label" data-hex="#66E9EC" style="background-color: #66e9ec;">
                            <div class="es-contrast-grid__key-swatch-label">
                                <div class="es-contrast-grid__key-swatch-label-text">#66E9EC</div>
                                <div class="es-contrast-grid__key-swatch-label-hex">
                                </div>
                            </div>
                        </div>
                    </th>
                    <th class="es-contrast-grid__foreground-key-cell">
                        <div class="es-contrast-grid__key-swatch es-contrast-grid__key-swatch--foreground es-contrast-grid--dark-label" data-hex="#B07AFC" style="background-color: #b07afc;">
                            <div class="es-contrast-grid__key-swatch-label">
                                <div class="es-contrast-grid__key-swatch-label-text">#B07AFC</div>
                                <div class="es-contrast-grid__key-swatch-label-hex">
                                </div>
                            </div>
                        </div>
                    </th>
                    <th class="es-contrast-grid__foreground-key-cell">
                        <div class="es-contrast-grid__key-swatch es-contrast-grid__key-swatch--foreground es-contrast-grid--dark-label" data-hex="#FFE46B" style="background-color: #ffe46b;">
                            <div class="es-contrast-grid__key-swatch-label">
                                <div class="es-contrast-grid__key-swatch-label-text">diff-changed</div>
                                <div class="es-contrast-grid__key-swatch-label-hex">#FFE46B</div>
                            </div>
                        </div>
                    </th>
                    <th class="es-contrast-grid__foreground-key-cell">
                        <div class="es-contrast-grid__key-swatch es-contrast-grid__key-swatch--foreground es-contrast-grid--dark-label" data-hex="#18C1C4" style="background-color: #18c1c4;">
                            <div class="es-contrast-grid__key-swatch-label">
                                <div class="es-contrast-grid__key-swatch-label-text">diff-inserted</div>
                                <div class="es-contrast-grid__key-swatch-label-hex">#18C1C4</div>
                            </div>
                        </div>
                    </th>
                    <th class="es-contrast-grid__foreground-key-cell">
                        <div class="es-contrast-grid__key-swatch es-contrast-grid__key-swatch--foreground es-contrast-grid--dark-label" data-hex="#FF6E9C" style="background-color: #ff6e9c;">
                            <div class="es-contrast-grid__key-swatch-label">
                                <div class="es-contrast-grid__key-swatch-label-text">diff-deleted</div>
                                <div class="es-contrast-grid__key-swatch-label-hex">#FF6E9C</div>
                            </div>
                        </div>
                    </th>
                </tr>
            </thead>
            <tbody class="es-contrast-grid__content">
                <tr class="es-contrast-grid__content-row">
                    <th class="es-contrast-grid__background-key-cell">
                        <div class="es-contrast-grid__key-swatch es-contrast-grid__key-swatch--background" data-hex="#181036" style="background-color: #181036;">
                            <div class="es-contrast-grid__key-swatch-label">
                                <div class="es-contrast-grid__key-swatch-label-text">#181036</div>
                                <div class="es-contrast-grid__key-swatch-label-hex">
                                </div>
                            </div>
                        </div>
                    </th>
                    <td class="es-contrast-grid__content-cell">
                        <div class="es-contrast-grid__swatch" style="background-color: #181036; color: #fefeff;">
                            <span class="es-contrast-grid__swatch-demo-text">Text</span>
                            <div class="es-contrast-grid__swatch-stats">
                                <span class="es-contrast-grid__accessibility-label es-contrast-grid__accessibility-label--aaa">AAA</span>
                                <span class="es-contrast-grid__contrast-ratio">17.8</span>
                            </div>
                        </div>
                    </td>
                    <td class="es-contrast-grid__content-cell">
                        <div class="es-contrast-grid__swatch" style="background-color: #181036; color: #8786ac;">
                            <span class="es-contrast-grid__swatch-demo-text">Text</span>
                            <div class="es-contrast-grid__swatch-stats">
                                <span class="es-contrast-grid__accessibility-label es-contrast-grid__accessibility-label--aa">AA</span>
                                <span class="es-contrast-grid__contrast-ratio">5.1</span>
                            </div>
                        </div>
                    </td>
                    <td class="es-contrast-grid__content-cell">
                        <div class="es-contrast-grid__swatch" style="background-color: #181036; color: #f26196;">
                            <span class="es-contrast-grid__swatch-demo-text">Text</span>
                            <div class="es-contrast-grid__swatch-stats">
                                <span class="es-contrast-grid__accessibility-label es-contrast-grid__accessibility-label--aa">AA</span>
                                <span class="es-contrast-grid__contrast-ratio">5.9</span>
                            </div>
                        </div>
                    </td>
                    <td class="es-contrast-grid__content-cell">
                        <div class="es-contrast-grid__swatch" style="background-color: #181036; color: #7998f2;">
                            <span class="es-contrast-grid__swatch-demo-text">Text</span>
                            <div class="es-contrast-grid__swatch-stats">
                                <span class="es-contrast-grid__accessibility-label es-contrast-grid__accessibility-label--aa">AA</span>
                                <span class="es-contrast-grid__contrast-ratio">6.5</span>
                            </div>
                        </div>
                    </td>
                    <td class="es-contrast-grid__content-cell">
                        <div class="es-contrast-grid__swatch" style="background-color: #181036; color: #f3907e;">
                            <span class="es-contrast-grid__swatch-demo-text">Text</span>
                            <div class="es-contrast-grid__swatch-stats">
                                <span class="es-contrast-grid__accessibility-label es-contrast-grid__accessibility-label--aaa">AAA</span>
                                <span class="es-contrast-grid__contrast-ratio">7.8</span>
                            </div>
                        </div>
                    </td>
                    <td class="es-contrast-grid__content-cell">
                        <div class="es-contrast-grid__swatch" style="background-color: #181036; color: #caf884;">
                            <span class="es-contrast-grid__swatch-demo-text">Text</span>
                            <div class="es-contrast-grid__swatch-stats">
                                <span class="es-contrast-grid__accessibility-label es-contrast-grid__accessibility-label--aaa">AAA</span>
                                <span class="es-contrast-grid__contrast-ratio">14.8</span>
                            </div>
                        </div>
                    </td>
                    <td class="es-contrast-grid__content-cell">
                        <div class="es-contrast-grid__swatch" style="background-color: #181036; color: #66e9ec;">
                            <span class="es-contrast-grid__swatch-demo-text">Text</span>
                            <div class="es-contrast-grid__swatch-stats">
                                <span class="es-contrast-grid__accessibility-label es-contrast-grid__accessibility-label--aaa">AAA</span>
                                <span class="es-contrast-grid__contrast-ratio">12.3</span>
                            </div>
                        </div>
                    </td>
                    <td class="es-contrast-grid__content-cell">
                        <div class="es-contrast-grid__swatch" style="background-color: #181036; color: #b07afc;">
                            <span class="es-contrast-grid__swatch-demo-text">Text</span>
                            <div class="es-contrast-grid__swatch-stats">
                                <span class="es-contrast-grid__accessibility-label es-contrast-grid__accessibility-label--aa">AA</span>
                                <span class="es-contrast-grid__contrast-ratio">6</span>
                            </div>
                        </div>
                    </td>
                    <td class="es-contrast-grid__content-cell">
                        <div class="es-contrast-grid__swatch" style="background-color: #181036; color: #ffe46b;">
                            <span class="es-contrast-grid__swatch-demo-text">Text</span>
                            <div class="es-contrast-grid__swatch-stats">
                                <span class="es-contrast-grid__accessibility-label es-contrast-grid__accessibility-label--aaa">AAA</span>
                                <span class="es-contrast-grid__contrast-ratio">14.2</span>
                            </div>
                        </div>
                    </td>
                    <td class="es-contrast-grid__content-cell">
                        <div class="es-contrast-grid__swatch" style="background-color: #181036; color: #18c1c4;">
                            <span class="es-contrast-grid__swatch-demo-text">Text</span>
                            <div class="es-contrast-grid__swatch-stats">
                                <span class="es-contrast-grid__accessibility-label es-contrast-grid__accessibility-label--aaa">AAA</span>
                                <span class="es-contrast-grid__contrast-ratio">8.1</span>
                            </div>
                        </div>
                    </td>
                    <td class="es-contrast-grid__content-cell">
                        <div class="es-contrast-grid__swatch" style="background-color: #181036; color: #ff6e9c;">
                            <span class="es-contrast-grid__swatch-demo-text">Text</span>
                            <div class="es-contrast-grid__swatch-stats">
                                <span class="es-contrast-grid__accessibility-label es-contrast-grid__accessibility-label--aa">AA</span>
                                <span class="es-contrast-grid__contrast-ratio">6.8</span>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr class="es-contrast-grid__content-row">
                    <th class="es-contrast-grid__background-key-cell">
                        <div class="es-contrast-grid__key-swatch es-contrast-grid__key-swatch--background" data-hex="#231458" style="background-color: #231458;">
                            <div class="es-contrast-grid__key-swatch-label">
                                <div class="es-contrast-grid__key-swatch-label-text">selection and highlight</div>
                                <div class="es-contrast-grid__key-swatch-label-hex">#231458</div>
                            </div>
                        </div>
                    </th>
                    <td class="es-contrast-grid__content-cell">
                        <div class="es-contrast-grid__swatch" style="background-color: #231458; color: #fefeff;">
                            <span class="es-contrast-grid__swatch-demo-text">Text</span>
                            <div class="es-contrast-grid__swatch-stats">
                                <span class="es-contrast-grid__accessibility-label es-contrast-grid__accessibility-label--aaa">AAA</span>
                                <span class="es-contrast-grid__contrast-ratio">15.8</span>
                            </div>
                        </div>
                    </td>
                    <td class="es-contrast-grid__content-cell">
                        <div class="es-contrast-grid__swatch" style="background-color: #231458; color: #8786ac;">
                            <span class="es-contrast-grid__swatch-demo-text">Text</span>
                            <div class="es-contrast-grid__swatch-stats">
                                <span class="es-contrast-grid__accessibility-label es-contrast-grid__accessibility-label--aa">AA</span>
                                <span class="es-contrast-grid__contrast-ratio">4.6</span>
                            </div>
                        </div>
                    </td>
                    <td class="es-contrast-grid__content-cell">
                        <div class="es-contrast-grid__swatch" style="background-color: #231458; color: #f26196;">
                            <span class="es-contrast-grid__swatch-demo-text">Text</span>
                            <div class="es-contrast-grid__swatch-stats">
                                <span class="es-contrast-grid__accessibility-label es-contrast-grid__accessibility-label--aa">AA</span>
                                <span class="es-contrast-grid__contrast-ratio">5.2</span>
                            </div>
                        </div>
                    </td>
                    <td class="es-contrast-grid__content-cell">
                        <div class="es-contrast-grid__swatch" style="background-color: #231458; color: #7998f2;">
                            <span class="es-contrast-grid__swatch-demo-text">Text</span>
                            <div class="es-contrast-grid__swatch-stats">
                                <span class="es-contrast-grid__accessibility-label es-contrast-grid__accessibility-label--aa">AA</span>
                                <span class="es-contrast-grid__contrast-ratio">5.7</span>
                            </div>
                        </div>
                    </td>
                    <td class="es-contrast-grid__content-cell">
                        <div class="es-contrast-grid__swatch" style="background-color: #231458; color: #f3907e;">
                            <span class="es-contrast-grid__swatch-demo-text">Text</span>
                            <div class="es-contrast-grid__swatch-stats">
                                <span class="es-contrast-grid__accessibility-label es-contrast-grid__accessibility-label--aa">AA</span>
                                <span class="es-contrast-grid__contrast-ratio">6.9</span>
                            </div>
                        </div>
                    </td>
                    <td class="es-contrast-grid__content-cell">
                        <div class="es-contrast-grid__swatch" style="background-color: #231458; color: #caf884;">
                            <span class="es-contrast-grid__swatch-demo-text">Text</span>
                            <div class="es-contrast-grid__swatch-stats">
                                <span class="es-contrast-grid__accessibility-label es-contrast-grid__accessibility-label--aaa">AAA</span>
                                <span class="es-contrast-grid__contrast-ratio">13.1</span>
                            </div>
                        </div>
                    </td>
                    <td class="es-contrast-grid__content-cell">
                        <div class="es-contrast-grid__swatch" style="background-color: #231458; color: #66e9ec;">
                            <span class="es-contrast-grid__swatch-demo-text">Text</span>
                            <div class="es-contrast-grid__swatch-stats">
                                <span class="es-contrast-grid__accessibility-label es-contrast-grid__accessibility-label--aaa">AAA</span>
                                <span class="es-contrast-grid__contrast-ratio">11</span>
                            </div>
                        </div>
                    </td>
                    <td class="es-contrast-grid__content-cell">
                        <div class="es-contrast-grid__swatch" style="background-color: #231458; color: #b07afc;">
                            <span class="es-contrast-grid__swatch-demo-text">Text</span>
                            <div class="es-contrast-grid__swatch-stats">
                                <span class="es-contrast-grid__accessibility-label es-contrast-grid__accessibility-label--aa">AA</span>
                                <span class="es-contrast-grid__contrast-ratio">5.3</span>
                            </div>
                        </div>
                    </td>
                    <td class="es-contrast-grid__content-cell">
                        <div class="es-contrast-grid__swatch" style="background-color: #231458; color: #ffe46b;">
                            <span class="es-contrast-grid__swatch-demo-text">Text</span>
                            <div class="es-contrast-grid__swatch-stats">
                                <span class="es-contrast-grid__accessibility-label es-contrast-grid__accessibility-label--aaa">AAA</span>
                                <span class="es-contrast-grid__contrast-ratio">12.6</span>
                            </div>
                        </div>
                    </td>
                    <td class="es-contrast-grid__content-cell">
                        <div class="es-contrast-grid__swatch" style="background-color: #231458; color: #18c1c4;">
                            <span class="es-contrast-grid__swatch-demo-text">Text</span>
                            <div class="es-contrast-grid__swatch-stats">
                                <span class="es-contrast-grid__accessibility-label es-contrast-grid__accessibility-label--aaa">AAA</span>
                                <span class="es-contrast-grid__contrast-ratio">7.2</span>
                            </div>
                        </div>
                    </td>
                    <td class="es-contrast-grid__content-cell">
                        <div class="es-contrast-grid__swatch" style="background-color: #231458; color: #ff6e9c;">
                            <span class="es-contrast-grid__swatch-demo-text">Text</span>
                            <div class="es-contrast-grid__swatch-stats">
                                <span class="es-contrast-grid__accessibility-label es-contrast-grid__accessibility-label--aa">AA</span>
                                <span class="es-contrast-grid__contrast-ratio">6</span>
                            </div>
                        </div>
                    </td>
                </tr>
            </tbody>
            <tbody class="es-contrast-grid__key">
                <tr class="es-contrast-grid__key-row">
                    <td class="es-contrast-grid__key-cell" colspan="12">
                        <div class="es-contrast-grid-key">
                            <div class="es-contrast-grid-key__column">
                                <div class="es-contrast-grid-key__label">
                                    <span class="es-contrast-grid__accessibility-label es-contrast-grid__accessibility-label--aaa">AAA</span> Pass, AAA (7+)
                                </div>
                                <div class="es-contrast-grid-key__label">
                                    <span class="es-contrast-grid__accessibility-label es-contrast-grid__accessibility-label--aa">AA</span> Pass, AA (4.5+)
                                </div>
                            </div>
                            <div class="es-contrast-grid-key__column">
                                <div class="es-contrast-grid-key__label">
                                    <span class="es-contrast-grid__accessibility-label es-contrast-grid__accessibility-label--aa18">AA18</span> Pass, Large Text Only (3+)
                                </div>
                                <div class="es-contrast-grid-key__label">
                                    <span class="es-contrast-grid__accessibility-label es-contrast-grid__accessibility-label--dnp">DNP</span> Does Not Pass
                                </div>
                            </div>
                            <a class="es-contrast-grid-key__link" href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html">About WCAG 2.0 contrast</a>
                        </div>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

[See the persisent HTML contract grid online](https://contrast-grid.eightshapes.com/?version=1.1.0&background-colors=%23181036%2C%20%0D%0A%23231458%2C%20selection%20and%20highlight%0D%0A&foreground-colors=%23FEFEFF%2C%20default%20foreground%0D%0A%238786ac%2C%20comments%0D%0A%23F26196%0D%0A%237998F2%0D%0A%23F3907E%0D%0A%23CAF884%0D%0A%2366E9EC%0D%0A%23B07AFC%0D%0A%23FFE46B%2C%20diff-changed%0D%0A%2318C1C4%2C%20diff-inserted%0D%0A%23FF6E9C%2C%20diff-deleted%0D%0A&es-color-form__tile-size=compact&es-color-form__show-contrast=aaa&es-color-form__show-contrast=aa&es-color-form__show-contrast=aa18&es-color-form__show-contrast=dnp)

## Contributing <img alt="Hands meeting icon" src="./images/icons/teamwork.png" width="50" />

🚧 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](./CODE_OF_CONDUCT.md) and to check out our [contributing guidelines](CONTRIBUTING.md) for more information on how to get started.

## Preferences shown in the previews <img alt="Cog with pencil icon" src="./images/icons/design.png" width="50" />

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

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

The preview image for the Python syntax is using [Bracket Pair Colorizer](https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer&WT.mc_id=academic-0000-taallard), a cool extension that highlights matching brackets. Using this extension can help reduce unwanted errors.

I defined the following colours in my `settings.json`:

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

## Pitaya Smoothie in other places <img alt="Medal icon" src="./images/icons/title.png" width="50" />

You can find `Pitaya Smoothie` in the following places:

- ✨ Iterm theme [https://github.com/trallard/pitaya-smoothie-iterm/tree/main](https://github.com/trallard/pitaya-smoothie-iterm/tree/main)

- ✨ Slack theme - if you want to match your VS Code theme and your Slack theme head to `preferences` -> `themes` in Slack and paste the following colours:
 `#181036,#27264D,#251954,#66E9EC,#27264D,#ABA9DB,#AD70FC,#FF6E9C`
  </br>
  - The colours included are: ![#181036](https://via.placeholder.com/10/181036/000000?text=%20) `#181036` ![#27264d](https://via.placeholder.com/10/27264d/000000?text=%20) `#27264d` ![#251954](https://via.placeholder.com/10/251954/000000?text=%20) `#251954` ![#66e9ec](https://via.placeholder.com/10/66e9ec/000000?text=%20) `#66e9ec` ![#ABA9DB](https://via.placeholder.com/10/ABA9DB/000000?text=%20) `#ABA9DB` ![#ad70fc](https://via.placeholder.com/10/ad70fc/000000?text=%20) `#ad70fc` ![#ff6e9c](https://via.placeholder.com/10/ff6e9c/000000?text=%20) `#ff6e9c`

- ✨ Matplotlib theme - now your plots can have a Pitaya Smoothie look (dark and light themes included). Developed by [@dhaitz](https://github.com/dhaitz) - check it out at [https://github.com/dhaitz/matplotlib-stylesheets](https://github.com/dhaitz/matplotlib-stylesheets).

![Matplotlib Pitaya Smoothie light demo](https://github.com/dhaitz/matplotlib-stylesheets/raw/master/img/pitayasmoothie_light.png)
![Matplotlib Pitaya Smoothie dark demo](https://github.com/dhaitz/matplotlib-stylesheets/raw/master/img/pitayasmoothie_dark.png)

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 <img alt="documents" src="./images/icons/archives.png" width="50" />

## Attributions <img alt="star" src="./images/icons/favorite.png" width="50" />

- Icons made by <a href="https://www.flaticon.com/authors/freepik" title="Freepik">Freepik</a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a> and adapted to match the theme's colours.

- The logo font is Attractype Reborn from [Garisman Studio](https://befonts.com/designer/garisman-studio).

- Deeply inspired and guided by Sarah Dresner's Night Owl and [this fantastic guide they wrote](https://css-tricks.com/creating-a-vs-code-theme/).

pitaya_smoothie

pitaya_smoothie 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

pitaya_smoothie

pitaya_smoothie 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README