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#202225
  • activityBar.border#202225
  • activityBar.foreground#43B581
  • activityBar.inactiveForeground#72767D
  • activityBarBadge.background#F04747
  • activityBarBadge.foreground#ffffff
  • badge.background#F04747
  • badge.foreground#ffffff
  • breadcrumb.activeSelectionForeground#FFFFFF
  • breadcrumb.focusForeground#ffffff
  • breadcrumb.foreground#B9BBBE
  • breadcrumbPicker.background#202225
  • button.background#7278dacc
  • button.foreground#ffffffcc
  • button.hoverBackground#7278da
  • contrastBorder#232442
  • debugConsole.errorForeground#F04747
  • diffEditor.insertedTextBackground#43b5821e
  • diffEditor.removedTextBackground#f047474d
  • dropdown.background#202225
  • dropdown.border#202225
  • dropdown.foreground#ffffffcc
  • editor.background#36393F
  • editor.foreground#eeffff
  • editor.selectionBackground#42464d
  • editor.selectionHighlightBackground#72767d83
  • editorCursor.foreground#B9BBBE
  • editorGroup.border#202225
  • editorGroup.dropBackground#797a9770
  • editorGroup.emptyBackground#2F3136
  • editorGroupHeader.noTabsBackground#2F3136
  • editorGroupHeader.tabsBackground#2F3136
  • editorGroupHeader.tabsBorder#2F3136
  • editorIndentGuide.activeBackground#575c66
  • editorIndentGuide.background#36393F
  • editorLineNumber.activeForeground#B9BBBE
  • editorLineNumber.foreground#4F545C
  • editorWidget.background#292B2F
  • errorForeground#F04747
  • focusBorder#232442
  • foreground#B9BBBE
  • input.background#72767D
  • input.border#72767D
  • input.foreground#ffffffcc
  • input.placeholderForeground#dfe4f7
  • inputOption.activeBackground#43B581
  • inputOption.activeBorder#43B581
  • inputValidation.errorBackground#F04747f2
  • inputValidation.errorBorder#F04747
  • inputValidation.errorForeground#ffffffcc
  • inputValidation.infoBackground#0779e4F2
  • inputValidation.infoBorder#0779e4
  • inputValidation.warningBackground#ffd31dF2
  • inputValidation.warningBorder#ffd31d
  • list.activeSelectionBackground#7278da
  • list.activeSelectionForeground#FFFFFF
  • list.dropBackground#292B2F
  • list.highlightForeground#ffffff
  • list.hoverBackground#34373C
  • list.hoverForeground#DCDDDE
  • list.inactiveSelectionBackground#34373C
  • panel.border#36393F
  • panelTitle.activeBorder#7278da
  • panelTitle.activeForeground#ffffffcc
  • panelTitle.inactiveForeground#72767D
  • peekView.border#4F545C
  • peekViewEditor.background#202225
  • peekViewEditor.matchHighlightBackground#7278da5a
  • peekViewResult.background#202225
  • peekViewResult.fileForeground#B9BBBE
  • peekViewResult.lineForeground#B9BBBE
  • peekViewResult.matchHighlightBackground#4F545C
  • peekViewResult.selectionBackground#2E3250
  • peekViewResult.selectionForeground#B9BBBE
  • peekViewTitle.background#202225
  • peekViewTitleDescription.foreground#a4a6dd
  • peekViewTitleLabel.foreground#FFFFFF
  • progressBar.background#43B581
  • scrollbar.shadow#16161C
  • scrollbarSlider.activeBackground#6C6F9380
  • scrollbarSlider.background#6C6F931A
  • scrollbarSlider.hoverBackground#6C6F934D
  • selection.background#7278da
  • sideBar.background#2F3136
  • sideBar.border#2F3136
  • sideBar.foreground#B9BBBE
  • sideBarSectionHeader.background#292B2F
  • sideBarSectionHeader.border#292B2F
  • sideBarTitle.foreground#B9BBBE
  • statusBar.background#7278da
  • statusBar.border#7278da
  • statusBar.foreground#ffffff
  • tab.activeBackground#2F3136
  • tab.activeBorder#7278da
  • tab.activeForeground#FFFFFF
  • tab.border#2F3136
  • tab.hoverForeground#FFFFFF
  • tab.inactiveBackground#2F3136
  • tab.inactiveForeground#B9BBBE
  • terminal.ansiBlack#202225
  • terminal.ansiBlue#0077b6
  • terminal.ansiBrightBlack#575656
  • terminal.ansiBrightBlue#0779e4
  • terminal.ansiBrightCyan#66FCF1
  • terminal.ansiBrightGreen#08cea6
  • terminal.ansiBrightMagenta#D275FB
  • terminal.ansiBrightRed#ee3131
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#ffe988
  • terminal.ansiCyan#00FFFF
  • terminal.ansiGreen#43B581
  • terminal.ansiMagenta#D275FB
  • terminal.ansiRed#F04747
  • terminal.ansiWhite#ffffff
  • terminal.ansiYellow#DECA82
  • terminal.foreground#B9BBBE
  • terminal.selectionBackground#42464d4d
  • textLink.foreground#00B0D5
  • titleBar.activeBackground#202225
  • widget.shadow#14152700

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#72767Ditalic
entity.name#deca82—
entity.name.function#66FCF1—
entity.other.attribute-name#b2c0f3italic
constant#de9c82—
constant.character.escape#66FCF1—
entity.other.inherited-class#43B581—
entity.other.attribute-name.id#66FCF1—
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class#43B581—
entity.name.variable, variable#8296de—
keyword#e8bcfcitalic
keyword.operator#B9BBBE—
keyword.operator.new, keyword.operator.expression, keyword.operator.logical, keyword.operator.delete#D275FB—
entity.name.tag#8296de
entity.name.type, storage.type.cs#deca82—
keyword.other.unit#de9c82—
markup.quote#FAB795B3italic
markup.heading, entity.name.section#8296de—
markup.bold#D275FBbold
support.variable#8296de—
support.type.property-name, meta.object-literal.key#8296de—
support.type.property-name.css#B9BBBE—
variable.language#deca82italic
variable.parameter—italic
string.template meta.embedded#B9BBBE—
markup.italic#de9c82E6italic
markup.inline.raw, markup.fenced_code.block#de9c82—
markup.underline.link#43B581—
storage#D275FBitalic
string.quoted, string.template#5eb38d—
string.regexp#de9c82—
string.other.link#de9c82—
punctuation.section.embedded#D275FB—
punctuation.definition.list#de9c82—
support#deca82—
support.function#66FCF1—
punctuation.definition.tag#B9BBBE
punctuation.separator#B9BBBE—
punctuation.definition.template-expression#D275FB—
Kulay by claide - VS Code Theme