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#dc6a19
  • activityBar.background#141a25
  • activityBar.border#30363d
  • activityBar.foreground#c9d1d9
  • activityBar.inactiveForeground#8b949e
  • activityBarBadge.background#d1a62e
  • activityBarBadge.foreground#141a25
  • badge.background#2e52b3
  • badge.foreground#f0f6fc
  • breadcrumb.activeSelectionForeground#8b949e
  • breadcrumb.focusForeground#c9d1d9
  • breadcrumb.foreground#8b949e
  • breadcrumbPicker.background#161b22
  • button.background#08702e
  • button.foreground#ffffff
  • button.hoverBackground#2ea043
  • button.secondaryBackground#282e33
  • button.secondaryForeground#c9d1d9
  • button.secondaryHoverBackground#30363d
  • checkbox.background#161b22
  • checkbox.border#30363d
  • debugToolBar.background#161b22
  • descriptionForeground#8b949e
  • diffEditor.insertedTextBackground#2ea04326
  • diffEditor.removedTextBackground#f8514926
  • dropdown.background#161b22
  • dropdown.border#30363d
  • dropdown.foreground#c9d1d9
  • dropdown.listBackground#161b22
  • editor.background#11151a
  • editor.findMatchBackground#ffd33d44
  • editor.findMatchHighlightBackground#ffd33d22
  • editor.focusedStackFrameHighlightBackground#3FB95025
  • editor.foldBackground#6e76811a
  • editor.foreground#c9d1d9
  • editor.inactiveSelectionBackground#3392FF22
  • editor.lineHighlightBackground#6e76811a
  • 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#58a6ff
  • editorGroup.border#30363d
  • editorGroupHeader.tabsBackground#141a25
  • editorGroupHeader.tabsBorder#30363d
  • editorGutter.addedBackground#2ea04366
  • editorGutter.deletedBackground#f8514966
  • editorGutter.modifiedBackground#bb800966
  • editorIndentGuide.activeBackground#30363d
  • editorIndentGuide.background#21262d
  • editorLineNumber.activeForeground#d3e2ec
  • editorLineNumber.foreground#586470
  • editorOverviewRuler.border#0c0e11
  • editorWhitespace.foreground#484f58
  • editorWidget.background#161b22
  • errorForeground#f85149
  • focusBorder#195dc4
  • foreground#C9D1D9
  • gitDecoration.addedResourceForeground#3fb950
  • gitDecoration.conflictingResourceForeground#db6d28
  • gitDecoration.deletedResourceForeground#f85149
  • gitDecoration.ignoredResourceForeground#484f58
  • gitDecoration.modifiedResourceForeground#d29922
  • gitDecoration.submoduleResourceForeground#8b949e
  • gitDecoration.untrackedResourceForeground#5fca83
  • input.background#0d1117
  • 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#f85149
  • notificationsInfoIcon.foreground#58a6ff
  • notificationsWarningIcon.foreground#d29922
  • panel.background#0c0e11
  • panel.border#30363d
  • panelInput.border#30363d
  • panelTitle.activeBorder#dc6a19
  • panelTitle.activeForeground#c9d1d9
  • panelTitle.inactiveForeground#8b949e
  • peekViewEditor.background#0d111788
  • peekViewEditor.matchHighlightBackground#ffd33d33
  • peekViewResult.background#0d1117
  • peekViewResult.matchHighlightBackground#ffd33d33
  • pickerGroup.border#30363d
  • pickerGroup.foreground#8b949e
  • progressBar.background#1f6feb
  • quickInput.background#161b22
  • quickInput.foreground#c9d1d9
  • scrollbar.shadow#0008
  • scrollbarSlider.activeBackground#484F5888
  • scrollbarSlider.background#141a25
  • scrollbarSlider.hoverBackground#484F5844
  • settings.headerForeground#8b949e
  • settings.modifiedItemIndicator#bb800966
  • sideBar.background#11151a
  • sideBar.border#30363d
  • sideBar.foreground#c9d1d9
  • sideBarSectionHeader.background#141a25
  • sideBarSectionHeader.border#30363d
  • sideBarSectionHeader.foreground#c9d1d9
  • sideBarTitle.foreground#c9d1d9
  • statusBar.background#0d1117
  • statusBar.border#30363d
  • statusBar.debuggingBackground#da3633
  • statusBar.debuggingForeground#f0f6fc
  • statusBar.foreground#d1d3d6
  • statusBar.noFolderBackground#0d1117
  • statusBarItem.prominentBackground#161b22
  • tab.activeBackground#101318
  • tab.activeBorder#0d1117
  • tab.activeBorderTop#dc6a19
  • tab.activeForeground#c9d1d9
  • tab.border#30363d
  • tab.hoverBackground#0d1117
  • tab.inactiveBackground#141a25
  • 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#56d364
  • terminal.ansiBrightMagenta#d2a8ff
  • terminal.ansiBrightRed#ffa198
  • terminal.ansiBrightWhite#f0f6fc
  • terminal.ansiBrightYellow#e3b341
  • terminal.ansiCyan#39c5cf
  • terminal.ansiGreen#3fb950
  • terminal.ansiMagenta#bc8cff
  • terminal.ansiRed#ff7b72
  • terminal.ansiWhite#b1bac4
  • terminal.ansiYellow#d29922
  • terminal.foreground#8b949e
  • textBlockQuote.background#0c0e11
  • 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#0c0e11
  • titleBar.inactiveForeground#8b949e
  • tree.indentGuidesStroke#21262d

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#d9dae2
string#8fc778
punctuation, constant.other.symbol#32c3fc
constant.character.escape, text.html constant.character.entity.named#d9dae2
constant.language.boolean#ff9cac
constant.numeric#ee8f73
variable, variable.parameter, support.variable, variable.language, support.constant, meta.definition.variable entity.name.function, meta.function-call.arguments#d9dae2
keyword.other#ee8f73
keyword, modifier, variable.language.this, support.type.object, constant.language#32c3fc
entity.name.function, support.function#548ec5
storage.type, storage.modifier, storage.control#8777e2
support.module, support.node#e75e65italic
support.type, constant.other.key#e2bc52
entity.name.type, entity.other.inherited-class, entity.other#e2bc52
comment#61667eitalic
comment punctuation.definition.comment, string.quoted.docstring#61667eitalic
punctuation#32c3fc
entity.name, entity.name.type.class, support.type, support.class, meta.use#e2bc52
variable.object.property, meta.field.declaration entity.name.function#e75e65
meta.definition.method entity.name.function#e75e65
meta.function entity.name.function#548ec5
template.expression.begin, template.expression.end, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end#32c3fc
meta.embedded, source.groovy.embedded, meta.template.expression#d9dae2
entity.name.tag.yaml#e75e65
meta.object-literal.key, meta.object-literal.key string, support.type.property-name.json#e75e65
constant.language.json#32c3fc
entity.other.attribute-name.class#e2bc52
entity.other.attribute-name.id#ee8f73
source.css entity.name.tag#e2bc52
support.type.property-name.css#5cb4b4
meta.tag, punctuation.definition.tag#32c3fc
entity.name.tag#e75e65
entity.other.attribute-name#8777e2
punctuation.definition.entity.html#d9dae2
markup.heading#32c3fc
text.html.markdown meta.link.inline, meta.link.reference#e75e65
text.html.markdown beginning.punctuation.definition.list#32c3fc
markup.italic#e75e65italic
markup.bold#e75e65bold
markup.bold markup.italic, markup.italic markup.bold#e75e65italic bold
markup.fenced_code.block.markdown punctuation.definition.markdown#8fc778
markup.inline.raw.string.markdown#8fc778
keyword.other.definition.ini#e75e65
entity.name.section.group-title.ini#32c3fc
source.cs meta.class.identifier storage.type#e2bc52
source.cs meta.method.identifier entity.name.function#e75e65
source.cs meta.method-call meta.method, source.cs entity.name.function#548ec5
source.cs storage.type#e2bc52
source.cs meta.method.return-type#e2bc52
source.cs meta.preprocessor#61667e
source.cs entity.name.type.namespace#d9dae2
meta.jsx.children, SXNested#d9dae2
support.class.component#e2bc52
source.cpp meta.block variable.other#d9dae2
source.python meta.member.access.python#e75e65
source.python meta.function-call.python, meta.function-call.arguments#548ec5
meta.block#e75e65
entity.name.function.call#548ec5
source.php support.other.namespace, source.php meta.use support.class#d9dae2
constant.keyword#32c3fcitalic
entity.name.function#548ec5
markup.deleted#e75e65
markup.inserted#8fc778
markup.underlineunderline
keyword.control#32c3fcitalic
markup.quote#32c3fcitalic
markup.fenced_code.block#d9dae290
punctuation.definition.quote#ff9cac
meta.structure.dictionary.json support.type.property-name.json#8777e2
meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#e2bc52
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#ee8f73
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#e75e65
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 meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#916b53
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 meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#548ec5
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 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#ff9cac
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 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 meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#8777e2
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 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 meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#8fc778