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#15847d
  • activityBar.background#0e1e25
  • activityBar.foreground#f7f8f8
  • activityBar.inactiveForeground#646e73
  • activityBarBadge.background#15847d
  • activityBarBadge.foreground#f7f8f8
  • badge.background#2d3b41
  • badge.foreground#f7f8f8
  • breadcrumb.activeSelectionForeground#f7f8f8
  • breadcrumb.background#0b1113
  • breadcrumb.focusForeground#f7f8f8
  • breadcrumb.foreground#646e73
  • breadcrumbPicker.background#0e1e25
  • button.background#2d3b41
  • button.foreground#f7f8f8
  • contrastBorder#0e1e25
  • debugToolBar.background#0e1e25
  • diffEditor.insertedTextBackground#43d86020
  • diffEditor.removedTextBackground#ff696950
  • dropdown.background#0e1e25
  • dropdown.border#0e1e25
  • dropdown.foreground#f7f8f8
  • editor.background#0b1113
  • editor.findMatchBackground#f8681680
  • editor.findMatchHighlightBackground#f7f8f840
  • editor.findRangeHighlightBackground#172730
  • editor.foldBackground#0b1113
  • editor.foreground#f7f8f8
  • editor.hoverHighlightBackground#0b1113
  • editor.lineHighlightBackground#0b1113
  • editor.rangeHighlightBackground#43b4d815
  • editor.selectionBackground#2d3b41
  • editor.selectionHighlightBackground#172730
  • editor.snippetFinalTabstopHighlightBackground#0b1113
  • editor.snippetFinalTabstopHighlightBorder#43d860
  • editor.snippetTabstopHighlightBackground#0b1113
  • editor.snippetTabstopHighlightBorder#2d3b41
  • editor.wordHighlightBackground#00ad9f50
  • editor.wordHighlightStrongBackground#43d86050
  • editorCodeLens.foreground#646e73
  • editorError.foreground#ff6969
  • editorGroup.border#2d3b41
  • editorGroup.dropBackground#0b1113
  • editorGroup.emptyBackground#0b1113
  • editorGroupHeader.noTabsBackground#0b1113
  • editorGroupHeader.tabsBackground#0b1113
  • editorGroupHeader.tabsBorder#0e1e25
  • editorGutter.addedBackground#43d86080
  • editorGutter.deletedBackground#ff696980
  • editorGutter.modifiedBackground#00ad9f80
  • editorHoverWidget.background#0e1e25
  • editorHoverWidget.border#2d3b41
  • editorIndentGuide.activeBackground#f7f8f845
  • editorIndentGuide.background#f7f8f810
  • editorLineNumber.foreground#646e73
  • editorLink.activeForeground#00ad9f
  • editorMarkerNavigation.background#0e1e25
  • editorOverviewRuler.addedForeground#43d86080
  • editorOverviewRuler.border#0e1e25
  • editorOverviewRuler.currentContentForeground#43d860
  • editorOverviewRuler.deletedForeground#ff696980
  • editorOverviewRuler.errorForeground#ff696980
  • editorOverviewRuler.incomingContentForeground#43b4d8
  • editorOverviewRuler.infoForeground#00ad9f80
  • editorOverviewRuler.modifiedForeground#00ad9f80
  • editorOverviewRuler.selectionHighlightForeground#f86816
  • editorOverviewRuler.warningForeground#f8681680
  • editorOverviewRuler.wordHighlightForeground#00ad9f
  • editorOverviewRuler.wordHighlightStrongForeground#43d860
  • editorRuler.foreground#f7f8f810
  • editorSuggestWidget.background#0e1e25
  • editorSuggestWidget.foreground#f7f8f8
  • editorSuggestWidget.selectedBackground#2d3b41
  • editorWarning.foreground#ffad43
  • editorWhitespace.foreground#f7f8f810
  • editorWidget.background#0e1e25
  • errorForeground#ff6969
  • extensionButton.prominentBackground#43d86090
  • extensionButton.prominentForeground#f7f8f8
  • extensionButton.prominentHoverBackground#43d86060
  • focusBorder#ffffff00
  • foreground#f7f8f8
  • gitDecoration.conflictingResourceForeground#f86816
  • gitDecoration.deletedResourceForeground#ff6969
  • gitDecoration.ignoredResourceForeground#646e73
  • gitDecoration.modifiedResourceForeground#00ad9f
  • gitDecoration.untrackedResourceForeground#43d860
  • input.background#0e1e25
  • input.border#0e1e25
  • input.foreground#f7f8f8
  • input.placeholderForeground#646e73
  • inputOption.activeBorder#15847d
  • inputValidation.errorBorder#ff6969
  • inputValidation.infoBorder#43b4d8
  • inputValidation.warningBorder#ffad43
  • list.activeSelectionBackground#2d3b41
  • list.activeSelectionForeground#f7f8f8
  • list.dropBackground#2d3b41
  • list.errorForeground#ff6969
  • list.focusBackground#172730
  • list.highlightForeground#00ad9f
  • list.hoverBackground#172730
  • list.inactiveSelectionBackground#172730
  • list.warningForeground#f86816
  • listFilterWidget.background#0e1e25
  • listFilterWidget.noMatchesOutline#ff6969
  • listFilterWidget.outline#172730
  • merge.currentHeaderBackground#43d86090
  • merge.incomingHeaderBackground#43b4d890
  • panel.background#0e1e25
  • panel.border#2d3b41
  • panelTitle.activeBorder#15847d
  • panelTitle.activeForeground#f7f8f8
  • panelTitle.inactiveForeground#646e73
  • peekView.border#2d3b41
  • peekViewEditor.background#0e1e25
  • peekViewEditor.matchHighlightBackground#ffad4380
  • peekViewResult.background#0e1e25
  • peekViewResult.fileForeground#f7f8f8
  • peekViewResult.lineForeground#f7f8f8
  • peekViewResult.matchHighlightBackground#ffad4380
  • peekViewResult.selectionBackground#2d3b41
  • peekViewResult.selectionForeground#f7f8f8
  • peekViewTitle.background#0e1e25
  • peekViewTitleDescription.foreground#646e73
  • peekViewTitleLabel.foreground#f7f8f8
  • pickerGroup.border#2d3b41
  • pickerGroup.foreground#00ad9f
  • progressBar.background#15847d
  • selection.background#15847d
  • settings.checkboxBackground#0e1e25
  • settings.checkboxBorder#0e1e25
  • settings.checkboxForeground#f7f8f8
  • settings.dropdownBackground#0e1e25
  • settings.dropdownBorder#0e1e25
  • settings.dropdownForeground#f7f8f8
  • settings.headerForeground#f7f8f8
  • settings.modifiedItemIndicator#15847d
  • settings.numberInputBackground#0b1113
  • settings.numberInputBorder#0e1e25
  • settings.numberInputForeground#f7f8f8
  • settings.textInputBackground#0b1113
  • settings.textInputBorder#2d3b41
  • settings.textInputForeground#f7f8f8
  • sideBar.background#0e1e25
  • sideBarSectionHeader.background#0e1e25
  • sideBarSectionHeader.border#2d3b41
  • sideBarTitle.foreground#f7f8f8
  • statusBar.background#0e1e25
  • statusBar.border#2d3b41
  • statusBar.debuggingBackground#ff6969
  • statusBar.debuggingForeground#0e1e25
  • statusBar.foreground#f7f8f8
  • statusBar.noFolderBackground#0b1113
  • statusBar.noFolderForeground#f7f8f8
  • statusBarItem.prominentBackground#ff6969
  • statusBarItem.prominentHoverBackground#f86816
  • statusBarItem.remoteBackground#43b4d8
  • statusBarItem.remoteForeground#f7f8f8
  • tab.activeBackground#0e1e25
  • tab.activeBorder#00ad9f
  • tab.activeForeground#f7f8f8
  • tab.border#0e1e25
  • tab.inactiveBackground#0b1113
  • tab.inactiveForeground#646e73
  • terminal.ansiBlack#2d3b41
  • terminal.ansiBlue#43b4d8
  • terminal.ansiBrightBlack#2d3b41
  • terminal.ansiBrightBlue#c4e8f3
  • terminal.ansiBrightCyan#38ffee
  • terminal.ansiBrightGreen#01df2e
  • terminal.ansiBrightMagenta#ffb8b8
  • terminal.ansiBrightRed#f25481
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#ffd26e
  • terminal.ansiCyan#00ad9f
  • terminal.ansiGreen#43d860
  • terminal.ansiMagenta#c57aa2
  • terminal.ansiRed#ff6969
  • terminal.ansiWhite#f7f8f8
  • terminal.ansiYellow#ffad43
  • terminal.background#0e1e25
  • terminal.foreground#f7f8f8
  • titleBar.activeBackground#172730
  • titleBar.activeForeground#f7f8f8
  • titleBar.inactiveBackground#0b1113
  • titleBar.inactiveForeground#646e73
  • walkThrough.embeddedEditorBackground#0b1113
  • widget.shadow#000000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasisitalic
strongbold
header#43b4d8
source#f7f8f8
meta.diff, meta.diff.header#646e73
markup.inserted#43d860
markup.deleted#ff6969
markup.changed#f86816
invalid#ff6969underline italic
invalid.deprecated#f7f8f8underline italic
entity.name.filename#ffad43
markup.error#ff6969
markup.underlineunderline
markup.bold#f86816bold
markup.heading#43b4d8bold
markup.italic#ffad43italic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#00ad9f
markup.inline.raw, markup.raw.restructuredtext#43d860
markup.underline.link, markup.underline.link.image#00ad9f
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#c57aa2
entity.name.directive.restructuredtext, markup.quote#ffad43italic
meta.separator.markdown#646e73
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#43d860
punctuation.definition.constant.restructuredtext#43b4d8
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#43b4d8
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end#f7f8f8
markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end#ffad43
entity.name.type.class, entity.name.class#00ad9f
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#43b4d8italic
entity.other.inherited-class#00ad9fitalic
comment, punctuation.definition.comment, unused.comment, wildcard.comment#646e73
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#c57aa2
comment.block.documentation entity.name.type#00ad9fitalic
comment.block.documentation entity.name.type punctuation.definition.bracket#00ad9f
comment.block.documentation variable#f86816italic
constant, variable.other.constant#f7f8f8
constant.character.escape, constant.character.string.escape, constant.regexp#c57aa2
entity.name.tag#ffad43
entity.other.attribute-name.parent-selector#c57aa2
entity.other.attribute-name#69A7FFitalic
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#ffad43
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#f86816italic
meta.decorator variable.other.readwrite, meta.decorator variable.other.property#ffad43italic
meta.decorator variable.other.object#ffad43
keyword, punctuation.definition.keyword#00ad9f
keyword.control.new, keyword.operator.newbold
meta.selector#c57aa2
support#ffad43italic
support.function.magic, support.variable, variable.other.predefined#43b4d8
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#f7f8f8
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#f7f8f8
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#c57aa2
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#00ad9f
constant.other.date, constant.other.timestamp#f86816
variable.other.alias.yaml#43d860italic underline
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def#c57aa2
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#00ad9fitalic
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#f86816
storage.modifier#c57aa2
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#ffad43
punctuation.definition.group.capture.regexp#c57aa2
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#ff6969
punctuation.definition.character-class.regexp#00ad9f
punctuation.definition.group.regexp#f86816
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#ff6969
meta.assertion.look-ahead.regexp#43d860
string#43b4d8
punctuation.definition.string.begin, punctuation.definition.string.end#43d860
punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#00ad9f
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#646e73
variable, constant.other.key.perl, support.variable.property, variable.other.constant.js, variable.other.constant.ts, variable.other.constant.tsx#f7f8f8
meta.import variable.other.readwrite, meta.object-binding-pattern-variable variable.object.property, meta.variable.assignment.destructured.object.coffee variable#f86816italic
meta.import variable.other.readwrite.alias, meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable#f7f8f8
meta.selectionset.graphql variable#ffad43
meta.selectionset.graphql meta.arguments variable#f7f8f8
entity.name.fragment.graphql, variable.fragment.graphql#00ad9f
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#f7f8f8
source.shell variable.other#43b4d8
support.constant#43b4d8
meta.scope.prerequisites.makefile#ffad43
meta.attribute-selector.scss#ffad43
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss#f7f8f8
meta.preprocessor.haskell#646e73