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#2a2228
  • activityBar.border#605760
  • activityBar.foreground#d8cfd5
  • activityBarBadge.background#8895ff
  • activityBarBadge.foreground#160f0f
  • badge.background#2f335a
  • badge.foreground#ffdfdf
  • button.background#2f335a
  • button.foreground#ffdfdf
  • button.hoverBackground#004f3f
  • diffEditor.border#605760
  • diffEditor.insertedLineBackground#00291899
  • diffEditor.insertedTextBackground#00371f99
  • diffEditor.removedLineBackground#2f060f99
  • diffEditor.removedTextBackground#450f1f99
  • dropdown.background#160f0f
  • dropdown.border#605760
  • dropdown.foreground#d8cfd5
  • editor.background#160f0f
  • editor.findMatchBackground#8f5040
  • editor.findMatchHighlightBackground#4648d099
  • editor.findRangeHighlightBackground#3a330f99
  • editor.foreground#d8cfd5
  • editor.hoverHighlightBackground#004f3f99
  • editor.inactiveSelectionBackground#28356599
  • editor.lineHighlightBackground#34223f
  • editor.selectionBackground#16304f
  • editor.selectionHighlightBackground#2f335a99
  • editor.wordHighlightBackground#10351599
  • editor.wordHighlightStrongBackground#452f5f99
  • editorBracketMatch.background#2f605e
  • editorBracketMatch.border#d37faf
  • editorCursor.foreground#ff99ff
  • editorError.foreground#ff7560
  • editorGutter.addedBackground#60b444
  • editorGutter.background#1c1719
  • editorGutter.deletedBackground#ff7560
  • editorGutter.modifiedBackground#ef926f
  • editorHint.foreground#908890
  • editorIndentGuide.activeBackground1#564f55
  • editorIndentGuide.background1#605760
  • editorInfo.foreground#60b444
  • editorLineNumber.activeForeground#d8cfd5
  • editorLineNumber.foreground#908890
  • editorOverviewRuler.addedForeground#60b444
  • editorOverviewRuler.border#605760
  • editorOverviewRuler.deletedForeground#ff7560
  • editorOverviewRuler.modifiedForeground#ef926f
  • editorRuler.foreground#362f35
  • editorWarning.foreground#ef926f
  • editorWhitespace.foreground#605760
  • gitDecoration.addedResourceForeground#60b444
  • gitDecoration.conflictingResourceForeground#ff85aa
  • gitDecoration.deletedResourceForeground#ffbfbf
  • gitDecoration.ignoredResourceForeground#908890
  • gitDecoration.modifiedResourceForeground#efef80
  • gitDecoration.submoduleResourceForeground#afdacf
  • gitDecoration.untrackedResourceForeground#60bf88
  • input.background#160f0f
  • input.border#605760
  • input.foreground#d8cfd5
  • input.placeholderForeground#908890
  • inputOption.activeBackground#2f335a
  • inputOption.activeBorder#8895ff
  • inputValidation.errorBackground#461018
  • inputValidation.errorBorder#ff7560
  • inputValidation.infoBackground#103515
  • inputValidation.infoBorder#60b444
  • inputValidation.warningBackground#3a330f
  • inputValidation.warningBorder#ef926f
  • list.activeSelectionBackground#2f335a
  • list.activeSelectionForeground#ffdfdf
  • list.activeSelectionIconForeground#8895ff
  • list.focusBackground#2f335a
  • list.highlightForeground#8895ff
  • list.hoverBackground#004f3f
  • list.inactiveSelectionBackground#283565
  • notificationCenterHeader.background#362f35
  • notificationCenterHeader.foreground#d8cfd5
  • panel.background#160f0f
  • panel.border#605760
  • panelTitle.activeBorder#8895ff
  • panelTitle.activeForeground#d8cfd5
  • panelTitle.inactiveForeground#908890
  • progressBar.background#8895ff
  • sideBar.background#2a2228
  • sideBar.border#605760
  • sideBar.foreground#d8cfd5
  • sideBarSectionHeader.background#362f35
  • sideBarSectionHeader.foreground#d8cfd5
  • sideBarTitle.foreground#d8cfd5
  • statusBar.background#6a294f
  • statusBar.border#605760
  • statusBar.debuggingBackground#804fd5
  • statusBar.debuggingForeground#ffdfdf
  • statusBar.foreground#ffdfdf
  • statusBar.noFolderBackground#362f35
  • statusBar.noFolderForeground#d8cfd5
  • tab.activeBackground#160f0f
  • tab.activeBorder#8895ff
  • tab.activeForeground#d8cfd5
  • tab.border#605760
  • tab.hoverBackground#34223f
  • tab.hoverBorder#605760
  • tab.inactiveBackground#2a2228
  • tab.inactiveForeground#908890
  • tab.unfocusedActiveBackground#1c1719
  • tab.unfocusedActiveBorder#605760
  • tab.unfocusedActiveForeground#908890
  • terminal.ansiBlack#d8cfd5
  • terminal.ansiBlue#7fa5f6
  • terminal.ansiBrightBlack#908890
  • terminal.ansiBrightBlue#8895ff
  • terminal.ansiBrightCyan#9ac2ff
  • terminal.ansiBrightGreen#a0c27f
  • terminal.ansiBrightMagenta#e772df
  • terminal.ansiBrightRed#ff7560
  • terminal.ansiBrightWhite#160f0f
  • terminal.ansiBrightYellow#ef926f
  • terminal.ansiCyan#8fbaff
  • terminal.ansiGreen#60b444
  • terminal.ansiMagenta#d37faf
  • terminal.ansiRed#f48359
  • terminal.ansiWhite#2a2228
  • terminal.ansiYellow#d4a052
  • terminal.background#160f0f
  • terminal.foreground#d8cfd5
  • terminalCursor.foreground#ff99ff
  • titleBar.activeBackground#362f35
  • titleBar.activeForeground#d8cfd5
  • titleBar.border#605760
  • titleBar.inactiveBackground#1c1719
  • titleBar.inactiveForeground#908890

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#c7a07fitalic
comment.documentation, comment.block.documentation, string.quoted.docstring#8ac0ef
keyword, storage, storage.modifier#a698ef
keyword.operator#908890
storage.type, support.type, entity.name.type, entity.other.inherited-class#60bf88
entity.name.function, support.function, meta.function-call, variable.function#e772df
variable, support.variable, variable.other#8fcfdf
constant, constant.numeric, constant.character, constant.language, support.constant#72afff
string, constant.other.symbol#8895ff
constant.character.escape, string.regexp#d37faf
punctuation#908890
invalid, invalid.illegal#ff7560
markup.heading#f48359bold
markup.bold, markup.italic#8895ffbold italic
meta.link, markup.underline.link#8895ffunderline
markup.list, markup.quote#afdacf
markup.inline.raw#e772df
markup.inserted, meta.diff.header.to-file#a0e0a0
markup.deleted, meta.diff.header.from-file#ffbfbf
markup.changed, meta.diff.range#efef80
Ef (εὖ) themes for VSCode by bzy-debug - VS Code Theme