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#483426
  • activityBar.border#6f5f58
  • activityBar.foreground#e8e4b1
  • activityBarBadge.background#98bfff
  • activityBarBadge.foreground#352718
  • badge.background#66421f
  • badge.foreground#f8efd8
  • button.background#66421f
  • button.foreground#f8efd8
  • button.hoverBackground#60518f
  • diffEditor.border#6f5f58
  • diffEditor.insertedLineBackground#2f3b0f99
  • diffEditor.insertedTextBackground#2f491f99
  • diffEditor.removedLineBackground#4b240a99
  • diffEditor.removedTextBackground#622a1f99
  • dropdown.background#352718
  • dropdown.border#6f5f58
  • dropdown.foreground#e8e4b1
  • editor.background#352718
  • editor.findMatchBackground#8f5040
  • editor.findMatchHighlightBackground#4648d099
  • editor.findRangeHighlightBackground#4e431099
  • editor.foreground#e8e4b1
  • editor.hoverHighlightBackground#60518f99
  • editor.inactiveSelectionBackground#38486299
  • editor.lineHighlightBackground#4f311f
  • editor.selectionBackground#443a4f
  • editor.selectionHighlightBackground#66421f99
  • editor.wordHighlightBackground#2f430299
  • editor.wordHighlightStrongBackground#5a661f99
  • editorBracketMatch.background#5f6f1f
  • editorBracketMatch.border#f0aac5
  • editorCursor.foreground#f9cf7a
  • editorError.foreground#ff7f4f
  • editorGutter.addedBackground#6fd560
  • editorGutter.background#3d2e1f
  • editorGutter.deletedBackground#ff7f4f
  • editorGutter.modifiedBackground#ffa21f
  • editorHint.foreground#90918a
  • editorIndentGuide.activeBackground1#79665f
  • editorIndentGuide.background1#6f5f58
  • editorInfo.foreground#6fd560
  • editorLineNumber.activeForeground#e8e4b1
  • editorLineNumber.foreground#90918a
  • editorOverviewRuler.addedForeground#6fd560
  • editorOverviewRuler.border#6f5f58
  • editorOverviewRuler.deletedForeground#ff7f4f
  • editorOverviewRuler.modifiedForeground#ffa21f
  • editorRuler.foreground#59463f
  • editorWarning.foreground#ffa21f
  • editorWhitespace.foreground#6f5f58
  • gitDecoration.addedResourceForeground#6fd560
  • gitDecoration.conflictingResourceForeground#ff8f98
  • gitDecoration.deletedResourceForeground#ffbfbf
  • gitDecoration.ignoredResourceForeground#90918a
  • gitDecoration.modifiedResourceForeground#dada90
  • gitDecoration.submoduleResourceForeground#ccaa70
  • gitDecoration.untrackedResourceForeground#65d590
  • input.background#352718
  • input.border#6f5f58
  • input.foreground#e8e4b1
  • input.placeholderForeground#90918a
  • inputOption.activeBackground#66421f
  • inputOption.activeBorder#98bfff
  • inputValidation.errorBackground#571a05
  • inputValidation.errorBorder#ff7f4f
  • inputValidation.infoBackground#2f4302
  • inputValidation.infoBorder#6fd560
  • inputValidation.warningBackground#4e4310
  • inputValidation.warningBorder#ffa21f
  • list.activeSelectionBackground#66421f
  • list.activeSelectionForeground#f8efd8
  • list.activeSelectionIconForeground#98bfff
  • list.focusBackground#66421f
  • list.highlightForeground#98bfff
  • list.hoverBackground#60518f
  • list.inactiveSelectionBackground#384862
  • notificationCenterHeader.background#59463f
  • notificationCenterHeader.foreground#e8e4b1
  • panel.background#352718
  • panel.border#6f5f58
  • panelTitle.activeBorder#98bfff
  • panelTitle.activeForeground#e8e4b1
  • panelTitle.inactiveForeground#90918a
  • progressBar.background#98bfff
  • sideBar.background#483426
  • sideBar.border#6f5f58
  • sideBar.foreground#e8e4b1
  • sideBarSectionHeader.background#59463f
  • sideBarSectionHeader.foreground#e8e4b1
  • sideBarTitle.foreground#e8e4b1
  • statusBar.background#704f00
  • statusBar.border#6f5f58
  • statusBar.debuggingBackground#a04fc5
  • statusBar.debuggingForeground#f8efd8
  • statusBar.foreground#f8efd8
  • statusBar.noFolderBackground#59463f
  • statusBar.noFolderForeground#e8e4b1
  • tab.activeBackground#352718
  • tab.activeBorder#98bfff
  • tab.activeForeground#e8e4b1
  • tab.border#6f5f58
  • tab.hoverBackground#4f311f
  • tab.hoverBorder#6f5f58
  • tab.inactiveBackground#483426
  • tab.inactiveForeground#90918a
  • tab.unfocusedActiveBackground#3d2e1f
  • tab.unfocusedActiveBorder#6f5f58
  • tab.unfocusedActiveForeground#90918a
  • terminal.ansiBlack#e8e4b1
  • terminal.ansiBlue#57aff6
  • terminal.ansiBrightBlack#90918a
  • terminal.ansiBrightBlue#98bfff
  • terminal.ansiBrightCyan#7fc5df
  • terminal.ansiBrightGreen#a0d13a
  • terminal.ansiBrightMagenta#fa90aa
  • terminal.ansiBrightRed#ff7f4f
  • terminal.ansiBrightWhite#352718
  • terminal.ansiBrightYellow#ffa21f
  • terminal.ansiCyan#6fcad0
  • terminal.ansiGreen#6fd560
  • terminal.ansiMagenta#f0aac5
  • terminal.ansiRed#ff7f7f
  • terminal.ansiWhite#483426
  • terminal.ansiYellow#e4b53f
  • terminal.background#352718
  • terminal.foreground#e8e4b1
  • terminalCursor.foreground#f9cf7a
  • titleBar.activeBackground#59463f
  • titleBar.activeForeground#e8e4b1
  • titleBar.border#6f5f58
  • titleBar.inactiveBackground#3d2e1f
  • titleBar.inactiveForeground#90918a

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#eab780italic
comment.documentation, comment.block.documentation, string.quoted.docstring#99bfcf
keyword, storage, storage.modifier#c6a2fe
keyword.operator#90918a
storage.type, support.type, entity.name.type, entity.other.inherited-class#65d590
entity.name.function, support.function, meta.function-call, variable.function#fa90aa
variable, support.variable, variable.other#70e0cf
constant, constant.numeric, constant.character, constant.language, support.constant#62cfef
string, constant.other.symbol#98bfff
constant.character.escape, string.regexp#f0aac5
punctuation#90918a
invalid, invalid.illegal#ff7f4f
markup.heading#ff7f7fbold
markup.bold, markup.italic#98bfffbold italic
meta.link, markup.underline.link#98bfffunderline
markup.list, markup.quote#ccaa70
markup.inline.raw#fa90aa
markup.inserted, meta.diff.header.to-file#a0e0a0
markup.deleted, meta.diff.header.from-file#ffbfbf
markup.changed, meta.diff.range#dada90
Ef (εὖ) themes for VSCode by bzy-debug - VS Code Theme