Home

Awesome

<p align="center"> <img src="assets/coldark-banner.png" alt="Coldark Banner" width="400" /> </p>

Coldark - VS Code

GitHub License Visual Studio Marketplace Version Visual Studio Marketplace Rating Visual Studio Marketplace Downloads Open VSX Downloads

An optimized theme for web development that comes with two versions: light & dark.

Presentation

Coldark is a gray-blue theme. The colors used respect the Web Content Accessibility Guidelines (WCAG) in order to provide sufficient reading comfort. However, with opacity, it is possible that some contrasts are diminished and that they are above level AA.

Colors

Coldark consists of three color palettes. The first is common to both versions. The other two each apply to a version.

I tried to keep the same descriptions for both versions. However, for complex themes like VS Code, it doesn't work. So I separated the descriptions into 2 sections:

Light Theme

Hex CodePreviewDescriptionDenomination
#e3eaf2#e3eaf2Default background – Also used as foreground for Button & Badges.coldark00
#d0dae7#d0dae7Dark background - Editor Gutter, Inputs, Line Highlight, Status bar (no folder), No tabs. Also used as foreground for Activity bar.coldark01
#8da1b9#8da1b9Selection background - Code block, Secondary buttons, Some highlighting. Also used for Borders.coldark02
#3c526d#3c526dComments - Invisible, Ignored, Placeholder.coldark03
#213043#213043Light foreground – Inputs, Status bar (no folder), Embedded modals & Widgets.coldark04
#111b27#111b27Default foreground - Also used as Shadow and for most of Punctuation.coldark05
#0b121b#0b121bDark foreground – Also used as background for Activity bar.coldark06
#f0f4f8#f0f4f8Light background – Tab active, Embedded modals, Widgets.coldark07
#006d6d#006d6dCyan - Merge incoming content, Parameters, Tags, Support constant, CSS Variables, Markup inline raw, Punctuation Section Embedded (e.g. <?php ?>)coldark08
#755f00#755f00Yellow - Modified, Hints, Integers, Boolean, Constants Language, Attribute Names, Shell Case Patterns, Markup Link URLcoldark09
#005a8e#005a8eBlue - Badges, Buttons, Find Match, Info, Merge current content, Selection (outside editor), Status bar (folder open), Namespaces, Classes, Variables, Constants Other, Markup Headings, Property namescoldark10
#116b00#116b00Green - Added elements, Strings, CSS Colors, CSS Font names, Markup Link Textcoldark11
#af00af#af00afMagenta - Untracked elements, Token Expression value Support, Regular Expressions, Escape Characters, Constant Characters, Storage Modifiers, Instances, Markup List Punctuation, CSS valuescoldark12
#7c00aa#7c00aaPurple - Unverified, Functions, CSS Classes & IDscoldark13
#a04900#a04900Orange - Warnings, Status bar (debugging), Keywords, Storage, CSS Pseudo elementscoldark14
#c22f2e#c22f2eRed - Errors, Deleted, Invalids, Deprecatedcoldark15

Dark Theme

Hex CodePreviewDescriptionDenomination
#111b27#111b27Default background – Also used as foreground for Button & Badges.coldark00
#213043#213043Light background - Embedded modals, Widgets, Line Highlight, Tab active.coldark01
#3c526d#3c526dSelection background - Code block, Secondary buttons, Some highlighting.coldark02
#8da1b9#8da1b9Comments - Invisible, Ignored, Placeholder.coldark03
#d0dae7#d0dae7Dark foreground – Activity bar, Inputs, Status bar (no folder), Embedded modals & Widgets.coldark04
#e3eaf2#e3eaf2Default foreground - Also used for most of Punctuation.coldark05
#f0f4f8#f0f4f8Light foreground – Menu, Tab hover.coldark06
#0b121b#0b121bDark background - Activity bar, Inputs, Status bar (no folder), Editor Gutter, No tabs. Also used for Borders.coldark07
#66cccc#66ccccCyan - Merge incoming content, Parameters, Tags, Support constant, CSS Variables, Markup inline raw, Punctuation Section Embedded (e.g. <?php ?>)coldark08
#e6d37a#e6d37aYellow - Modified, Hints, Integers, Boolean, Constants Language, Attribute Names, Shell Case Patterns, Markup Link URLcoldark09
#6cb8e6#6cb8e6Blue - Badges, Buttons, Find Match, Info, Merge current content, Selection (outside editor), Status bar (folder open), Namespaces, Classes, Variables, Constants Other, Markup Headings, Property namescoldark10
#91d076#91d076Green - Added elements, Strings, CSS Colors, CSS Font names, Markup Link Textcoldark11
#f4adf4#f4adf4Magenta - Untracked elements, Token Expression value Support, Regular Expressions, Escape Characters, Constant Characters, Storage Modifiers, Instances, Markup List Punctuation, CSS valuescoldark12
#c699e3#c699e3Purple - Unverified, Functions, CSS Classes & IDscoldark13
#e9ae7e#e9ae7eOrange - Warnings, Status bar (debugging), Keywords, Storage, CSS Pseudo elementscoldark14
#cd6660#cd6660Red - Errors, Deleted, Invalids, Deprecatedcoldark15

Screenshots

On Linux, the title bar and the menu are not customizable. The following screenshots were taken on Windows.

Cold

Coldark Cold

PHPCSSJS
Coldark Cold PHPColdark Cold CSSColdark Cold JS

Dark

Coldark Dark

PHPCSSJS
Coldark Dark PHPColdark Dark CSSColdark Dark JS

Install

Coldark for VS Code can be installed via the extension manager by searching for "Coldark".

Coldark is available in the VisualStudio Marketplace and in the Open VSX Registry. So, you can install it in VS Code, Code - OSS and VSCodium.

Disclaimer

I added a file named UNUSED.md to specify the unused settings.

Tested with:

License

This project is open source and available under the MIT License.

<!-- REFERENCES --> <!-- UI Colors --> <!-- Syntax - Light Theme Colors --> <!-- Syntax - Dark Theme Colors -->