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#00bcd4
  • activityBar.background#16202a
  • activityBar.foreground#b0c4d9
  • activityBarBadge.background#00bcd4
  • activityBarBadge.foreground#ffffff
  • badge.background#00bcd4
  • badge.foreground#ffffff
  • button.background#0b3d5c
  • button.foreground#f0f0f0
  • button.hoverBackground#2c7fb8
  • dropdown.background#0b3d5c
  • dropdown.border#001f3f
  • dropdown.foreground#e0e0e0
  • editor.background#1b2631
  • editor.findMatchBackground#ffeb3b55
  • editor.findMatchHighlightBackground#ffeb3b33
  • editor.foreground#e0e0e0
  • editor.lineHighlightBackground#2c7fb825
  • editor.lineHighlightBorder#00bcd4
  • editor.selectionBackground#00bcd466
  • editor.selectionHighlightBackground#1c7c7e33
  • editorBracketMatch.background#2c7fb822
  • editorBracketMatch.border#00bcd4
  • editorCursor.foreground#00bcd4
  • editorGroupHeader.tabsBackground#16202a
  • editorIndentGuide.activeBackground#00bcd4
  • editorIndentGuide.background#2c3e50
  • editorLineNumber.activeForeground#a0c4e0
  • editorLineNumber.foreground#4b5b6b
  • editorWhitespace.foreground#4b5b6b
  • focusBorder#00bcd4
  • gitDecoration.conflictingResourceForeground#b100a5
  • gitDecoration.deletedResourceForeground#c41e3a
  • gitDecoration.modifiedResourceForeground#ffb300
  • gitDecoration.untrackedResourceForeground#2c7fb8
  • input.background#0b3d5c
  • input.border#001f3f
  • input.foreground#e0e0e0
  • input.placeholderForeground#4b5b6b
  • inputOption.activeBorder#00bcd4
  • list.activeSelectionBackground#2c7fb8
  • list.activeSelectionForeground#ffffff
  • list.focusBackground#00bcd433
  • list.highlightForeground#00bcd4
  • list.hoverBackground#1c7c7e33
  • minimap.background#16202a
  • minimapSlider.activeBackground#4b5b6bcc
  • minimapSlider.background#4b5b6b66
  • minimapSlider.hoverBackground#4b5b6b99
  • panel.background#16202a
  • panel.border#001f3f
  • panelTitle.activeBorder#00bcd4
  • panelTitle.activeForeground#f0f0f0
  • panelTitle.inactiveForeground#a0a0a0
  • scrollbar.shadow#000000
  • scrollbarSlider.activeBackground#4b5b6bcc
  • scrollbarSlider.background#4b5b6b66
  • scrollbarSlider.hoverBackground#4b5b6b99
  • sideBar.background#16202a
  • sideBar.foreground#c0d6e8
  • sideBarSectionHeader.background#1e2c38
  • sideBarSectionHeader.foreground#a0c4e0
  • sideBarTitle.foreground#b0c4d9
  • statusBar.background#001f3f
  • statusBar.debuggingBackground#006064
  • statusBar.foreground#f0f0f0
  • statusBar.noFolderBackground#0b3d5c
  • statusBarItem.hoverBackground#2c7fb8
  • tab.activeBackground#0b3d5c
  • tab.activeBorder#00bcd4
  • tab.activeForeground#f0f0f0
  • tab.border#001f3f
  • tab.inactiveBackground#16202a
  • tab.inactiveForeground#a0b6c8
  • terminal.ansiBlue#0b3d5c
  • terminal.ansiBrightBlue#1a5c9a
  • terminal.ansiBrightCyan#00bcd4
  • terminal.ansiBrightGreen#4caf50
  • terminal.ansiBrightMagenta#e040fb
  • terminal.ansiBrightRed#ff5252
  • terminal.ansiBrightYellow#ffeb3b
  • terminal.ansiCyan#1c7c7e
  • terminal.ansiGreen#2c7fb8
  • terminal.ansiMagenta#b100a5
  • terminal.ansiRed#c41e3a
  • terminal.ansiYellow#ffb300
  • terminal.background#16202a
  • terminal.foreground#e0e0e0
  • titleBar.activeBackground#0b3d5c
  • titleBar.activeForeground#f0f0f0
  • titleBar.inactiveBackground#16202a
  • titleBar.inactiveForeground#a0a0a0

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#758694italic
string, string.quoted, string.template#1c7c7e
keyword, storage.type, storage.modifier#0b3d5cbold
keyword.operator, punctuation.accessor#00bcd4
variable, variable.other#c0d6e8
variable.parameter#1c7c7eitalic
entity.name.function, support.function#2c7fb8
meta.function-call#00bcd4
entity.name.class, entity.name.type.class, support.class#1a5c9abold
entity.name.type, support.type#b100a5
entity.name.type.interface#b100a5italic
constant.numeric#ffb300
constant, constant.language, constant.character#e040fb
constant.language.boolean#c41e3abold
variable.other.property, support.variable.property#1c7c7e
meta.object-literal.key#00bcd4
entity.name.tag, punctuation.definition.tag#c41e3a
entity.other.attribute-name#ffb300italic
punctuation, meta.brace#758694
string.regexp#2c7fb8
constant.character.escape#e040fb
meta.decorator, punctuation.decorator#b100a5
invalid, invalid.illegal#ff5252strikethrough
markup.heading, entity.name.section#0b3d5cbold
markup.bold#0b3d5cbold
markup.italic#1c7c7eitalic
markup.underline.link#2c7fb8
markup.inline.raw, markup.fenced_code#00bcd4
support.type.property-name.json#00bcd4
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#b100a5
support.type.property-name.css#2c7fb8
support.constant.property-value.css#ffb300