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#555555
  • 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#ffffff
  • button.hoverBackground#2ea043
  • button.secondaryBackground#292e34
  • button.secondaryForeground#c9d1d9
  • button.secondaryHoverBackground#555555
  • checkbox.background#161b22
  • checkbox.border#555555
  • debugToolBar.background#1c2128
  • descriptionForeground#8b949e
  • diffEditor.insertedTextBackground#2ea04333
  • diffEditor.removedTextBackground#da363333
  • dropdown.background#1c2128
  • dropdown.border#555555
  • dropdown.foreground#c9d1d9
  • dropdown.listBackground#1c2128
  • editor.background#020210
  • editor.findMatchBackground#ffd33d44
  • editor.findMatchHighlightBackground#ffd33d22
  • editor.focusedStackFrameHighlightBackground#3FB95025
  • editor.foldBackground#6e76811a
  • editor.foreground#aaaaaa
  • 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#555555
  • editorGroupHeader.tabsBackground#020210
  • editorGroupHeader.tabsBorder#555555
  • editorGutter.addedBackground#196c2e
  • editorGutter.deletedBackground#b62324
  • editorGutter.modifiedBackground#f09e6e
  • editorIndentGuide.activeBackground#555555
  • 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#f09e6e
  • 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#555555
  • notifications.foreground#8b949e
  • notificationsErrorIcon.foreground#f85149
  • notificationsInfoIcon.foreground#58a6ff
  • notificationsWarningIcon.foreground#f0883e
  • panel.background#020210
  • panel.border#555555
  • panelInput.border#555555
  • panelTitle.activeBorder#f78166
  • 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#020210
  • sideBar.border#555555
  • sideBar.foreground#c9d1d9
  • sideBarSectionHeader.background#020210
  • sideBarSectionHeader.border#555555
  • sideBarSectionHeader.foreground#c9d1d9
  • sideBarTitle.foreground#c9d1d9
  • statusBar.background#202040
  • statusBar.border#555555
  • statusBar.debuggingBackground#da3633
  • statusBar.debuggingForeground#f0f6fc
  • statusBar.foreground#ffffff
  • statusBar.noFolderBackground#0d1117
  • statusBarItem.prominentBackground#161b22
  • tab.activeBackground#0d1117
  • tab.activeBorder#0d1117
  • tab.activeBorderTop#f78166
  • tab.activeForeground#c9d1d9
  • tab.border#555555
  • tab.hoverBackground#0d1117
  • tab.inactiveBackground#020210
  • tab.inactiveForeground#8b949e
  • tab.unfocusedActiveBorder#0d1117
  • tab.unfocusedActiveBorderTop#555555
  • tab.unfocusedHoverBackground#161b22
  • terminal.ansiBlack#111111
  • terminal.ansiBlue#0000ff
  • terminal.ansiBrightBlack#aaaaaa
  • terminal.ansiBrightBlue#0000ff
  • terminal.ansiBrightCyan#00ffff
  • terminal.ansiBrightGreen#00ff00
  • terminal.ansiBrightMagenta#ff00ff
  • terminal.ansiBrightRed#ff0000
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#ffff00
  • terminal.ansiCyan#00ffff
  • terminal.ansiGreen#00ff00
  • terminal.ansiMagenta#ff00ff
  • terminal.ansiRed#ff0000
  • terminal.ansiWhite#ffffff
  • terminal.ansiYellow#ffff00
  • terminal.foreground#ffffff
  • textBlockQuote.background#020210
  • 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#555555
  • titleBar.inactiveBackground#020210
  • titleBar.inactiveForeground#8b949e
  • tree.indentGuidesStroke#21262d

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, string.comment, constant.character.escape.python#888888
string.quoted.docstring.multi.python#888888italic
constant, entity.name.constant, variable.other.constant, variable.language, entity, keyword.other.unit#ffff80
entity.name, meta.export.default, meta.definition.variable#0000ff
variable.parameter.function, meta.jsx.children, meta.block, meta.tag.attributes, entity.name.constant, meta.object.member, meta.embedded.expression#e8ffff
entity.name.function, support.function.builtin.python, meta.function-call.generic.python#00ccff
entity.name.tag, support.class.component#00ffff
keyword#ffff00
keyword.control, keyword.operator.logical.python#00ffff
keyword.control.directive, source.cpp keyword.operator.new, keyword.operator, keyword.other.using, keyword.other.operator, entity.name.operator#00ffff
string.quoted.other.lt-gt.include.cpp, storage.type.namespace.directive.cpp#ff90ff
meta.body.function.definition.cpp, keyword.operator.sizeof.cpp#00ccff
entity.name.function.preprocessor.cpp#eeee00italic
keyword.operator, entity.name.function.operator, storage.modifier.pointer.cpp#eeeeee
punctuation.terminator.statement.cpp#eeeeee
punctuation.section.block.begin.bracket.curly, punctuation.section.block.end.bracket.curly, punctuation.section.parameters, punctuation.section.arguments.begin.bracket.round.function.call.cpp, punctuation.section.arguments.end.bracket.round.function.call.cpp, punctuation.section.parens.begin.bracket.round.cpp, punctuation.section.parens.end.bracket.round.cpp#eeeeee
storage, storage.type#ff2020
storage.modifier.package, storage.modifier.import, storage.type.java#ff00ffbold underline
string, string punctuation.section.embedded source#6aff6a
support#00ccff
meta.property-name#79c0ff
variable.other, source.python#ff90ff
punctuation.definition.dict, keyword.operator.assignment.python, punctuation.parenthesis.begin.python, punctuation.parenthesis.end.python, punctuation.separator, keyword.operator.arithmetic.python#eeeeee
variable.parameter, variable.parameter.function.language.special.self.python#ff8000
invalid.broken#ffa198italic
invalid.deprecated#ff2020underline
invalid.illegal#ffa198italic
invalid.unimplemented#ffa198italic
carriage-return#0d1117italic underline
message.error#ffa198
string source#c9d1d9
string variable#79c0ff
source.regexp, string.regexp#a5d6ff
string.regexp.character-class, string.regexp constant.character.escape, string.regexp source.ruby.embedded, string.regexp string.regexp.arbitrary-repitition#a5d6ff
string.regexp constant.character.escape#7ee787bold
support.constant#79c0ff
support.variable#79c0ff
meta.module-reference#79c0ff
punctuation.definition.list.begin.markdown#ffa657
markup.heading, markup.heading entity.name#79c0ffbold
markup.quote#7ee787
markup.italic#c9d1d9italic
markup.bold#c9d1d9bold
markup.raw#79c0ff
markup.deleted, meta.diff.header.from-file, punctuation.definition.deleted#ffa198
markup.inserted, meta.diff.header.to-file, punctuation.definition.inserted#7ee787
markup.changed, punctuation.definition.changed#ffa657
markup.ignored, markup.untracked#161b22
meta.diff.range#d2a8ffbold
meta.diff.header#79c0ff
meta.separator#79c0ffbold
meta.output#79c0ff
brackethighlighter.tag, brackethighlighter.curly, brackethighlighter.round, brackethighlighter.square, brackethighlighter.angle, brackethighlighter.quote#8b949e
punctuation.definition.arguments.begin.python, punctuation.definition.arguments.end.python, punctuation.definition.list.begin.python, punctuation.definition.list.end.python, punctuation.separator.arguments.python, punctuation.definition.parameters.begin.python, punctuation.definition.parameters.end.python#c9d1d9
brackethighlighter.unmatched#ffa198
constant.other.reference.link, string.other.link#a5d6ffunderline
keyword.type.cs#ff2020
entity.name.variable.field.cs, entity.name.variable.local.cs#ff90ff
entity.name.variable.parameter.cs, keyword.other.this.cs, variable.other.readwrite.cs#ff8000italic
meta.return-type, support.class, entity.name.type, entity.name.namespace, entity.other.attribute, entity.name.scope-resolution, entity.name.class, storage.type.numeric.go, storage.type.byte.go, storage.type.boolean.go, storage.type.string.go, storage.type.uintptr.go, storage.type.error.go, storage.type.rune.go, storage.type.cs, storage.type.generic.cs, storage.type.modifier.cs, storage.type.variable.cs, storage.type.annotation.java, storage.type.generic.java, storage.type.java, storage.type.object.array.java, storage.type.primitive.array.java, storage.type.primitive.java, storage.type.token.java, storage.type.groovy, storage.type.annotation.groovy, storage.type.parameters.groovy, storage.type.generic.groovy, storage.type.object.array.groovy, storage.type.primitive.array.groovy, storage.type.primitive.groovy#00ccff