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#9B8AE010
  • activityBar.activeBorder#D06B9F80
  • activityBar.background#363838
  • activityBar.foreground#eff0f2
  • activityBar.inactiveForeground#676a6a
  • activityBarBadge.background#D06B9F
  • activityBarBadge.foreground#eff0f2
  • badge.background#009a9c3d
  • badge.foreground#eff0f2
  • breadcrumb.activeSelectionForeground#eff0f2
  • breadcrumb.background#161618
  • breadcrumb.focusForeground#eff0f2
  • breadcrumb.foreground#676a6a
  • breadcrumbPicker.background#0c0c0d
  • button.background#009a9c3d
  • button.foreground#eff0f2
  • button.secondaryBackground#161618
  • button.secondaryForeground#eff0f2
  • button.secondaryHoverBackground#363838
  • debugToolBar.background#161618
  • diffEditor.insertedTextBackground#00767020
  • diffEditor.removedTextBackground#E8575750
  • dropdown.background#363838
  • dropdown.border#0c0c0d
  • dropdown.foreground#eff0f2
  • editor.background#161618
  • editor.findMatchBackground#E89B4C80
  • editor.findMatchHighlightBackground#FFFFFF40
  • editor.findRangeHighlightBackground#1C3A2D75
  • editor.foldBackground#16161880
  • editor.foreground#eff0f2
  • editor.hoverHighlightBackground#3de5e850
  • editor.lineHighlightBorder#009a9c3d
  • editor.rangeHighlightBackground#9B8AE015
  • editor.selectionBackground#009a9c3d
  • editor.selectionHighlightBackground#545656
  • editor.snippetFinalTabstopHighlightBackground#161618
  • editor.snippetFinalTabstopHighlightBorder#007670
  • editor.snippetTabstopHighlightBackground#161618
  • editor.snippetTabstopHighlightBorder#676a6a
  • editor.wordHighlightBackground#3de5e850
  • editor.wordHighlightStrongBackground#00767050
  • editorBracketHighlight.foreground1#eff0f2
  • editorBracketHighlight.foreground2#D06B9F
  • editorBracketHighlight.foreground3#3de5e8
  • editorBracketHighlight.foreground4#007670
  • editorBracketHighlight.foreground5#9B8AE0
  • editorBracketHighlight.foreground6#E89B4C
  • editorBracketHighlight.unexpectedBracket.foreground#E85757
  • editorCodeLens.foreground#676a6a
  • editorCursor.foreground#007670
  • editorError.foreground#E85757
  • editorGroup.border#9B8AE0
  • editorGroup.dropBackground#1C3A2D70
  • editorGroupHeader.tabsBackground#0c0c0d
  • editorGutter.addedBackground#00767080
  • editorGutter.deletedBackground#E8575780
  • editorGutter.modifiedBackground#3de5e880
  • editorHoverWidget.background#161618
  • editorHoverWidget.border#676a6a
  • editorIndentGuide.activeBackground#FFFFFF45
  • editorIndentGuide.background#FFFFFF1A
  • editorLineNumber.activeForeground#007670
  • editorLineNumber.foreground#676a6a
  • editorLink.activeForeground#3de5e8
  • editorMarkerNavigation.background#161618
  • editorOverviewRuler.addedForeground#00767080
  • editorOverviewRuler.border#0c0c0d
  • editorOverviewRuler.currentContentForeground#007670
  • editorOverviewRuler.deletedForeground#E8575780
  • editorOverviewRuler.errorForeground#E8575780
  • editorOverviewRuler.incomingContentForeground#9B8AE0
  • editorOverviewRuler.infoForeground#3de5e880
  • editorOverviewRuler.modifiedForeground#3de5e880
  • editorOverviewRuler.selectionHighlightForeground#E89B4C
  • editorOverviewRuler.warningForeground#E89B4C80
  • editorOverviewRuler.wordHighlightForeground#3de5e8
  • editorOverviewRuler.wordHighlightStrongForeground#007670
  • editorRuler.foreground#FFFFFF1A
  • editorSuggestWidget.background#161618
  • editorSuggestWidget.foreground#eff0f2
  • editorSuggestWidget.selectedBackground#009a9c3d
  • editorWarning.foreground#3de5e8
  • editorWhitespace.foreground#FFFFFF1A
  • editorWidget.background#161618
  • errorForeground#E85757
  • extensionButton.prominentBackground#00767090
  • extensionButton.prominentForeground#eff0f2
  • extensionButton.prominentHoverBackground#00767060
  • focusBorder#676a6a
  • foreground#eff0f2
  • gitDecoration.conflictingResourceForeground#E89B4C
  • gitDecoration.deletedResourceForeground#E85757
  • gitDecoration.ignoredResourceForeground#676a6a
  • gitDecoration.modifiedResourceForeground#3de5e8
  • gitDecoration.untrackedResourceForeground#007670
  • inlineChat.regionHighlight#363838
  • input.background#161618
  • input.border#0c0c0d
  • input.foreground#eff0f2
  • input.placeholderForeground#676a6a
  • inputOption.activeBorder#9B8AE0
  • inputValidation.errorBorder#E85757
  • inputValidation.infoBorder#D06B9F
  • inputValidation.warningBorder#E89B4C
  • list.activeSelectionBackground#009a9c3d
  • list.activeSelectionForeground#eff0f2
  • list.dropBackground#009a9c3d
  • list.errorForeground#E85757
  • list.focusBackground#1C3A2D75
  • list.highlightForeground#3de5e8
  • list.hoverBackground#1C3A2D75
  • list.inactiveSelectionBackground#1C3A2D75
  • list.warningForeground#E89B4C
  • listFilterWidget.background#363838
  • listFilterWidget.noMatchesOutline#E85757
  • listFilterWidget.outline#545656
  • merge.currentHeaderBackground#00767090
  • merge.incomingHeaderBackground#9B8AE090
  • panel.background#161618
  • panel.border#9B8AE0
  • panelTitle.activeBorder#D06B9F
  • panelTitle.activeForeground#eff0f2
  • panelTitle.inactiveForeground#676a6a
  • peekView.border#009a9c3d
  • peekViewEditor.background#161618
  • peekViewEditor.matchHighlightBackground#b2f5f380
  • peekViewResult.background#161618
  • peekViewResult.fileForeground#eff0f2
  • peekViewResult.lineForeground#eff0f2
  • peekViewResult.matchHighlightBackground#b2f5f380
  • peekViewResult.selectionBackground#009a9c3d
  • peekViewResult.selectionForeground#eff0f2
  • peekViewTitle.background#0c0c0d
  • peekViewTitleDescription.foreground#676a6a
  • peekViewTitleLabel.foreground#eff0f2
  • pickerGroup.border#9B8AE0
  • pickerGroup.foreground#3de5e8
  • progressBar.background#D06B9F
  • selection.background#9B8AE0
  • settings.checkboxBackground#161618
  • settings.checkboxBorder#0c0c0d
  • settings.checkboxForeground#eff0f2
  • settings.dropdownBackground#161618
  • settings.dropdownBorder#0c0c0d
  • settings.dropdownForeground#eff0f2
  • settings.headerForeground#eff0f2
  • settings.modifiedItemIndicator#E89B4C
  • settings.numberInputBackground#161618
  • settings.numberInputBorder#0c0c0d
  • settings.numberInputForeground#eff0f2
  • settings.textInputBackground#161618
  • settings.textInputBorder#0c0c0d
  • settings.textInputForeground#eff0f2
  • sideBar.background#161618
  • sideBarSectionHeader.background#161618
  • sideBarSectionHeader.border#0c0c0d
  • sideBarTitle.foreground#eff0f2
  • statusBar.background#0c0c0d
  • statusBar.debuggingBackground#E85757
  • statusBar.debuggingForeground#0c0c0d
  • statusBar.foreground#eff0f2
  • statusBar.noFolderBackground#0c0c0d
  • statusBar.noFolderForeground#eff0f2
  • statusBarItem.prominentBackground#E85757
  • statusBarItem.prominentHoverBackground#E89B4C
  • statusBarItem.remoteBackground#9B8AE0
  • statusBarItem.remoteForeground#161618
  • tab.activeBackground#161618
  • tab.activeBorderTop#00767080
  • tab.activeForeground#eff0f2
  • tab.border#0c0c0d
  • tab.inactiveBackground#161618
  • tab.inactiveForeground#676a6a
  • terminal.ansiBlack#161618
  • terminal.ansiBlue#9B8AE0
  • terminal.ansiBrightBlack#676a6a
  • terminal.ansiBrightBlue#B0A0F0
  • terminal.ansiBrightCyan#7beeee
  • terminal.ansiBrightGreen#00c5ce
  • terminal.ansiBrightMagenta#E080B0
  • terminal.ansiBrightRed#F07070
  • terminal.ansiBrightWhite#f1f3f5
  • terminal.ansiBrightYellow#F0D870
  • terminal.ansiCyan#3de5e8
  • terminal.ansiGreen#00afb4
  • terminal.ansiMagenta#D06B9F
  • terminal.ansiRed#E85757
  • terminal.ansiWhite#eff0f2
  • terminal.ansiYellow#E8C857
  • terminal.background#161618
  • terminal.foreground#eff0f2
  • titleBar.activeBackground#161618
  • titleBar.activeForeground#eff0f2
  • titleBar.inactiveBackground#0c0c0d
  • titleBar.inactiveForeground#676a6a
  • walkThrough.embeddedEditorBackground#161618

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasisitalic
strongbold
header#9B8AE0
meta.diff, meta.diff.header#676a6a
markup.inserted#007670
markup.deleted#E85757
markup.changed#E89B4C
invalid#E85757underline italic
invalid.deprecated#eff0f2underline italic
entity.name.filename#b2f5f3
markup.error#E85757
markup.underlineunderline
markup.bold#E89B4Cbold
markup.heading#9B8AE0bold
markup.italic#b2f5f3italic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#3de5e8
markup.inline.raw, markup.raw.restructuredtext#007670
markup.underline.link, markup.underline.link.image#3de5e8
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#D06B9F
entity.name.directive.restructuredtext, markup.quote#b2f5f3italic
meta.separator.markdown#676a6a
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#007670
punctuation.definition.constant.restructuredtext#9B8AE0
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#9B8AE0
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end#eff0f2
markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end#b2f5f3
entity.name.type.class, entity.name.class#3de5e8normal
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#9B8AE0italic
entity.other.inherited-class#3de5e8italic
comment, punctuation.definition.comment, unused.comment, wildcard.comment#676a6a
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#D06B9F
comment.block.documentation entity.name.type#3de5e8italic
comment.block.documentation entity.name.type punctuation.definition.bracket#3de5e8
comment.block.documentation variable#E89B4Citalic
constant, variable.other.constant#9B8AE0
constant.character.escape, constant.character.string.escape, constant.regexp#D06B9F
entity.name.tag#D06B9F
entity.other.attribute-name.parent-selector#D06B9F
entity.other.attribute-name#007670italic
entity.name.function, 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#007670
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#E89B4Citalic
meta.decorator variable.other.readwrite, meta.decorator variable.other.property#007670italic
meta.decorator variable.other.object#007670
keyword, punctuation.definition.keyword#D06B9F
keyword.control.new, keyword.operator.newbold
meta.selector#D06B9F
support#3de5e8italic
support.function.magic, support.variable, variable.other.predefined#9B8AE0regular
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#D06B9F
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, punctuation.terminator.expression.php, storage.type.generic.java, string.template meta.brace, string.template punctuation.accessor#eff0f2
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#D06B9F
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#3de5e8
constant.other.date, constant.other.timestamp#E89B4C
variable.other.alias.yaml#007670italic underline
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def#D06B9Fregular
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#3de5e8italic
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#E89B4C
storage.modifier#D06B9F
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#b2f5f3
punctuation.definition.group.capture.regexp#D06B9F
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#E85757
punctuation.definition.character-class.regexp#3de5e8
punctuation.definition.group.regexp#E89B4C
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#E85757
meta.assertion.look-ahead.regexp#007670
string#b2f5f3
punctuation.definition.string.begin, punctuation.definition.string.end#E8E066
punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#5EDAD0
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#676a6a
variable, constant.other.key.perl, support.variable.property, variable.other.constant.js, variable.other.constant.ts, variable.other.constant.tsx#eff0f2
meta.import variable.other.readwrite, meta.variable.assignment.destructured.object.coffee variable#E89B4Citalic
meta.import variable.other.readwrite.alias, meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable#eff0f2normal
meta.selectionset.graphql variable#b2f5f3
meta.selectionset.graphql meta.arguments variable#eff0f2
entity.name.fragment.graphql, variable.fragment.graphql#3de5e8
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#eff0f2
source.shell variable.other#9B8AE0
support.constant#9B8AE0normal
meta.scope.prerequisites.makefile#b2f5f3
meta.attribute-selector.scss#b2f5f3
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss#eff0f2
meta.preprocessor.haskell#676a6a
log.error#E85757bold
log.warning#b2f5f3bold