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#006D77
  • activityBar.background#E6F2F5
  • activityBar.foreground#006D77
  • activityBarBadge.background#006D77
  • activityBarBadge.foreground#FFFFFF
  • badge.background#006D77
  • badge.foreground#FFFFFF
  • button.background#006D77
  • button.foreground#FFFFFF
  • button.hoverBackground#88D5E9
  • dropdown.background#FFFFFF
  • dropdown.border#CCCCCC
  • dropdown.foreground#262626
  • editor.background#FDFDF9
  • editor.findMatchBackground#88D5E666
  • editor.findMatchHighlightBackground#88D5E622
  • editor.foreground#262626
  • editor.lineHighlightBackground#E0FCFF40
  • editor.lineHighlightBorder#88D5E9
  • editor.selectionBackground#006D7733
  • editor.selectionHighlightBackground#006D7722
  • editorBracketMatch.background#88D5E622
  • editorBracketMatch.border#88D5E9
  • editorCursor.foreground#006D77
  • editorGroupHeader.tabsBackground#FAFAFA
  • editorIndentGuide.activeBackground#CCCCCC88
  • editorIndentGuide.background#CCCCCC44
  • editorLineNumber.activeForeground#006D77
  • editorLineNumber.foreground#999999
  • editorWhitespace.foreground#CCCCCC
  • focusBorder#006D77
  • gitDecoration.conflictingResourceForeground#F9A825
  • gitDecoration.deletedResourceForeground#D32F2F
  • gitDecoration.modifiedResourceForeground#006D77
  • gitDecoration.untrackedResourceForeground#4CAF50
  • input.background#FFFFFF
  • input.border#CCCCCC
  • input.foreground#262626
  • input.placeholderForeground#A0A0A0
  • inputOption.activeBorder#006D77
  • list.activeSelectionBackground#E0FCFF
  • list.activeSelectionForeground#006D77
  • list.focusBackground#E0FCFF
  • list.highlightForeground#006D77
  • list.hoverBackground#E0FCFF66
  • minimap.background#FAFAFA
  • minimapSlider.activeBackground#006D7766
  • minimapSlider.background#006D7722
  • minimapSlider.hoverBackground#006D7744
  • panel.background#FAFAFA
  • panel.border#E0E0E0
  • panelTitle.activeBorder#006D77
  • panelTitle.activeForeground#006D77
  • panelTitle.inactiveForeground#777777
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#006D7888
  • scrollbarSlider.background#CCCCCC44
  • scrollbarSlider.hoverBackground#CCCCCC88
  • sideBar.background#FAFAFA
  • sideBar.foreground#262626
  • sideBarSectionHeader.background#F0F4F8
  • sideBarSectionHeader.foreground#006D77
  • sideBarTitle.foreground#006D77
  • statusBar.background#E0FCFF
  • statusBar.debuggingBackground#88D5E9
  • statusBar.foreground#262626
  • statusBar.noFolderBackground#F0F4F8
  • statusBarItem.hoverBackground#B9E8F5
  • tab.activeBackground#FFFFFF
  • tab.activeBorder#006D77
  • tab.activeForeground#006D77
  • tab.border#CCCCCC
  • tab.inactiveBackground#F5F5F5
  • tab.inactiveForeground#777777
  • terminal.ansiBlue#006D77
  • terminal.ansiBrightBlue#33B5E5
  • terminal.ansiBrightCyan#80DEEA
  • terminal.ansiBrightGreen#81C784
  • terminal.ansiBrightMagenta#E91E63
  • terminal.ansiBrightRed#EF5350
  • terminal.ansiBrightYellow#FFEB3B
  • terminal.ansiCyan#00B4D8
  • terminal.ansiGreen#4CAF50
  • terminal.ansiMagenta#C2185B
  • terminal.ansiRed#D32F2F
  • terminal.ansiYellow#F9A825
  • terminal.background#FFFFFF
  • terminal.foreground#262626
  • titleBar.activeBackground#E6F2F5
  • titleBar.activeForeground#262626
  • titleBar.inactiveBackground#E0E0E0
  • titleBar.inactiveForeground#777777

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#A8A8A8italic
string, string.quoted, string.template#00B4D8
keyword, storage.type, storage.modifier#006D77bold
keyword.operator, punctuation.accessor#88D5E9
variable, variable.other#262626
variable.parameter#88D5E9italic
entity.name.function, support.function#EF8354
meta.function-call#006D77
entity.name.class, entity.name.type.class, support.class#006D77bold
entity.name.type, support.type#006D77
entity.name.type.interface#EF8354italic
constant.numeric#D32F2F
constant, constant.language, constant.character#D32F2F
constant.language.boolean#006D77bold
variable.other.property, support.variable.property#262626
meta.object-literal.key#006D77
entity.name.tag, punctuation.definition.tag#006D77
entity.other.attribute-name#C2185Bitalic
punctuation, meta.brace#777777
string.regexp#D32F2F
constant.character.escape#C2185B
meta.decorator, punctuation.decorator#F9A825
invalid, invalid.illegal#FF0000strikethrough
markup.heading, entity.name.section#006D77bold
markup.bold#006D77bold
markup.italic#EF8354italic
markup.underline.link#006D77
markup.inline.raw, markup.fenced_code#00B4D8
support.type.property-name.json#006D77
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#F9A825
support.type.property-name.css#006D77
support.constant.property-value.css#EF8354
themesmith by CyberBoost - VS Code Theme