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#00538F
  • 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#1F79C0
  • button.foreground#FCFCFC
  • button.hoverBackground#1D6BAA
  • button.secondaryBackground#14141424
  • button.secondaryForeground#141414
  • button.secondaryHoverBackground#14141433
  • chart.axis#14141414
  • chart.guide#141414BD
  • chart.line#14141414
  • charts.blue#1F79C0
  • charts.foreground#141414BD
  • charts.green#00845C
  • charts.lines#141414BD
  • charts.orange#BF5400
  • charts.purple#975ABA
  • charts.red#CE405B
  • charts.yellow#907100
  • 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#159EFF24
  • diffEditor.insertedTextBackground#159EFF3D
  • diffEditor.removedLineBackground#F66E003D
  • diffEditor.removedTextBackground#F66E0057
  • diffEditor.unchangedCodeBackground#FCFCFC00
  • dropdown.background#FCFCFC
  • dropdown.border#14141414
  • dropdown.foreground#141414
  • editor.background#FCFCFC
  • editor.findMatchBackground#00AAB53D
  • editor.findMatchHighlightBackground#00AAB524
  • editor.findRangeHighlightBackground#14141414
  • editor.foreground#141414
  • editor.hoverHighlightBackground#14141424
  • editor.inactiveSelectionBackground#14141414
  • editor.lineHighlightBackground#EAEAEA
  • editor.lineHighlightBorder#EAEAEA
  • editor.rangeHighlightBackground#00AAB524
  • editor.selectionBackground#14141414
  • editor.selectionHighlightBackground#00AAB524
  • editor.snippetFinalTabstopHighlightBorder#1414141F
  • editor.snippetTabstopHighlightBackground#14141424
  • editor.wordHighlightBackground#14141424
  • editor.wordHighlightStrongBackground#1414140F
  • editorBracketHighlight.foreground1#004174
  • editorBracketHighlight.foreground2#0066AB
  • editorBracketHighlight.foreground3#1F79C0
  • editorBracketHighlight.foreground4#7C0057
  • editorBracketHighlight.foreground5#A73380
  • editorBracketHighlight.foreground6#B65091
  • 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#0066AB
  • editorGutter.background#FCFCFC
  • editorGutter.deletedBackground#A14700
  • editorGutter.modifiedBackground#907100
  • 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#BF5400
  • 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#0066AB
  • gitDecoration.conflictingResourceForeground#A14700
  • gitDecoration.deletedResourceForeground#A14700
  • gitDecoration.ignoredResourceForeground#14141499
  • gitDecoration.modifiedResourceForeground#907100
  • gitDecoration.renamedResourceForeground#0066AB
  • gitDecoration.stageDeletedResourceForeground#A14700
  • gitDecoration.stageModifiedResourceForeground#907100
  • 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#D9F1F2
  • inputValidation.infoBorder#3B7E84
  • inputValidation.infoForeground#176C74
  • inputValidation.warningBackground#F3EDD9
  • inputValidation.warningBorder#907100
  • inputValidation.warningForeground#795F00
  • 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#907100
  • menu.background#F3F3F3
  • menu.foreground#141414BD
  • menu.separatorBackground#14141414
  • menubar.selectionBackground#14141414
  • merge.border#FCFCFC00
  • merge.currentContentBackground#CA6AFF24
  • merge.currentHeaderBackground#CA6AFF3D
  • merge.incomingContentBackground#00AAB53D
  • merge.incomingHeaderBackground#3B7E847A
  • minimap.background#FCFCFC
  • minimap.errorHighlight#BE1744
  • minimap.findMatchHighlight#00AAB53D
  • minimap.foregroundOpacity#141414
  • minimap.selectionHighlight#14141414
  • minimap.selectionOccurrenceHighlight#14141414
  • minimap.warningHighlight#907100
  • minimapGutter.addedBackground#159EFF3D
  • minimapGutter.deletedBackground#F66E0024
  • minimapGutter.modifiedBackground#907100
  • 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#00538F
  • notificationsWarningIcon.foreground#BF5400
  • 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#00AAB524
  • peekViewEditorGutter.background#F3F3F3
  • peekViewResult.background#F3F3F3
  • peekViewResult.fileForeground#141414
  • peekViewResult.lineForeground#14141499
  • peekViewResult.matchHighlightBackground#00AAB524
  • peekViewResult.selectionBackground#F3F3F3
  • peekViewResult.selectionForeground#141414
  • peekViewTitle.background#F3F3F3
  • peekViewTitleDescription.foreground#141414BD
  • peekViewTitleLabel.foreground#141414
  • pickerGroup.border#1414141F
  • pickerGroup.foreground#141414
  • progressBar.background#006E4E
  • 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#0066AB
  • terminal.ansiBrightBlack#141414BD
  • terminal.ansiBrightBlue#1F79C0
  • terminal.ansiBrightCyan#3B7E84
  • terminal.ansiBrightGreen#00845C
  • terminal.ansiBrightMagenta#B65091
  • terminal.ansiBrightRed#CE405B
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#907100
  • terminal.ansiCyan#176C74
  • terminal.ansiGreen#006E4E
  • terminal.ansiMagenta#94176C
  • terminal.ansiRed#BE1744
  • terminal.ansiWhite#FCFCFC
  • terminal.ansiYellow#795F00
  • terminal.background#F3F3F3
  • terminal.foreground#141414
  • terminal.selectionBackground#14141424
  • terminalCursor.background#F3F3F3
  • terminalCursor.foreground#141414
  • terminalStickyScroll.border#14141414
  • textLink.activeForeground#0066AB
  • textLink.foreground#0066AB
  • 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#975ABA
punctuation.definition.string.begin,punctuation.definition.string.end#975ABA
string variable#00538F
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded#141414BD
source.regexp, string.regexp#0066AB
string.regexp constant.character.escape#006E4E
keyword.operator.quantifier.regexp, keyword.operator.negation.regexp, keyword.operator.alternation.regexp, keyword.operator.or.regexp, keyword.control.anchor.regexp#A14700
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#BF5400
constant.other.placeholder, constant.character#A30034
constant, entity.name.constant, variable.other.constant, variable.other.enummember#00538F
constant.numeric#94176C
support.constant#00538F
variable.language#BE1744
support.variable#00538F
variable.other.readwrite#00538F
keyword#A30034
storage, storage.type#A30034
keyword.control.directive#006E4E
entity.name.function#BF5400
meta.require, support.function, variable.function#BF5400
keyword.other.special-method#8840AC
meta.export.default#BF5400
support.class, entity.name.type.class, entity.name.type.namespace, entity.name.type, entity.name.namespace#00538F
entity.name.class#00538F
entity.other.inherited-class, entity.name.scope-resolution#00538F
support.type, variable.other.class#00538F
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#00538F
entity.name.tag, support.class.component#006E4E
entity.name.tag.html#00538F
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#8840AC
entity.other.attribute-name.id#8840AC
entity.other.attribute-name.class.css#00538F
support.type.property-name.css, support.type.property-name, support.type.vendored.property-name, meta.property-name.css#975ABA
meta.property-value.css#004174
meta.selector#3B7E84
keyword.other.unit#B65091
constant.other.color#94176C
punctuation.definition.constant.css#B65091
support.module.node,support.type.object.module#A30034
entity.name.type.module#A30034
support.constant.json#BF5400
support.variable.property.process#BF5400
support.variable.dom,support.variable.property.dom#8840AC
support.type.type.flowtype#8840AC
support.type.primitive#A30034
meta.property.object#8840AC
support.variable.property, variable.other.property, variable.other.property.ts, meta.definition.property.ts#8840AC
keyword.other.template.begin#975ABA
keyword.other.template.end#975ABA
keyword.other.substitution.begin#975ABA
keyword.other.substitution.end#975ABA
meta.function.decorator.python, punctuation.definition.decorator.python, entity.name.function.decorator.python#006E4E
support.type.python#3B7E84
string.quoted.binary.single.python#006E4E
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#94176C
variable.parameter.function.language.python#BF5400
variable.parameter.function.python#BF5400
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#8840AC
constant.character.format.placeholder.other.python#BF5400
keyword.control.import.python,keyword.control.flow.pythonitalic
storage.type.c, storage.type.cpp, support.type.posix-reserved.c, support.type.posix-reserved.cpp#00538F
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#006E4E
meta.preprocessor#006E4E
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#00538F
source.java#141414
storage.type.java#00538F
support.type.property-name.json#006E4E
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#975ABA
markup.heading, markup.heading entity.name#00538F
entity.name.section.markdown, entity.name.section, markup.heading.setext#00538F
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#006E4E
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#00538F
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#A14700
markup.inserted, meta.diff.header.to-file, punctuation.definition.inserted#0066AB
markup.changed, punctuation.definition.changed#907100
markup.ignored, markup.untracked#14141499
meta.diff.range#8840AC
meta.diff.header#00538F
entity.name.tag.template, entity.name.tag.script, entity.name.tag.style#8840AC
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#00538F
token.warn-token#795F00
token.error-token#BE1744
token.debug-token#3B7E84
meta.module-reference#00538F
constant.character.escape#141414BD
punctuation.section.embedded.begin,punctuation.section.embedded.end#3B7E84
meta.separator#00538F
meta.output#00538F
constant.other.reference.link#00538F
control.elements#BF5400
punctuation.definition.constant#BF5400
meta.tag#907100
punctuation.separator.delimiter#141414
support.constant.edge#3B7E84
brackethighlighter.tag, brackethighlighter.curly, brackethighlighter.round, brackethighlighter.square, brackethighlighter.angle, brackethighlighter.quote#141414BD
brackethighlighter.unmatched#A30034