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#e3dbc9
  • activityBar.activeBorder#268cd1
  • activityBar.background#faf3e1
  • activityBar.foreground#000000bf
  • activityBar.inactiveForeground#00000080
  • activityBarBadge.background#268cd1
  • activityBarBadge.foreground#000000bf
  • badge.background#e3dbc9
  • badge.foreground#000000bf
  • breadcrumb.activeSelectionForeground#000000bf
  • breadcrumb.background#e3dbc9
  • breadcrumb.focusForeground#000000bf
  • breadcrumb.foreground#c8c2b5
  • breadcrumbPicker.background#eee6d3
  • button.background#c8c2b5
  • button.foreground#000000bf
  • button.secondaryBackground#c8c2b5
  • button.secondaryForeground#000000bf
  • commandCenter.activeBackground#e3dbc9
  • commandCenter.activeBorder#e3dbc9
  • commandCenter.activeForeground#000000bf
  • commandCenter.background#faf3e1
  • commandCenter.border#e3dbc9
  • commandCenter.foreground#000000bf
  • commandCenter.inactiveBorder#e3dbc9
  • commandCenter.inactiveForeground#000000bf
  • debugToolBar.background#e3dbc9
  • diffEditor.insertedTextBackground#0039e620
  • diffEditor.removedTextBackground#e6228250
  • dropdown.background#faf3e1
  • dropdown.border#faf3e1
  • dropdown.foreground#000000bf
  • editor.background#fbf3df
  • editor.findMatchBackground#2e736680
  • editor.findMatchHighlightBackground#00000040
  • editor.findRangeHighlightBackground#b1aca2
  • editor.foldBackground#e3dbc980
  • editor.foreground#000000bf
  • editor.hoverHighlightBackground#00000012
  • editor.lineHighlightBackground#00000012
  • editor.rangeHighlightBackground#008c4715
  • editor.selectionBackground#268cd166
  • editor.selectionHighlightBackground#d1ccbe
  • editor.snippetFinalTabstopHighlightBackground#fbf3df
  • editor.snippetFinalTabstopHighlightBorder#0039e6
  • editor.snippetTabstopHighlightBackground#fbf3df
  • editor.snippetTabstopHighlightBorder#00000080
  • editor.wordHighlightBackground#00000012
  • editor.wordHighlightStrongBackground#0039e650
  • editorBracketHighlight.foreground1#00009c
  • editorBracketHighlight.foreground2#00009c
  • editorBracketHighlight.foreground3#00009c
  • editorBracketHighlight.foreground4#00009c
  • editorBracketHighlight.foreground5#00009c
  • editorBracketHighlight.foreground6#00009c
  • editorBracketHighlight.unexpectedBracket.foreground#e62282
  • editorCodeLens.foreground#00000080
  • editorError.foreground#e62282
  • editorGroup.border#eee6d3
  • editorGroup.dropBackground#e3dbc970
  • editorGroupHeader.tabsBackground#faf3e1
  • editorGutter.addedBackground#0039e680
  • editorGutter.deletedBackground#e6228280
  • editorGutter.modifiedBackground#00993380
  • editorHoverWidget.background#fbf3df
  • editorHoverWidget.border#00000080
  • editorIndentGuide.background1#d1ccbe
  • editorIndentGuide.background2#d1ccbe
  • editorIndentGuide.background3#d1ccbe
  • editorIndentGuide.background4#d1ccbe
  • editorIndentGuide.background5#d1ccbe
  • editorIndentGuide.background6#d1ccbe
  • editorLineNumber.foreground#3d6b42
  • editorLink.activeForeground#009933
  • editorMarkerNavigation.background#e3dbc9
  • editorOverviewRuler.addedForeground#0039e680
  • editorOverviewRuler.border#eee6d3
  • editorOverviewRuler.currentContentForeground#0039e6
  • editorOverviewRuler.deletedForeground#e6228280
  • editorOverviewRuler.errorForeground#e6228280
  • editorOverviewRuler.incomingContentForeground#008c47
  • editorOverviewRuler.infoForeground#00993380
  • editorOverviewRuler.modifiedForeground#00993380
  • editorOverviewRuler.selectionHighlightForeground#2e7366
  • editorOverviewRuler.warningForeground#2e736680
  • editorOverviewRuler.wordHighlightForeground#009933
  • editorOverviewRuler.wordHighlightStrongForeground#0039e6
  • editorRuler.foreground#0000001a
  • editorSuggestWidget.background#e3dbc9
  • editorSuggestWidget.foreground#000000bf
  • editorSuggestWidget.selectedBackground#e3dbc9
  • editorWarning.foreground#8a6a00
  • editorWhitespace.foreground#0000001a
  • editorWidget.background#e3dbc9
  • errorForeground#e62282
  • extensionButton.prominentBackground#0039e690
  • extensionButton.prominentForeground#000000bf
  • extensionButton.prominentHoverBackground#0039e660
  • focusBorder#00000000
  • foreground#000000bf
  • gitDecoration.conflictingResourceForeground#2e7366
  • gitDecoration.deletedResourceForeground#e62282
  • gitDecoration.ignoredResourceForeground#00000080
  • gitDecoration.modifiedResourceForeground#996b00
  • gitDecoration.untrackedResourceForeground#009933
  • input.background#f2ebd9
  • input.border#eee6d3
  • input.foreground#000000bf
  • input.placeholderForeground#00000080
  • inputOption.activeBorder#268cd1
  • inputValidation.errorBorder#e62282
  • inputValidation.infoBorder#e62282
  • inputValidation.warningBorder#2e7366
  • list.activeSelectionBackground#268cd146
  • list.activeSelectionForeground#000000bf
  • list.dropBackground#e3dbc9
  • list.errorForeground#e62282
  • list.focusBackground#268cd146
  • list.highlightForeground#009933
  • list.hoverBackground#00000040
  • list.hoverForeground#000000bf
  • list.inactiveSelectionBackground#00000040
  • list.warningForeground#2e7366
  • listFilterWidget.background#eee6d3
  • listFilterWidget.noMatchesOutline#e62282
  • listFilterWidget.outline#d1ccbe
  • merge.currentHeaderBackground#0039e690
  • merge.incomingHeaderBackground#008c4790
  • panel.background#fbf3df
  • panel.border#faf3e1
  • panelTitle.activeBorder#268cd1
  • panelTitle.activeForeground#000000bf
  • panelTitle.inactiveForeground#00000080
  • peekView.border#e3dbc9
  • peekViewEditor.background#fbf3df
  • peekViewEditor.matchHighlightBackground#8a6a0080
  • peekViewResult.background#e3dbc9
  • peekViewResult.fileForeground#000000bf
  • peekViewResult.lineForeground#000000bf
  • peekViewResult.matchHighlightBackground#8a6a0080
  • peekViewResult.selectionBackground#e3dbc9
  • peekViewResult.selectionForeground#000000bf
  • peekViewTitle.background#eee6d3
  • peekViewTitleDescription.foreground#00000080
  • peekViewTitleLabel.foreground#000000bf
  • pickerGroup.border#268cd1
  • pickerGroup.foreground#268cd1
  • progressBar.background#e62282
  • scrollbar.shadow#faf3e1
  • selection.background#268cd166
  • settings.checkboxBackground#e3dbc9
  • settings.checkboxBorder#eee6d3
  • settings.checkboxForeground#000000bf
  • settings.dropdownBackground#e3dbc9
  • settings.dropdownBorder#eee6d3
  • settings.dropdownForeground#000000bf
  • settings.headerForeground#000000bf
  • settings.modifiedItemIndicator#2e7366
  • settings.numberInputBackground#e3dbc9
  • settings.numberInputBorder#eee6d3
  • settings.numberInputForeground#000000bf
  • settings.textInputBackground#e3dbc9
  • settings.textInputBorder#eee6d3
  • settings.textInputForeground#000000bf
  • sideBar.background#e3dbc9
  • sideBar.border#faf3e1
  • sideBar.foreground#000000bf
  • sideBarSectionHeader.background#d1ccbe
  • statusBar.background#e3dbc9
  • statusBar.border#faf3e1
  • statusBar.debuggingBackground#268cd1
  • statusBar.debuggingForeground#000000bf
  • statusBar.focusBorder#faf3e1
  • statusBar.foreground#000000bf
  • statusBar.noFolderBackground#eee6d3
  • statusBar.noFolderForeground#000000bf
  • statusBarItem.prominentBackground#e3dbc9
  • statusBarItem.prominentHoverBackground#268cd1
  • statusBarItem.remoteBackground#008c47
  • statusBarItem.remoteForeground#fbf3df
  • tab.activeBackground#e3dbc9
  • tab.activeForeground#000000bf
  • tab.border#faf3e1
  • tab.inactiveBackground#faf3e1
  • tab.inactiveForeground#00000080
  • terminal.ansiBlack#e3dbc9
  • terminal.ansiBlue#008c47
  • terminal.ansiBrightBlack#00000080
  • terminal.ansiBrightBlue#00009c
  • terminal.ansiBrightCyan#0039e6
  • terminal.ansiBrightGreen#009933
  • terminal.ansiBrightMagenta#e62282
  • terminal.ansiBrightRed#e62282
  • terminal.ansiBrightWhite#000000bf
  • terminal.ansiBrightYellow#8a6a00
  • terminal.ansiCyan#009933
  • terminal.ansiGreen#0039e6
  • terminal.ansiMagenta#e62282
  • terminal.ansiRed#e62282
  • terminal.ansiWhite#000000bf
  • terminal.ansiYellow#8a6a00
  • terminal.background#fbf3df
  • terminal.foreground#000000bf
  • titleBar.activeBackground#faf3e1
  • titleBar.activeForeground#000000bf
  • titleBar.inactiveBackground#faf3e1
  • titleBar.inactiveForeground#00000080
  • walkThrough.embeddedEditorBackground#e3dbc9

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasisitalic
strongbold
header#008c47
meta.diff, meta.diff.header#00000080
markup.inserted#0039e6
markup.deleted#e62282
markup.changed#2e7366
invalid#e62282underline italic
invalid.deprecated#000000bfunderline italic
entity.name.filename#8a6a00
markup.error#e62282
markup.underlineunderline
markup.bold#2e7366bold
markup.heading#008c47bold
markup.italic#8a6a00italic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#009933
markup.inline.raw, markup.raw.restructuredtext#0039e6
markup.underline.link, markup.underline.link.image#009933
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#e62282
entity.name.directive.restructuredtext, markup.quote#8a6a00italic
meta.separator.markdown#00000080
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#0039e6
punctuation.definition.constant.restructuredtext#008c47
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#008c47
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end#000000bf
markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end#8a6a00
entity.name.type.class, entity.name.class#009933normal
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#008c47italic
entity.other.inherited-class#009933italic
comment, punctuation.definition.comment, unused.comment, wildcard.comment#00000080
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#e62282
comment.block.documentation entity.name.type#009933italic
comment.block.documentation entity.name.type punctuation.definition.bracket#009933
comment.block.documentation variable#2e7366italic
constant, variable.other.constant#008c47
constant.character.escape, constant.character.string.escape, constant.regexp#e62282
entity.name.tag#e62282
entity.other.attribute-name.parent-selector#e62282
entity.other.attribute-name#0039e6italic
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#0039e6
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#2e7366italic
meta.decorator variable.other.readwrite, meta.decorator variable.other.property#0039e6italic
meta.decorator variable.other.object#0039e6
keyword, punctuation.definition.keyword#e62282
keyword.control.new, keyword.operator.newbold
meta.selector#e62282
support#009933italic
support.function.magic, support.variable, variable.other.predefined#008c47regular
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#0a7a8c
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#000000bf
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#e62282
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#009933
constant.other.date, constant.other.timestamp#2e7366
variable.other.alias.yaml#0039e6italic underline
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def#e62282regular
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#009933italic
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#2e7366
storage.modifier#e62282
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#8a6a00
punctuation.definition.group.capture.regexp#e62282
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#bd1fcc
punctuation.definition.character-class.regexp#009933
punctuation.definition.group.regexp#2e7366
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#bd1fcc
meta.assertion.look-ahead.regexp#0039e6
string#8a6a00
punctuation.definition.string.begin, punctuation.definition.string.end#7a7a00
punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#0a7a8c
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#00000080
variable, constant.other.key.perl, support.variable.property, variable.other.constant.js, variable.other.constant.ts, variable.other.constant.tsx#000000bf
meta.import variable.other.readwrite, meta.variable.assignment.destructured.object.coffee variable#2e7366italic
meta.import variable.other.readwrite.alias, meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable#000000bfnormal
meta.selectionset.graphql variable#8a6a00
meta.selectionset.graphql meta.arguments variable#000000bf
entity.name.fragment.graphql, variable.fragment.graphql#009933
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#000000bf
source.shell variable.other#008c47
support.constant#008c47normal
meta.scope.prerequisites.makefile#8a6a00
meta.attribute-selector.scss#8a6a00
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss#000000bf
meta.preprocessor.haskell#00000080
log.error#e62282bold
log.warning#8a6a00bold
entity.name.type.enum.cs, variable.other.readwrite.cs, entity.name.variable.parameter.cs, variable.other.constant.gdscript, variable.parameter.function.language.gdscript#000000bf
keyword.type.void.cs, storage.modifier.public.cs, storage.modifier.const.cs, storage.modifier.override.cs, keyword.other.directive.using.cs, storage.modifier.async.cs, storage.type.delegate.cs, storage.modifier.partial.cs, entity.name.type.class.cs, storage.type.class.cs, constant.language, constant.language.null.cs, constant.language.boolean.true.cs, constant.language.boolean.false.cs, variable.language.this.cs, keyword.operator.expression.pattern.combinator.and.cs, keyword.operator.expression.pattern.combinator.or.cs, keyword.operator.expression.pattern.is.cs, constant.language.boolean.gdscript, storage.type.function.gdscript, entity.other.inherited-class.gdscript, keyword.control.in.gdscript, variable.language.gdscript, constant.language.gdscript, keyword.operator.wordlike.gdscript, storage.type.is.gdscript#e62282
keyword.control.loop.for.cs, keyword.control.loop.while.cs, keyword.control.flow.return.cs, keyword.control.conditional.if.cs, keyword.control.flow.gdscript, keyword.control.gdscript#bd1fcc
keyword.type.int.cs, keyword.type.float.cs, keyword.type.double.cs, keyword.type.bool.cs, keyword.type.void.cs, keyword.language.gdscript, meta.variable.declaration.gdscript, entity.name.type.variable.gdscript#009933
entity.name.type.cs, entity.name.type.class.cs, entity.name.type.interface.cs, entity.name.type.namespace.cs, entity.name.type.struct.cs, variable.other.object.cs, entity.name.type.class.gdscript#2e7366
entity.name.function.cs, entity.name.function.gdscript#0039e6
punctuation.curlybrace.close.cs, punctuation.curlybrace.open.cs, punctuation.parenthesis.close.cs, punctuation.parenthesis.open.cs, punctuation.terminator.statement.cs, keyword.operator.arithmetic.cs, keyword.operator.assignment.cs, keyword.operator.assignment.compound.cs, keyword.operator.increment.cs, keyword.operator.decrement.cs, keyword.operator.relational.cs, keyword.operator.comparison.cs, punctuation.squarebracket.close.cs, punctuation.squarebracket.open.cs, keyword.operator, keyword.operator.arithmetic.gdscript, keyword.operator.assignment.gdscript, keyword.operator.assignment.compound.gdscript, keyword.operator.increment.gdscript, keyword.operator.decrement.gdscript, keyword.operator.relational.gdscript, keyword.operator.comparison.gdscript, punctuation.definition.parameters.begin.gdscript, punctuation.definition.parameters.end.gdscript, punctuation.definition.arguments.begin.gdscript, punctuation.definition.arguments.end.gdscript, punctuation.separator.annotation.gdscript, punctuation.definition.list.begin.gdscript, punctuation.definition.list.end.gdscript, keyword.operator.boolean.gdscript#00009c
variable.other.object.property.cs, entity.name.type.delegate.cs, variable.other.gdscript, variable.other.property.gdscript#0066ad
comment.block.cs, comment.line.double-slash.cs, punctuation.definition.comment.cs, punctuation.definition.tag.cs, entity.name.tag.localname.cs#00000080
entity.name.function.decorator.gdscript#cc5e00
entity.name.variable.preprocessor.symbol.cs, keyword.preprocessor.endregion.cs, keyword.preprocessor.endif.cs, keyword.preprocessor.elif.cs, keyword.preprocessor.if.cs, keyword.preprocessor.region.cs, keyword.preprocessor.else.cs, punctuation.separator.hash.cs, string.unquoted.preprocessor.message.cs, keyword.language.region.gdscript, keyword.preprocessor.endregion.gdscript, keyword.preprocessor.region.gdscript, punctuation.separator.hash.gdscript, string.unquoted.preprocessor.message.gdscript#7a3d96
constant.character.escape.nodepath.gdscript, keyword.control.flow.nodepath.gdscript#008000
constant.character.escape, meta.literal.nodepath.gdscript#996b00