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#07070a
  • activityBar.border#121318
  • activityBar.foreground#efeeea
  • activityBar.inactiveForeground#7f85ac
  • activityBarBadge.background#e05a55
  • activityBarBadge.foreground#111116
  • badge.background#3f6bd9
  • badge.foreground#111116
  • breadcrumb.focusForeground#efeeea
  • breadcrumb.foreground#7f85ac
  • diffEditor.diagonalFill#1a1a22
  • diffEditor.insertedTextBackground#3abf86
  • diffEditor.removedTextBackground#e05a55
  • disabledForeground#7f85ac
  • editor.background#111116
  • editor.findMatchBackground#b29245
  • editor.findMatchHighlightBackground#1a1a22
  • editor.findRangeHighlightBackground#1a1a22
  • editor.foreground#d2d1c6
  • editor.inactiveSelectionBackground#1a1a22
  • editor.lineHighlightBackground#2b2e36
  • editor.selectionBackground#2f4fa3
  • editor.selectionHighlightBackground#1a1a22
  • editorCursor.foreground#d2d1c6
  • editorError.foreground#e77e79
  • editorGroup.border#121318
  • editorGroupHeader.tabsBackground#07070a
  • editorHint.foreground#3aa39a
  • editorHoverWidget.background#07070a
  • editorHoverWidget.border#1a1a22
  • editorHoverWidget.foreground#b7b6b2
  • editorIndentGuide.activeBackground#5f6770
  • editorIndentGuide.background#1a1a22
  • editorInfo.foreground#6f8ee6
  • editorLineNumber.activeForeground#f0d487
  • editorLineNumber.foreground#5f6770
  • editorSuggestWidget.background#2b2e36
  • editorSuggestWidget.foreground#a6a598
  • editorSuggestWidget.highlightForeground#efeeea
  • editorSuggestWidget.selectedBackground#2f4fa3
  • editorWarning.foreground#f0d487
  • editorWhitespace.foreground#5f6770
  • editorWidget.background#07070a
  • editorWidget.border#1a1a22
  • focusBorder#3f6bd9
  • foreground#d2d1c6
  • gitDecoration.addedResourceForeground#3abf86
  • gitDecoration.deletedResourceForeground#e05a55
  • gitDecoration.ignoredResourceForeground#5f6770
  • gitDecoration.modifiedResourceForeground#6f8ee6
  • gitDecoration.untrackedResourceForeground#3aa39a
  • input.background#121318
  • input.border#1a1a22
  • input.foreground#b7b6b2
  • inputOption.activeBorder#3f6bd9
  • inputValidation.errorBackground#111116
  • inputValidation.errorBorder#e77e79
  • inputValidation.infoBackground#111116
  • inputValidation.infoBorder#6f8ee6
  • inputValidation.warningBackground#111116
  • inputValidation.warningBorder#f0d487
  • list.activeSelectionBackground#2f4fa3
  • list.activeSelectionForeground#efeeea
  • list.focusBackground#2f4fa3
  • list.highlightForeground#efeeea
  • list.hoverBackground#1a1a22
  • list.inactiveSelectionBackground#1a1a22
  • panel.background#111116
  • panel.border#121318
  • panelTitle.activeForeground#efeeea
  • panelTitle.inactiveForeground#7f85ac
  • peekView.border#1a1a22
  • peekViewEditor.background#111116
  • peekViewResult.background#07070a
  • peekViewResult.selectionBackground#1a1a22
  • peekViewTitle.background#07070a
  • scrollbar.shadow#00000000
  • scrollbarSlider.activeBackground#5f6770b0
  • scrollbarSlider.background#5f677070
  • scrollbarSlider.hoverBackground#5f677090
  • sideBar.background#07070a
  • sideBar.border#121318
  • sideBar.foreground#b7b6b2
  • sideBarSectionHeader.background#07070a
  • sideBarSectionHeader.foreground#b7b6b2
  • sideBarTitle.foreground#efeeea
  • statusBar.background#2b2e36
  • statusBar.border#121318
  • statusBar.debuggingBackground#e5c15a
  • statusBar.debuggingForeground#111116
  • statusBar.foreground#a6a598
  • statusBar.noFolderBackground#2b2e36
  • tab.activeBackground#111116
  • tab.activeForeground#efeeea
  • tab.border#121318
  • tab.inactiveBackground#07070a
  • tab.inactiveForeground#7f85ac
  • terminal.ansiBlack#111116
  • terminal.ansiBlue#3f6bd9
  • terminal.ansiBrightBlack#5f6770
  • terminal.ansiBrightBlue#6f8ee6
  • terminal.ansiBrightCyan#3aa39a
  • terminal.ansiBrightGreen#3abf86
  • terminal.ansiBrightMagenta#e77e79
  • terminal.ansiBrightRed#e77e79
  • terminal.ansiBrightWhite#efeeea
  • terminal.ansiBrightYellow#f0d487
  • terminal.ansiCyan#3aa39a
  • terminal.ansiGreen#3abf86
  • terminal.ansiMagenta#e05a55
  • terminal.ansiRed#e05a55
  • terminal.ansiWhite#d4d3cf
  • terminal.ansiYellow#e5c15a
  • terminal.background#111116
  • terminal.foreground#d4d3cf
  • titleBar.activeBackground#07070a
  • titleBar.activeForeground#b7b6b2
  • titleBar.border#121318
  • titleBar.inactiveBackground#07070a
  • titleBar.inactiveForeground#7f85ac

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#7f85acitalic
string, punctuation.definition.string#e5c15a
constant.numeric, constant.language, constant.character, constant.other#6f8ee6
keyword, storage.type, storage.modifier#e05a55bold
entity.name.type, support.type, support.class, support.type.primitive#efeeeaitalic
entity.name.function, support.function, variable.function, meta.function-call#6bc0b6
variable, identifier#d2d1c6
meta.preprocessor, keyword.control.import, keyword.control.directive, entity.name.function.preprocessor#6f8ee6
keyword.operator, punctuation, meta.brace, meta.delimiter#5f6770
support.constant, support.other, entity.other.attribute-name#3aa39a
invalid, invalid.illegal#e77e79bold
Seoulism—Cool Korean Traditional Palette by Punkware - VS Code Theme