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#aaff83
  • activityBar.background#0d1117
  • activityBar.border#30363d
  • activityBar.foreground#c9d1d9
  • activityBar.inactiveForeground#8b949e
  • activityBarBadge.background#1f6feb
  • activityBarBadge.foreground#f0f6fc
  • badge.background#0d419d
  • badge.foreground#79c0ff
  • breadcrumb.activeSelectionForeground#8b949e
  • breadcrumb.focusForeground#c9d1d9
  • breadcrumb.foreground#8b949e
  • breadcrumbPicker.background#1c2128
  • button.background#238636
  • button.foreground#fafafa
  • button.hoverBackground#2ea043
  • button.secondaryBackground#292e34
  • button.secondaryForeground#c9d1d9
  • button.secondaryHoverBackground#30363d
  • checkbox.background#161b22
  • checkbox.border#30363d
  • debugToolBar.background#1c2128
  • descriptionForeground#8b949e
  • diffEditor.insertedTextBackground#2ea04333
  • diffEditor.removedTextBackground#da363333
  • dropdown.background#1c2128
  • dropdown.border#30363d
  • dropdown.foreground#c9d1d9
  • dropdown.listBackground#1c2128
  • editor.background#0d1117
  • editor.findMatchBackground#ffd33d44
  • editor.findMatchHighlightBackground#ffd33d22
  • editor.focusedStackFrameHighlightBackground#3FB95025
  • editor.foldBackground#6e76811a
  • editor.foreground#c9d1d9
  • editor.inactiveSelectionBackground#3392FF22
  • editor.lineHighlightBackground#161b22
  • editor.linkedEditingBackground#3392FF22
  • editor.selectionBackground#3392FF44
  • editor.selectionHighlightBackground#17E5E633
  • editor.selectionHighlightBorder#17E5E600
  • editor.stackFrameHighlightBackground#D2992225
  • editor.wordHighlightBackground#17E5E600
  • editor.wordHighlightBorder#17E5E699
  • editor.wordHighlightStrongBackground#17E5E600
  • editor.wordHighlightStrongBorder#17E5E666
  • editorBracketMatch.background#17E5E650
  • editorBracketMatch.border#17E5E600
  • editorCursor.foreground#79c0ff
  • editorGroup.border#30363d
  • editorGroupHeader.tabsBackground#090c10
  • editorGroupHeader.tabsBorder#30363d
  • editorGutter.addedBackground#196c2e
  • editorGutter.deletedBackground#b62324
  • editorGutter.modifiedBackground#9e6a03
  • editorIndentGuide.activeBackground#30363d
  • editorIndentGuide.background#21262d
  • editorLineNumber.activeForeground#c9d1d9
  • editorLineNumber.foreground#8b949e
  • editorOverviewRuler.border#010409
  • editorWhitespace.foreground#484f58
  • editorWidget.background#1c2128
  • errorForeground#f85149
  • focusBorder#388bfd
  • foreground#c9d1d9
  • gitDecoration.addedResourceForeground#56d364
  • gitDecoration.conflictingResourceForeground#e3b341
  • gitDecoration.deletedResourceForeground#f85149
  • gitDecoration.ignoredResourceForeground#484f58
  • gitDecoration.modifiedResourceForeground#e3b341
  • gitDecoration.submoduleResourceForeground#8b949e
  • gitDecoration.untrackedResourceForeground#56d364
  • input.background#0d1117
  • input.border#21262d
  • input.foreground#c9d1d9
  • input.placeholderForeground#484f58
  • list.activeSelectionBackground#21262d
  • list.activeSelectionForeground#c9d1d9
  • list.focusBackground#21262d
  • list.focusForeground#f0f6fc
  • list.highlightForeground#388bfd
  • list.hoverBackground#161b22
  • list.hoverForeground#c9d1d9
  • list.inactiveFocusBackground#161b22
  • list.inactiveSelectionBackground#161b22
  • list.inactiveSelectionForeground#c9d1d9
  • notificationCenterHeader.background#0d1117
  • notificationCenterHeader.foreground#6e7681
  • notifications.background#161b22
  • notifications.border#30363d
  • notifications.foreground#8b949e
  • notificationsErrorIcon.foreground#f85149
  • notificationsInfoIcon.foreground#58a6ff
  • notificationsWarningIcon.foreground#f0883e
  • panel.background#090c10
  • panel.border#30363d
  • panelInput.border#30363d
  • panelTitle.activeBorder#aaff83
  • panelTitle.activeForeground#c9d1d9
  • panelTitle.inactiveForeground#8b949e
  • peekViewEditor.background#0d111788
  • peekViewEditor.matchHighlightBackground#ffd33d33
  • peekViewResult.background#0d1117
  • peekViewResult.matchHighlightBackground#ffd33d33
  • pickerGroup.border#21262d
  • pickerGroup.foreground#8b949e
  • progressBar.background#1f6feb
  • quickInput.background#0d1117
  • quickInput.foreground#c9d1d9
  • scrollbar.shadow#0008
  • scrollbarSlider.activeBackground#484F5888
  • scrollbarSlider.background#484F5833
  • scrollbarSlider.hoverBackground#484F5844
  • settings.headerForeground#8b949e
  • settings.modifiedItemIndicator#9e6a03
  • sideBar.background#090c10
  • sideBar.border#30363d
  • sideBar.foreground#c9d1d9
  • sideBarSectionHeader.background#090c10
  • sideBarSectionHeader.border#30363d
  • sideBarSectionHeader.foreground#c9d1d9
  • sideBarTitle.foreground#c9d1d9
  • statusBar.background#0d1117
  • statusBar.border#30363d
  • statusBar.debuggingBackground#da3633
  • statusBar.debuggingForeground#f0f6fc
  • statusBar.foreground#8b949e
  • statusBar.noFolderBackground#0d1117
  • statusBarItem.prominentBackground#161b22
  • tab.activeBackground#0d1117
  • tab.activeBorder#0d1117
  • tab.activeBorderTop#aaff83
  • tab.activeForeground#c9d1d9
  • tab.border#30363d
  • tab.hoverBackground#0d1117
  • tab.inactiveBackground#090c10
  • tab.inactiveForeground#8b949e
  • tab.unfocusedActiveBorder#0d1117
  • tab.unfocusedActiveBorderTop#30363d
  • tab.unfocusedHoverBackground#161b22
  • terminal.ansiBlack#484f58
  • terminal.ansiBlue#58a6ff
  • terminal.ansiBrightBlack#6e7681
  • terminal.ansiBrightBlue#79c0ff
  • terminal.ansiBrightCyan#56d4dd
  • terminal.ansiBrightGreen#56d364
  • terminal.ansiBrightMagenta#d2a8ff
  • terminal.ansiBrightRed#ffa198
  • terminal.ansiBrightWhite#f0f6fc
  • terminal.ansiBrightYellow#faf88c
  • terminal.ansiCyan#39c5cf
  • terminal.ansiGreen#3fb950
  • terminal.ansiMagenta#bc8cff
  • terminal.ansiRed#ff7b72
  • terminal.ansiWhite#bdc4cc
  • terminal.ansiYellow#F6BE00
  • terminal.foreground#f0f0f0
  • textBlockQuote.background#090c10
  • textBlockQuote.border#3b434b
  • textCodeBlock.background#f0f6fc26
  • textLink.activeForeground#58a6ff
  • textLink.foreground#58a6ff
  • textPreformat.foreground#8b949e
  • textSeparator.foreground#21262d
  • titleBar.activeBackground#0d1117
  • titleBar.activeForeground#8b949e
  • titleBar.border#30363d
  • titleBar.inactiveBackground#090c10
  • titleBar.inactiveForeground#8b949e
  • tree.indentGuidesStroke#21262d
  • welcomePage.buttonBackground#21262d
  • welcomePage.buttonHoverBackground#30363d

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
unknown, dont.know#bce7ff—
meta.paragraph.markdown, string.other.link.description.title.markdown#EEFFFF—
entity.name.section.markdown, punctuation.definition.heading.markdown#5ABEB0—
punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, markup.quote.markdown#82AAFF—
markup.quote.markdown#82AAFF
markup.bold.markdown, punctuation.definition.bold.markdown#57cdffbold
markup..markdown, punctuation.definition..markdown#d4bfff
markup.inline.raw.string.markdown, markup.fenced_code.block.markdown#f7ecb5
punctuation.definition.metadata.markdown#f3b8c2—
markup.underline.link.image.markdown, markup.underline.link.markdown#6dbdfa—
comment#999999
punctuation.definition.string#6bff81—
string#bcf0c0—
string.quoted, variable.other.readwrite.js#bcf0c0
constant.numeric#FAF9F6—
constant.language.boolean#ffcc66—
constant#c98ff5—
constant.language, punctuation.definition.constant, variable.other.constant#ffd173—
constant.character, constant.other#82AAFF—
variable#a4ceee
variable.other.object.js#dcdcdc
variable.other.readwrite.alias.ts, variable.other.readwrite.alias.tsx, variable.other.readwrite.ts, variable.other.readwrite.tsx, variable.other.object.ts, variable.other.object.tsx, variable.object.property.ts, variable.object.property.tsx, variable.other.ts, variable.other.tsx, variable.tsx, variable.ts#dcdcdc—
meta.class entity.name.type.class.tsx#d29ffcff—
entity.name.type.tsx, entity.name.type.module.tsx#d29ffcff—
meta.method.declaration storage.type.ts, meta.method.declaration storage.type.tsx#BFB9FA—
variable.other.object.property#f7ecb5
variable.instance, variable.other.instance, variable.readwrite.instance, variable.other.readwrite.instance, variable.other.property#80bfff—
variable.other.readwrite.js, variable.parameter#80bfff—
string.template meta.template.expression#dfbfff—
string.template punctuation.definition.string#f2f2f2—
storage#052136
keyword, storage.type, storage.modifier, variable.language.this#95e6cb
keyword.operator#d5ff80
storage, meta.var.expr, meta.class meta.method.declaration meta.var.expr storage.type.js, storage.type.property.js, storage.type.property.ts#5ccfe6
variable.other.meta.import.js, meta.import.js variable.other, variable.other.meta.export.js, meta.export.js variable.other#d3eed6—
entity.name.class#f7ecb5—
entity.other.inherited-class#4FB4D8
variable.other.readwrites, meta.definition.variable#f7ecb5
support.variable.property#dfbfff—
entity.name.function#9be9fd
variable.parameter#fafafa
entity.name.tag#6dbdfa
entity.name.type#dfbfff—
entity.other.attribute-name#f7ecb5
punctuation.decorator#f7ecb5
punctuation.definition.block, punctuation.definition.tag#f2f2f2—
support.function#f7ecb5
support.constant#8dec95
support.type, support.class#5ccfe6—
support.other.variable#e4e4e4—
invalid#f28779 bold underline
invalid.deprecated#f28779 bold underline
support.type.property-name.json#bcf0c0—
support.constant.json#addb67—
meta.structure.dictionary.value.json string.quoted.double#5ccfe6—
string.quoted.double.json punctuation.definition.string.json#80CBC4—
meta.structure.dictionary.json meta.structure.dictionary.value constant.language#f29fd8—
source.json support#6dbdfa—
source.json string, source.json punctuation.definition.string#ece7cd—
markup.list#6dbdfa—
markup.heading punctuation.definition.heading, entity.name.section#4FB4D8
text.html.markdown meta.paragraph meta.link.inline, text.html.markdown meta.paragraph meta.link.inline punctuation.definition.string.begin.markdown, text.html.markdown meta.paragraph meta.link.inline punctuation.definition.string.end.markdown#78bd65—
meta.paragraph.markdown#ffffff—
markup.quote#78bd65
meta.link#78BD65—
source.dockerfile#99d0f7—