muowl
PTEN

VS Code · v1.7.0

Carmilla

crypt warmth for nights of code

Three VS Code variants: rosé wine, violet and slate blue. Cream text, mauve comments and distinct colours for types, functions and strings. Compare Carmilla, Amethyst and Moonstone in the code sample.

In the editor

a TypeScript preview using the theme’s syntax rules

carmilla / countess.ts
countess.ts
palette.css
README.md
// Carmilla — warm accents over wine.
// TextMate preview; language servers may refine token colors.
class Countess {
    private name: string;
    private centuriesLived: number;

    constructor(name: string, age: number) {
        this.name = name;
        this.centuriesLived = age;
    }

    whisper(guest: string): string {
        return `${this.name} whispers to ${guest}`;
    }

    getEra(): string {
        if (this.centuriesLived > 5) return "Ancient";
        if (this.centuriesLived > 1) return "Immortal";
        return "Newly turned";
    }
}

const carmilla = new Countess("Mircalla Karnstein", 3);
const awake: boolean = true;
const visitor: string | null = null;
const absent = undefined;
if (awake) console.log(carmilla.getEra());
else console.error("Still resting in the coffin");
⎇ main↑ 2 ↓ 0 0 errors▲ 1 warning
Ln 21, Col 9Spaces: 4UTF-8TypeScriptCarmillaCarmilla AmethystCarmilla Moonstone

Install Carmilla

Install the extension, then open “Preferences: Color Theme” in the VS Code Command Palette to choose the theme.

To install the package, use “Extensions: Install from VSIX…” in VS Code.

Version 1.7.0 includes Moonstone and the Lua icon. Download the VSIX to install this version while the Marketplace update is pending.

The palette

Carmilla’s thirteen colours and their uses

#16101A#18101A#0F1319
CryptCryptCrypt
deepest background — page, gutter
#2E1B2D#2A1B2E#1D232E
BoudoirBoudoirBoudoir
main background — editor, panels
#3A2438#35243A#252D3B
VelvetVelvetVelvet
elevated surface — cards, status bar
#523950#4C3952#384355
SelectionSelectionSelection
current line, selection, ranges
#FF5FA2#C474D3#75A6D8
CarmineAmethystMoonstone
keywords, storage — const, let, class, if, return
#D5A6FF#D5A6FF#D5A6FF
WisteriaWisteriaWisteria
language instances — this, super, null
#5ED0D8#5ED0D8#5ED0D8
VerdigrisVerdigrisVerdigris
classes, types, support
#7AE0A6#7AE0A6#7AE0A6
AbsintheAbsintheAbsinthe
functions, methods
#EDD795#EDD795#EDD795
ChampagneChampagneChampagne
strings, template literals
#FFAE8A#FFAE8A#FFAE8A
Peach VelvetPeach VelvetPeach Velvet
numbers, booleans
#E84B6E#E84B6E#E84B6E
PomegranatePomegranatePomegranate
errors, deletions, alerts
#9E83A4#9E83A4#9E83A4
Ash MauveAsh MauveAsh Mauve
comments
#F5EADA#F5EADA#F5EADA
PearlPearlPearl
primary text, foreground

Syntax colours

the colour used for each code element

keywordconst x = "…"
variable.langthis.name
entity.type: string
entity.functionlog()
string"Carmilla"
constant.numeric42
invalidundefined_var
comment// ash mauve
variableguest

Variants

compare the palettes and select a variant

Carmilla uses rosé wine and carmine; Amethyst combines violet and orchid purple; Moonstone brings sky blue over slate. Cream text, mauve comments and the remaining syntax colours are shared. Select a variant to compare the palette and code.

← All themes