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#399ee610
  • activityBar.activeBorder#a37acc80
  • activityBar.background#f8f9fa
  • activityBar.foreground#5c6166
  • activityBar.inactiveForeground#a0a6ac
  • activityBarBadge.background#a37acc
  • activityBarBadge.foreground#f8f9fa
  • badge.background#edeff1
  • badge.foreground#5c6166
  • breadcrumb.activeSelectionForeground#5c6166
  • breadcrumb.background#f8f9fa
  • breadcrumb.focusForeground#5c6166
  • breadcrumb.foreground#a0a6ac
  • breadcrumbPicker.background#ffffff
  • button.background#f9f9f9
  • button.foreground#5c6166
  • checkbox.background#f9f9f9
  • checkbox.border#ffffff
  • checkbox.foreground#5c6166
  • contrastBorder#ffffff
  • debugToolBar.background#f9f9f9
  • diffEditor.insertedTextBackground#6cbf4920
  • diffEditor.removedTextBackground#f0717150
  • dropdown.background#f8f9fa
  • dropdown.border#ffffff
  • dropdown.foreground#5c6166
  • editor.background#f8f9fa
  • editor.findMatchBackground#fa8d3e80
  • editor.findMatchHighlightBackground#40444740
  • editor.findRangeHighlightBackground#d2d4d875
  • editor.foldBackground#f9f9f9
  • editor.foreground#5c6166
  • editor.hoverHighlightBackground#ffffff
  • editor.lineHighlightBorder#edeff1
  • editor.rangeHighlightBackground#399ee615
  • editor.selectionBackground#edeff1
  • editor.selectionHighlightBackground#edeff1
  • editor.snippetFinalTabstopHighlightBackground#f8f9fa
  • editor.snippetFinalTabstopHighlightBorder#6cbf49
  • editor.snippetTabstopHighlightBackground#f8f9fa
  • editor.snippetTabstopHighlightBorder#a0a6ac
  • editor.wordHighlightBackground#4cbf9950
  • editor.wordHighlightStrongBackground#6cbf4950
  • editorCodeLens.foreground#a0a6ac
  • editorError.foreground#f07171
  • editorGroup.border#399ee6
  • editorGroup.dropBackground#d2d4d870
  • editorGroupHeader.tabsBackground#ffffff
  • editorGutter.addedBackground#6cbf4980
  • editorGutter.deletedBackground#f0717180
  • editorGutter.modifiedBackground#4cbf9980
  • editorHoverWidget.background#f8f9fa
  • editorHoverWidget.border#a0a6ac
  • editorIndentGuide.activeBackground#40444745
  • editorIndentGuide.background#4044471A
  • editorLineNumber.foreground#a0a6ac
  • editorLink.activeForeground#4cbf99
  • editorMarkerNavigation.background#f9f9f9
  • editorOverviewRuler.addedForeground#6cbf4980
  • editorOverviewRuler.border#ffffff
  • editorOverviewRuler.currentContentForeground#6cbf49
  • editorOverviewRuler.deletedForeground#f0717180
  • editorOverviewRuler.errorForeground#f0717180
  • editorOverviewRuler.incomingContentForeground#399ee6
  • editorOverviewRuler.infoForeground#4cbf9980
  • editorOverviewRuler.modifiedForeground#4cbf9980
  • editorOverviewRuler.selectionHighlightForeground#fa8d3e
  • editorOverviewRuler.warningForeground#fa8d3e80
  • editorOverviewRuler.wordHighlightForeground#4cbf99
  • editorOverviewRuler.wordHighlightStrongForeground#6cbf49
  • editorRuler.foreground#4044471A
  • editorSuggestWidget.background#f9f9f9
  • editorSuggestWidget.foreground#5c6166
  • editorSuggestWidget.selectedBackground#edeff1
  • editorWarning.foreground#fa8d3e
  • editorWhitespace.foreground#4044471A
  • editorWidget.background#f9f9f9
  • errorForeground#f07171
  • extensionButton.prominentBackground#6cbf4990
  • extensionButton.prominentForeground#5c6166
  • extensionButton.prominentHoverBackground#6cbf4960
  • focusBorder#a0a6ac
  • foreground#5c6166
  • gitDecoration.conflictingResourceForeground#fa8d3e
  • gitDecoration.deletedResourceForeground#f07171
  • gitDecoration.ignoredResourceForeground#a0a6ac
  • gitDecoration.modifiedResourceForeground#4cbf99
  • gitDecoration.untrackedResourceForeground#6cbf49
  • input.background#f8f9fa
  • input.border#ffffff
  • input.foreground#5c6166
  • input.placeholderForeground#a0a6ac
  • inputOption.activeBorder#399ee6
  • inputValidation.errorBackground#f8f9fa
  • inputValidation.errorBorder#f07171
  • inputValidation.errorForeground#f07171
  • inputValidation.infoBackground#f8f9fa
  • inputValidation.infoBorder#399ee6
  • inputValidation.infoForeground#399ee6
  • inputValidation.warningBackground#f8f9fa
  • inputValidation.warningBorder#fa8d3e
  • inputValidation.warningForeground#fa8d3e
  • list.activeSelectionBackground#edeff1
  • list.activeSelectionForeground#5c6166
  • list.dropBackground#edeff1
  • list.errorForeground#f07171
  • list.focusBackground#d2d4d875
  • list.highlightForeground#4cbf99
  • list.hoverBackground#d2d4d875
  • list.inactiveSelectionBackground#d2d4d875
  • list.warningForeground#fa8d3e
  • listFilterWidget.background#f8f9fa
  • listFilterWidget.noMatchesOutline#f07171
  • listFilterWidget.outline#edeff1
  • merge.currentHeaderBackground#6cbf4990
  • merge.incomingHeaderBackground#399ee690
  • notification.background#f8f9fa
  • notification.buttonBackground#edeff1
  • notification.buttonForeground#5c6166
  • notification.buttonHoverBackground#d2d4d875
  • notification.errorBackground#f07171
  • notification.errorForeground#f8f9fa
  • notification.foreground#5c6166
  • notification.infoBackground#399ee6
  • notification.infoForeground#f8f9fa
  • notification.warningBackground#fa8d3e
  • notification.warningForeground#f8f9fa
  • notificationCenter.border#f9f9f9
  • notificationCenterHeader.background#f8f9fa
  • notificationCenterHeader.foreground#5c6166
  • notificationLink.foreground#4cbf99
  • notifications.background#f8f9fa
  • notifications.border#f9f9f9
  • notifications.foreground#5c6166
  • notificationsErrorIcon.foreground#f07171
  • notificationsInfoIcon.foreground#399ee6
  • notificationsWarningIcon.foreground#fa8d3e
  • notificationToast.border#f9f9f9
  • panel.background#f8f9fa
  • panel.border#399ee6
  • panelInput.border#5c6166
  • panelTitle.activeBorder#a37acc
  • panelTitle.activeForeground#5c6166
  • panelTitle.inactiveForeground#a0a6ac
  • peekView.border#edeff1
  • peekViewEditor.background#f8f9fa
  • peekViewEditor.matchHighlightBackground#ffaa3380
  • peekViewResult.background#f9f9f9
  • peekViewResult.fileForeground#5c6166
  • peekViewResult.lineForeground#5c6166
  • peekViewResult.matchHighlightBackground#ffaa3380
  • peekViewResult.selectionBackground#edeff1
  • peekViewResult.selectionForeground#5c6166
  • peekViewTitle.background#ffffff
  • peekViewTitleDescription.foreground#a0a6ac
  • peekViewTitleLabel.foreground#5c6166
  • pickerGroup.border#399ee6
  • pickerGroup.foreground#4cbf99
  • progressBar.background#a37acc
  • scrollbar.shadow#444444
  • selection.background#399ee6
  • settings.checkboxBackground#f9f9f9
  • settings.checkboxBorder#ffffff
  • settings.checkboxForeground#5c6166
  • settings.dropdownBackground#f9f9f9
  • settings.dropdownBorder#ffffff
  • settings.dropdownForeground#5c6166
  • settings.headerForeground#5c6166
  • settings.modifiedItemIndicator#fa8d3e
  • settings.numberInputBackground#f9f9f9
  • settings.numberInputBorder#ffffff
  • settings.numberInputForeground#5c6166
  • settings.textInputBackground#f9f9f9
  • settings.textInputBorder#ffffff
  • settings.textInputForeground#5c6166
  • sideBar.background#f9f9f9
  • sideBarSectionHeader.background#f8f9fa
  • sideBarSectionHeader.border#ffffff
  • sideBarTitle.foreground#5c6166
  • statusBar.background#ffffff
  • statusBar.debuggingBackground#f07171
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#5c6166
  • statusBar.noFolderBackground#ffffff
  • statusBar.noFolderForeground#5c6166
  • statusBarItem.prominentBackground#f07171
  • statusBarItem.prominentHoverBackground#fa8d3e
  • statusBarItem.remoteBackground#399ee6
  • statusBarItem.remoteForeground#f8f9fa
  • tab.activeBackground#f8f9fa
  • tab.activeBorderTop#a37acc80
  • tab.activeForeground#5c6166
  • tab.border#ffffff
  • tab.inactiveBackground#f9f9f9
  • tab.inactiveForeground#a0a6ac
  • terminal.ansiBlack#edeff1
  • terminal.ansiBlue#399ee6
  • terminal.ansiBrightBlack#d2d4d8
  • terminal.ansiBrightBlue#478acc
  • terminal.ansiBrightCyan#55b4d4
  • terminal.ansiBrightGreen#86b300
  • terminal.ansiBrightMagenta#b595d6
  • terminal.ansiBrightRed#ff7383
  • terminal.ansiBrightWhite#404447
  • terminal.ansiBrightYellow#ffaa33
  • terminal.ansiCyan#4cbf99
  • terminal.ansiGreen#6cbf49
  • terminal.ansiMagenta#a37acc
  • terminal.ansiRed#f07171
  • terminal.ansiWhite#4e5257
  • terminal.ansiYellow#fa8d3e
  • terminal.background#f8f9fa
  • terminal.border#5c6166
  • terminal.foreground#5c6166
  • terminal.selectionBackground#edeff150
  • textBlockQuote.background#f9f9f9
  • titleBar.activeBackground#f9f9f9
  • titleBar.activeForeground#5c6166
  • titleBar.inactiveBackground#ffffff
  • titleBar.inactiveForeground#a0a6ac
  • walkThrough.embeddedEditorBackground#f9f9f9
  • welcomePage.buttonBackground#edeff1
  • welcomePage.buttonHoverBackground#d2d4d875
  • widget.shadow#444444

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasisitalic
strongbold
header#399ee6
source#5c6166
meta.diff, meta.diff.header#a0a6ac
markup.inserted#6cbf49
markup.deleted#f07171
markup.changed#fa8d3e
invalid#f07171underline italic
invalid.deprecated#5c6166underline italic
entity.name.filename#ffaa33
markup.error#f07171
markup.underlineunderline
markup.bold#fa8d3ebold
markup.heading#399ee6bold
markup.italic#ffaa33italic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#4cbf99
markup.inline.raw, markup.raw.restructuredtext#6cbf49
markup.underline.link, markup.underline.link.image#4cbf99
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#a37acc
entity.name.directive.restructuredtext, markup.quote#ffaa33italic
meta.separator.markdown#a0a6ac
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#6cbf49
punctuation.definition.constant.restructuredtext#399ee6
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#399ee6
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end#5c6166
markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end#ffaa33
entity.name.type.class, entity.name.class#4cbf99normal
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#399ee6italic
entity.other.inherited-class#4cbf99italic
comment, punctuation.definition.comment, unused.comment, wildcard.comment#a0a6ac
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#a37acc
comment.block.documentation entity.name.type#4cbf99italic
comment.block.documentation entity.name.type punctuation.definition.bracket#4cbf99
comment.block.documentation variable#fa8d3eitalic
constant, variable.other.constant#399ee6
constant.character.escape, constant.character.string.escape, constant.regexp#a37acc
entity.name.tag#a37acc
entity.other.attribute-name.parent-selector#a37acc
entity.other.attribute-name#6cbf49italic
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#6cbf49
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#fa8d3eitalic
meta.decorator variable.other.readwrite, meta.decorator variable.other.property#6cbf49italic
meta.decorator variable.other.object#6cbf49
keyword, punctuation.definition.keyword#a37acc
keyword.control.new, keyword.operator.newbold
meta.selector#a37acc
support#4cbf99italic
support.function.magic, support.variable, variable.other.predefined#399ee6regular
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#a37acc
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#5c6166
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#a37acc
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#4cbf99
constant.other.date, constant.other.timestamp#fa8d3e
variable.other.alias.yaml#6cbf49italic underline
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def#a37accregular
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#4cbf99italic
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#fa8d3e
storage.modifier#a37acc
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#ffaa33
punctuation.definition.group.capture.regexp#a37acc
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#f07171
punctuation.definition.character-class.regexp#4cbf99
punctuation.definition.group.regexp#fa8d3e
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#f07171
meta.assertion.look-ahead.regexp#6cbf49
string#ffaa33
punctuation.definition.string.begin, punctuation.definition.string.end#f2ae49
punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#399ee6
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#a0a6ac
variable, constant.other.key.perl, support.variable.property, variable.other.constant.js, variable.other.constant.ts, variable.other.constant.tsx#5c6166
meta.import variable.other.readwrite, meta.object-binding-pattern-variable variable.object.property, meta.variable.assignment.destructured.object.coffee variable#fa8d3eitalic
meta.import variable.other.readwrite.alias, meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable#5c6166normal
meta.selectionset.graphql variable#ffaa33
meta.selectionset.graphql meta.arguments variable#5c6166
entity.name.fragment.graphql, variable.fragment.graphql#4cbf99
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#5c6166
source.shell variable.other#399ee6
support.constant#399ee6normal
meta.scope.prerequisites.makefile#ffaa33
meta.attribute-selector.scss#ffaa33
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss#5c6166
meta.preprocessor.haskell#a0a6ac