Dark++ Italic Theme 
Enhanced VSCode Dark+ theme with italic support for Fira Code iScript, Fira Code + Operator Mono fonts, and Copilot hints!
⭐ Like, star, subscribe, and put a comment down below ...couldn't resist
🤩 By far the most complete color theme I've used for JavaScript: italic reserved keywords, different color for every possible difference, nice contrast but well balanced color schema,... BIG FAN ~ Anonymous
😊 Been using this theme since I started using VSCODE and couldn't recommend it more. Keep up the great work! ~ Scott Woeber
Comparison
Screenshot of dummy JavaScript/React { left: Dark++ Italic, right: Dark+ (default) } - zoom in to see the details.
Install
⚠️ IMPORTANT NOTES
- Any major update to VSCode requires re-adding the CSS rules in
workbench.desktop.main.css
- The first change to the fresh
workbench.desktop.main.css file will cause VSCode to notify you with a corrupt installation warning - click the gear icon and ignore the message.
[+] Theme installation
In VSCode press ctrl/command + p to launch the command palette, then run the command:
ext install idbartosz.darkpp-italic
[+] Option A: Adding support for Fira Code iScript.
- Download Fira Code iScript (free) and copy fonts to your OS font folder.
- In VSCode press
ctr + , to open User Settings then add the following options and save changes.
{
...
"workbench.colorTheme": "Dark++ Italic",
"editor.fontFamily": "Fira Code iScript",
"editor.fontLigatures": true,
"terminal.integrated.fontFamily": "monospace",
...
}
- Tweek font appearance and Copilot hints by editing VSCode internal styles (optional step).
- Find in your OS
<path to VSCode>\resources\app\out\vs\workbench.desktop.main.css
- MacOS:
/Applications/Visual Studio Code.app/Contents/Resources/app/out/vs/workbench/workbench.desktop.main.css
- Windows:
C:\Users\<user>\AppData\Local\Programs\Microsoft VS Code\resources\app\out\vs\workbench\workbench.desktop.main.css
- With administrator rights open
workbench.desktop.main.css and prepend the style below:
/**
* VSCode will warn you that this change indicates a corrupt installation - click the gear icon and ignore it
* NOTE: whenever you make changes to this file, you must close all VSCode instances to see the changes
*/
/* Enhance italic fonts styling */
.mtki {
font-size: 1em; /* use 1.25em to increase italic tokens size, 1.25em might look better on Windows machines */
font-stretch: ultra-condensed;
}
/* BEGIN: Enhance Copilot suggestions styling */
span.mtk1.ghost-text-decoration, span.mtk1.ghost-text {
color: #B0B0B0 !important;
font-style: normal !important;
}
:nth-last-child(1 of span.mtk1.ghost-text-decoration)::after {
content: ' {Copilot}';
color: #FF69B4;
font-style: italic;
}
/* END: Enhance Copilot suggestions styling */
/*!--------------------------------------------------------
* Copyright (C) Microsoft Corporation. All rights reserved.
...
- Close and reopen VSCode.
[+] Option B: Adding support for Fira Code and Operator Mono.
- Download Fira Code (free), Operator Mono (paid) and copy fonts to your OS font folder.
- In VSCode press
ctr + , to open User Settings then add the following options and save changes.
{
...
"workbench.colorTheme": "Dark++ Italic",
"editor.fontFamily": "Fira Code",
"editor.fontLigatures": true,
...
}
- Add support for Operator Mono fonts by editing VSCode internal styles (required step).
- Find in your OS
<path to VSCode>\resources\app\out\vs\workbench.desktop.main.css
- MacOS:
/Applications/Visual Studio Code.app/Contents/Resources/app/out/vs/workbench/workbench.desktop.main.css
- Windows:
C:\Users\<user>\AppData\Local\Programs\Microsoft VS Code\resources\app\out\vs\workbench\workbench.desktop.main.css
- With administrator rights open
workbench.desktop.main.css and prepend the style below:
/**
* VSCode will warn you that this change indicates a corrupt installation - click the gear icon and ignore it
* NOTE: whenever you make changes to this file, you must close all VSCode instances to see the changes
*/
.mtki {
font-family: Operator Mono;
}
/* BEGIN: Enhance Copilot suggestions styling */
span.mtk1.ghost-text-decoration, span.mtk1.ghost-text {
color: #B0B0B0 !important;
font-style: normal !important;
}
:nth-last-child(1 of span.mtk1.ghost-text-decoration)::after {
content: ' {Copilot}';
color: #FF69B4;
font-style: italic;
}
/* END: Enhance Copilot suggestions styling */
/*!--------------------------------------------------------
* Copyright (C) Microsoft Corporation. All rights reserved.
...
- Close and reopen VSCode.
Changelog
You can take a look at the changelog here.
Special thanks to
