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#121f34
  • activityBar.border#555a64
  • activityBar.foreground#ddddee
  • activityBarBadge.background#6a9fff
  • activityBarBadge.foreground#000a1f
  • badge.background#343420
  • badge.foreground#ffffff
  • button.background#343420
  • button.foreground#ffffff
  • button.hoverBackground#4f4f00
  • diffEditor.border#555a64
  • diffEditor.insertedLineBackground#00143f99
  • diffEditor.insertedTextBackground#00234f99
  • diffEditor.removedLineBackground#281a0099
  • diffEditor.removedTextBackground#32320099
  • dropdown.background#000a1f
  • dropdown.border#555a64
  • dropdown.foreground#ddddee
  • editor.background#000a1f
  • editor.findMatchBackground#5f5f00
  • editor.findMatchHighlightBackground#266fd099
  • editor.findRangeHighlightBackground#3a3a1f99
  • editor.foreground#ddddee
  • editor.hoverHighlightBackground#4f4f0099
  • editor.inactiveSelectionBackground#264f7099
  • editor.lineHighlightBackground#2e2e1b
  • editor.selectionBackground#223848
  • editor.selectionHighlightBackground#34342099
  • editor.wordHighlightBackground#002b6099
  • editor.wordHighlightStrongBackground#00405f99
  • editorBracketMatch.background#0f4f9a
  • editorBracketMatch.border#b379bf
  • editorCursor.foreground#ffff00
  • editorError.foreground#e47360
  • editorGutter.addedBackground#3faa26
  • editorGutter.background#0d1429
  • editorGutter.deletedBackground#e47360
  • editorGutter.modifiedBackground#cfaf00
  • editorHint.foreground#7f8797
  • editorIndentGuide.activeBackground1#445165
  • editorIndentGuide.background1#555a64
  • editorInfo.foreground#3faa26
  • editorLineNumber.activeForeground#ddddee
  • editorLineNumber.foreground#7f8797
  • editorOverviewRuler.addedForeground#3faa26
  • editorOverviewRuler.border#555a64
  • editorOverviewRuler.deletedForeground#e47360
  • editorOverviewRuler.modifiedForeground#cfaf00
  • editorRuler.foreground#243145
  • editorWarning.foreground#cfaf00
  • editorWhitespace.foreground#555a64
  • gitDecoration.addedResourceForeground#3faa26
  • gitDecoration.conflictingResourceForeground#cf7a7a
  • gitDecoration.deletedResourceForeground#d4d48f
  • gitDecoration.ignoredResourceForeground#7f8797
  • gitDecoration.modifiedResourceForeground#e3cfff
  • gitDecoration.submoduleResourceForeground#90afef
  • gitDecoration.untrackedResourceForeground#3fa672
  • input.background#000a1f
  • input.border#555a64
  • input.foreground#ddddee
  • input.placeholderForeground#7f8797
  • inputOption.activeBackground#343420
  • inputOption.activeBorder#6a9fff
  • inputValidation.errorBackground#442f00
  • inputValidation.errorBorder#e47360
  • inputValidation.infoBackground#002b60
  • inputValidation.infoBorder#3faa26
  • inputValidation.warningBackground#3a3a1f
  • inputValidation.warningBorder#cfaf00
  • list.activeSelectionBackground#343420
  • list.activeSelectionForeground#ffffff
  • list.activeSelectionIconForeground#6a9fff
  • list.focusBackground#343420
  • list.highlightForeground#6a9fff
  • list.hoverBackground#4f4f00
  • list.inactiveSelectionBackground#264f70
  • notificationCenterHeader.background#243145
  • notificationCenterHeader.foreground#ddddee
  • panel.background#000a1f
  • panel.border#555a64
  • panelTitle.activeBorder#6a9fff
  • panelTitle.activeForeground#ddddee
  • panelTitle.inactiveForeground#7f8797
  • progressBar.background#6a9fff
  • sideBar.background#121f34
  • sideBar.border#555a64
  • sideBar.foreground#ddddee
  • sideBarSectionHeader.background#243145
  • sideBarSectionHeader.foreground#ddddee
  • sideBarTitle.foreground#ddddee
  • statusBar.background#003f8f
  • statusBar.border#555a64
  • statusBar.debuggingBackground#6f60c0
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#ffffff
  • statusBar.noFolderBackground#243145
  • statusBar.noFolderForeground#ddddee
  • tab.activeBackground#000a1f
  • tab.activeBorder#6a9fff
  • tab.activeForeground#ddddee
  • tab.border#555a64
  • tab.hoverBackground#2e2e1b
  • tab.hoverBorder#555a64
  • tab.inactiveBackground#121f34
  • tab.inactiveForeground#7f8797
  • tab.unfocusedActiveBackground#0d1429
  • tab.unfocusedActiveBorder#555a64
  • tab.unfocusedActiveForeground#7f8797
  • terminal.ansiBlack#ddddee
  • terminal.ansiBlue#3f90f0
  • terminal.ansiBrightBlack#7f8797
  • terminal.ansiBrightBlue#6a9fff
  • terminal.ansiBrightCyan#7fafff
  • terminal.ansiBrightGreen#7aad0f
  • terminal.ansiBrightMagenta#af80ea
  • terminal.ansiBrightRed#e47360
  • terminal.ansiBrightWhite#000a1f
  • terminal.ansiBrightYellow#cfaf00
  • terminal.ansiCyan#5faaef
  • terminal.ansiGreen#3faa26
  • terminal.ansiMagenta#b379bf
  • terminal.ansiRed#cf8560
  • terminal.ansiWhite#121f34
  • terminal.ansiYellow#aa9f32
  • terminal.background#000a1f
  • terminal.foreground#ddddee
  • terminalCursor.foreground#ffff00
  • titleBar.activeBackground#243145
  • titleBar.activeForeground#ddddee
  • titleBar.border#555a64
  • titleBar.inactiveBackground#0d1429
  • titleBar.inactiveForeground#7f8797

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#af9a6aitalic
comment.documentation, comment.block.documentation, string.quoted.docstring#8aa0df
keyword, storage, storage.modifier#9f95ff
keyword.operator#7f8797
storage.type, support.type, entity.name.type, entity.other.inherited-class#3fa672
entity.name.function, support.function, meta.function-call, variable.function#af80ea
variable, support.variable, variable.other#0db0ff
constant, constant.numeric, constant.character, constant.language, support.constant#009fff
string, constant.other.symbol#6a9fff
constant.character.escape, string.regexp#b379bf
punctuation#7f8797
invalid, invalid.illegal#e47360
markup.heading#cf8560bold
markup.bold, markup.italic#6a9fffbold italic
meta.link, markup.underline.link#6a9fffunderline
markup.list, markup.quote#90afef
markup.inline.raw#af80ea
markup.inserted, meta.diff.header.to-file#c4d5ff
markup.deleted, meta.diff.header.from-file#d4d48f
markup.changed, meta.diff.range#e3cfff
Ef (εὖ) themes for VSCode by bzy-debug - VS Code Theme