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
Reliquary by The Freehold Foundry - VS Code Theme