Skip to main content
Coding Theme

Color themes

VS Code preview

Full workbench mockup using this variant's colors and tokenColors.

Loading...

colors

Workbench UI color keys from the theme JSON colors map.

  • activityBar.activeBorder#00c2d1
  • activityBar.background#e0f7ff
  • activityBar.foreground#006688
  • activityBarBadge.background#00c2d1
  • activityBarBadge.foreground#f0fcff
  • badge.background#00c2d1
  • badge.foreground#f0fcff
  • button.background#70e0b0
  • button.foreground#f0fcff
  • button.hoverBackground#5ac09e
  • dropdown.background#e0f7ff
  • dropdown.border#c0e8ff
  • dropdown.foreground#004466
  • editor.background#f0fcff
  • editor.findMatchBackground#ffcc6677
  • editor.findMatchHighlightBackground#ffcc6644
  • editor.foreground#004466
  • editor.lineHighlightBackground#bdeeff
  • editor.lineHighlightBorder#00c2d140
  • editor.selectionBackground#70e0b080
  • editor.selectionHighlightBackground#70e0b055
  • editorBracketMatch.background#ffcc6677
  • editorBracketMatch.border#ffcc66
  • editorCursor.foreground#00c2d1
  • editorGroupHeader.tabsBackground#e8f9ff
  • editorIndentGuide.activeBackground#c0e8ff88
  • editorIndentGuide.background#c0e8ff44
  • editorLineNumber.activeForeground#006688
  • editorLineNumber.foreground#99b3c2
  • editorWhitespace.foreground#99c2d2
  • focusBorder#00c2d1
  • gitDecoration.conflictingResourceForeground#ffb84d
  • gitDecoration.deletedResourceForeground#ff5f57
  • gitDecoration.modifiedResourceForeground#00c2d1
  • gitDecoration.untrackedResourceForeground#00b16a
  • input.background#e0f7ff
  • input.border#c0e8ff
  • input.foreground#004466
  • input.placeholderForeground#99b3c2
  • inputOption.activeBorder#00c2d1
  • list.activeSelectionBackground#c0e8ff
  • list.activeSelectionForeground#004466
  • list.focusBackground#c0e8ff
  • list.highlightForeground#00c2d1
  • list.hoverBackground#c0e8ff66
  • minimap.background#f0fcff
  • minimapSlider.activeBackground#00c2d166
  • minimapSlider.background#00c2d122
  • minimapSlider.hoverBackground#00c2d144
  • panel.background#f0fcff
  • panel.border#c0e8ff
  • panelTitle.activeBorder#00c2d1
  • panelTitle.activeForeground#006688
  • panelTitle.inactiveForeground#99b3c2
  • scrollbar.shadow#00000022
  • scrollbarSlider.activeBackground#00c2d188
  • scrollbarSlider.background#99b3c244
  • scrollbarSlider.hoverBackground#99b3c288
  • sideBar.background#e8f9ff
  • sideBar.foreground#006688
  • sideBarSectionHeader.background#d0f2ff
  • sideBarSectionHeader.foreground#006688
  • sideBarTitle.foreground#006688
  • statusBar.background#c0e8ff
  • statusBar.debuggingBackground#00c2d1
  • statusBar.foreground#004466
  • statusBar.noFolderBackground#d0f2ff
  • statusBarItem.hoverBackground#a0d8ff
  • tab.activeBackground#d0f2ff
  • tab.activeBorder#00c2d1
  • tab.activeForeground#004466
  • tab.border#c0e8ff
  • tab.inactiveBackground#e8f9ff
  • tab.inactiveForeground#006688
  • terminal.ansiBlue#0066ff
  • terminal.ansiBrightBlue#3399ff
  • terminal.ansiBrightCyan#33ffff
  • terminal.ansiBrightGreen#33ff99
  • terminal.ansiBrightMagenta#ff99ff
  • terminal.ansiBrightRed#ff9999
  • terminal.ansiBrightYellow#ffdd88
  • terminal.ansiCyan#00c2d1
  • terminal.ansiGreen#00b16a
  • terminal.ansiMagenta#c74eff
  • terminal.ansiRed#ff5f57
  • terminal.ansiYellow#ffb84d
  • terminal.background#f0fcff
  • terminal.foreground#004466
  • titleBar.activeBackground#d0f2ff
  • titleBar.activeForeground#004466
  • titleBar.inactiveBackground#e0f7ff
  • titleBar.inactiveForeground#006688

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#99b3c2italic
string, string.quoted, string.template#ff8c00—
keyword, storage.type, storage.modifier#00c2d1bold
keyword.operator, punctuation.accessor#70e0b0—
variable, variable.other#004466—
variable.parameter#00c2d1italic
entity.name.function, support.function#1e90ff—
meta.function-call#1e90ff—
entity.name.class, entity.name.type.class, support.class#c74effbold
entity.name.type, support.type#c74eff—
entity.name.type.interface#ff99ffitalic
constant.numeric#00b16a—
constant, constant.language, constant.character#00b16a—
constant.language.boolean#00b16abold
variable.other.property, support.variable.property#70e0b0—
meta.object-literal.key#70e0b0—
entity.name.tag, punctuation.definition.tag#c74eff—
entity.other.attribute-name#ff99ffitalic
punctuation, meta.brace#006688—
string.regexp#ffb84d—
constant.character.escape#ff99ff—
meta.decorator, punctuation.decorator#ffdd88—
invalid, invalid.illegal#ff5f57strikethrough
markup.heading, entity.name.section#00c2d1bold
markup.bold#ffb84dbold
markup.italic#ff99ffitalic
markup.underline.link#006688—
markup.inline.raw, markup.fenced_code#1e90ff—
support.type.property-name.json#006688—
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#c74eff—
support.type.property-name.css#1e90ff—
support.constant.property-value.css#ffb84d—
themesmith by CyberBoost - VS Code Theme