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.activeBackground#24283e
  • activityBar.activeBorder#ffbc58
  • activityBar.background#10111b
  • activityBar.border#24283e
  • activityBar.foreground#eff0eb
  • activityBar.inactiveForeground#576094
  • activityBarBadge.background#ffbc58
  • activityBarBadge.foreground#141622
  • badge.background#353b5b
  • badge.foreground#eff0eb
  • breadcrumb.activeSelectionForeground#eff0eb
  • breadcrumb.background#141622
  • breadcrumb.focusForeground#eff0eb
  • breadcrumb.foreground#6f77aa
  • breadcrumbPicker.background#10111b
  • button.background#ffbc58
  • button.foreground#141622
  • button.hoverBackground#ffc671
  • button.secondaryBackground#353b5b
  • button.secondaryForeground#eff0eb
  • button.secondaryHoverBackground#464d78
  • checkbox.background#ffbc58
  • checkbox.foreground#141622
  • debugConsole.errorForeground#ff5c57
  • debugConsole.infoForeground#eff0eb
  • debugConsole.sourceForeground#ff6ac1
  • debugConsole.warningForeground#ffbc58
  • debugConsoleInputIcon.foreground#ff6ac1
  • debugIcon.breakpointCurrentStackframeForeground#ffbc58
  • debugIcon.breakpointDisabledForeground#6f77aa
  • debugIcon.breakpointForeground#ff5c57
  • debugIcon.breakpointStackframeForeground#ffbc58
  • debugIcon.breakpointUnverifiedForeground#ffbc58
  • debugIcon.continueForeground#5af78e
  • debugIcon.disconnectForeground#ff5c57
  • debugIcon.pauseForeground#57c7ff
  • debugIcon.restartForeground#5af78e
  • debugIcon.startForeground#5af78e
  • debugIcon.stepBackForeground#ffbc58
  • debugIcon.stepIntoForeground#57c7ff
  • debugIcon.stepOutForeground#ffbc58
  • debugIcon.stepOverForeground#9aedfe
  • debugIcon.stopForeground#ff5c57
  • debugTokenExpression.boolean#b76aff
  • debugTokenExpression.error#ff5c57
  • debugTokenExpression.name#ffbc58
  • debugTokenExpression.number#ffbc58
  • debugTokenExpression.string#5af78e
  • debugTokenExpression.value#eff0eb
  • debugToolBar.background#10111b
  • debugView.exceptionLabelBackground#ff5c57
  • debugView.exceptionLabelForeground#eff0eb
  • debugView.stateLabelBackground#ffbc58
  • debugView.stateLabelForeground#141622
  • debugView.valueChangedHighlight#9aedfe
  • diffEditor.insertedTextBackground#5af78e20
  • diffEditor.removedTextBackground#ff5c5750
  • dropdown.background#10111b
  • dropdown.border#10111b
  • dropdown.foreground#eff0eb
  • dropdown.listBackground#10111b
  • editor.background#141622
  • editor.findMatchBackground#ffbc5880
  • editor.findMatchHighlightBackground#6f77aa80
  • editor.findRangeHighlightBackground#24283e
  • editor.focusedStackFrameHighlightBackground#ffbc5825
  • editor.foldBackground#141622
  • editor.foreground#eff0eb
  • editor.hoverHighlightBackground#353b5b90
  • editor.inlineValuesForeground#ff6ac1
  • editor.lineHighlightBackground#24283e80
  • editor.rangeHighlightBackground#353b5b40
  • editor.selectionBackground#353b5b
  • editor.selectionHighlightBackground#353b5b
  • editor.snippetFinalTabstopHighlightBackground#141622
  • editor.snippetFinalTabstopHighlightBorder#5af78e
  • editor.snippetTabstopHighlightBackground#141622
  • editor.snippetTabstopHighlightBorder#6f77aa
  • editor.stackFrameHighlightBackground#ffbc5840
  • editor.wordHighlightBackground#353b5b
  • editor.wordHighlightStrongBackground#464d78
  • editorBracketHighlight.foreground1#ffbc58
  • editorBracketHighlight.foreground2#b76aff
  • editorBracketHighlight.foreground3#57c7ff
  • editorBracketHighlight.unexpectedBracket.foreground#ff5c57
  • editorCodeLens.foreground#6f77aa
  • editorError.foreground#ff5c57
  • editorGroup.border#24283e
  • editorGroup.dropBackground#14162270
  • editorGroupHeader.tabsBackground#10111b
  • editorGutter.addedBackground#5af78e
  • editorGutter.deletedBackground#ff5c57
  • editorGutter.foldingControlForeground#6f77aa
  • editorGutter.modifiedBackground#9aedfe
  • editorHoverWidget.background#10111b
  • editorHoverWidget.border#10111b
  • editorIndentGuide.activeBackground#eff0eb45
  • editorIndentGuide.background#353b5b
  • editorLineNumber.activeForeground#ffbc58
  • editorLineNumber.foreground#6f77aa
  • editorLink.activeForeground#ffbc58
  • editorMarkerNavigation.background#24283e
  • editorOverviewRuler.addedForeground#5af78e80
  • editorOverviewRuler.border#24283e
  • editorOverviewRuler.currentContentForeground#5af78e
  • editorOverviewRuler.deletedForeground#ff5c5780
  • editorOverviewRuler.errorForeground#ff5c5780
  • editorOverviewRuler.incomingContentForeground#ff6ac1
  • editorOverviewRuler.infoForeground#9aedfe80
  • editorOverviewRuler.modifiedForeground#9aedfe80
  • editorOverviewRuler.selectionHighlightForeground#FF8958
  • editorOverviewRuler.warningForeground#FF895880
  • editorOverviewRuler.wordHighlightForeground#9aedfe
  • editorOverviewRuler.wordHighlightStrongForeground#5af78e
  • editorRuler.foreground#24283e
  • editorSuggestWidget.background#10111b
  • editorSuggestWidget.border#10111b
  • editorSuggestWidget.foreground#eff0eb
  • editorSuggestWidget.highlightForeground#ffbc58
  • editorSuggestWidget.selectedBackground#24283e
  • editorWarning.foreground#9aedfe
  • editorWhitespace.foreground#353b5b
  • editorWidget.background#141622
  • errorForeground#ff5c57
  • extensionBadge.remoteBackground#ffbc58
  • extensionBadge.remoteForeground#141622
  • extensionButton.prominentBackground#5af78e90
  • extensionButton.prominentForeground#eff0eb
  • extensionButton.prominentHoverBackground#5af78e60
  • extensionIcon.starForeground#ffbc58
  • focusBorder#353b5b
  • foreground#eff0eb
  • gitDecoration.conflictingResourceForeground#FF8958
  • gitDecoration.deletedResourceForeground#ff5c57
  • gitDecoration.ignoredResourceForeground#6f77aa
  • gitDecoration.modifiedResourceForeground#9aedfe
  • gitDecoration.untrackedResourceForeground#5af78e
  • gitlens.trailingLineForegroundColor#464d78
  • icon.foreground#6f77aa
  • input.background#141622
  • input.border#24283e
  • input.foreground#eff0eb
  • input.placeholderForeground#6f77aa
  • inputOption.activeBorder#353b5b
  • inputValidation.errorBorder#ff5c57
  • inputValidation.infoBorder#ff6ac1
  • inputValidation.warningBorder#FF8958
  • keybindingLabel.background#141622
  • keybindingLabel.border#353b5b
  • keybindingLabel.bottomBorder#24283e
  • keybindingLabel.foreground#eff0eb
  • list.activeSelectionBackground#353b5b
  • list.activeSelectionForeground#eff0eb
  • list.dropBackground#353b5b
  • list.errorForeground#ff5c57
  • list.focusBackground#24283e
  • list.focusOutline#353b5b
  • list.highlightForeground#9aedfe
  • list.hoverBackground#24283e
  • list.inactiveSelectionBackground#24283e
  • list.warningForeground#ffbc58
  • listFilterWidget.background#353b5b
  • listFilterWidget.noMatchesOutline#ff5c57
  • listFilterWidget.outline#464d78
  • menu.background#10111b
  • menu.foreground#eff0eb
  • menu.selectionBackground#24283e
  • menu.separatorBackground#24283e
  • merge.currentHeaderBackground#5af78e90
  • merge.incomingHeaderBackground#ff6ac190
  • minimap.errorHighlight#ff5c57
  • minimap.findMatchHighlight#ffbc58
  • minimap.selectionHighlight#6f77aa
  • minimap.warningHighlight#FF8958
  • minimapSlider.hoverBackground#353b5b70
  • notification.buttonBackground#353b5b
  • notification.buttonForeground#eff0eb
  • notification.buttonHoverBackground#24283e
  • notification.errorBackground#ff5c57
  • notification.errorForeground#eff0eb
  • notification.infoBackground#9aedfe
  • notification.infoForeground#141622
  • notification.warningBackground#FF8958
  • notification.warningForeground#10111b
  • notificationCenterHeader.background#10111b
  • notificationCenterHeader.foreground#eff0eb
  • notificationLink.foreground#ffbc58
  • notifications.background#10111b
  • notifications.border#24283e
  • notifications.foreground#eff0eb
  • notificationsErrorIcon.foreground#ff5c57
  • notificationsInfoIcon.foreground#9aedfe
  • notificationsWarningIcon.foreground#ffbc58
  • notificationToast.border#141622
  • panel.background#141622
  • panel.border#24283e
  • panelTitle.activeBorder#ffbc58
  • panelTitle.activeForeground#eff0eb
  • panelTitle.inactiveForeground#6f77aa
  • peekView.border#353b5b
  • peekViewEditor.background#141622
  • peekViewEditor.matchHighlightBackground#ffbc5880
  • peekViewResult.background#10111b
  • peekViewResult.fileForeground#eff0eb
  • peekViewResult.lineForeground#eff0eb
  • peekViewResult.matchHighlightBackground#ffbc5880
  • peekViewResult.selectionBackground#353b5b
  • peekViewResult.selectionForeground#eff0eb
  • peekViewTitle.background#10111b
  • peekViewTitleDescription.foreground#6f77aa
  • peekViewTitleLabel.foreground#eff0eb
  • pickerGroup.border#ffbc58
  • pickerGroup.foreground#ffbc58
  • progressBar.background#ffbc58
  • quickInput.background#10111b
  • quickInputList.focusBackground#353b5b
  • quickInputTitle.background#10111b
  • scrollbar.shadow#10111b
  • scrollbarSlider.activeBackground#6f77aa90
  • scrollbarSlider.background#353b5b60
  • scrollbarSlider.hoverBackground#6f77aa60
  • selection.background#353b5b
  • settings.checkboxBackground#24283e
  • settings.checkboxBorder#10111b
  • settings.checkboxForeground#eff0eb
  • settings.dropdownBackground#24283e
  • settings.dropdownBorder#10111b
  • settings.dropdownForeground#eff0eb
  • settings.headerForeground#eff0eb
  • settings.modifiedItemForeground#ffbc58
  • settings.modifiedItemIndicator#ffbc58
  • settings.numberInputBackground#24283e
  • settings.numberInputBorder#10111b
  • settings.numberInputForeground#eff0eb
  • settings.textInputBackground#24283e
  • settings.textInputBorder#10111b
  • settings.textInputForeground#eff0eb
  • sideBar.background#10111b
  • sideBar.border#24283e
  • sideBarSectionHeader.background#141622
  • sideBarSectionHeader.border#24283e
  • sideBarSectionHeader.foreground#eff0eb
  • sideBarTitle.foreground#6f77aa
  • statusBar.background#10111b
  • statusBar.debuggingBackground#ff5c57
  • statusBar.debuggingForeground#eff0eb
  • statusBar.foreground#6f77aa
  • statusBar.noFolderBackground#10111b
  • statusBar.noFolderForeground#6f77aa
  • statusBarItem.activeBackground#24283e
  • statusBarItem.hoverBackground#353b5b
  • statusBarItem.prominentBackground#ff5c57
  • statusBarItem.prominentHoverBackground#FF8958
  • statusBarItem.remoteBackground#ffbc58
  • statusBarItem.remoteForeground#141622
  • symbolIcon.arrayForeground#ffbc58
  • symbolIcon.booleanForeground#b76aff
  • symbolIcon.classForeground#9aedfe
  • symbolIcon.constantForeground#b76aff
  • symbolIcon.constructorForeground#ffbc58
  • symbolIcon.fieldForeground#ff6ac1
  • symbolIcon.functionForeground#57c7ff
  • symbolIcon.interfaceForeground#9aedfe
  • symbolIcon.methodForeground#57c7ff
  • symbolIcon.namespaceForeground#ffbc58
  • symbolIcon.nullForeground#ff5c57
  • symbolIcon.numberForeground#ffbc58
  • symbolIcon.objectForeground#ffbc58
  • symbolIcon.propertyForeground#6f77aa
  • symbolIcon.stringForeground#5af78e
  • symbolIcon.variableForeground#ffbc58
  • tab.activeBackground#141622
  • tab.activeBorderBottom#ff6ac1
  • tab.activeBorderTop#ffbc58
  • tab.activeForeground#eff0eb
  • tab.border#24283e
  • tab.inactiveBackground#10111b
  • tab.inactiveForeground#6f77aa
  • terminal.ansiBlack#141622
  • terminal.ansiBlue#57c7ff
  • terminal.ansiBrightBlack#6f77aa
  • terminal.ansiBrightBlue#70cfff
  • terminal.ansiBrightCyan#a9effe
  • terminal.ansiBrightGreen#72f89e
  • terminal.ansiBrightMagenta#ff80ca
  • terminal.ansiBrightRed#ff7470
  • terminal.ansiBrightWhite#f1f2ee
  • terminal.ansiBrightYellow#ffc671
  • terminal.ansiCyan#9aedfe
  • terminal.ansiGreen#5af78e
  • terminal.ansiMagenta#ff6ac1
  • terminal.ansiRed#ff5c57
  • terminal.ansiWhite#eff0eb
  • terminal.ansiYellow#ffbc58
  • terminal.background#141622
  • terminal.foreground#eff0eb
  • titleBar.activeBackground#10111b
  • titleBar.activeForeground#eff0eb
  • titleBar.inactiveBackground#10111b
  • titleBar.inactiveForeground#6f77aa
  • tree.indentGuidesStroke#353b5b
  • walkThrough.embeddedEditorBackground#10111b
  • widget.shadow#10111b

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasisitalic
strongbold
header#ffbc58
meta.diff, meta.diff.header#6f77aa
markup.inserted#5af78e
markup.deleted#ff5c57
markup.changed#FF8958
invalid#ff5c57underline italic
invalid.deprecated#eff0ebunderline italic
entity.name.filename#ffbc58
markup.error#ff5c57
markup.underlineunderline
markup.bold#FF8958bold
markup.heading#ffbc58bold
markup.italic#ffbc58italic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#9aedfe
markup.inline.raw, markup.raw.restructuredtext#5af78e
markup.underline.link, markup.underline.link.image#9aedfe
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#ff6ac1
entity.name.directive.restructuredtext, markup.quote#ffbc58italic
meta.separator.markdown#6f77aa
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#5af78e
punctuation.definition.constant.restructuredtext#b76aff
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#b76aff
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end#eff0eb
markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end#ffbc58
entity.name.type.class, entity.name.class#9aedfenormal
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#ff6ac1italic
variable.language.super#ff5c57italic
entity.other.inherited-class#9aedfeitalic
comment, punctuation.definition.comment, unused.comment, wildcard.comment#6f77aa
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#ff6ac1
comment.block.documentation entity.name.type#9aedfeitalic
comment.block.documentation entity.name.type punctuation.definition.bracket#9aedfe
comment.block.documentation variable#ffbc58
constant, variable.other.constant#b76aff
constant.character.escape, constant.character.string.escape, constant.regexp#ff6ac1
constant.numeric#ffbc58
constant.language.null#ff5c57
constant.language.undefined#ff6ac1
entity.name.tag#ff5c57
entity.other.attribute-name.parent-selector#ff6ac1
entity.other.attribute-name, meta.at-rule.keyframes#ffbc58
entity.other.attribute-name.class.css#9aedfe
support.type.property-name.css#ff6ac1
support.constant.property-value.css#eff0eb
keyword.other.unit#9aedfe
constant.numeric.css#ffbc58
punctuation.separator.key-value.scss, punctuation.separator.key-value.css#ff6ac1
variable.scss#b76aff
entity.name.function, meta.function-call.object, meta.function-call.php, meta.function-call.static, meta.function-call.python, meta.method-call.java meta.method, meta.method.groovy, support.function.any-method.lua, keyword.operator.function.infix#57c7ff
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#eff0ebregular
meta.decorator variable.other.readwrite, meta.decorator variable.other.property#ff6ac1italic
meta.decorator variable.other.object#ff6ac1
keyword, punctuation.definition.keyword#ff6ac1
keyword.control.new, keyword.operator.newbold
meta.selector#ff6ac1
support.function.magic, support.variable, variable.other.predefined#b76affregular
support.function, support.type.property-nameregular
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#ff6ac1
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#eff0eb
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#ff6ac1
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag., support.type.property-name.json, variable.other.key.toml#ff5c57
constant.other.date, constant.other.timestamp#FF8958
variable.other.alias.yaml#ffbc58
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def#ffbc58regular
entity.name.type, entity.name.type.tsx, support.class, 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, support.type.primitve, meta.type.annotation, meta.type.parameters#9aedfeitalic
support.class.componentregular
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#FF8958
storage.modifier#ffbc58
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#ffbc58
punctuation.definition.group.capture.regexp#ff6ac1
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#ff5c57
punctuation.definition.character-class.regexp#9aedfe
punctuation.definition.group.regexp#FF8958
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#ff5c57
meta.assertion.look-ahead.regexp#5af78e
string, string.quoted.double, string.quoted.single#5af78e
punctuation.definition.string.begin, punctuation.definition.string.end#5af78e
punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#ff6ac1
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#6f77aa
punctuation.definition.tag, variable.other.object, variable.other.constant.object.jsx, variable.other.constant.object.js, variable.other.constant.object.ts, variable.other.constant.object.tsx, meta.jsx.children#eff0eb
meta.embedded.expression, meta.embedded.line#9aedfe
meta.object-literal.key, meta.object-literal.key string, support.type.property-name.json#ff6ac1
meta.object-binding-pattern-variable variable.object.property, meta.variable.assignment.destructured.object.coffee variable#ff6ac1italic
meta.import variable.other.readwrite#ff6ac1italic
meta.import variable.other.readwrite.alias, meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable#eff0ebnormal
meta.selectionset.graphql variable#ffbc58
meta.selectionset.graphql meta.arguments variable#eff0eb
entity.name.fragment.graphql, variable.fragment.graphql#9aedfe
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#eff0eb
source.shell variable.other#b76aff
support.constant#b76affnormal
meta.scope.prerequisites.makefile#ffbc58
meta.attribute-selector.scss#ffbc58
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss#eff0eb
meta.preprocessor.haskell#6f77aa