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#F5F5F5
  • activityBar.foreground#006D77
  • activityBarBadge.background#006D77
  • activityBarBadge.foreground#FFFFFF
  • badge.background#006D77
  • badge.foreground#FFFFFF
  • button.background#006D77
  • button.foreground#FFFFFF
  • button.hoverBackground#005B66
  • dropdown.background#FFFFFF
  • dropdown.border#C0C0C0
  • dropdown.foreground#2B2B2B
  • editor.background#FAFAFA
  • editor.findMatchBackground#EF476F30
  • editor.findMatchHighlightBackground#EF476F20
  • editor.foreground#2B2B2B
  • editor.lineHighlightBackground#006D7710
  • editor.lineHighlightBorder#006D7730
  • editor.selectionBackground#006D7733
  • editor.selectionHighlightBackground#006D771A
  • editorBracketMatch.background#FFD16630
  • editorBracketMatch.border#FFD166
  • editorCursor.foreground#006D77
  • editorGroupHeader.tabsBackground#FAFAFA
  • editorIndentGuide.activeBackground#006D77
  • editorIndentGuide.background#C0C0C0
  • editorLineNumber.activeForeground#006D77
  • editorLineNumber.foreground#7A7A7A
  • editorWhitespace.foreground#C0C0C0
  • focusBorder#006D77
  • gitDecoration.conflictingResourceForeground#FFB84D
  • gitDecoration.deletedResourceForeground#D72638
  • gitDecoration.modifiedResourceForeground#006D77
  • gitDecoration.untrackedResourceForeground#06D6A0
  • input.background#FFFFFF
  • input.border#C0C0C0
  • input.foreground#2B2B2B
  • input.placeholderForeground#A0A0A0
  • inputOption.activeBorder#006D77
  • list.activeSelectionBackground#E0E0E0
  • list.activeSelectionForeground#2B2B2B
  • list.focusBackground#E0E0E0
  • list.highlightForeground#006D77
  • list.hoverBackground#E0E0E0AA
  • 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#7A7A7A
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#006D7788
  • scrollbarSlider.background#7A7A7A44
  • scrollbarSlider.hoverBackground#7A7A7A88
  • sideBar.background#FFFFFF
  • sideBar.foreground#2B2B2B
  • sideBarSectionHeader.background#F5F5F5
  • sideBarSectionHeader.foreground#006D77
  • sideBarTitle.foreground#006D77
  • statusBar.background#E8E8E8
  • statusBar.debuggingBackground#EF476F
  • statusBar.foreground#2B2B2B
  • statusBar.noFolderBackground#D8D8D8
  • statusBarItem.hoverBackground#D0D0D0
  • tab.activeBackground#FAFAFA
  • tab.activeBorder#006D77
  • tab.activeForeground#006D77
  • tab.border#E0E0E0
  • tab.inactiveBackground#F0F0F0
  • tab.inactiveForeground#7A7A7A
  • terminal.ansiBlue#006D77
  • terminal.ansiBrightBlue#0096C7
  • terminal.ansiBrightCyan#7BDFF2
  • terminal.ansiBrightGreen#43D998
  • terminal.ansiBrightMagenta#FF6B6B
  • terminal.ansiBrightRed#FF595E
  • terminal.ansiBrightYellow#FFB84D
  • terminal.ansiCyan#08F7FE
  • terminal.ansiGreen#06D6A0
  • terminal.ansiMagenta#EF476F
  • terminal.ansiRed#D72638
  • terminal.ansiYellow#FFD166
  • terminal.background#FAFAFA
  • terminal.foreground#2B2B2B
  • titleBar.activeBackground#F5F5F5
  • titleBar.activeForeground#2B2B2B
  • titleBar.inactiveBackground#EBEBEB
  • titleBar.inactiveForeground#7A7A7A

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#9E9E9Eitalic
string, string.quoted, string.template#06D6A0
keyword, storage.type, storage.modifier#006D77bold
keyword.operator, punctuation.accessor#EF476F
variable, variable.other#2B2B2B
variable.parameter#EF476Fitalic
entity.name.function, support.function#006D77
meta.function-call#006D77
entity.name.class, entity.name.type.class, support.class#D72638bold
entity.name.type, support.type#FFB84D
entity.name.type.interface#FFB84Ditalic
constant.numeric#FFD166
constant, constant.language, constant.character#FFD166
constant.language.boolean#FFD166bold
variable.other.property, support.variable.property#006D77
meta.object-literal.key#EF476F
entity.name.tag, punctuation.definition.tag#006D77
entity.other.attribute-name#EF476Fitalic
punctuation, meta.brace#2B2B2B
string.regexp#D72638
constant.character.escape#D72638
meta.decorator, punctuation.decorator#FFB84D
invalid, invalid.illegal#FF595Estrikethrough
markup.heading, entity.name.section#006D77bold
markup.bold#FFB84Dbold
markup.italic#006D77italic
markup.underline.link#006D77
markup.inline.raw, markup.fenced_code#06D6A0
support.type.property-name.json#006D77
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#EF476F
support.type.property-name.css#006D77
support.constant.property-value.css#006D77
themesmith by CyberBoost - VS Code Theme