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.background#F3F3F3
  • activityBar.foreground#141414BD
  • activityBarBadge.background#005293
  • activityBarBadge.foreground#F3F3F3
  • badge.background#F3F3F3
  • badge.foreground#141414A8
  • breadcrumb.activeSelectionForeground#14141499
  • breadcrumb.background#FCFCFC
  • breadcrumb.focusForeground#141414
  • breadcrumb.foreground#14141499
  • breadcrumbPicker.background#F3F3F3
  • button.background#2778C1
  • button.foreground#FCFCFC
  • button.hoverBackground#246AAB
  • button.secondaryBackground#14141424
  • button.secondaryForeground#141414
  • button.secondaryHoverBackground#14141433
  • chart.axis#14141414
  • chart.guide#141414BD
  • chart.line#14141414
  • charts.blue#2778C1
  • charts.foreground#141414BD
  • charts.green#00854C
  • charts.lines#141414BD
  • charts.orange#CD4500
  • charts.purple#7565CC
  • charts.red#CE405B
  • charts.yellow#A46700
  • commandCenter.activeBackground#14141424
  • commandCenter.activeBorder#1414141F
  • commandCenter.activeForeground#141414BD
  • commandCenter.background#14141414
  • commandCenter.border#14141414
  • commandCenter.debuggingBackground#14141424
  • commandCenter.foreground#141414BD
  • commandCenter.inactiveBorder#14141414
  • commandCenter.inactiveForeground#14141499
  • debugExceptionWidget.background#FCFCFC
  • debugExceptionWidget.border#F3F3F3
  • debugToolBar.background#F3F3F3
  • descriptionForeground#141414BD
  • diffEditor.insertedLineBackground#00AF6624
  • diffEditor.insertedTextBackground#00B06838
  • diffEditor.removedLineBackground#FF617B38
  • diffEditor.removedTextBackground#FF617B57
  • diffEditor.unchangedCodeBackground#FCFCFC00
  • dropdown.background#FCFCFC
  • dropdown.border#14141414
  • dropdown.foreground#141414
  • editor.background#FCFCFC
  • editor.findMatchBackground#3B7E843D
  • editor.findMatchHighlightBackground#3B7E8424
  • editor.findRangeHighlightBackground#14141414
  • editor.foreground#141414
  • editor.hoverHighlightBackground#14141424
  • editor.inactiveSelectionBackground#14141414
  • editor.lineHighlightBackground#EAEAEA
  • editor.lineHighlightBorder#EAEAEA
  • editor.rangeHighlightBackground#3B7E8424
  • editor.selectionBackground#14141414
  • editor.selectionHighlightBackground#3B7E8424
  • editor.snippetFinalTabstopHighlightBorder#1414141F
  • editor.snippetTabstopHighlightBackground#14141424
  • editor.wordHighlightBackground#14141424
  • editor.wordHighlightStrongBackground#1414140F
  • editorBracketHighlight.foreground1#004078
  • editorBracketHighlight.foreground2#0064B0
  • editorBracketHighlight.foreground3#2778C1
  • editorBracketHighlight.foreground4#7A0055
  • editorBracketHighlight.foreground5#A6317E
  • editorBracketHighlight.foreground6#B54E90
  • editorBracketHighlight.unexpectedBracket.foreground#BE1744
  • editorBracketMatch.background#14141424
  • editorBracketMatch.border#FCFCFC00
  • editorCodeLens.foreground#141414BD
  • editorCursor.foreground#141414
  • editorError.border#BE174400
  • editorError.foreground#BE1744
  • editorGroup.border#14141414
  • editorGroup.dropBackground#14141414
  • editorGroup.emptyBackground#F3F3F3
  • editorGroupHeader.noTabsBackground#F3F3F3
  • editorGroupHeader.tabsBackground#F3F3F3
  • editorGroupHeader.tabsBorder#14141414
  • editorGutter.addedBackground#007041
  • editorGutter.background#FCFCFC
  • editorGutter.deletedBackground#BE1744
  • editorGutter.modifiedBackground#A46700
  • editorHoverWidget.background#F3F3F3
  • editorHoverWidget.border#14141433
  • editorHoverWidget.foreground#141414
  • editorIndentGuide.activeBackground1#14141433
  • editorIndentGuide.background1#14141414
  • editorInlayHint.background#FCFCFC00
  • editorInlayHint.foreground#141414BD
  • editorInlayHint.parameterBackground#FCFCFC00
  • editorInlayHint.parameterForeground#14141499
  • editorInlayHint.typeBackground#FCFCFC00
  • editorInlayHint.typeForeground#14141499
  • editorLineNumber.activeForeground#141414BD
  • editorLineNumber.foreground#1414145C
  • editorLink.activeForeground#141414
  • editorMarkerNavigation.background#1414144D
  • editorMarkerNavigationError.background#BE1744C0
  • editorMarkerNavigationWarning.background#141414BD
  • editorOverviewRuler.border#FCFCFC00
  • editorRuler.foreground#14141433
  • editorStickyScroll.border#14141414
  • editorSuggestWidget.background#F3F3F3
  • editorSuggestWidget.border#14141414
  • editorSuggestWidget.foreground#141414BD
  • editorSuggestWidget.highlightForeground#141414
  • editorSuggestWidget.selectedBackground#14141414
  • editorUnnecessaryCode.opacity#0000007F
  • editorWarning.border#FCFCFC00
  • editorWarning.foreground#CD4500
  • editorWhitespace.foreground#1414144D
  • editorWidget.background#F3F3F3
  • editorWidget.foreground#141414BD
  • editorWidget.resizeBorder#14141433
  • errorForeground#BE1744
  • extensionButton.prominentBackground#14141414
  • extensionButton.prominentForeground#FCFCFC
  • extensionButton.prominentHoverBackground#14141424
  • focusBorder#14141433
  • foreground#141414
  • git.blame.editorDecorationForeground#141414BD
  • gitDecoration.addedResourceForeground#007041
  • gitDecoration.deletedResourceForeground#BE1744
  • gitDecoration.ignoredResourceForeground#14141499
  • gitDecoration.modifiedResourceForeground#A46700
  • gitDecoration.untrackedResourceForeground#176C74
  • icon.foreground#14141480
  • input.background#FCFCFC
  • input.border#14141433
  • input.foreground#141414
  • input.placeholderForeground#1414145C
  • inputOption.activeBackground#14141424
  • inputOption.activeBorder#14141400
  • inputValidation.errorBackground#FCE6EA
  • inputValidation.errorBorder#CE405B
  • inputValidation.errorForeground#BE1744
  • inputValidation.infoBackground#E1EAEB
  • inputValidation.infoBorder#3B7E84
  • inputValidation.infoForeground#176C74
  • inputValidation.warningBackground#F6ECD9
  • inputValidation.warningBorder#A46700
  • inputValidation.warningForeground#8B5700
  • list.activeSelectionBackground#14141414
  • list.activeSelectionForeground#141414
  • list.deemphasizedForeground#141414BD
  • list.dropBackground#14141414
  • list.errorForeground#BE1744
  • list.focusBackground#14141424
  • list.focusForeground#141414
  • list.highlightForeground#3B7E84
  • list.hoverBackground#14141414
  • list.hoverForeground#141414
  • list.inactiveSelectionBackground#14141414
  • list.inactiveSelectionForeground#141414
  • list.invalidItemForeground#14141499
  • list.warningForeground#A46700
  • menu.background#F3F3F3
  • menu.foreground#141414BD
  • menu.separatorBackground#14141414
  • menubar.selectionBackground#14141414
  • merge.border#FCFCFC00
  • merge.currentContentBackground#9887FF24
  • merge.currentHeaderBackground#9887FF3D
  • merge.incomingContentBackground#3B7E843D
  • merge.incomingHeaderBackground#3B7E847A
  • minimap.background#FCFCFC
  • minimap.errorHighlight#BE1744
  • minimap.findMatchHighlight#3B7E843D
  • minimap.foregroundOpacity#141414
  • minimap.selectionHighlight#14141414
  • minimap.selectionOccurrenceHighlight#14141414
  • minimap.warningHighlight#A46700
  • minimapGutter.addedBackground#00AF663D
  • minimapGutter.deletedBackground#FF617B24
  • minimapGutter.modifiedBackground#A46700
  • minimapSlider.activeBackground#14141424
  • minimapSlider.background#1414140F
  • minimapSlider.hoverBackground#14141414
  • notificationLink.foreground#3B7E84
  • notifications.background#F3F3F3
  • notifications.border#14141414
  • notifications.foreground#141414
  • notificationsErrorIcon.foreground#BE1744
  • notificationsInfoIcon.foreground#005293
  • notificationsWarningIcon.foreground#CD4500
  • panel.background#F3F3F3
  • panel.border#14141414
  • panelStickyScroll.border#14141414
  • panelTitle.activeBorder#0B0B2D00
  • panelTitle.activeForeground#141414
  • panelTitle.inactiveForeground#141414BD
  • peekView.border#1414141F
  • peekViewEditor.background#F3F3F3
  • peekViewEditor.matchHighlightBackground#3B7E8424
  • peekViewEditorGutter.background#F3F3F3
  • peekViewResult.background#F3F3F3
  • peekViewResult.fileForeground#141414
  • peekViewResult.lineForeground#14141499
  • peekViewResult.matchHighlightBackground#3B7E8424
  • peekViewResult.selectionBackground#F3F3F3
  • peekViewResult.selectionForeground#141414
  • peekViewTitle.background#F3F3F3
  • peekViewTitleDescription.foreground#141414BD
  • peekViewTitleLabel.foreground#141414
  • pickerGroup.border#1414141F
  • pickerGroup.foreground#141414
  • progressBar.background#007041
  • sash.hoverBorder#1414141F
  • scrollbar.shadow#14141414
  • scrollbarSlider.activeBackground#14141433
  • scrollbarSlider.background#14141424
  • scrollbarSlider.hoverBackground#14141433
  • selection.background#14141414
  • sideBar.background#F3F3F3
  • sideBar.border#14141414
  • sideBar.foreground#141414BD
  • sideBarSectionHeader.background#F3F3F3
  • sideBarSectionHeader.foreground#141414BD
  • sideBarStickyScroll.border#14141414
  • sideBarTitle.foreground#141414BD
  • statusBar.background#F3F3F3
  • statusBar.border#14141414
  • statusBar.debuggingBackground#F3F3F3
  • statusBar.debuggingForeground#14141499
  • statusBar.foreground#14141499
  • statusBar.noFolderBackground#F3F3F3
  • statusBar.noFolderForeground#14141499
  • statusBarItem.activeBackground#14141424
  • statusBarItem.hoverBackground#14141414
  • statusBarItem.prominentBackground#14141414
  • statusBarItem.prominentHoverBackground#14141424
  • statusBarItem.remoteBackground#F3F3F3
  • statusBarItem.remoteForeground#141414BD
  • tab.activeBackground#FCFCFC
  • tab.activeBorder#FCFCFC
  • tab.activeBorderTop#FCFCFC00
  • tab.activeForeground#141414
  • tab.border#1414141F
  • tab.hoverBackground#14141414
  • tab.inactiveBackground#F3F3F3
  • tab.inactiveForeground#141414BD
  • tab.unfocusedActiveBorder#FCFCFC
  • tab.unfocusedActiveForeground#141414BD
  • tab.unfocusedHoverBackground#14141400
  • tab.unfocusedHoverBorder#14141414
  • tab.unfocusedInactiveForeground#141414BD
  • terminal.ansiBlack#141414
  • terminal.ansiBlue#0064B0
  • terminal.ansiBrightBlack#141414BD
  • terminal.ansiBrightBlue#2778C1
  • terminal.ansiBrightCyan#3B7E84
  • terminal.ansiBrightGreen#00854C
  • terminal.ansiBrightMagenta#B54E90
  • terminal.ansiBrightRed#CE405B
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#A46700
  • terminal.ansiCyan#176C74
  • terminal.ansiGreen#007041
  • terminal.ansiMagenta#92156A
  • terminal.ansiRed#BE1744
  • terminal.ansiWhite#FCFCFC
  • terminal.ansiYellow#8B5700
  • terminal.background#F3F3F3
  • terminal.foreground#141414
  • terminal.selectionBackground#14141424
  • terminalCursor.background#F3F3F3
  • terminalCursor.foreground#141414
  • terminalStickyScroll.border#14141414
  • textLink.activeForeground#0064B0
  • textLink.foreground#0064B0
  • textPreformat.foreground#3B7E84
  • textSeparator.foreground#3B7E84
  • titleBar.activeBackground#F3F3F3
  • titleBar.activeForeground#141414A8
  • titleBar.border#14141414
  • titleBar.inactiveBackground#F3F3F3
  • titleBar.inactiveForeground#14141480
  • tree.inactiveIndentGuidesStroke#14141414
  • tree.indentGuidesStroke#14141433
  • walkThrough.embeddedEditorBackground#F3F3F3
  • widget.border#1414141F
  • widget.shadow#14141424

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, string.comment#14141499italic
string, string punctuation.section.embedded source#7565CC
punctuation.definition.string.begin,punctuation.definition.string.end#7565CC
string variable#005293
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded#141414BD
source.regexp, string.regexp#0064B0
string.regexp constant.character.escape#007041
keyword.operator.quantifier.regexp, keyword.operator.negation.regexp, keyword.operator.alternation.regexp, keyword.operator.or.regexp, keyword.control.anchor.regexp#AE3C00
punctuation.definition.group.regexp, punctuation.definition.group.assertion.regexp, punctuation.definition.character-class.regexp, punctuation.character.set.begin.regexp, punctuation.character.set.end.regexp, support.other.parenthesis.regexp#CD4500
constant.other.placeholder, constant.character#A30034
constant, entity.name.constant, variable.other.constant, variable.other.enummember#005293
constant.numeric#92156A
support.constant#005293
variable.language#BE1744
support.variable#005293
variable.other.readwrite#005293
keyword#A30034
storage, storage.type#A30034
keyword.control.directive#007041
entity.name.function#CD4500
meta.require, support.function, variable.function#CD4500
keyword.other.special-method#654DC0
meta.export.default#CD4500
support.class, entity.name.type.class, entity.name.type.namespace, entity.name.type, entity.name.namespace#005293
entity.name.class#005293
entity.other.inherited-class, entity.name.scope-resolution#005293
support.type, variable.other.class#005293
keyword.operator#141414
keyword.operator.assignment, keyword.operator.assignment.compound, keyword.operator.assignment.c, keyword.operator.assignment.cpp, keyword.operator.assignment.go, keyword.operator.assignment.java, keyword.operator.assignment.js, keyword.operator.assignment.ts, keyword.operator.assignment.python#141414
keyword.operator.comparison, keyword.operator.relational, keyword.operator.comparison.c, keyword.operator.comparison.cpp, keyword.operator.comparison.java, keyword.operator.comparison.js, keyword.operator.comparison.ts, keyword.operator.comparison.python#A30034
keyword.operator.arithmetic, keyword.operator.increment, keyword.operator.decrement, keyword.operator.arithmetic.c, keyword.operator.increment.c, keyword.operator.decrement.c, keyword.operator.arithmetic.cpp, keyword.operator.increment.cpp, keyword.operator.decrement.cpp, keyword.operator.arithmetic.go, keyword.operator.arithmetic.java, keyword.operator.arithmetic.js, keyword.operator.arithmetic.ts, keyword.operator.arithmetic.python#141414
keyword.operator.bitwise, keyword.operator.bitwise.shift, keyword.operator.bitwise.shift.c, keyword.operator.bitwise.shift.cpp, keyword.operator.bitwise.java, keyword.operator.bitwise.js, keyword.operator.bitwise.ts, keyword.operator.bitwise.python#A30034
keyword.operator.logical, keyword.operator.logical.python, keyword.operator.logical.java, keyword.operator.logical.js, keyword.operator.logical.ts, keyword.operator.logical.c, keyword.operator.logical.cpp#A30034
keyword.operator.new, keyword.operator.delete, keyword.operator.typeof, keyword.operator.instanceof, keyword.operator.in, keyword.operator.of, keyword.operator.sizeof, keyword.operator.address, keyword.operator.ternary, keyword.operator.optional, keyword.operator.expression.instanceof, keyword.operator.expression.typeof, keyword.operator.expression.delete, keyword.operator.expression.in, keyword.operator.expression.of, keyword.operator.expression.void, keyword.operator.expression.keyof, keyword.operator.sizeof.c, keyword.operator.sizeof.cpp, keyword.operator.address.go, keyword.operator.module, keyword.operator.instanceof.java, keyword.operator.less, keyword.operator.c, keyword.operator.cpp#005293
entity.name.tag, support.class.component#007041
entity.name.tag.html#005293
punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.definition.tag.begin.xml, punctuation.definition.tag.end.xml, punctuation.definition.tag#141414BD
entity.other.attribute-name#654DC0
entity.other.attribute-name.id#654DC0
entity.other.attribute-name.class.css#005293
support.type.property-name.css, support.type.property-name, support.type.vendored.property-name, meta.property-name.css#7565CC
meta.property-value.css#004078
meta.selector#3B7E84
keyword.other.unit#B54E90
constant.other.color#92156A
punctuation.definition.constant.css#B54E90
support.module.node,support.type.object.module#A30034
entity.name.type.module#A30034
support.constant.json#CD4500
support.variable.property.process#CD4500
support.variable.dom,support.variable.property.dom#654DC0
support.type.type.flowtype#654DC0
support.type.primitive#A30034
meta.property.object#654DC0
support.variable.property, variable.other.property, variable.other.property.ts, meta.definition.property.ts#654DC0
keyword.other.template.begin#7565CC
keyword.other.template.end#7565CC
keyword.other.substitution.begin#7565CC
keyword.other.substitution.end#7565CC
meta.function.decorator.python, punctuation.definition.decorator.python, entity.name.function.decorator.python#007041
support.type.python#3B7E84
string.quoted.binary.single.python#007041
constant.other.ellipsis.python#141414
support.variable.magic.python#141414
punctuation.separator.period.python,punctuation.separator.element.python,punctuation.parenthesis.begin.python,punctuation.parenthesis.end.python#141414
variable.parameter.function.language.special.self.python#92156A
variable.parameter.function.language.python#CD4500
variable.parameter.function.python#CD4500
punctuation.definition.arguments.begin.python,punctuation.definition.arguments.end.python,punctuation.separator.arguments.python,punctuation.definition.list.begin.python,punctuation.definition.list.end.python#141414
meta.function-call.generic.python#654DC0
constant.character.format.placeholder.other.python#CD4500
keyword.control.import.python,keyword.control.flow.pythonitalic
storage.type.c, storage.type.cpp, support.type.posix-reserved.c, support.type.posix-reserved.cpp#005293
constant.language.false.cpp, constant.language.true.cpp#3B7E84
variable.language.this.cpp#3B7E84
storage.modifier.reference, storage.modifier.pointer#141414
variable.c#141414
keyword.control.directive.include.cpp#007041
meta.preprocessor#007041
punctuation.separator.c,punctuation.separator.cpp#3B7E84
storage.modifier.package, storage.modifier.import#141414
variable.parameter.java#141414
storage.modifier.import.java,storage.type.generic.java#A30034
storage.type.annotation.java, storage.type.object.array.java#005293
source.java#141414
storage.type.java#005293
support.type.property-name.json#007041
source.json meta.structure.dictionary.json > value.json > string.quoted.json,source.json meta.structure.array.json > value.json > string.quoted.json,source.json meta.structure.dictionary.json > value.json > string.quoted.json > punctuation,source.json meta.structure.array.json > value.json > string.quoted.json > punctuation#7565CC
markup.heading, markup.heading entity.name#005293
entity.name.section.markdown, entity.name.section, markup.heading.setext#005293
punctuation.definition.heading.markdown#14141499
markup.quote#141414BD
punctuation.definition.quote.begin.markdown#14141499
markup.italicitalic
markup.boldbold
markup.underlineunderline
markup.strikethrough, punctuation.definition.strikethrough#14141499strikethrough
markup.inline.raw#007041
markup.heading punctuation.definition.heading#141414BD
punctuation.definition.list.begin.markdown#141414BD
punctuation.definition.list.markdown#141414
punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, punctuation.definition.metadata.markdown#141414
beginning.punctuation.definition.list.markdown#141414
markup.underline.link.markdown,markup.underline.link.image.markdown#005293
string.other.link.title.markdown,string.other.link.description.markdown#141414BD
punctuation.definition.bold, punctuation.definition.italic, punctuation.definition.underline#141414BD
markup.deleted, meta.diff.header.from-file, punctuation.definition.deleted#A30034
markup.inserted, meta.diff.header.to-file, punctuation.definition.inserted#007041
markup.changed, punctuation.definition.changed#CD4500
markup.ignored, markup.untracked#14141499
meta.diff.range#654DC0
meta.diff.header#005293
entity.name.tag.template, entity.name.tag.script, entity.name.tag.style#654DC0
entity.name.package.go#A30034
punctuation.definition.block.sequence.item.yaml#141414
constant.language.symbol.elixir#141414
invalid, invalid.broken, invalid.deprecated, invalid.illegal, invalid.unimplemented#A30034italic
carriage-return#1414140Fitalic underline
message.error#A30034
token.info-token#005293
token.warn-token#8B5700
token.error-token#BE1744
token.debug-token#3B7E84
meta.module-reference#005293
constant.character.escape#141414BD
punctuation.section.embedded.begin,punctuation.section.embedded.end#3B7E84
meta.separator#005293
meta.output#005293
constant.other.reference.link#005293
control.elements#CD4500
punctuation.definition.constant#CD4500
meta.tag#A46700
punctuation.separator.delimiter#141414
support.constant.edge#3B7E84
brackethighlighter.tag, brackethighlighter.curly, brackethighlighter.round, brackethighlighter.square, brackethighlighter.angle, brackethighlighter.quote#141414BD
brackethighlighter.unmatched#A30034