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.activeBorder#000000
  • activityBar.background#ffffff
  • activityBar.border#f4f4f4
  • activityBar.foreground#1f2328
  • activityBar.inactiveForeground#656d76
  • activityBarBadge.background#e6e6e6
  • activityBarBadge.foreground#05030a
  • badge.background#e6e6e6
  • badge.foreground#09050f
  • breadcrumb.activeSelectionForeground#656d76
  • breadcrumb.focusForeground#1f2328
  • breadcrumb.foreground#656d76
  • breadcrumbPicker.background#ffffff
  • button.background#ededed
  • button.foreground#0b0610
  • button.hoverBackground#f4f4f4
  • button.secondaryBackground#ebecf0
  • button.secondaryForeground#24292f
  • button.secondaryHoverBackground#f3f4f6
  • checkbox.background#ffffff
  • checkbox.border#f4f4f4
  • debugConsole.errorForeground#cf222e
  • debugConsole.infoForeground#57606a
  • debugConsole.sourceForeground#9a6700
  • debugConsole.warningForeground#7d4e00
  • debugConsoleInputIcon.foreground#6639ba
  • debugIcon.breakpointForeground#cf222e
  • debugTokenExpression.boolean#116329
  • debugTokenExpression.error#a40e26
  • debugTokenExpression.name#0550ae
  • debugTokenExpression.number#116329
  • debugTokenExpression.string#0a3069
  • debugTokenExpression.value#0a3069
  • debugToolBar.background#ffffff
  • descriptionForeground#656d76
  • diffEditor.insertedLineBackground#aceebb4d
  • diffEditor.insertedTextBackground#6fdd8b80
  • diffEditor.removedLineBackground#ffcecb4d
  • diffEditor.removedTextBackground#ff818266
  • dropdown.background#ffffff
  • dropdown.border#f4f4f4
  • dropdown.foreground#1f2328
  • dropdown.listBackground#ffffff
  • editor.background#ffffff
  • editor.findMatchBackground#ffc6e8
  • editor.findMatchHighlightBackground#ffc6e8de
  • editor.focusedStackFrameHighlightBackground#4ac26b66
  • editor.foldBackground#6e77811a
  • editor.foreground#1f2328
  • editor.lineHighlightBackground#eaeef280
  • editor.linkedEditingBackground#0969da12
  • editor.selectionHighlightBackground#ffc6e859
  • editor.stackFrameHighlightBackground#d4a72c66
  • editor.wordHighlightBackground#eaeef280
  • editor.wordHighlightBorder#afb8c199
  • editor.wordHighlightStrongBackground#afb8c14d
  • editor.wordHighlightStrongBorder#afb8c199
  • editorBracketHighlight.foreground1#0969da
  • editorBracketHighlight.foreground2#1a7f37
  • editorBracketHighlight.foreground3#9a6700
  • editorBracketHighlight.foreground4#cf222e
  • editorBracketHighlight.foreground5#bf3989
  • editorBracketHighlight.foreground6#8250df
  • editorBracketHighlight.unexpectedBracket.foreground#656d76
  • editorBracketMatch.background#b64ac240
  • editorBracketMatch.border#c24aae99
  • editorCursor.foreground#0969da
  • editorGroup.border#f4f4f4
  • editorGroupHeader.tabsBackground#ffffff
  • editorGroupHeader.tabsBorder#f4f4f4
  • editorGutter.addedBackground#4ac26b66
  • editorGutter.deletedBackground#ff818266
  • editorGutter.modifiedBackground#d4a72c66
  • editorInlayHint.background#afb8c133
  • editorInlayHint.foreground#656d76
  • editorInlayHint.typeBackground#afb8c133
  • editorInlayHint.typeForeground#656d76
  • editorLineNumber.activeForeground#1f2328
  • editorLineNumber.foreground#8c959f
  • editorOverviewRuler.border#ffffff
  • editorWhitespace.foreground#afb8c1
  • editorWidget.background#ffffff
  • errorForeground#cf222e
  • focusBorder#e3e2f5
  • foreground#1f2328
  • gitDecoration.addedResourceForeground#1a7f37
  • gitDecoration.conflictingResourceForeground#bc4c00
  • gitDecoration.deletedResourceForeground#cf222e
  • gitDecoration.ignoredResourceForeground#6e7781
  • gitDecoration.modifiedResourceForeground#9a6700
  • gitDecoration.submoduleResourceForeground#656d76
  • gitDecoration.untrackedResourceForeground#1a7f37
  • icon.foreground#656d76
  • input.background#ffffff
  • input.border#f4f4f4
  • input.foreground#1f2328
  • input.placeholderForeground#6e7781
  • keybindingLabel.foreground#1f2328
  • list.activeSelectionBackground#afb8c133
  • list.activeSelectionForeground#1f2328
  • list.focusBackground#ddf4ff
  • list.focusForeground#1f2328
  • list.highlightForeground#0969da
  • list.hoverBackground#eaeef280
  • list.hoverForeground#1f2328
  • list.inactiveFocusBackground#ddf4ff
  • list.inactiveSelectionBackground#afb8c133
  • list.inactiveSelectionForeground#1f2328
  • minimapSlider.activeBackground#8c959f47
  • minimapSlider.background#8c959f33
  • minimapSlider.hoverBackground#8c959f3d
  • notificationCenterHeader.background#ffffff
  • notificationCenterHeader.foreground#656d76
  • notifications.background#ffffff
  • notifications.border#f4f4f4
  • notifications.foreground#1f2328
  • notificationsErrorIcon.foreground#cf222e
  • notificationsInfoIcon.foreground#0969da
  • notificationsWarningIcon.foreground#9a6700
  • panel.background#ffffff
  • panel.border#f4f4f4
  • panelInput.border#f4f4f4
  • panelTitle.activeBorder#000000
  • panelTitle.activeForeground#1f2328
  • panelTitle.inactiveForeground#656d76
  • pickerGroup.border#f4f4f4
  • pickerGroup.foreground#656d76
  • progressBar.background#dadada
  • quickInput.background#ffffff
  • quickInput.foreground#1f2328
  • scrollbar.shadow#6e778133
  • scrollbarSlider.activeBackground#8c959f47
  • scrollbarSlider.background#8c959f33
  • scrollbarSlider.hoverBackground#8c959f3d
  • settings.headerForeground#1f2328
  • settings.modifiedItemIndicator#d4a72c66
  • sideBar.background#ffffff
  • sideBar.border#f4f4f4
  • sideBar.foreground#1f2328
  • sideBarSectionHeader.background#ffffff
  • sideBarSectionHeader.border#f4f4f4
  • sideBarSectionHeader.foreground#1f2328
  • sideBarTitle.foreground#1f2328
  • statusBar.background#ffffff
  • statusBar.border#f4f4f4
  • statusBar.debuggingBackground#f8664c
  • statusBar.debuggingForeground#000000
  • statusBar.focusBorder#0969da80
  • statusBar.foreground#656d76
  • statusBar.noFolderBackground#ffffff
  • statusBarItem.activeBackground#1f23281f
  • statusBarItem.focusBorder#0969da
  • statusBarItem.hoverBackground#1f232814
  • statusBarItem.prominentBackground#afb8c133
  • statusBarItem.remoteBackground#eaeef2
  • statusBarItem.remoteForeground#1f2328
  • symbolIcon.arrayForeground#953800
  • symbolIcon.booleanForeground#0550ae
  • symbolIcon.classForeground#953800
  • symbolIcon.colorForeground#0a3069
  • symbolIcon.constantForeground#89128b
  • symbolIcon.constructorForeground#3e1f79
  • symbolIcon.enumeratorForeground#953800
  • symbolIcon.enumeratorMemberForeground#0550ae
  • symbolIcon.eventForeground#57606a
  • symbolIcon.fieldForeground#953800
  • symbolIcon.fileForeground#7d4e00
  • symbolIcon.folderForeground#7d4e00
  • symbolIcon.functionForeground#6639ba
  • symbolIcon.interfaceForeground#953800
  • symbolIcon.keyForeground#0550ae
  • symbolIcon.keywordForeground#a40e26
  • symbolIcon.methodForeground#6639ba
  • symbolIcon.moduleForeground#a40e26
  • symbolIcon.namespaceForeground#a40e26
  • symbolIcon.nullForeground#0550ae
  • symbolIcon.numberForeground#116329
  • symbolIcon.objectForeground#953800
  • symbolIcon.operatorForeground#0a3069
  • symbolIcon.packageForeground#953800
  • symbolIcon.propertyForeground#953800
  • symbolIcon.referenceForeground#0550ae
  • symbolIcon.snippetForeground#0550ae
  • symbolIcon.stringForeground#0a3069
  • symbolIcon.structForeground#953800
  • symbolIcon.textForeground#0a3069
  • symbolIcon.typeParameterForeground#0a3069
  • symbolIcon.unitForeground#0550ae
  • symbolIcon.variableForeground#953800
  • tab.activeBackground#ffffff
  • tab.activeBorder#ffffff
  • tab.activeBorderTop#000000
  • tab.activeForeground#1f2328
  • tab.border#f4f4f4
  • tab.hoverBackground#ffffff
  • tab.inactiveBackground#ffffff
  • tab.inactiveForeground#656d76
  • tab.unfocusedActiveBorder#ffffff
  • tab.unfocusedActiveBorderTop#f4f4f4
  • tab.unfocusedHoverBackground#eaeef280
  • terminal.ansiBlack#24292f
  • terminal.ansiBlue#0969da
  • terminal.ansiBrightBlack#57606a
  • terminal.ansiBrightBlue#218bff
  • terminal.ansiBrightCyan#3192aa
  • terminal.ansiBrightGreen#1a7f37
  • terminal.ansiBrightMagenta#a475f9
  • terminal.ansiBrightRed#d51c3b
  • terminal.ansiBrightWhite#8c959f
  • terminal.ansiBrightYellow#633c01
  • terminal.ansiCyan#1b7c83
  • terminal.ansiGreen#ff2bd1
  • terminal.ansiMagenta#8250df
  • terminal.ansiRed#cf222e
  • terminal.ansiWhite#6e7781
  • terminal.ansiYellow#4d2d00
  • terminal.foreground#30313e
  • textBlockQuote.background#ffffff
  • textBlockQuote.border#f4f4f4
  • textCodeBlock.background#afb8c133
  • textLink.activeForeground#0969da
  • textLink.foreground#0969da
  • textPreformat.foreground#656d76
  • textSeparator.foreground#d8dee4
  • titleBar.activeBackground#ffffff
  • titleBar.activeForeground#656d76
  • titleBar.border#f4f4f4
  • titleBar.inactiveBackground#ffffff
  • titleBar.inactiveForeground#656d76
  • tree.indentGuidesStroke#d8dee4

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, string.comment#6e7781
constant.other.placeholder, constant.character#cf222e
constant, entity.name.constant, variable.other.constant, variable.other.enummember, variable.language, entity#0550ae
entity.name, meta.export.default, meta.definition.variable#953800
variable.parameter.function, meta.jsx.children, meta.block, meta.tag.attributes, entity.name.constant, meta.object.member, meta.embedded.expression#212037
entity.name.function#8250df
punctuation.separator#b270ae
entity.name.tag.yaml#341685
string.unquoted.plain.out.yaml#d400ff
entity.name.tag, support.class.component#5341c8
keyword#c22fc2
storage, storage.type#cf222e
entity.name.tag.template.html.vue, source.vue#5f22cf
text.html.derivative, source.vue#0c0724
storage.modifier.package, storage.modifier.import, storage.type.java#1f2328
string, string punctuation.section.embedded source#0a3069
support#a433e6
meta.property-name#0550ae
variable#953800
variable.other#1f2328
invalid.broken#82071eitalic
invalid.deprecated#82071eitalic
invalid.illegal#82071eitalic
invalid.unimplemented#82071eitalic
carriage-return#ffffffitalic underline
message.error#82071e
string variable#0550ae
source.regexp, string.regexp#0a3069
string.regexp.character-class, string.regexp constant.character.escape, string.regexp source.ruby.embedded, string.regexp string.regexp.arbitrary-repitition#0a3069
string.regexp constant.character.escape#116329bold
support.constant#0550ae
support.variable#0550ae
support.type.property-name.json#1f1b3c
string.quoted.double.json#453085
constant.language.json, constant.character.escape.json#e449d7
constant.other.reference.link.markdown#cd14c4bold
entity.name.section.markdown, punctuation.definition.heading.markdown#cd39a5bold
entity.other.attribute-name.html#cd14c4
entity.other.attribute-name.html, meta.attribute.class.html, source.vue#b248d5
entity.name.command.shell#5e44bd
meta.module-reference#0550ae
punctuation.definition.list.begin.markdown#953800
markup.heading, markup.heading entity.name#0550aebold
markup.quote#116329
markup.italic#1f2328italic
markup.bold#1f2328bold
markup.underlineunderline
markup.strikethroughstrikethrough
markup.inline.raw#0550ae
markup.deleted, meta.diff.header.from-file, punctuation.definition.deleted#82071e
punctuation.section.embedded#cf222e
markup.inserted, meta.diff.header.to-file, punctuation.definition.inserted#116329
markup.changed, punctuation.definition.changed#953800
markup.ignored, markup.untracked#eaeef2
meta.diff.range#8250dfbold
meta.diff.header#0550ae
meta.separator#0550aebold
meta.output#0550ae
brackethighlighter.tag, brackethighlighter.curly, brackethighlighter.round, brackethighlighter.square, brackethighlighter.angle, brackethighlighter.quote#57606a
brackethighlighter.unmatched#82071e
constant.other.reference.link, string.other.link#0a3069
entity.name.type#2b18d1

Shiki preview

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

Loading...