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.background#F1F7EE
  • activityBar.border#F1F7EE
  • activityBar.foreground#5E6D60
  • activityBar.inactiveForeground#94A195
  • badge.background#4E8B61
  • badge.foreground#FFFFFF
  • button.background#4E8B61
  • button.foreground#FFFFFF
  • button.hoverBackground#3E7751
  • descriptionForeground#6E7B70
  • diffEditor.insertedTextBackground#87A65420
  • diffEditor.removedTextBackground#C55C4F20
  • dropdown.background#F1F7EE
  • dropdown.border#F1F7EE
  • dropdown.foreground#1F2A21
  • dropdown.listBackground#F1F7EE
  • editor.background#FBFDF9
  • editor.foreground#1F2A21
  • editor.hover.background#FCFEFA
  • editor.hover.border#DCE7DB
  • editor.hover.foreground#1F2A21
  • editor.hover.statusBarBackground#F1F7EE
  • editor.lineHighlightBackground#F7FBF4
  • editor.selectionBackground#4E8B6133
  • editor.selectionHighlightBackground#87A65420
  • editor.wordHighlightBackground#4E8B6115
  • editor.wordHighlightStrongBackground#4E8B611F
  • editorBracketHighlight.foreground1#B52050
  • editorBracketHighlight.foreground2#2060B8
  • editorBracketHighlight.foreground3#907210
  • editorBracketHighlight.foreground4#3D7A2E
  • editorBracketHighlight.foreground5#A86830
  • editorBracketHighlight.foreground6#1A7A5C
  • editorBracketMatch.background#4E8B6115
  • editorBracketMatch.border#4E8B61
  • editorCursor.foreground#4E8B61
  • editorGroupHeader.tabsBackground#F1F7EE
  • editorGroupHeader.tabsBorder#F1F7EE00
  • editorGutter.addedBackground#87A654
  • editorGutter.deletedBackground#C55C4F
  • editorGutter.modifiedBackground#4E8B61
  • editorHoverWidget.background#FCFEFA
  • editorHoverWidget.border#DCE7DB
  • editorHoverWidget.foreground#1F2A21
  • editorHoverWidget.statusBarBackground#F1F7EE
  • editorIndentGuide.activeBackground#D6E2D6
  • editorIndentGuide.background#E4ECE1
  • editorWhitespace.foreground#D6E2D6
  • editorWidget.background#F1F7EE
  • editorWidget.border#F1F7EE
  • errorForeground#C55C4F
  • focusBorder#4E8B6180
  • foreground#1F2A21
  • gitDecoration.conflictingResourceForeground#C55C4F
  • gitDecoration.ignoredResourceForeground#ABB7AA
  • gitDecoration.modifiedResourceForeground#4E8B61
  • gitDecoration.untrackedResourceForeground#87A654
  • icon.foreground#5E6D60
  • input.background#FCFEFA
  • input.border#FCFEFA00
  • input.foreground#1F2A21
  • input.placeholderForeground#94A195
  • inputOption.activeBackground#4E8B611A
  • list.activeSelectionBackground#4E8B6112
  • list.activeSelectionForeground#1F2A21
  • list.focusBackground#4E8B6112
  • list.hoverBackground#4E8B610D
  • list.inactiveSelectionBackground#4E8B6112
  • menu.background#F1F7EE
  • menu.foreground#1F2A21
  • menu.selectionBackground#4E8B611A
  • menu.separatorBackground#DCE7DB
  • menubar.selectionBackground#E4ECE1
  • notificationCenter.background#F1F7EE
  • notificationCenter.border#DCE7DB
  • notificationCenterHeader.background#F1F7EE
  • notificationCenterHeader.foreground#1F2A21
  • notificationLink.foreground#467E58
  • notifications#467E58
  • notifications.background#F1F7EE
  • notifications.foreground#467E58
  • notificationsErrorIcon.foreground#C55C4F
  • notificationsInfoIcon.foreground#4E8B61
  • notificationsWarningIcon.foreground#B07A36
  • notificationToast.background#F1F7EE
  • notificationToast.border#DCE7DB
  • panel.background#FBFDF9
  • panel.border#FBFDF9
  • panelTitle.activeForeground#1F2A21
  • panelTitle.inactiveForeground#5E6D60
  • peekView.border#4E8B61
  • peekViewEditor.background#FBFDF9
  • peekViewResult.background#F1F7EE
  • peekViewResult.selectionBackground#4E8B611A
  • peekViewTitle.background#F1F7EE
  • peekViewTitleDescription.foreground#6E7B70
  • peekViewTitleLabel.foreground#1F2A21
  • pickerGroup.border#F1F7EE
  • pickerGroup.foreground#94A195
  • quickInput.background#F1F7EE
  • quickInput.foreground#1F2A21
  • quickInputList.focusBackground#4E8B611A
  • quickInputList.focusForeground#1F2A21
  • quickInputTitle.background#F1F7EE
  • scrollbar.shadow#00000000
  • scrollbarSlider.activeBackground#92A590
  • scrollbarSlider.background#B8C8B780
  • scrollbarSlider.hoverBackground#A4B6A2B0
  • selection.background#4E8B6133
  • sideBar.background#F1F7EE
  • sideBar.border#F1F7EE
  • sideBar.foreground#5E6D60
  • sideBarSectionHeader.background#F1F7EE
  • sideBarSectionHeader.border#F1F7EE
  • sideBarSectionHeader.foreground#1F2A21
  • statusBar.background#F1F7EE
  • statusBar.border#F1F7EE
  • statusBar.foreground#5E6D60
  • tab.activeBackground#FBFDF9
  • tab.activeBorder#4E8B61
  • tab.activeForeground#1F2A21
  • tab.border#F1F7EE00
  • tab.inactiveBackground#F1F7EE
  • tab.inactiveForeground#94A195
  • tab.unfocusedActiveBorder#4E8B6180
  • terminal.ansiBlack#4F5D51
  • terminal.ansiBlue#4E8B61
  • terminal.ansiCyan#2E8B72
  • terminal.ansiGreen#5C8C45
  • terminal.ansiMagenta#6B5FC0
  • terminal.ansiRed#B55649
  • terminal.ansiWhite#F7FBF5
  • terminal.ansiYellow#A97938
  • terminal.background#FBFDF9
  • terminal.foreground#4F5D51
  • terminal.selectionBackground#4E8B6133
  • textCodeBlock.background#E7F1E5
  • textLink.foreground#467E58
  • textSeparator.foreground#E4ECE1
  • titleBar.activeBackground#FBFDF9
  • titleBar.activeForeground#1F2A21
  • titleBar.border#FBFDF9
  • titleBar.inactiveBackground#FBFDF9
  • titleBar.inactiveForeground#94A195
  • widget.shadow#00000000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#7A8A7Citalic
string, punctuation.definition.string#3D7A2E
constant.numeric, constant.language, constant.character, constant.other#A86830
keyword, storage.type, storage.modifier#B52050
keyword.operator#657060
entity.name.function, support.function, meta.function-call#2060B8
entity.name.type, entity.name.class, support.class, support.type, entity.other.inherited-class#907210
variable, meta.definition.variable, support.variable, entity.name.variable#3A5048
variable.parameter#3A5048italic
variable.other.property, support.type.property-name#1A7A5C
punctuation#657060
meta.object-literal.key#1A7A5C
entity.name.tag, punctuation.definition.tag#B52050
entity.other.attribute-name#907210
string.regexp#A86830
entity.name.tag.css, entity.other.attribute-name.class.css, entity.other.attribute-name.id.css, meta.selector.css#B52050
support.type.property-name.css#1A7A5C
support.constant.property-value.css, keyword.other.unit.css#A86830
entity.other.attribute-name.html.vue#B52050
support.class.component.html.vue#907210
meta.decorator punctuation.decorator, meta.decorator entity.name.function, meta.decorator entity.name.type, meta.decorator variable.other.object#A86830
markup.heading.markdown#2060B8
markup.underline.link.markdown, string.other.link.title.markdown#3D7A2E
markup.bold.markdownbold
markup.italic.markdownitalic
markup.inline.raw.string.markdown, markup.fenced_code.block.markdown#657060
invalid#C55C4F
entity.name.namespace.wildcard.python, meta.statement.import.python entity.name.module.python, support.other.module.python#3D7A2E
support.function.builtin.python#2060B8italic
support.function.magic.python#2060B8italic
support.type.python#907210
variable.parameter.function.language.special.self.python, variable.parameter.function.language.special.cls.python#B52050italic
entity.name.function.decorator.python, punctuation.definition.decorator.python#A86830
support.variable.magic.python#1A7A5C
support.class.exception.python#907210
meta.fstring.python variable, constant.character.format.placeholder.other.python#3A5048