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#15B85F
  • activityBar.background#103024
  • activityBar.foreground#2FBF5F
  • activityBar.inactiveForeground#4E7A5E
  • activityBarBadge.background#2EC9A8
  • activityBarBadge.foreground#062018
  • badge.background#2EC9A8
  • badge.foreground#062018
  • breadcrumb.activeSelectionForeground#2FBF5F
  • breadcrumb.background#0C1F14
  • breadcrumb.foreground#4E7A5E
  • breadcrumbPicker.background#0F2619
  • button.background#15B85F
  • button.foreground#062018
  • button.hoverBackground#2FBF5F
  • dropdown.background#103024
  • dropdown.border#1F3E2C
  • dropdown.foreground#DAF5E1
  • editor.background#0C1F14
  • editor.findMatchBackground#2FBF5F66
  • editor.findMatchHighlightBackground#2FBF5F33
  • editor.foreground#DAF5E1
  • editor.lineHighlightBackground#122B1C
  • editor.selectionBackground#2FBF5F33
  • editor.selectionHighlightBackground#2FBF5F22
  • editor.wordHighlightBackground#15B85F26
  • editorCursor.foreground#2FBF5F
  • editorError.foreground#FF6B6E
  • editorGroupHeader.tabsBackground#0F2619
  • editorGutter.addedBackground#3DDC6E
  • editorGutter.deletedBackground#FF6B6E
  • editorGutter.modifiedBackground#E8B83D
  • editorIndentGuide.activeBackground1#2FBF5F
  • editorIndentGuide.background1#1C3A28
  • editorInfo.foreground#3DB8E0
  • editorLineNumber.activeForeground#2FBF5F
  • editorLineNumber.foreground#3A6B4C
  • editorOverviewRuler.addedForeground#3DDC6E
  • editorOverviewRuler.errorForeground#FF6B6E
  • editorOverviewRuler.modifiedForeground#E8B83D
  • editorWarning.foreground#E8B83D
  • editorWhitespace.foreground#244A33
  • gitDecoration.addedResourceForeground#3DDC6E
  • gitDecoration.deletedResourceForeground#FF6B6E
  • gitDecoration.modifiedResourceForeground#E8B83D
  • gitDecoration.untrackedResourceForeground#4E7A5E
  • input.background#103024
  • input.border#1F3E2C
  • input.foreground#DAF5E1
  • input.placeholderForeground#4E7A5E
  • inputOption.activeBackground#2FBF5F2A
  • inputOption.activeBorder#2FBF5F
  • list.activeSelectionBackground#1FAE5B
  • list.activeSelectionForeground#062018
  • list.focusBackground#2FBF5F3A
  • list.hoverBackground#2FBF5F1A
  • list.inactiveSelectionBackground#14301F
  • notificationCenterHeader.background#103024
  • notificationCenterHeader.foreground#2FBF5F
  • notifications.background#103024
  • notifications.border#1F3E2C
  • panel.background#0F2619
  • panel.border#1F3E2C
  • panelTitle.activeBorder#2FBF5F
  • panelTitle.activeForeground#2FBF5F
  • quickInput.background#0F2619
  • quickInputList.focusBackground#1FAE5B
  • scrollbarSlider.activeBackground#2FBF5FAA
  • scrollbarSlider.background#2FBF5F33
  • scrollbarSlider.hoverBackground#2FBF5F55
  • sideBar.background#0F2619
  • sideBar.border#1F3E2C
  • sideBar.foreground#DAF5E1
  • sideBarSectionHeader.background#14301F
  • sideBarSectionHeader.foreground#3DDC6E
  • sideBarTitle.foreground#2FBF5F
  • statusBar.background#103024
  • statusBar.debuggingBackground#2EC9A8
  • statusBar.foreground#2FBF5F
  • statusBar.noFolderBackground#14301F
  • statusBarItem.hoverBackground#2FBF5F22
  • tab.activeBackground#0C1F14
  • tab.activeBorderTop#2FBF5F
  • tab.activeForeground#DAF5E1
  • tab.border#103024
  • tab.hoverBackground#2FBF5F1A
  • tab.inactiveBackground#0F2619
  • tab.inactiveForeground#4E7A5E
  • terminal.ansiBlack#14301F
  • terminal.ansiBlue#3DB8E0
  • terminal.ansiBrightBlack#4E7A5E
  • terminal.ansiBrightBlue#6FD0F0
  • terminal.ansiBrightCyan#5FE8C8
  • terminal.ansiBrightGreen#6BFF9A
  • terminal.ansiBrightMagenta#E88FE0
  • terminal.ansiBrightRed#FF9A9C
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#FFD86B
  • terminal.ansiCyan#2EC9A8
  • terminal.ansiGreen#3DDC6E
  • terminal.ansiMagenta#D44FC0
  • terminal.ansiRed#FF6B6E
  • terminal.ansiWhite#DAF5E1
  • terminal.ansiYellow#E8B83D
  • terminal.background#081A0F
  • terminal.foreground#DAF5E1
  • terminalCursor.foreground#2FBF5F
  • titleBar.activeBackground#103024
  • titleBar.activeForeground#2FBF5F
  • titleBar.inactiveBackground#0C1F14
  • titleBar.inactiveForeground#4E7A5E

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#4E7A5Eitalic
string, string.quoted#E8B83D
constant.character.escape#2EC9A8bold
constant.numeric, constant.language#5FE88Abold
keyword, keyword.control, keyword.operator.new#2FBF5Fbold
storage, storage.type#1FC98Abold
entity.name.function, meta.function-call entity.name.function#2EC9A8bold
variable.parameter#7FD9A8
entity.name.class, entity.name.type, support.class#4FD99Abold
entity.other.inherited-class#8FE8B8italic
variable, variable.other#DAF5E1
variable.language, support.variable#1FC98A
variable.other.property, support.type.property-name, entity.other.attribute-name#3DB8E0
support.function, support.function.builtin#4FD9B0
keyword.operator, punctuation.separator.key-value#2EC9A8
punctuation, meta.brace#6FA888
entity.name.tag, meta.tag#2FBF5Fbold
entity.other.attribute-name.html#4FD9B0
support.type.property-name.css, meta.property-name.css#3DB8E0
meta.property-value.css, support.constant.property-value.css#4FD9B0
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#2EC9A8bold
keyword.control.import, keyword.control.from, support.module#2FBF5Fbold
meta.decorator, entity.name.function.decorator, punctuation.decorator#FFD86Bitalic
meta.type.annotation, support.type.primitive#4FD99A
variable.other.constant#5FE88Abold
invalid#FF6B6Ebold underline
markup.heading, entity.name.section.markdown#2FBF5Fbold
markup.bold#2EC9A8bold
markup.italic#7FD9A8italic
markup.inline.raw, markup.fenced_code.block#3DB8E0
markup.underline.link#4FD9B0underline