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#000080
  • activityBar.background#B8B8B8
  • activityBar.border#808080
  • activityBar.foreground#000000
  • activityBar.inactiveForeground#505050
  • activityBarBadge.background#000080
  • activityBarBadge.foreground#FFFFFF
  • badge.background#000080
  • badge.foreground#FFFFFF
  • breadcrumb.activeSelectionForeground#FFFFFF
  • breadcrumb.background#101214
  • breadcrumb.focusForeground#FFFFFF
  • breadcrumb.foreground#BFC6CC
  • breadcrumbPicker.background#2A2D30
  • button.background#C0C0C0
  • button.border#404040
  • button.foreground#000000
  • button.hoverBackground#D4D0C8
  • button.secondaryBackground#AFAFAF
  • button.secondaryForeground#000000
  • button.secondaryHoverBackground#CFCFCF
  • chat.avatarBackground#000080
  • chat.avatarForeground#FFFFFF
  • chat.checkpointSeparator#808080
  • chat.editedFileForeground#000080
  • chat.linesAddedForeground#005A00
  • chat.linesRemovedForeground#800000
  • chat.requestBackground#D4D0C8
  • chat.requestBorder#808080
  • chat.requestBubbleBackground#E0E0E0
  • chat.requestBubbleHoverBackground#ECE9E1
  • chat.requestCodeBorder#606060
  • chat.slashCommandBackground#AFAFAF
  • chat.slashCommandForeground#000000
  • chat.thinkingShimmer#4A5878
  • chatManagement.sashBorder#808080
  • checkbox.background#FFFFFF
  • checkbox.border#606060
  • checkbox.foreground#000000
  • commandCenter.activeBackground#627294
  • commandCenter.activeBorder#FFFFFF
  • commandCenter.activeForeground#FFFFFF
  • commandCenter.background#566585
  • commandCenter.border#8994AD
  • commandCenter.foreground#FFFFFF
  • commandCenter.inactiveBorder#7E8AA3
  • commandCenter.inactiveForeground#ECEFF5
  • descriptionForeground#404040
  • diffEditor.diagonalFill#858B9118
  • diffEditor.insertedLineBackground#152019
  • diffEditor.insertedTextBackground#18301F
  • diffEditor.removedLineBackground#27191D
  • diffEditor.removedTextBackground#391C22
  • diffEditor.unchangedCodeBackground#858B910D
  • diffEditorGutter.insertedLineBackground#152019
  • diffEditorGutter.removedLineBackground#27191D
  • diffEditorOverview.insertedForeground#4FA866
  • diffEditorOverview.removedForeground#D15C67
  • dropdown.background#FFFFFF
  • dropdown.border#606060
  • dropdown.foreground#000000
  • dropdown.listBackground#FFFFFF
  • editor.background#101214
  • editor.findMatchBackground#DDBD69
  • editor.findMatchBorder#F0D58B
  • editor.findMatchForeground#1A1B1C
  • editor.findMatchHighlightBackground#6A593B99
  • editor.findRangeHighlightBackground#5268862E
  • editor.foreground#D8D4CC
  • editor.hoverHighlightBackground#52688633
  • editor.inactiveSelectionBackground#29406F66
  • editor.lineHighlightBackground#181B1E
  • editor.placeholder.foreground#AEB4BA
  • editor.rangeHighlightBackground#5268862E
  • editor.selectionBackground#29406F99
  • editor.selectionHighlightBackground#29406F44
  • editor.snippetTabstopHighlightBackground#52688666
  • editor.stackFrameHighlightBackground#315F8C44
  • editor.wordHighlightBackground#43546A55
  • editor.wordHighlightStrongBackground#6A593B66
  • editorBracketHighlight.foreground1#E1BD5C
  • editorBracketHighlight.foreground2#DC6B85
  • editorBracketHighlight.foreground3#6FBBC6
  • editorBracketHighlight.foreground4#E29163
  • editorBracketHighlight.foreground5#91C166
  • editorBracketHighlight.foreground6#9FB2E3
  • editorBracketHighlight.unexpectedBracket.foreground#E36161
  • editorBracketMatch.background#29406F55
  • editorBracketMatch.border#CE7489AA
  • editorCodeLens.foreground#838C95
  • editorCursor.foreground#F4F4F4
  • editorError.foreground#E36161
  • editorGroup.emptyBackground#222426
  • editorGroupHeader.noTabsBackground#222426
  • editorGroupHeader.tabsBackground#AFAFAF
  • editorGroupHeader.tabsBorder#808080
  • editorGutter.addedBackground#4FA866
  • editorGutter.deletedBackground#D15C67
  • editorGutter.modifiedBackground#4F86C8
  • editorHoverWidget.background#2A2D30
  • editorHoverWidget.border#555C62
  • editorHoverWidget.foreground#E4E5E6
  • editorHoverWidget.highlightForeground#DC6B85
  • editorHoverWidget.statusBarBackground#242629
  • editorIndentGuide.activeBackground#62696F
  • editorIndentGuide.activeBackground1#62696F
  • editorIndentGuide.background#393E42
  • editorIndentGuide.background1#393E42
  • editorInlayHint.background#34383C
  • editorInlayHint.foreground#9FB2E3
  • editorLineNumber.activeForeground#D8D4CC
  • editorLineNumber.foreground#747B82
  • editorLink.activeForeground#DC6B85
  • editorOverviewRuler.addedForeground#4FA866
  • editorOverviewRuler.border#393E42
  • editorOverviewRuler.deletedForeground#D15C67
  • editorOverviewRuler.errorForeground#D66A6A
  • editorOverviewRuler.findMatchForeground#DDBD69AA
  • editorOverviewRuler.modifiedForeground#4F86C8
  • editorOverviewRuler.warningForeground#DDBD69
  • editorPane.background#C0C0C0
  • editorRuler.foreground#393E42
  • editorStickyScroll.background#181B1E
  • editorStickyScroll.border#00000000
  • editorStickyScroll.shadow#00000055
  • editorStickyScrollHover.background#202428
  • editorSuggestWidget.background#2A2D30
  • editorSuggestWidget.border#6E7479
  • editorSuggestWidget.focusHighlightForeground#F0D58B
  • editorSuggestWidget.foreground#E0E2E4
  • editorSuggestWidget.highlightForeground#DC6B85
  • editorSuggestWidget.selectedBackground#000080
  • editorSuggestWidget.selectedForeground#FFFFFF
  • editorSuggestWidget.selectedIconForeground#FFFFFF
  • editorSuggestWidgetStatus.foreground#B7BDC3
  • editorWarning.foreground#E1BD5C
  • editorWhitespace.foreground#454A4F
  • editorWidget.background#2A2D30
  • editorWidget.border#6E7479
  • editorWidget.foreground#E0E2E4
  • editorWidget.resizeBorder#000080
  • errorForeground#800000
  • focusBorder#000080
  • foreground#000000
  • gitDecoration.addedResourceForeground#005A00
  • gitDecoration.conflictingResourceForeground#7A3E00
  • gitDecoration.deletedResourceForeground#800000
  • gitDecoration.ignoredResourceForeground#4E4E4E
  • gitDecoration.modifiedResourceForeground#000080
  • gitDecoration.renamedResourceForeground#005656
  • gitDecoration.stageDeletedResourceForeground#800000
  • gitDecoration.stageModifiedResourceForeground#005A00
  • gitDecoration.submoduleResourceForeground#3F4F60
  • gitDecoration.untrackedResourceForeground#005A00
  • inlineChat.background#D4D0C8
  • inlineChat.border#808080
  • inlineChat.foreground#000000
  • inlineChat.shadow#00000055
  • inlineChatDiff.inserted#005A0033
  • inlineChatDiff.removed#80000033
  • inlineChatInput.background#FFFFFF
  • inlineChatInput.border#606060
  • inlineChatInput.focusBorder#000080
  • inlineChatInput.placeholderForeground#606060
  • input.background#FFFFFF
  • input.border#606060
  • input.foreground#000000
  • input.placeholderForeground#808080
  • interactive.activeCodeBorder#000080
  • interactive.inactiveCodeBorder#808080
  • list.activeSelectionBackground#000080
  • list.activeSelectionForeground#FFFFFF
  • list.activeSelectionIconForeground#FFFFFF
  • list.deemphasizedForeground#4E4E4E
  • list.errorForeground#800000
  • list.focusBackground#000080
  • list.focusForeground#FFFFFF
  • list.focusHighlightForeground#FFFF80
  • list.highlightForeground#000080
  • list.hoverBackground#D4D0C8
  • list.hoverForeground#000000
  • list.inactiveSelectionBackground#A8A8A8
  • list.inactiveSelectionForeground#000000
  • list.invalidItemForeground#800000
  • menu.background#C0C0C0
  • menu.foreground#000000
  • menu.selectionBackground#000080
  • menu.selectionForeground#FFFFFF
  • menu.separatorBackground#808080
  • menubar.selectionBackground#5A6888
  • menubar.selectionForeground#FFFFFF
  • minimap.background#101214
  • minimap.errorHighlight#D66A6A
  • minimap.findMatchHighlight#DDBD69AA
  • minimap.selectionHighlight#52688680
  • minimap.warningHighlight#DDBD69
  • minimapGutter.addedBackground#4FA866
  • minimapGutter.deletedBackground#D15C67
  • minimapGutter.modifiedBackground#4F86C8
  • notifications.background#D4D0C8
  • notifications.border#808080
  • notifications.foreground#000000
  • panel.background#C0C0C0
  • panel.border#808080
  • panelTitle.activeBorder#000080
  • panelTitle.activeForeground#000000
  • panelTitle.inactiveForeground#404040
  • peekView.border#4F86C8
  • peekViewEditor.background#101214
  • peekViewEditor.matchHighlightBackground#6A593B99
  • peekViewResult.background#26292C
  • peekViewResult.fileForeground#E0E2E4
  • peekViewResult.lineForeground#AEB4BA
  • peekViewResult.matchHighlightBackground#6A593B99
  • peekViewResult.selectionBackground#000080
  • peekViewResult.selectionForeground#FFFFFF
  • peekViewTitle.background#2E3134
  • peekViewTitleDescription.foreground#AEB4BA
  • peekViewTitleLabel.foreground#E0E2E4
  • progressBar.background#000080
  • quickInput.background#C0C0C0
  • quickInput.foreground#000000
  • quickInputList.focusBackground#000080
  • quickInputList.focusForeground#FFFFFF
  • quickInputList.focusHighlightForeground#FFFF80
  • quickInputList.focusIconForeground#FFFFFF
  • quickInputTitle.background#B0B0B0
  • searchEditor.findMatchBackground#6A593B99
  • selection.background#00008033
  • settings.headerForeground#000000
  • sideBar.background#C0C0C0
  • sideBar.border#808080
  • sideBar.foreground#000000
  • sideBarSectionHeader.background#B0B0B0
  • sideBarSectionHeader.border#808080
  • sideBarSectionHeader.foreground#000000
  • sideBarTitle.foreground#000000
  • statusBar.background#C0C0C0
  • statusBar.border#808080
  • statusBar.foreground#000000
  • symbolIcon.arrayForeground#6FBBC6
  • symbolIcon.booleanForeground#9FB2E3
  • symbolIcon.classForeground#6FBBC6
  • symbolIcon.colorForeground#E29163
  • symbolIcon.constantForeground#9FB2E3
  • symbolIcon.constructorForeground#E1BD5C
  • symbolIcon.enumeratorForeground#6FBBC6
  • symbolIcon.enumeratorMemberForeground#9FB2E3
  • symbolIcon.eventForeground#E29163
  • symbolIcon.fieldForeground#C7C3B3
  • symbolIcon.fileForeground#C7C3B3
  • symbolIcon.folderForeground#E1BD5C
  • symbolIcon.functionForeground#E1BD5C
  • symbolIcon.interfaceForeground#6FBBC6
  • symbolIcon.keyForeground#C7C3B3
  • symbolIcon.keywordForeground#DC6B85
  • symbolIcon.methodForeground#E1BD5C
  • symbolIcon.moduleForeground#6FBBC6
  • symbolIcon.namespaceForeground#6FBBC6
  • symbolIcon.nullForeground#9FB2E3
  • symbolIcon.numberForeground#9FB2E3
  • symbolIcon.objectForeground#C7C3B3
  • symbolIcon.operatorForeground#DC6B85
  • symbolIcon.packageForeground#6FBBC6
  • symbolIcon.propertyForeground#C7C3B3
  • symbolIcon.referenceForeground#9FB2E3
  • symbolIcon.snippetForeground#91C166
  • symbolIcon.stringForeground#91C166
  • symbolIcon.structForeground#6FBBC6
  • symbolIcon.textForeground#C7C3B3
  • symbolIcon.typeParameterForeground#76BEC8
  • symbolIcon.unitForeground#E29163
  • symbolIcon.variableForeground#C7C3B3
  • tab.activeBackground#E0E0E0
  • tab.activeBorderTop#000080
  • tab.activeForeground#000000
  • tab.border#808080
  • tab.hoverBackground#D4D0C8
  • tab.inactiveBackground#B8B8B8
  • tab.inactiveForeground#303030
  • terminal.ansiBlack#0C0C0C
  • terminal.ansiBlue#0037DA
  • terminal.ansiBrightBlack#767676
  • terminal.ansiBrightBlue#3B78FF
  • terminal.ansiBrightCyan#61D6D6
  • terminal.ansiBrightGreen#16C60C
  • terminal.ansiBrightMagenta#B4009E
  • terminal.ansiBrightRed#E74856
  • terminal.ansiBrightWhite#F2F2F2
  • terminal.ansiBrightYellow#F9F1A5
  • terminal.ansiCyan#3A96DD
  • terminal.ansiGreen#13A10E
  • terminal.ansiMagenta#881798
  • terminal.ansiRed#C50F1F
  • terminal.ansiWhite#CCCCCC
  • terminal.ansiYellow#C19C00
  • terminal.background#000000
  • terminal.foreground#CCCCCC
  • terminal.initialHintForeground#969696
  • terminal.selectionBackground#FFFFFF38
  • terminalCursor.foreground#FFFFFF
  • terminalStickyScroll.background#000000
  • terminalStickyScroll.border#343434
  • textLink.activeForeground#7186B8
  • textLink.foreground#637DB7
  • titleBar.activeBackground#4A5878
  • titleBar.activeForeground#FFFFFF
  • titleBar.border#27334F
  • titleBar.inactiveBackground#626A7C
  • titleBar.inactiveForeground#ECEEF2
  • toolbar.activeBackground#A0A0A0
  • toolbar.hoverBackground#D4D0C8
  • walkThrough.embeddedEditorBackground#101214
  • welcomePage.background#C0C0C0
  • welcomePage.tileBackground#D4D0C8
  • welcomePage.tileBorder#808080
  • welcomePage.tileHoverBackground#E0E0E0
  • widget.border#808080
  • window.activeBorder#344364
  • window.inactiveBorder#A0A0A0

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasisitalic
strongbold
header#9FB2E3
source#D8D4CC
meta.diff, meta.diff.header#7889AE
markup.inserted#E1BD5C
markup.deleted#E36161
markup.changed#E29163
invalid#E36161underline
invalid.deprecated#D8D4CCunderline
entity.name.filename#91C166
markup.error#E36161
markup.underlineunderline
markup.bold#E29163bold
markup.heading#9FB2E3bold
markup.italic#91C166italic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#6FBBC6
markup.inline.raw, markup.raw.restructuredtext#E1BD5C
markup.underline.link, markup.underline.link.image#6FBBC6
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#DC6B85
entity.name.directive.restructuredtext, markup.quote#91C166italic
meta.separator.markdown#7889AE
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#E1BD5C
punctuation.definition.constant.restructuredtext#9FB2E3
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#9FB2E3
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end#D8D4CC
markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end#91C166
entity.name.type.class, entity.name.class#6FBBC6
keyword.expressions-and-types.swift, keyword.other.this, variable.language, variable.language punctuation.definition.variable.php, variable.other.readwrite.instance.ruby, variable.parameter.function.language.special#9FB2E3
entity.other.inherited-class#6FBBC6
comment, punctuation.definition.comment, unused.comment, wildcard.comment#7889AE
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#DC6B85
comment.block.documentation entity.name.type#6FBBC6italic
comment.block.documentation entity.name.type punctuation.definition.bracket#6FBBC6
comment.block.documentation variable#E29163italic
constant, variable.other.constant#9FB2E3
constant.character.escape, constant.character.string.escape, constant.regexp#DC6B85
entity.name.tag#DC6B85
entity.other.attribute-name.parent-selector#DC6B85
entity.other.attribute-name#E1BD5C
entity.name.function, meta.function-call.generic, meta.function-call.object, meta.function-call.php, meta.function-call.static, meta.method-call.java meta.method, meta.method.groovy, support.function.any-method.lua, keyword.operator.function.infix#E1BD5C
entity.name.variable.parameter, meta.at-rule.function variable, meta.at-rule.mixin variable, meta.function.arguments variable.other.php, meta.selectionset.graphql meta.arguments.graphql variable.arguments.graphql, variable.parameter#E29163italic
meta.decorator variable.other.readwrite, meta.decorator variable.other.property#E1BD5Citalic
meta.decorator variable.other.object#E1BD5C
keyword, punctuation.definition.keyword#DC6B85
keyword.control.new, keyword.operator.new
meta.selector#DC6B85
support#6FBBC6
support.function.magic, support.variable, variable.other.predefined#9FB2E3
support.function, support.type.property-name
constant.other.symbol.hashkey punctuation.definition.constant.ruby, entity.other.attribute-name.placeholder punctuation, entity.other.attribute-name.pseudo-class punctuation, entity.other.attribute-name.pseudo-element punctuation, meta.group.double.toml, meta.group.toml, meta.object-binding-pattern-variable punctuation.destructuring, punctuation.colon.graphql, punctuation.definition.block.scalar.folded.yaml, punctuation.definition.block.scalar.literal.yaml, punctuation.definition.block.sequence.item.yaml, punctuation.definition.entity.other.inherited-class, punctuation.function.swift, punctuation.separator.dictionary.key-value, punctuation.separator.hash, punctuation.separator.inheritance, punctuation.separator.key-value, punctuation.separator.key-value.mapping.yaml, punctuation.separator.namespace, punctuation.separator.pointer-access, punctuation.separator.slice, string.unquoted.heredoc punctuation.definition.string, support.other.chomping-indicator.yaml, punctuation.separator.annotation#DC6B85
keyword.operator.other.powershell, keyword.other.statement-separator.powershell, meta.brace.round, meta.function-call punctuation, punctuation.definition.arguments.begin, punctuation.definition.arguments.end, punctuation.definition.entity.begin, punctuation.definition.entity.end, punctuation.definition.tag.cs, punctuation.definition.type.begin, punctuation.definition.type.end, punctuation.section.scope.begin, punctuation.section.scope.end, storage.type.generic.java, string.template meta.brace, string.template punctuation.accessor#D8D4CC
meta.string-contents.quoted.double punctuation.definition.variable, punctuation.definition.interpolation.begin, punctuation.definition.interpolation.end, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded.begin, punctuation.section.embedded.coffee, punctuation.section.embedded.end, punctuation.section.embedded.end source.php, punctuation.section.embedded.end source.ruby, punctuation.definition.variable.makefile#DC6B85
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#6FBBC6
constant.other.date, constant.other.timestamp#E29163
variable.other.alias.yaml#E1BD5Cunderline
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def#DC6B85
entity.name.type, keyword.primitive-datatypes.swift, keyword.type.cs, meta.protocol-list.objc, meta.return-type.objc, source.go storage.type, source.groovy storage.type, source.java storage.type, source.powershell entity.other.attribute-name, storage.class.std.rust, storage.type.attribute.swift, storage.type.c, storage.type.core.rust, storage.type.cs, storage.type.groovy, storage.type.objc, storage.type.php, storage.type.haskell, storage.type.ocaml#6FBBC6
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#E29163
storage.modifier#DC6B85
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#91C166
punctuation.definition.group.capture.regexp#DC6B85
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#E36161
punctuation.definition.character-class.regexp#6FBBC6
punctuation.definition.group.regexp#E29163
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#E36161
meta.assertion.look-ahead.regexp#E1BD5C
string#91C166
punctuation.definition.string.begin, punctuation.definition.string.end#91C166
punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#6FBBC6
string.quoted.docstring.multi, string.quoted.docstring.multi.python punctuation.definition.string.begin, string.quoted.docstring.multi.python punctuation.definition.string.end, string.quoted.docstring.multi.python constant.character.escape#7889AE
variable, constant.other.key.perl, support.variable.property, variable.other.constant.js, variable.other.constant.ts, variable.other.constant.tsx#C7C3B3
meta.import variable.other.readwrite, meta.object-binding-pattern-variable variable.object.property, meta.variable.assignment.destructured.object.coffee variable#E29163
meta.import variable.other.readwrite.alias, meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable#D8D4CC
meta.selectionset.graphql variable#91C166
meta.selectionset.graphql meta.arguments variable#C7C3B3
entity.name.fragment.graphql, variable.fragment.graphql#6FBBC6
constant.other.symbol.hashkey.ruby, keyword.operator.dereference.java, keyword.operator.navigation.groovy, meta.scope.for-loop.shell punctuation.definition.string.begin, meta.scope.for-loop.shell punctuation.definition.string.end, meta.scope.for-loop.shell string, storage.modifier.import, punctuation.section.embedded.begin.tsx, punctuation.section.embedded.end.tsx, punctuation.section.embedded.begin.jsx, punctuation.section.embedded.end.jsx, punctuation.separator.list.comma.css, constant.language.empty-list.haskell#D8D4CC
source.shell variable.other#9FB2E3
support.constant#9FB2E3
meta.scope.prerequisites.makefile#91C166
meta.attribute-selector.scss#91C166
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss#D8D4CC
meta.preprocessor.haskell#7889AE
variable.other.property, support.variable.property, meta.object-literal.key, meta.property-name, support.type.property-name#C7C3B3
keyword.operator, keyword.operator.word#DC6B85italic
constant, variable.other.constant, variable.other.constant.js, variable.other.constant.ts, variable.other.constant.tsx, support.constant, entity.name.constant#9FB2E3
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.typeitalic
comment.block.documentation, string.quoted.docstring.multiitalic