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#f78166
  • activityBar.background#0d1117
  • activityBar.border#30363d
  • activityBar.foreground#c9d1d9
  • activityBar.inactiveForeground#8b949e
  • activityBarBadge.background#1f6feb
  • activityBarBadge.foreground#f0f6fc
  • badge.background#1f6feb
  • badge.foreground#f0f6fc
  • breadcrumb.activeSelectionForeground#8b949e
  • breadcrumb.focusForeground#c9d1d9
  • breadcrumb.foreground#8b949e
  • breadcrumbPicker.background#161b22
  • button.background#1d69e0
  • button.foreground#ffffff
  • button.hoverBackground#1585fd
  • button.secondaryBackground#282e33
  • button.secondaryForeground#c9d1d9
  • button.secondaryHoverBackground#30363d
  • checkbox.background#161b22
  • checkbox.border#30363d
  • debugToolBar.background#161b22
  • descriptionForeground#8b949e
  • diffEditor.insertedTextBackground#1585fd26
  • diffEditor.removedTextBackground#c3800026
  • dropdown.background#161b22
  • dropdown.border#30363d
  • dropdown.foreground#c9d1d9
  • dropdown.listBackground#161b22
  • editor.background#0d1117
  • editor.findMatchBackground#9e6a03
  • editor.findMatchHighlightBackground#f2cc6080
  • editor.focusedStackFrameHighlightBackground#1585fd66
  • editor.foldBackground#6e76811a
  • editor.foreground#c9d1d9
  • editor.inactiveSelectionBackground#58a6ff12
  • editor.lineHighlightBackground#6e76811a
  • editor.linkedEditingBackground#58a6ff12
  • editor.selectionBackground#58a6ff33
  • editor.selectionHighlightBackground#42a0ff40
  • editor.stackFrameHighlightBackground#bb800966
  • editor.wordHighlightBackground#6e768180
  • editor.wordHighlightBorder#6e768199
  • editor.wordHighlightStrongBackground#6e76814d
  • editor.wordHighlightStrongBorder#6e768199
  • editorBracketMatch.background#42a0ff40
  • editorBracketMatch.border#42a0ff99
  • editorCursor.foreground#58a6ff
  • editorGroup.border#30363d
  • editorGroupHeader.tabsBackground#010409
  • editorGroupHeader.tabsBorder#30363d
  • editorGutter.addedBackground#1585fd66
  • editorGutter.deletedBackground#c3800066
  • editorGutter.modifiedBackground#bb800966
  • editorIndentGuide.activeBackground#30363d
  • editorIndentGuide.background#21262d
  • editorLineNumber.activeForeground#c9d1d9
  • editorLineNumber.foreground#8b949e
  • editorOverviewRuler.border#010409
  • editorWhitespace.foreground#484f58
  • editorWidget.background#161b22
  • errorForeground#c38000
  • focusBorder#1f6feb
  • foreground#c9d1d9
  • gitDecoration.addedResourceForeground#42a0ff
  • gitDecoration.conflictingResourceForeground#db6d28
  • gitDecoration.deletedResourceForeground#c38000
  • gitDecoration.ignoredResourceForeground#484f58
  • gitDecoration.modifiedResourceForeground#d29922
  • gitDecoration.submoduleResourceForeground#8b949e
  • gitDecoration.untrackedResourceForeground#42a0ff
  • input.background#ffffff00
  • input.border#30363d
  • input.foreground#c9d1d9
  • input.placeholderForeground#484f58
  • list.activeSelectionBackground#6e768166
  • list.activeSelectionForeground#c9d1d9
  • list.focusBackground#388bfd26
  • list.focusForeground#c9d1d9
  • list.highlightForeground#58a6ff
  • list.hoverBackground#6e76811a
  • list.hoverForeground#c9d1d9
  • list.inactiveFocusBackground#388bfd26
  • list.inactiveSelectionBackground#6e768166
  • list.inactiveSelectionForeground#c9d1d9
  • notificationCenterHeader.background#161b22
  • notificationCenterHeader.foreground#8b949e
  • notifications.background#161b22
  • notifications.border#30363d
  • notifications.foreground#c9d1d9
  • notificationsErrorIcon.foreground#c38000
  • notificationsInfoIcon.foreground#58a6ff
  • notificationsWarningIcon.foreground#d29922
  • panel.background#010409
  • panel.border#30363d
  • panelInput.border#30363d
  • panelTitle.activeBorder#f78166
  • panelTitle.activeForeground#c9d1d9
  • panelTitle.inactiveForeground#8b949e
  • peekViewEditor.background#6e76811a
  • peekViewEditor.matchHighlightBackground#bb800966
  • peekViewResult.background#0d1117
  • peekViewResult.matchHighlightBackground#bb800966
  • pickerGroup.border#30363d
  • pickerGroup.foreground#8b949e
  • progressBar.background#1f6feb
  • quickInput.background#161b22
  • quickInput.foreground#c9d1d9
  • quickInputList.focusBackground#40c4ff
  • scrollbar.shadow#484f5833
  • scrollbarSlider.activeBackground#6e768187
  • scrollbarSlider.background#6e768133
  • scrollbarSlider.hoverBackground#6e768145
  • settings.headerForeground#8b949e
  • settings.modifiedItemIndicator#bb800966
  • sideBar.background#010409
  • sideBar.border#30363d
  • sideBar.foreground#c9d1d9
  • sideBarSectionHeader.background#010409
  • sideBarSectionHeader.border#30363d
  • sideBarSectionHeader.foreground#c9d1d9
  • sideBarTitle.foreground#c9d1d9
  • statusBar.background#0d1117
  • statusBar.border#30363d00
  • statusBar.debuggingBackground#a66900
  • statusBar.debuggingForeground#f0f6fc
  • statusBar.foreground#8b949e
  • statusBar.noFolderBackground#0d1117
  • statusBarItem.prominentBackground#161b22
  • tab.activeBackground#0d1117
  • tab.activeBorder#0d1117
  • tab.activeBorderTop#f78166
  • tab.activeForeground#c9d1d9
  • tab.border#30363d
  • tab.hoverBackground#0d1117
  • tab.inactiveBackground#010409
  • tab.inactiveForeground#8b949e
  • tab.unfocusedActiveBorder#0d1117
  • tab.unfocusedActiveBorderTop#30363d
  • tab.unfocusedHoverBackground#6e76811a
  • terminal.ansiBlack#484f58
  • terminal.ansiBlue#58a6ff
  • terminal.ansiBrightBlack#6e7681
  • terminal.ansiBrightBlue#79c0ff
  • terminal.ansiBrightCyan#56d4dd
  • terminal.ansiBrightGreen#66baff
  • terminal.ansiBrightMagenta#d2a8ff
  • terminal.ansiBrightRed#e6b716
  • terminal.ansiBrightWhite#f0f6fc
  • terminal.ansiBrightYellow#e3b341
  • terminal.ansiCyan#39c5cf
  • terminal.ansiGreen#42a0ff
  • terminal.ansiMagenta#bc8cff
  • terminal.ansiRed#d69a00
  • terminal.ansiWhite#b1bac4
  • terminal.ansiYellow#d29922
  • terminal.foreground#8b949e
  • textBlockQuote.background#010409
  • textBlockQuote.border#30363d
  • textCodeBlock.background#6e768166
  • textLink.activeForeground#58a6ff
  • textLink.foreground#58a6ff
  • textPreformat.foreground#8b949e
  • textSeparator.foreground#21262d
  • titleBar.activeBackground#0d1117
  • titleBar.activeForeground#8b949e
  • titleBar.border#30363d
  • titleBar.inactiveBackground#010409
  • titleBar.inactiveForeground#8b949e
  • tree.indentGuidesStroke#21262d

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasis—italic
strong—bold
header#458588—
comment, punctuation.definition.comment#928374italic
constant, support.constant, variable.arguments#D3869B—
constant.rgb-value#EBDBB2—
entity.name.selector#8EC07C—
entity.other.attribute-name#FABD2Fitalic
entity.name.tag, punctuation.tag#8EC07C—
invalid, invalid.illegal#CC241D—
invalid.deprecated#B16286—
meta.selector#8EC07C—
meta.preprocessor#FE8019—
meta.preprocessor.string#B8BB26—
meta.preprocessor.numeric#B8BB26—
meta.header.diff#FE8019—
storage#FB4934—
storage.modifier#FE8019—
string#F7994C—
string.tag#8C7AE6—
string.value#8C7AE6—
string.regexp#FE8019—
string.escape#FB4934—
string.quasi#8EC07C—
string.entity#B8BB26—
object#EBDBB2—
module.node#83A598—
support.type.property-name#689D6A—
keyword#FB4934—
keyword.control#FB4934—
keyword.control.module#8EC07C—
keyword.control.less#D79921—
keyword.operator#8EC07C—
keyword.operator.new#FE8019—
keyword.other.unit#B8BB26—
metatag.php#FE8019—
support.function.git-rebase#689D6A—
constant.sha.git-rebase#B8BB26—
meta.type.name, meta.return.type, meta.return-type, meta.cast, meta.type.annotation, support.type, storage.type.cs, variable.class#FABD2F—
variable.this, support.variable#D3869B—
entity.name, entity.static, entity.name.class.static.function, entity.name.function, entity.name.class, entity.name.type#FABD2F—
storage.type.function, entity.function, entity.name.function.static#8EC07C—
entity.name.function.function-call#8EC07C—
support.function.builtin#FE8019—
entity.name.method, entity.name.method.function-call, entity.name.static.function-call#689D6A—
brace#D5C4A1—
meta.parameter.type.variable, variable.parameter, variable.name, variable.other, variable, string.constant.other.placeholder#99C6CA—
variable.parameter—italic
prototype#D3869B—
storage.type.class#FB4934—
punctuation#A89984—
punctuation.quoted#EBDBB2—
punctuation.quasi#FB4934—
*url*, *link*, *uri*—underline
meta.function.python, entity.name.function.python#8EC07C—
storage.type.function.python, storage.modifier.declaration, storage.type.class.python#FB4934—
meta.function-call.generic#83A598—
meta.function-call.arguments#D5C4A1—
entity.name.function.decorator#FABD2Fbold
constant.other.caps—bold
keyword.operator.logical#FB4934—
punctuation.definition.logical-expression#FE8019—
string.inperpolated.dollar.shell#FE8019—
string.interpolated.dollar.shell, string.interpolated.backtick.shell#8EC07C—
keyword.control.directive#8EC07C—
support.function.C99#FABD2F—
meta.scope.prerequisites#FABD2F—
entity.name.function.target#B8BB26bold
storage.modifier.import.java, storage.modifier.package.java#BDAE93—
keyword.other.import.java, keyword.other.package.java#8EC07C—
storage.type.java#FABD2F—
storage.type.annotation#83A598bold
keyword.other.documentation.javadoc#8EC07C—
comment.block.javadoc variable.parameter.java#B8BB26bold
source.java variable.other.object, source.java variable.other.definition.java#EBDBB2—
meta.function-parameters.lisp#FABD2F—
markup.underline—underline
string.other.link.title.markdown#928374underline
markup.underline.link#D3869B—
markup.bold#FE8019bold
markup.heading#FE8019bold
markup.italic—italic
markup.inserted#B8BB26—
markup.deleted#D65D0E—
markup.changed#FE8019—
markup.punctuation.quote.beginning#98971A—
markup.punctuation.list.beginning#83A598—
markup.inline.raw, markup.fenced_code.block#8EC07C—
string.quoted.double.json#83A598—
source.json meta.structure.dictionary.json support.type.property-name.json#B8BB26—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#8EC07C—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#D3869B—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#B8BB26—
entity.other.attribute-name.css#FE8019—
source.css meta.selector#EBDBB2—
support.type.property-name.css#FE8019—
entity.other.attribute-name.class#B8BB26—
source.css support.function.transform, source.css support.function.timing-function, source.css support.function.misc#FB4934—
support.property-value, constant.rgb-value, support.property-value.scss, constant.rgb-value.scss#D65D0E—
entity.name.tag.css—normal
punctuation.definition.tag#83A598—
text.html entity.name.tag, text.html punctuation.tag#8EC07Cbold
source.js variable.language#FE8019—
source.ts variable.language#FE8019—
source.go storage.type#FABD2F—
source.go entity.name.import#B8BB26—
source.go keyword.package, source.go keyword.import#8EC07C—
source.go keyword.interface, source.go keyword.struct#83A598—
source.go entity.name.type#EBDBB2—
source.go entity.name.function#D3869B—
keyword.control.cucumber.table#83A598—
source.reason string.double, source.reason string.regexp#B8BB26—
source.reason keyword.control.less#8EC07C—
source.reason entity.name.function#83A598—
source.reason support.property-value, source.reason entity.name.filename#FE8019—
source.powershell variable.other.member.powershell#FE8019—
source.powershell support.function.powershell#FABD2F—
source.powershell support.function.attribute.powershell#BDAE93—
source.powershell meta.hashtable.assignment.powershell variable.other.readwrite.powershell#FE8019—
token.info-token#6796E6—
token.warn-token#CD9731—
token.error-token#F44747—
token.debug-token#B267E6—
variable.other.property#D3869B—