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#E3E5E8
  • activityBar.border#E3E5E8
  • activityBar.foreground#16865d
  • activityBar.inactiveForeground#4F5660
  • activityBarBadge.background#F04747
  • activityBarBadge.foreground#ffffff
  • badge.background#F04747
  • badge.foreground#ffffff
  • breadcrumb.activeSelectionForeground#FFFFFF
  • breadcrumb.focusForeground#ffffff
  • breadcrumb.foreground#505566
  • breadcrumbPicker.background#202225
  • button.background#7278dacc
  • button.foreground#ffffffcc
  • button.hoverBackground#7278da
  • contrastBorder#D0D0D2
  • debugConsole.errorForeground#F04747
  • diffEditor.insertedTextBackground#43b5821e
  • diffEditor.removedTextBackground#F047474d
  • dropdown.background#E3E5E8
  • dropdown.border#E3E5E8
  • dropdown.foreground#060607
  • editor.background#FFFFFF
  • editor.foreground#060607
  • editor.selectionBackground#E8EAED
  • editor.selectionHighlightBackground#E3E5E883
  • editorCursor.foreground#505566
  • editorGroup.border#202225
  • editorGroup.dropBackground#797a9770
  • editorGroup.emptyBackground#ffffff
  • editorGroupHeader.noTabsBackground#ffffff
  • editorGroupHeader.tabsBackground#ffffff
  • editorGroupHeader.tabsBorder#ffffff
  • editorIndentGuide.activeBackground#575c66
  • editorIndentGuide.background#36393F
  • editorLineNumber.activeForeground#505566
  • editorLineNumber.foreground#999999
  • editorWidget.background#F2F3F5
  • errorForeground#F04747
  • focusBorder#D0D0D2
  • foreground#060607
  • input.background#E3E5E8
  • input.border#E3E5E8
  • input.foreground#060607
  • input.placeholderForeground#060607
  • inputOption.activeBackground#16865d
  • inputOption.activeBorder#16865d
  • inputValidation.errorBackground#F04747f2
  • inputValidation.errorBorder#F04747
  • inputValidation.errorForeground#ffffffcc
  • inputValidation.infoBackground#0779e4F2
  • inputValidation.infoBorder#0779e4
  • inputValidation.warningBackground#a5680bF2
  • inputValidation.warningBorder#a5680b
  • list.activeSelectionBackground#7278da
  • list.activeSelectionForeground#FFFFFF
  • list.dropBackground#292B2F
  • list.highlightForeground#ffffff
  • list.hoverBackground#E8EAED
  • list.hoverForeground#060607
  • list.inactiveSelectionBackground#E8EAED
  • panel.border#E3E5E8
  • panelTitle.activeBorder#7278da
  • panelTitle.activeForeground#060607
  • panelTitle.inactiveForeground#999999
  • peekView.border#4F545C
  • peekViewEditor.background#202225
  • peekViewEditor.matchHighlightBackground#7278da5a
  • peekViewResult.background#202225
  • peekViewResult.fileForeground#505566
  • peekViewResult.lineForeground#505566
  • peekViewResult.matchHighlightBackground#4F545C
  • peekViewResult.selectionBackground#2E3250
  • peekViewResult.selectionForeground#505566
  • peekViewTitle.background#202225
  • peekViewTitleDescription.foreground#a4a6dd
  • peekViewTitleLabel.foreground#FFFFFF
  • progressBar.background#16865d
  • scrollbar.shadow#16161C
  • scrollbarSlider.activeBackground#6C6F9380
  • scrollbarSlider.background#6C6F931A
  • scrollbarSlider.hoverBackground#6C6F934D
  • selection.background#aaabca
  • sideBar.background#F2F3F5
  • sideBar.border#F2F3F5
  • sideBar.foreground#060607
  • sideBarSectionHeader.background#D4D7DC
  • sideBarSectionHeader.border#D4D7DC
  • sideBarTitle.foreground#060607
  • statusBar.background#7278da
  • statusBar.border#7278da
  • statusBar.foreground#ffffff
  • tab.activeBackground#F2F3F5
  • tab.activeBorder#7278da
  • tab.activeForeground#060607
  • tab.border#FFFFFF
  • tab.hoverForeground#060607
  • tab.inactiveBackground#FFFFFF
  • tab.inactiveForeground#888888
  • terminal.ansiBlack#202225
  • terminal.ansiBlue#0077b6
  • terminal.ansiBrightBlack#060607
  • terminal.ansiBrightBlue#0779e4
  • terminal.ansiBrightCyan#c73d6d
  • terminal.ansiBrightGreen#08cea6
  • terminal.ansiBrightMagenta#af48af
  • terminal.ansiBrightRed#ee3131
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#8e6f00
  • terminal.ansiCyan#00b1b1
  • terminal.ansiGreen#16865d
  • terminal.ansiMagenta#af48af
  • terminal.ansiRed#F04747
  • terminal.ansiWhite#ffffff
  • terminal.ansiYellow#a5680b
  • terminal.foreground#060607
  • terminal.selectionBackground#42464d4d
  • textLink.foreground#7278da
  • titleBar.activeBackground#E3E5E8
  • widget.shadow#14152700

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#999999italic
entity.name#a5680b—
entity.name.function#c73d6d—
entity.other.attribute-name#5271bfitalic
constant#946856—
constant.character.escape#c73d6d—
entity.other.inherited-class#16865d—
entity.other.attribute-name.id#c73d6d—
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class#16865d—
entity.name.variable, variable#776BFF—
keyword#b745a0italic
keyword.operator#505566—
keyword.operator.new, keyword.operator.expression, keyword.operator.logical, keyword.operator.delete#af48af—
entity.name.tag#776BFF
entity.name.type, storage.type.cs#a5680b—
keyword.other.unit#946856—
markup.quote#FAB795B3italic
markup.heading, entity.name.section#776BFF—
markup.bold#af48afbold
support.variable#776BFF—
support.type.property-name, meta.object-literal.key#776BFF—
support.type.property-name.css#505566—
variable.language#a5680bitalic
variable.parameter—italic
string.template meta.embedded#505566—
markup.italic#946856E6italic
markup.inline.raw, markup.fenced_code.block#946856—
markup.underline.link#16865d—
storage#af48afitalic
string.quoted, string.template#16865d—
string.regexp#946856—
string.other.link#946856—
punctuation.section.embedded#af48af—
punctuation.definition.list#946856—
support#a5680b—
support.function#c73d6d—
punctuation.definition.tag#505566
punctuation.separator#505566—
punctuation.definition.template-expression#af48af—
Kulay by claide - VS Code Theme