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#E4D6BE
  • activityBar.foreground#06080F
  • activityBar.inactiveForeground#5F5749
  • activityBarBadge.background#6F521B
  • activityBarBadge.foreground#F0E6D6
  • badge.background#6F521B
  • badge.foreground#F0E6D6
  • button.background#6F521B
  • button.foreground#F0E6D6
  • button.hoverBackground#4E3A13
  • button.secondaryBackground#FAF6EC
  • button.secondaryForeground#06080F
  • dropdown.background#FAF6EC
  • dropdown.border#E4D6BE
  • dropdown.foreground#06080F
  • editor.background#F0E6D6
  • editor.foreground#06080F
  • editor.inactiveSelectionBackground#6F521B1A
  • editor.lineHighlightBackground#FAF6EC
  • editor.selectionBackground#6F521B33
  • editor.selectionHighlightBackground#6F521B22
  • editorBracketHighlight.foreground1#3D1E5C
  • editorBracketHighlight.foreground2#1B3A66
  • editorBracketHighlight.foreground3#164D34
  • editorBracketHighlight.foreground4#6F521B
  • editorBracketHighlight.foreground5#3D1E5C
  • editorBracketHighlight.foreground6#1B3A66
  • editorBracketHighlight.unexpectedBracket.foreground#5C1A2E
  • editorBracketMatch.border#6F521B
  • editorCursor.foreground#6F521B
  • editorGroup.border#E4D6BE
  • editorGroupHeader.tabsBackground#E4D6BE
  • editorGutter.addedBackground#164D34
  • editorGutter.background#F0E6D6
  • editorGutter.deletedBackground#5C1A2E
  • editorGutter.modifiedBackground#6F521B
  • editorHoverWidget.background#E4D6BE
  • editorHoverWidget.border#E4D6BE
  • editorIndentGuide.activeBackground1#A89C8A
  • editorIndentGuide.background1#E4D6BE
  • editorLineNumber.activeForeground#06080F
  • editorLineNumber.foreground#A89C8A
  • editorSuggestWidget.background#E4D6BE
  • editorSuggestWidget.highlightForeground#6F521B
  • editorSuggestWidget.selectedBackground#FAF6EC
  • editorWhitespace.foreground#A89C8A
  • editorWidget.background#E4D6BE
  • editorWidget.border#E4D6BE
  • focusBorder#6F521B
  • foreground#06080F
  • gitDecoration.addedResourceForeground#164D34
  • gitDecoration.conflictingResourceForeground#5C1A2E
  • gitDecoration.deletedResourceForeground#5C1A2E
  • gitDecoration.ignoredResourceForeground#5F5749
  • gitDecoration.modifiedResourceForeground#6F521B
  • gitDecoration.untrackedResourceForeground#164D34
  • input.background#FAF6EC
  • input.border#E4D6BE
  • input.foreground#06080F
  • input.placeholderForeground#A89C8A
  • list.activeSelectionBackground#FAF6EC
  • list.activeSelectionForeground#020306
  • list.focusBackground#FAF6EC
  • list.highlightForeground#6F521B
  • list.hoverBackground#FAF6EC
  • list.inactiveSelectionBackground#E4D6BE
  • notifications.background#E4D6BE
  • notifications.foreground#06080F
  • panel.background#E4D6BE
  • panel.border#E4D6BE
  • panelTitle.activeBorder#6F521B
  • panelTitle.activeForeground#020306
  • panelTitle.inactiveForeground#5F5749
  • peekView.border#6F521B
  • peekViewEditor.background#F0E6D6
  • peekViewResult.background#E4D6BE
  • scrollbarSlider.activeBackground#6F521B88
  • scrollbarSlider.background#A89C8A55
  • scrollbarSlider.hoverBackground#A89C8A88
  • sideBar.background#E4D6BE
  • sideBar.foreground#06080F
  • sideBarSectionHeader.background#E4D6BE
  • sideBarSectionHeader.foreground#06080F
  • sideBarTitle.foreground#020306
  • statusBar.background#E4D6BE
  • statusBar.border#E4D6BE
  • statusBar.debuggingBackground#5C1A2E
  • statusBar.debuggingForeground#FFF8EC
  • statusBar.foreground#06080F
  • statusBar.noFolderBackground#E4D6BE
  • statusBarItem.hoverBackground#FAF6EC
  • statusBarItem.remoteBackground#6F521B
  • statusBarItem.remoteForeground#F0E6D6
  • tab.activeBackground#F0E6D6
  • tab.activeBorderTop#6F521B
  • tab.activeForeground#020306
  • tab.border#E4D6BE
  • tab.inactiveBackground#E4D6BE
  • tab.inactiveForeground#5F5749
  • tab.unfocusedActiveBorderTop#A89C8A
  • terminal.ansiBlack#14141A
  • terminal.ansiBlue#1B3A66
  • terminal.ansiBrightBlack#38383E
  • terminal.ansiBrightBlue#6FB3E0
  • terminal.ansiBrightCyan#7FE0D6
  • terminal.ansiBrightGreen#3EE0A0
  • terminal.ansiBrightMagenta#B27EE8
  • terminal.ansiBrightRed#E45D75
  • terminal.ansiBrightWhite#FFF8EC
  • terminal.ansiBrightYellow#E8C468
  • terminal.ansiCyan#1C5C56
  • terminal.ansiGreen#164D34
  • terminal.ansiMagenta#3D1E5C
  • terminal.ansiRed#5C1A2E
  • terminal.ansiWhite#F0E6D6
  • terminal.ansiYellow#6B4A12
  • terminal.background#14141A
  • terminal.foreground#F0E6D6
  • terminalCursor.foreground#E8C468
  • titleBar.activeBackground#E4D6BE
  • titleBar.activeForeground#06080F
  • titleBar.inactiveBackground#E4D6BE
  • titleBar.inactiveForeground#5F5749

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#595162italic
keyword, keyword.control, storage, storage.type, storage.modifier, keyword.operator.new, keyword.other#3D1E5C
entity.name.function, support.function, meta.function-call#1B3A66
string, string.quoted, string.template#164D34
constant.numeric, constant.language, constant.character, constant.other#6F521B
entity.name.type, entity.name.class, support.type, support.class, entity.other.inherited-class#1C5C56
variable, variable.parameter, variable.other#06080F
punctuation, keyword.operator, meta.brace#A89C8A
entity.name.tag#5C1A2E
entity.other.attribute-name, meta.object-literal.key, support.type.property-name, variable.parameter.key, entity.name.tag.yaml#6F521B
invalid, invalid.illegal#5C1A2Eunderline
markup.heading#6F521Bbold
markup.bold#020306bold
markup.italicitalic
markup.underline.link#1B3A66
markup.quote#595162italic
markup.inline.raw, markup.fenced_code.block#164D34