Skip to main content
Coding Theme

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#0E1512
  • activityBar.border#273A30
  • activityBar.foreground#B6D97A
  • activityBar.inactiveForeground#536A5E
  • activityBarBadge.background#B6D97A
  • activityBarBadge.foreground#0E1512
  • badge.background#B6D97A
  • badge.foreground#0E1512
  • breadcrumb.focusForeground#E3EAE1
  • breadcrumb.foreground#86A380
  • button.background#B6D97A
  • button.foreground#0E1512
  • button.hoverBackground#CCE4A2
  • diffEditor.insertedTextBackground#8FD6A81A
  • diffEditor.removedTextBackground#E08A7A1A
  • dropdown.background#0E1512
  • dropdown.border#273A30
  • dropdown.foreground#E3EAE1
  • editor.background#121C17
  • editor.foreground#E3EAE1
  • editor.lineHighlightBackground#16221C99
  • editor.selectionBackground#273A3099
  • editor.selectionHighlightBackground#273A3066
  • editor.wordHighlightBackground#273A3066
  • editorBracketMatch.background#273A30
  • editorBracketMatch.border#B6D97A
  • editorCursor.foreground#B6D97A
  • editorError.foreground#E08A7A
  • editorGroupHeader.tabsBackground#16221C
  • editorGroupHeader.tabsBorder#273A30
  • editorHoverWidget.background#16221C
  • editorHoverWidget.border#273A30
  • editorIndentGuide.activeBackground1#3A4A42
  • editorIndentGuide.background1#1B2821
  • editorInfo.foreground#8FC4D8
  • editorLineNumber.activeForeground#B6D97A
  • editorLineNumber.foreground#46594F
  • editorRuler.foreground#1B2821
  • editorSuggestWidget.background#16221C
  • editorSuggestWidget.selectedBackground#273A30
  • editorWarning.foreground#E3B168
  • editorWhitespace.foreground#213129
  • editorWidget.background#16221C
  • editorWidget.border#273A30
  • focusBorder#46594F
  • foreground#C4D2C1
  • gitDecoration.addedResourceForeground#8FD6A8
  • gitDecoration.deletedResourceForeground#E08A7A
  • gitDecoration.ignoredResourceForeground#536A5E
  • gitDecoration.modifiedResourceForeground#E3B168
  • gitDecoration.untrackedResourceForeground#8FD6A8
  • input.background#0E1512
  • input.border#273A30
  • input.foreground#E3EAE1
  • inputOption.activeBorder#B6D97A
  • list.activeSelectionBackground#273A30
  • list.activeSelectionForeground#E3EAE1
  • list.highlightForeground#B6D97A
  • list.hoverBackground#1B2821
  • list.inactiveSelectionBackground#1B2821
  • menu.background#16221C
  • menu.foreground#E3EAE1
  • menubar.selectionBackground#273A30
  • minimap.background#121C17
  • notifications.background#16221C
  • notifications.border#273A30
  • panel.background#16221C
  • panel.border#273A30
  • panelTitle.activeForeground#E3EAE1
  • panelTitle.inactiveForeground#86A380
  • peekView.border#B6D97A
  • peekViewEditor.background#0E1512
  • peekViewResult.background#16221C
  • scrollbarSlider.activeBackground#46594FCC
  • scrollbarSlider.background#273A3099
  • scrollbarSlider.hoverBackground#3A4A42CC
  • selection.background#273A30
  • sideBar.background#16221C
  • sideBar.border#273A30
  • sideBar.foreground#C4D2C1
  • sideBarSectionHeader.background#0E1512
  • sideBarSectionHeader.foreground#C4D2C1
  • sideBarTitle.foreground#86A380
  • statusBar.background#0E1512
  • statusBar.border#273A30
  • statusBar.debuggingBackground#E3B168
  • statusBar.debuggingForeground#0E1512
  • statusBar.foreground#C4D2C1
  • statusBar.noFolderBackground#0E1512
  • tab.activeBackground#121C17
  • tab.activeBorderTop#B6D97A
  • tab.activeForeground#E3EAE1
  • tab.border#273A30
  • tab.inactiveBackground#16221C
  • tab.inactiveForeground#86A380
  • terminal.ansiBlack#1B2821
  • terminal.ansiBlue#8FC4D8
  • terminal.ansiBrightBlack#536A5E
  • terminal.ansiBrightBlue#B5D8E5
  • terminal.ansiBrightCyan#A9D8D2
  • terminal.ansiBrightGreen#B4E4C5
  • terminal.ansiBrightMagenta#E8CBDC
  • terminal.ansiBrightRed#EAAEA3
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#CCE4A2
  • terminal.ansiCyan#86C8C0
  • terminal.ansiGreen#8FD6A8
  • terminal.ansiMagenta#D9A7C4
  • terminal.ansiRed#E08A7A
  • terminal.ansiWhite#E3EAE1
  • terminal.ansiYellow#B6D97A
  • terminal.background#0E1512
  • terminal.foreground#C4D2C1
  • titleBar.activeBackground#0E1512
  • titleBar.activeForeground#E3EAE1
  • titleBar.border#273A30
  • titleBar.inactiveBackground#0E1512
  • titleBar.inactiveForeground#86A380
  • widget.shadow#0000004D

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#607C5Aitalic
string, string.quoted, punctuation.definition.string#8FD6A8
string.regexp#86C8C0
constant.numeric, constant.language, keyword.other.unit#E3B168
constant.character.escape#D9A7C4
variable, variable.other.readwrite, meta.definition.variable.name#E3EAE1
variable.parameter#C4D2C1
variable.language, variable.other.constant#D9A7C4
keyword, keyword.control, storage, storage.type, storage.modifier#B6D97Abold
keyword.operator#B0C3AC
entity.name.function, support.function, meta.function-call#8FC4D8
entity.name.class, entity.name.type, support.class, support.type#C8DDA0
entity.name.tag#B6D97A
entity.other.attribute-name#8FD6A8
support.constant, support.variable#D9A7C4
punctuation, meta.brace#97B092
markup.heading#B6D97Abold
markup.bold#E3EAE1bold
markup.italic#E3EAE1italic
markup.inline.raw, markup.raw#8FD6A8
markup.underline.link#8FC4D8underline
invalid, invalid.illegal#E08A7A
meta.diff.header, meta.diff.range#8FC4D8
markup.inserted#8FD6A8
markup.deleted#E08A7A
support.type.property-name.json, support.type.property-name#B6D97A