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#de693d
  • activityBar.border#de693d
  • activityBar.foreground#0c0907
  • activityBar.inactiveForeground#0c090780
  • activityBarBadge.background#e0a20a
  • activityBarBadge.foreground#0c0907
  • badge.background#e0a20a
  • badge.foreground#0c0907
  • button.background#e0a20a
  • button.foreground#0c0907
  • button.hoverBackground#de693d
  • disabledForeground#d28e3980
  • dropdown.background#321404
  • dropdown.border#de693d
  • dropdown.foreground#d28e39
  • editor.background#0c0907
  • editor.findMatchBackground#e0a20a80
  • editor.findMatchHighlightBackground#e0a20a40
  • editor.foreground#d28e39
  • editor.hoverHighlightBackground#32140480
  • editor.inactiveSelectionBackground#32140440
  • editor.selectionBackground#32140480
  • editor.selectionHighlightBackground#e0a20a40
  • editor.wordHighlightBackground#de693d40
  • editor.wordHighlightStrongBackground#de693d80
  • editorBracketMatch.background#0c0907
  • editorBracketMatch.border#e0a20a
  • editorCursor.foreground#e0a20a
  • editorGroupHeader.tabsBackground#321404
  • editorGroupHeader.tabsBorder#de693d
  • editorGutter.addedBackground#d28e3980
  • editorGutter.background#0c0907
  • editorGutter.deletedBackground#de693d
  • editorGutter.modifiedBackground#e0a20a
  • editorIndentGuide.activeBackground#d28e3980
  • editorIndentGuide.background#32140480
  • editorLineNumber.activeForeground#d28e39
  • editorLineNumber.foreground#d28e3980
  • editorOverviewRuler.border#ffffff00
  • editorOverviewRuler.errorForeground#de693d
  • editorOverviewRuler.findMatchForeground#e0a20a80
  • editorOverviewRuler.infoForeground#d28e39
  • editorOverviewRuler.warningForeground#e0a20a
  • editorRuler.foreground#de693d80
  • editorWhitespace.foreground#d28e3940
  • focusBorder#e0a20a
  • foreground#d28e39
  • input.background#321404
  • input.border#de693d
  • input.foreground#d28e39
  • input.placeholderForeground#d28e3980
  • list.activeSelectionBackground#e0a20a80
  • list.activeSelectionForeground#0c0907
  • list.errorForeground#de693d
  • list.focusBackground#e0a20a80
  • list.focusForeground#0c0907
  • list.highlightForeground#e0a20a
  • list.hoverBackground#321404
  • list.hoverForeground#d28e39
  • list.inactiveSelectionBackground#32140480
  • list.inactiveSelectionForeground#d28e39
  • list.warningForeground#e0a20a
  • panel.background#321404
  • panel.border#de693d
  • panelTitle.activeBorder#e0a20a
  • panelTitle.activeForeground#d28e39
  • panelTitle.inactiveForeground#d28e3980
  • peekView.border#e0a20a
  • peekViewEditor.background#0c0907
  • peekViewEditor.matchHighlightBackground#e0a20a80
  • peekViewResult.background#321404
  • peekViewResult.selectionBackground#e0a20a80
  • peekViewTitle.background#de693d
  • progressBar.background#e0a20a
  • scrollbar.shadow#00000000
  • scrollbarSlider.activeBackground#de693d
  • scrollbarSlider.background#de693d40
  • scrollbarSlider.hoverBackground#de693d80
  • sideBar.background#321404
  • sideBar.border#de693d
  • sideBar.foreground#d28e39
  • sideBarSectionHeader.background#de693d
  • sideBarSectionHeader.border#de693d
  • sideBarSectionHeader.foreground#0c0907
  • sideBarTitle.foreground#d28e39
  • statusBar.background#de693d
  • statusBar.border#de693d
  • statusBar.debuggingBackground#e0a20a
  • statusBar.debuggingForeground#0c0907
  • statusBar.foreground#0c0907
  • statusBar.noFolderBackground#321404
  • statusBar.noFolderForeground#d28e39
  • statusBarItem.remoteBackground#e0a20a
  • statusBarItem.remoteForeground#0c0907
  • tab.activeBackground#0c0907
  • tab.activeBorderTop#e0a20a
  • tab.activeForeground#d28e39
  • tab.border#de693d
  • tab.inactiveBackground#321404
  • tab.inactiveForeground#d28e3980
  • tab.unfocusedActiveBorderTop#e0a20a80
  • terminal.ansiBlack#321404
  • terminal.ansiBlue#321404
  • terminal.ansiBrightBlack#d28e3980
  • terminal.ansiBrightBlue#321404
  • terminal.ansiBrightCyan#d28e39
  • terminal.ansiBrightGreen#e0a20a
  • terminal.ansiBrightMagenta#de693d
  • terminal.ansiBrightRed#de693d
  • terminal.ansiBrightWhite#d28e39
  • terminal.ansiBrightYellow#e0a20a
  • terminal.ansiCyan#d28e39
  • terminal.ansiGreen#e0a20a
  • terminal.ansiMagenta#de693d
  • terminal.ansiRed#de693d
  • terminal.ansiWhite#d28e39
  • terminal.ansiYellow#e0a20a
  • terminal.background#0c0907
  • terminal.foreground#d28e39
  • terminalCursor.foreground#e0a20a
  • titleBar.activeBackground#de693d
  • titleBar.activeForeground#0c0907
  • titleBar.border#de693d
  • titleBar.inactiveBackground#321404
  • titleBar.inactiveForeground#d28e3980

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#D28E3980italic
string, punctuation.definition.string#E0A20A
constant.numeric#E0A20A
constant.language#DE693Dbold
constant.character, constant.other#E0A20A
variable#D28E39
variable.language#DE693Ditalic
keyword#DE693Dbold
storage#DE693D
storage.type#D28E39italic
entity.name.type, entity.name.class, support.class#D28E39bold underline
entity.other.inherited-class#D28E39italic underline
entity.name.function, support.function#D28E39bold
variable.parameter#D28E39italic
entity.name.tag#DE693Dbold
entity.other.attribute-name#E0A20Aitalic
support.function#E0A20Abold
support.constant#E0A20A
support.type, support.class#E0A20Aitalic
support.variable#E0A20A
invalid#0C0907
invalid.deprecated#0C0907
support.type.property-name.json#DE693D
string.quoted.double.json#E0A20A
constant.language.json#D28E39
markup.heading#DE693Dbold
markup.underline.link#E0A20Aunderline
markup.bold#D28E39bold
markup.italic#D28E39italic
markup.inline.raw#E0A20A
token.info-token#6796E6
token.warn-token#CD9731
token.error-token#F44747
token.debug-token#B267E6