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

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasisitalic
strongbold
header#a499d1
meta.diff, meta.diff.header#686868
markup.inserted#007670
markup.deleted#d56a6a
markup.changed#E89B4C
invalid#d56a6aunderline italic
invalid.deprecated#f0f0f0underline italic
entity.name.filename#b2f5f3
markup.error#d56a6a
markup.underlineunderline
markup.bold#E89B4Cbold
markup.heading#a499d1bold
markup.italic#b2f5f3italic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#53d0d2
markup.inline.raw, markup.raw.restructuredtext#007670
markup.underline.link, markup.underline.link.image#53d0d2
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#bc7e9e
entity.name.directive.restructuredtext, markup.quote#b2f5f3italic
meta.separator.markdown#686868
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#007670
punctuation.definition.constant.restructuredtext#a499d1
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#a499d1
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end#f0f0f0
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#53d0d2normal
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#a499d1italic
entity.other.inherited-class#53d0d2italic
comment, punctuation.definition.comment, unused.comment, wildcard.comment#686868
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#bc7e9e
comment.block.documentation entity.name.type#53d0d2italic
comment.block.documentation entity.name.type punctuation.definition.bracket#53d0d2
comment.block.documentation variable#E89B4Citalic
constant, variable.other.constant#a499d1
constant.character.escape, constant.character.string.escape, constant.regexp#bc7e9e
entity.name.tag#bc7e9e
entity.other.attribute-name.parent-selector#bc7e9e
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#bc7e9e
keyword.control.new, keyword.operator.newbold
meta.selector#bc7e9e
support#53d0d2italic
support.function.magic, support.variable, variable.other.predefined#a499d1regular
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#bc7e9e
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#f0f0f0
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#bc7e9e
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#53d0d2
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#bc7e9eregular
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#53d0d2italic
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#E89B4C
storage.modifier#bc7e9e
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#b2f5f3
punctuation.definition.group.capture.regexp#bc7e9e
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#d56a6a
punctuation.definition.character-class.regexp#53d0d2
punctuation.definition.group.regexp#E89B4C
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#d56a6a
meta.assertion.look-ahead.regexp#007670
string#b2f5f3
punctuation.definition.string.begin, punctuation.definition.string.end#d6d178
punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#72c6bf
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#686868
variable, constant.other.key.perl, support.variable.property, variable.other.constant.js, variable.other.constant.ts, variable.other.constant.tsx#f0f0f0
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#f0f0f0normal
meta.selectionset.graphql variable#b2f5f3
meta.selectionset.graphql meta.arguments variable#f0f0f0
entity.name.fragment.graphql, variable.fragment.graphql#53d0d2
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#f0f0f0
source.shell variable.other#a499d1
support.constant#a499d1normal
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#f0f0f0
meta.preprocessor.haskell#686868
log.error#d56a6abold
log.warning#b2f5f3bold