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#FAF4EA
  • activityBar.border#FAF4EA
  • activityBar.foreground#5F5348
  • activityBar.inactiveForeground#A19588
  • badge.background#C9892F
  • badge.foreground#FFFDF9
  • button.background#C9892F
  • button.foreground#FFFDF9
  • button.hoverBackground#B6771E
  • descriptionForeground#7B6F63
  • diffEditor.insertedTextBackground#8B9E4520
  • diffEditor.removedTextBackground#C65A3D20
  • dropdown.background#FAF4EA
  • dropdown.border#FAF4EA
  • dropdown.foreground#2A241F
  • dropdown.listBackground#FAF4EA
  • editor.background#FFFCF6
  • editor.foreground#2A241F
  • editor.hover.background#FFFDF9
  • editor.hover.border#EFE4D8
  • editor.hover.foreground#2A241F
  • editor.hover.statusBarBackground#FAF4EA
  • editor.lineHighlightBackground#FFF9F0
  • editor.selectionBackground#C9892F33
  • editor.selectionHighlightBackground#8B9E4520
  • editor.wordHighlightBackground#C9892F15
  • editor.wordHighlightStrongBackground#C9892F1F
  • editorBracketHighlight.foreground1#C03028
  • editorBracketHighlight.foreground2#2A60B0
  • editorBracketHighlight.foreground3#907008
  • editorBracketHighlight.foreground4#4A7A2A
  • editorBracketHighlight.foreground5#AA6020
  • editorBracketHighlight.foreground6#0A7868
  • editorBracketMatch.background#C9892F15
  • editorBracketMatch.border#C9892F
  • editorCursor.foreground#C9892F
  • editorGroupHeader.tabsBackground#FAF4EA
  • editorGroupHeader.tabsBorder#FAF4EA00
  • editorGutter.addedBackground#8B9E45
  • editorGutter.deletedBackground#C65A3D
  • editorGutter.modifiedBackground#C9892F
  • editorHoverWidget.background#FFFDF9
  • editorHoverWidget.border#EFE4D8
  • editorHoverWidget.foreground#2A241F
  • editorHoverWidget.statusBarBackground#FAF4EA
  • editorIndentGuide.activeBackground#D7C8B4
  • editorIndentGuide.background#E8DED2
  • editorWhitespace.foreground#DFD5C7
  • editorWidget.background#FAF4EA
  • editorWidget.border#FAF4EA
  • errorForeground#C65A3D
  • focusBorder#C9892F80
  • foreground#2A241F
  • gitDecoration.conflictingResourceForeground#C65A3D
  • gitDecoration.ignoredResourceForeground#B2A79A
  • gitDecoration.modifiedResourceForeground#C9892F
  • gitDecoration.untrackedResourceForeground#8B9E45
  • icon.foreground#5F5348
  • input.background#FFFDF9
  • input.border#FFFDF900
  • input.foreground#2A241F
  • input.placeholderForeground#A19588
  • inputOption.activeBackground#C9892F1A
  • list.activeSelectionBackground#C9892F12
  • list.activeSelectionForeground#2A241F
  • list.focusBackground#C9892F12
  • list.hoverBackground#C9892F0D
  • list.inactiveSelectionBackground#C9892F12
  • menu.background#FAF4EA
  • menu.foreground#2A241F
  • menu.selectionBackground#C9892F1A
  • menu.separatorBackground#EFE4D8
  • menubar.selectionBackground#E8DED2
  • notificationCenter.background#FAF4EA
  • notificationCenter.border#EFE4D8
  • notificationCenterHeader.background#FAF4EA
  • notificationCenterHeader.foreground#2A241F
  • notificationLink.foreground#B46A1F
  • notifications.background#FAF4EA
  • notifications.foreground#B46A1F
  • notificationsErrorIcon.foreground#C65A3D
  • notificationsInfoIcon.foreground#C9892F
  • notificationsWarningIcon.foreground#B6771E
  • notificationToast.background#FAF4EA
  • notificationToast.border#EFE4D8
  • panel.background#FFFCF6
  • panel.border#FFFCF6
  • panelTitle.activeForeground#2A241F
  • panelTitle.inactiveForeground#5F5348
  • peekView.border#C9892F
  • peekViewEditor.background#FFFCF6
  • peekViewResult.background#FAF4EA
  • peekViewResult.selectionBackground#C9892F1A
  • peekViewTitle.background#FAF4EA
  • peekViewTitleDescription.foreground#7B6F63
  • peekViewTitleLabel.foreground#2A241F
  • pickerGroup.border#FAF4EA
  • pickerGroup.foreground#A19588
  • quickInput.background#FAF4EA
  • quickInput.foreground#2A241F
  • quickInputList.focusBackground#C9892F1A
  • quickInputList.focusForeground#2A241F
  • quickInputTitle.background#FAF4EA
  • scrollbar.shadow#00000000
  • scrollbarSlider.activeBackground#B19E89
  • scrollbarSlider.background#CDBCA780
  • scrollbarSlider.hoverBackground#C0AF9AB0
  • selection.background#C9892F33
  • sideBar.background#FAF4EA
  • sideBar.border#FAF4EA
  • sideBar.foreground#5F5348
  • sideBarSectionHeader.background#FAF4EA
  • sideBarSectionHeader.border#FAF4EA
  • sideBarSectionHeader.foreground#2A241F
  • statusBar.background#FAF4EA
  • statusBar.border#FAF4EA
  • statusBar.foreground#5F5348
  • tab.activeBackground#FFFCF6
  • tab.activeBorder#C9892F
  • tab.activeForeground#2A241F
  • tab.border#FAF4EA00
  • tab.inactiveBackground#FAF4EA
  • tab.inactiveForeground#A19588
  • tab.unfocusedActiveBorder#C9892F80
  • terminal.ansiBlack#5A5048
  • terminal.ansiBlue#A65C2F
  • terminal.ansiCyan#2F8A83
  • terminal.ansiGreen#6D8740
  • terminal.ansiMagenta#8B5FBF
  • terminal.ansiRed#B8553E
  • terminal.ansiWhite#F8F2E8
  • terminal.ansiYellow#B6771E
  • terminal.background#FFFCF6
  • terminal.foreground#5A5048
  • terminal.selectionBackground#C9892F33
  • textCodeBlock.background#F4E7D4
  • textLink.foreground#B46A1F
  • textSeparator.foreground#E8DED2
  • titleBar.activeBackground#FFFCF6
  • titleBar.activeForeground#2A241F
  • titleBar.border#FFFCF6
  • titleBar.inactiveBackground#FFFCF6
  • titleBar.inactiveForeground#A19588
  • widget.shadow#00000000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#887A70italic
string, punctuation.definition.string#4A7A2A
constant.numeric, constant.language, constant.character, constant.other#AA6020
keyword, storage.type, storage.modifier#C03028
keyword.operator#7A7068
entity.name.function, support.function, meta.function-call#2A60B0
entity.name.type, entity.name.class, support.class, support.type, entity.other.inherited-class#907008
variable, meta.definition.variable, support.variable, entity.name.variable#484038
variable.parameter#484038italic
variable.other.property, support.type.property-name#0A7868
punctuation#7A7068
meta.object-literal.key#0A7868
entity.name.tag, punctuation.definition.tag#C03028
entity.other.attribute-name#907008
string.regexp#AA6020
entity.name.tag.css, entity.other.attribute-name.class.css, entity.other.attribute-name.id.css, meta.selector.css#C03028
support.type.property-name.css#0A7868
support.constant.property-value.css, keyword.other.unit.css#AA6020
entity.other.attribute-name.html.vue#C03028
support.class.component.html.vue#907008
meta.decorator punctuation.decorator, meta.decorator entity.name.function, meta.decorator entity.name.type, meta.decorator variable.other.object#AA6020
markup.heading.markdown#2A60B0
markup.underline.link.markdown, string.other.link.title.markdown#4A7A2A
markup.bold.markdownbold
markup.italic.markdownitalic
markup.inline.raw.string.markdown, markup.fenced_code.block.markdown#7A7068
invalid#C05840
entity.name.namespace.wildcard.python, meta.statement.import.python entity.name.module.python, support.other.module.python#4A7A2A
support.function.builtin.python#2A60B0italic
support.function.magic.python#2A60B0italic
support.type.python#907008
variable.parameter.function.language.special.self.python, variable.parameter.function.language.special.cls.python#C03028italic
entity.name.function.decorator.python, punctuation.definition.decorator.python#AA6020
support.variable.magic.python#0A7868
support.class.exception.python#907008
meta.fstring.python variable, constant.character.format.placeholder.other.python#484038