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#221D19
  • activityBar.border#221D19
  • activityBar.foreground#B6A89A
  • activityBar.inactiveForeground#8F8174
  • badge.background#E0A34A
  • badge.foreground#1B1713
  • button.background#E0A34A
  • button.foreground#1B1713
  • button.hoverBackground#ECB566
  • descriptionForeground#B6A89A
  • diffEditor.insertedTextBackground#8FA65A22
  • diffEditor.removedTextBackground#FF8A6B22
  • dropdown.background#2A241F
  • dropdown.border#342B24
  • dropdown.foreground#F2E9DD
  • dropdown.listBackground#2A241F
  • editor.background#1B1713
  • editor.foreground#F2E9DD
  • editor.hover.background#2A241F
  • editor.hover.border#342B24
  • editor.hover.foreground#F2E9DD
  • editor.hover.statusBarBackground#221D19
  • editor.lineHighlightBackground#221D19
  • editor.selectionBackground#E0A34A33
  • editor.selectionHighlightBackground#8FA65A22
  • editor.wordHighlightBackground#E0A34A22
  • editor.wordHighlightStrongBackground#E0A34A33
  • editorBracketHighlight.foreground1#E87870
  • editorBracketHighlight.foreground2#78B0E0
  • editorBracketHighlight.foreground3#E6C474
  • editorBracketHighlight.foreground4#B0D080
  • editorBracketHighlight.foreground5#D59860
  • editorBracketHighlight.foreground6#58C0B8
  • editorBracketMatch.background#E0A34A22
  • editorBracketMatch.border#E0A34A
  • editorCursor.foreground#E0A34A
  • editorGroupHeader.tabsBackground#221D19
  • editorGroupHeader.tabsBorder#221D1900
  • editorGutter.addedBackground#8FA65A
  • editorGutter.deletedBackground#FF8A6B
  • editorGutter.modifiedBackground#E0A34A
  • editorHoverWidget.background#2A241F
  • editorHoverWidget.border#342B24
  • editorHoverWidget.foreground#F2E9DD
  • editorHoverWidget.statusBarBackground#221D19
  • editorIndentGuide.activeBackground#4A4037
  • editorIndentGuide.background#342B24
  • editorWhitespace.foreground#3B312A
  • editorWidget.background#2A241F
  • editorWidget.border#342B24
  • errorForeground#FF8A6B
  • focusBorder#E0A34A80
  • foreground#F2E9DD
  • gitDecoration.conflictingResourceForeground#FF8A6B
  • gitDecoration.ignoredResourceForeground#8F8174
  • gitDecoration.modifiedResourceForeground#E0A34A
  • gitDecoration.untrackedResourceForeground#8FA65A
  • icon.foreground#B6A89A
  • input.background#2A241F
  • input.border#2A241F00
  • input.foreground#F2E9DD
  • input.placeholderForeground#8F8174
  • inputOption.activeBackground#E0A34A22
  • list.activeSelectionBackground#E0A34A1A
  • list.activeSelectionForeground#F2E9DD
  • list.focusBackground#E0A34A1A
  • list.hoverBackground#E0A34A10
  • list.inactiveSelectionBackground#E0A34A1A
  • menu.background#2A241F
  • menu.foreground#F2E9DD
  • menu.selectionBackground#E0A34A22
  • menu.separatorBackground#342B24
  • menubar.selectionBackground#342B24
  • notificationCenter.background#2A241F
  • notificationCenter.border#342B24
  • notificationCenterHeader.background#221D19
  • notificationCenterHeader.foreground#F2E9DD
  • notificationLink.foreground#E0A34A
  • notifications.background#2A241F
  • notifications.foreground#F2E9DD
  • notificationsErrorIcon.foreground#FF8A6B
  • notificationsInfoIcon.foreground#E0A34A
  • notificationsWarningIcon.foreground#E6B15A
  • notificationToast.background#2A241F
  • notificationToast.border#342B24
  • panel.background#221D19
  • panel.border#221D19
  • panelTitle.activeForeground#F2E9DD
  • panelTitle.inactiveForeground#B6A89A
  • peekView.border#E0A34A
  • peekViewEditor.background#1B1713
  • peekViewResult.background#221D19
  • peekViewResult.selectionBackground#E0A34A22
  • peekViewTitle.background#221D19
  • peekViewTitleDescription.foreground#B6A89A
  • peekViewTitleLabel.foreground#F2E9DD
  • pickerGroup.border#221D19
  • pickerGroup.foreground#8F8174
  • quickInput.background#2A241F
  • quickInput.foreground#F2E9DD
  • quickInputList.focusBackground#E0A34A22
  • quickInputList.focusForeground#F2E9DD
  • quickInputTitle.background#221D19
  • scrollbar.shadow#00000000
  • scrollbarSlider.activeBackground#807163
  • scrollbarSlider.background#5A4B3E80
  • scrollbarSlider.hoverBackground#6E5F52B0
  • selection.background#E0A34A33
  • sideBar.background#221D19
  • sideBar.border#221D19
  • sideBar.foreground#B6A89A
  • sideBarSectionHeader.background#221D19
  • sideBarSectionHeader.border#221D19
  • sideBarSectionHeader.foreground#F2E9DD
  • statusBar.background#221D19
  • statusBar.border#221D19
  • statusBar.foreground#B6A89A
  • tab.activeBackground#1B1713
  • tab.activeBorder#E0A34A
  • tab.activeForeground#F2E9DD
  • tab.border#221D1900
  • tab.inactiveBackground#221D19
  • tab.inactiveForeground#8F8174
  • tab.unfocusedActiveBorder#E0A34A80
  • terminal.ansiBlack#15110D
  • terminal.ansiBlue#D0893E
  • terminal.ansiCyan#6FC5BE
  • terminal.ansiGreen#8FA65A
  • terminal.ansiMagenta#C792EA
  • terminal.ansiRed#FF8A6B
  • terminal.ansiWhite#F2E9DD
  • terminal.ansiYellow#E6B15A
  • terminal.background#1B1713
  • terminal.foreground#F2E9DD
  • terminal.selectionBackground#E0A34A33
  • textCodeBlock.background#2A241F
  • textLink.foreground#E0A34A
  • textSeparator.foreground#342B24
  • titleBar.activeBackground#221D19
  • titleBar.activeForeground#F2E9DD
  • titleBar.border#221D19
  • titleBar.inactiveBackground#221D19
  • titleBar.inactiveForeground#8F8174
  • widget.shadow#00000000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#6C6058italic
string, punctuation.definition.string#B0D080
constant.numeric, constant.language, constant.character, constant.other#D59860
keyword, storage.type, storage.modifier#E87870
keyword.operator#8A8078
entity.name.function, support.function, meta.function-call#78B0E0
entity.name.type, entity.name.class, support.class, support.type, entity.other.inherited-class#E6C474
variable, meta.definition.variable, support.variable, entity.name.variable#C8C0B4
variable.parameter#C8C0B4italic
variable.other.property, support.type.property-name#58C0B8
punctuation#8A8078
meta.object-literal.key#58C0B8
entity.name.tag, punctuation.definition.tag#E87870
entity.other.attribute-name#E6C474
string.regexp#D59860
entity.name.tag.css, entity.other.attribute-name.class.css, entity.other.attribute-name.id.css, meta.selector.css#E87870
support.type.property-name.css#58C0B8
support.constant.property-value.css, keyword.other.unit.css#D59860
entity.other.attribute-name.html.vue#E87870
support.class.component.html.vue#E6C474
meta.decorator punctuation.decorator, meta.decorator entity.name.function, meta.decorator entity.name.type, meta.decorator variable.other.object#D59860
markup.heading.markdown#78B0E0
markup.underline.link.markdown, string.other.link.title.markdown#B0D080
markup.bold.markdownbold
markup.italic.markdownitalic
markup.inline.raw.string.markdown, markup.fenced_code.block.markdown#8A8078
invalid#FF8A6B
entity.name.namespace.wildcard.python, meta.statement.import.python entity.name.module.python, support.other.module.python#B0D080
support.function.builtin.python#78B0E0italic
support.function.magic.python#78B0E0italic
support.type.python#E6C474
variable.parameter.function.language.special.self.python, variable.parameter.function.language.special.cls.python#E87870italic
entity.name.function.decorator.python, punctuation.definition.decorator.python#D59860
support.variable.magic.python#58C0B8
support.class.exception.python#E6C474
meta.fstring.python variable, constant.character.format.placeholder.other.python#C8C0B4