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#FFFFFF
  • activityBar.background#0E9E55
  • activityBar.foreground#FFFFFF
  • activityBar.inactiveForeground#BDEBCB
  • activityBarBadge.background#00997A
  • activityBarBadge.foreground#FFFFFF
  • badge.background#00997A
  • badge.foreground#FFFFFF
  • breadcrumb.activeSelectionForeground#00997A
  • breadcrumb.background#E4F6E9
  • breadcrumb.foreground#4A8A60
  • breadcrumbPicker.background#E4F6E9
  • button.background#0E9E55
  • button.foreground#FFFFFF
  • button.hoverBackground#1FAE5B
  • dropdown.background#E4F6E9
  • dropdown.border#1FAE5B
  • dropdown.foreground#06280F
  • editor.background#F0FBF2
  • editor.findMatchBackground#0E9E5566
  • editor.findMatchHighlightBackground#0E9E5533
  • editor.foreground#06280F
  • editor.lineHighlightBackground#E2F6E7
  • editor.selectionBackground#2FBF5F40
  • editor.selectionHighlightBackground#0E9E5526
  • editor.wordHighlightBackground#2FBF5F26
  • editorCursor.foreground#00997A
  • editorError.foreground#E5484D
  • editorGroupHeader.tabsBackground#E4F6E9
  • editorGutter.addedBackground#12B050
  • editorGutter.deletedBackground#E5484D
  • editorGutter.modifiedBackground#C98A00
  • editorIndentGuide.activeBackground1#2FBF5F
  • editorIndentGuide.background1#D6F0DC
  • editorInfo.foreground#0090C0
  • editorLineNumber.activeForeground#0E9E55
  • editorLineNumber.foreground#A8D8B5
  • editorOverviewRuler.addedForeground#12B050
  • editorOverviewRuler.errorForeground#E5484D
  • editorOverviewRuler.modifiedForeground#C98A00
  • editorWarning.foreground#C98A00
  • editorWhitespace.foreground#CDEBD5
  • gitDecoration.addedResourceForeground#12B050
  • gitDecoration.deletedResourceForeground#E5484D
  • gitDecoration.modifiedResourceForeground#C98A00
  • gitDecoration.untrackedResourceForeground#6BA882
  • input.background#F0FBF2
  • input.border#1FAE5B
  • input.foreground#06280F
  • input.placeholderForeground#A8D8B5
  • inputOption.activeBackground#2FBF5F2A
  • inputOption.activeBorder#00997A
  • list.activeSelectionBackground#1FAE5B
  • list.activeSelectionForeground#FFFFFF
  • list.focusBackground#2FBF5F66
  • list.hoverBackground#2FBF5F26
  • list.inactiveSelectionBackground#D8F0DE
  • notificationCenterHeader.background#0E9E55
  • notificationCenterHeader.foreground#FFFFFF
  • notifications.background#E4F6E9
  • notifications.border#1FAE5B
  • panel.background#E4F6E9
  • panel.border#1FAE5B
  • panelTitle.activeBorder#00997A
  • panelTitle.activeForeground#00997A
  • quickInput.background#E4F6E9
  • quickInputList.focusBackground#1FAE5B
  • scrollbarSlider.activeBackground#00997AAA
  • scrollbarSlider.background#1FAE5B44
  • scrollbarSlider.hoverBackground#1FAE5B88
  • sideBar.background#E4F6E9
  • sideBar.border#1FAE5B
  • sideBar.foreground#06280F
  • sideBarSectionHeader.background#D2EFDA
  • sideBarSectionHeader.foreground#0B6A3A
  • sideBarTitle.foreground#0B7A43
  • statusBar.background#0E9E55
  • statusBar.debuggingBackground#00997A
  • statusBar.foreground#FFFFFF
  • statusBar.noFolderBackground#0B7A43
  • statusBarItem.hoverBackground#FFFFFF33
  • tab.activeBackground#F0FBF2
  • tab.activeBorderTop#00997A
  • tab.activeForeground#06280F
  • tab.border#1FAE5B33
  • tab.hoverBackground#2FBF5F26
  • tab.inactiveBackground#D8F0DE
  • tab.inactiveForeground#4A8A60
  • terminal.ansiBlack#0B3A1C
  • terminal.ansiBlue#0090C0
  • terminal.ansiBrightBlack#4A8A60
  • terminal.ansiBrightBlue#3DB8E0
  • terminal.ansiBrightCyan#2EC9A8
  • terminal.ansiBrightGreen#3DDC6E
  • terminal.ansiBrightMagenta#D44FC0
  • terminal.ansiBrightRed#FF6B6E
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#E8B83D
  • terminal.ansiCyan#00997A
  • terminal.ansiGreen#12B050
  • terminal.ansiMagenta#B5179E
  • terminal.ansiRed#E5484D
  • terminal.ansiWhite#DAF5E1
  • terminal.ansiYellow#C98A00
  • terminal.background#06200E
  • terminal.foreground#DAF5E1
  • terminalCursor.foreground#12B050
  • titleBar.activeBackground#0E9E55
  • titleBar.activeForeground#FFFFFF
  • titleBar.inactiveBackground#3BB873
  • titleBar.inactiveForeground#E6F7EC

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#8FBF9Eitalic
string, string.quoted#C98A00
constant.character.escape#00997Abold
constant.numeric, constant.language#15B85Fbold
keyword, keyword.control, keyword.operator.new#0E9E55bold
storage, storage.type#0B7A43bold
entity.name.function, meta.function-call entity.name.function#00897Bbold
variable.parameter#3A9E6E
entity.name.class, entity.name.type, support.class#0E8C6Abold
entity.other.inherited-class#5FBF95italic
variable, variable.other#06280F
variable.language, support.variable#0B7A43
variable.other.property, support.type.property-name, entity.other.attribute-name#0090C0
support.function, support.function.builtin#2EAE7E
keyword.operator, punctuation.separator.key-value#00897B
punctuation, meta.brace#5A9A70
entity.name.tag, meta.tag#0E9E55bold
entity.other.attribute-name.html#2EAE7E
support.type.property-name.css, meta.property-name.css#0090C0
meta.property-value.css, support.constant.property-value.css#2EAE7E
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#00897Bbold
keyword.control.import, keyword.control.from, support.module#0E9E55bold
meta.decorator, entity.name.function.decorator, punctuation.decorator#D99A00italic
meta.type.annotation, support.type.primitive#0E8C6A
variable.other.constant#15B85Fbold
invalid#E5484Dbold underline
markup.heading, entity.name.section.markdown#0E9E55bold
markup.bold#00897Bbold
markup.italic#3A9E6Eitalic
markup.inline.raw, markup.fenced_code.block#0090C0
markup.underline.link#2EAE7Eunderline
Precipi Themes by precipi - VS Code Theme