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