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.parameteritalic
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

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

Loading...

Kulay - Coding Theme