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#3d3d3d
  • activityBar.activeBorder#70bafa
  • activityBar.background#1e1e1e
  • activityBar.foreground#ffffffbf
  • activityBar.inactiveForeground#ffffff80
  • activityBarBadge.background#70bafa
  • activityBarBadge.foreground#ffffffbf
  • badge.background#3d3d3d
  • badge.foreground#ffffffbf
  • breadcrumb.activeSelectionForeground#ffffffbf
  • breadcrumb.background#3d3d3d
  • breadcrumb.focusForeground#ffffffbf
  • breadcrumb.foreground#72757A
  • breadcrumbPicker.background#2e2e2e
  • button.background#626262
  • button.foreground#ffffffbf
  • button.secondaryBackground#626262
  • button.secondaryForeground#ffffffbf
  • commandCenter.activeBackground#3d3d3d
  • commandCenter.activeBorder#3d3d3d
  • commandCenter.activeForeground#ffffffbf
  • commandCenter.background#1e1e1e
  • commandCenter.border#3d3d3d
  • commandCenter.foreground#ffffffbf
  • commandCenter.inactiveBorder#3d3d3d
  • commandCenter.inactiveForeground#ffffffbf
  • debugToolBar.background#3d3d3d
  • diffEditor.insertedTextBackground#57b3ff20
  • diffEditor.removedTextBackground#ff708550
  • dropdown.background#1e1e1e
  • dropdown.border#1e1e1e
  • dropdown.foreground#ffffffbf
  • editor.background#272727
  • editor.findMatchBackground#c7ffed80
  • editor.findMatchHighlightBackground#ffffff40
  • editor.findRangeHighlightBackground#7e7e7e
  • editor.foldBackground#3d3d3d80
  • editor.foreground#ffffffbf
  • editor.hoverHighlightBackground#ffffff12
  • editor.lineHighlightBackground#ffffff12
  • editor.rangeHighlightBackground#a1ffe015
  • editor.selectionBackground#70bafa66
  • editor.selectionHighlightBackground#424450
  • editor.snippetFinalTabstopHighlightBackground#272727
  • editor.snippetFinalTabstopHighlightBorder#57b3ff
  • editor.snippetTabstopHighlightBackground#272727
  • editor.snippetTabstopHighlightBorder#ffffff80
  • editor.wordHighlightBackground#ffffff12
  • editor.wordHighlightStrongBackground#57b3ff50
  • editorBracketHighlight.foreground1#abc9ff
  • editorBracketHighlight.foreground2#abc9ff
  • editorBracketHighlight.foreground3#abc9ff
  • editorBracketHighlight.foreground4#abc9ff
  • editorBracketHighlight.foreground5#abc9ff
  • editorBracketHighlight.foreground6#abc9ff
  • editorBracketHighlight.unexpectedBracket.foreground#ff7085
  • editorCodeLens.foreground#ffffff80
  • editorError.foreground#ff7085
  • editorGroup.border#2e2e2e
  • editorGroup.dropBackground#3d3d3d70
  • editorGroupHeader.tabsBackground#1e1e1e
  • editorGutter.addedBackground#57b3ff80
  • editorGutter.deletedBackground#ff708580
  • editorGutter.modifiedBackground#42ffc280
  • editorHoverWidget.background#272727
  • editorHoverWidget.border#ffffff80
  • editorIndentGuide.background1#3B4352
  • editorIndentGuide.background2#3B4352
  • editorIndentGuide.background3#3B4352
  • editorIndentGuide.background4#3B4352
  • editorIndentGuide.background5#3B4352
  • editorIndentGuide.background6#3B4352
  • editorLineNumber.foreground#A7C1AA
  • editorLink.activeForeground#42ffc2
  • editorMarkerNavigation.background#3d3d3d
  • editorOverviewRuler.addedForeground#57b3ff80
  • editorOverviewRuler.border#2e2e2e
  • editorOverviewRuler.currentContentForeground#57b3ff
  • editorOverviewRuler.deletedForeground#ff708580
  • editorOverviewRuler.errorForeground#ff708580
  • editorOverviewRuler.incomingContentForeground#a1ffe0
  • editorOverviewRuler.infoForeground#42ffc280
  • editorOverviewRuler.modifiedForeground#42ffc280
  • editorOverviewRuler.selectionHighlightForeground#c7ffed
  • editorOverviewRuler.warningForeground#c7ffed80
  • editorOverviewRuler.wordHighlightForeground#42ffc2
  • editorOverviewRuler.wordHighlightStrongForeground#57b3ff
  • editorRuler.foreground#ffffff1A
  • editorSuggestWidget.background#3d3d3d
  • editorSuggestWidget.foreground#ffffffbf
  • editorSuggestWidget.selectedBackground#3d3d3d
  • editorWarning.foreground#FADF79
  • editorWhitespace.foreground#ffffff1A
  • editorWidget.background#3d3d3d
  • errorForeground#ff7085
  • extensionButton.prominentBackground#57b3ff90
  • extensionButton.prominentForeground#ffffffbf
  • extensionButton.prominentHoverBackground#57b3ff60
  • focusBorder#00000000
  • foreground#ffffffbf
  • gitDecoration.conflictingResourceForeground#c7ffed
  • gitDecoration.deletedResourceForeground#ff7085
  • gitDecoration.ignoredResourceForeground#ffffff80
  • gitDecoration.modifiedResourceForeground#ffeda1
  • gitDecoration.untrackedResourceForeground#42ffc2
  • input.background#2a2a2a
  • input.border#2e2e2e
  • input.foreground#ffffffbf
  • input.placeholderForeground#ffffff80
  • inputOption.activeBorder#70bafa
  • inputValidation.errorBorder#ff7085
  • inputValidation.infoBorder#ff7085
  • inputValidation.warningBorder#c7ffed
  • list.activeSelectionBackground#70bafa46
  • list.activeSelectionForeground#ffffffbf
  • list.dropBackground#3d3d3d
  • list.errorForeground#ff7085
  • list.focusBackground#70bafa46
  • list.highlightForeground#42ffc2
  • list.hoverBackground#ffffff40
  • list.hoverForeground#ffffffbf
  • list.inactiveSelectionBackground#ffffff40
  • list.warningForeground#c7ffed
  • listFilterWidget.background#343746
  • listFilterWidget.noMatchesOutline#ff7085
  • listFilterWidget.outline#424450
  • merge.currentHeaderBackground#57b3ff90
  • merge.incomingHeaderBackground#a1ffe090
  • panel.background#272727
  • panel.border#1e1e1e
  • panelTitle.activeBorder#70bafa
  • panelTitle.activeForeground#ffffffbf
  • panelTitle.inactiveForeground#ffffff80
  • peekView.border#3d3d3d
  • peekViewEditor.background#272727
  • peekViewEditor.matchHighlightBackground#F9ECA880
  • peekViewResult.background#3d3d3d
  • peekViewResult.fileForeground#ffffffbf
  • peekViewResult.lineForeground#ffffffbf
  • peekViewResult.matchHighlightBackground#F9ECA880
  • peekViewResult.selectionBackground#3d3d3d
  • peekViewResult.selectionForeground#ffffffbf
  • peekViewTitle.background#2e2e2e
  • peekViewTitleDescription.foreground#ffffff80
  • peekViewTitleLabel.foreground#ffffffbf
  • pickerGroup.border#70bafa
  • pickerGroup.foreground#70bafa
  • progressBar.background#ff7085
  • scrollbar.shadow#1e1e1e
  • selection.background#70bafa66
  • settings.checkboxBackground#3d3d3d
  • settings.checkboxBorder#2e2e2e
  • settings.checkboxForeground#ffffffbf
  • settings.dropdownBackground#3d3d3d
  • settings.dropdownBorder#2e2e2e
  • settings.dropdownForeground#ffffffbf
  • settings.headerForeground#ffffffbf
  • settings.modifiedItemIndicator#c7ffed
  • settings.numberInputBackground#3d3d3d
  • settings.numberInputBorder#2e2e2e
  • settings.numberInputForeground#ffffffbf
  • settings.textInputBackground#3d3d3d
  • settings.textInputBorder#2e2e2e
  • settings.textInputForeground#ffffffbf
  • sideBar.background#3d3d3d
  • sideBar.border#1e1e1e
  • sideBar.foreground#ffffffbf
  • sideBarSectionHeader.background#555555
  • statusBar.background#3d3d3d
  • statusBar.border#1e1e1e
  • statusBar.debuggingBackground#70bafa
  • statusBar.debuggingForeground#ffffffbf
  • statusBar.focusBorder#1e1e1e
  • statusBar.foreground#ffffffbf
  • statusBar.noFolderBackground#2e2e2e
  • statusBar.noFolderForeground#ffffffbf
  • statusBarItem.prominentBackground#3d3d3d
  • statusBarItem.prominentHoverBackground#70bafa
  • statusBarItem.remoteBackground#a1ffe0
  • statusBarItem.remoteForeground#272727
  • tab.activeBackground#3d3d3d
  • tab.activeForeground#ffffffbf
  • tab.border#1e1e1e
  • tab.inactiveBackground#1e1e1e
  • tab.inactiveForeground#ffffff80
  • terminal.ansiBlack#3d3d3d
  • terminal.ansiBlue#a1ffe0
  • terminal.ansiBrightBlack#ffffff80
  • terminal.ansiBrightBlue#abc9ff
  • terminal.ansiBrightCyan#57b3ff
  • terminal.ansiBrightGreen#42ffc2
  • terminal.ansiBrightMagenta#ff7085
  • terminal.ansiBrightRed#ff7085
  • terminal.ansiBrightWhite#ffffffbf
  • terminal.ansiBrightYellow#F9ECA8
  • terminal.ansiCyan#42ffc2
  • terminal.ansiGreen#57b3ff
  • terminal.ansiMagenta#ff7085
  • terminal.ansiRed#ff7085
  • terminal.ansiWhite#ffffffbf
  • terminal.ansiYellow#F9ECA8
  • terminal.background#272727
  • terminal.foreground#ffffffbf
  • titleBar.activeBackground#1e1e1e
  • titleBar.activeForeground#ffffffbf
  • titleBar.inactiveBackground#1e1e1e
  • titleBar.inactiveForeground#ffffff80
  • walkThrough.embeddedEditorBackground#3d3d3d

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasis—italic
strong—bold
header#a1ffe0—
meta.diff, meta.diff.header#ffffff80—
markup.inserted#57b3ff—
markup.deleted#ff7085—
markup.changed#c7ffed—
invalid#ff7085underline italic
invalid.deprecated#ffffffbfunderline italic
entity.name.filename#F9ECA8—
markup.error#ff7085—
markup.underline—underline
markup.bold#c7ffedbold
markup.heading#a1ffe0bold
markup.italic#F9ECA8italic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#42ffc2—
markup.inline.raw, markup.raw.restructuredtext#57b3ff—
markup.underline.link, markup.underline.link.image#42ffc2—
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#ff7085—
entity.name.directive.restructuredtext, markup.quote#F9ECA8italic
meta.separator.markdown#ffffff80—
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#57b3ff—
punctuation.definition.constant.restructuredtext#a1ffe0—
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#a1ffe0—
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end#ffffffbf—
markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end#F9ECA8—
entity.name.type.class, entity.name.class#42ffc2normal
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#a1ffe0italic
entity.other.inherited-class#42ffc2italic
comment, punctuation.definition.comment, unused.comment, wildcard.comment#ffffff80—
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#ff7085—
comment.block.documentation entity.name.type#42ffc2italic
comment.block.documentation entity.name.type punctuation.definition.bracket#42ffc2—
comment.block.documentation variable#c7ffeditalic
constant, variable.other.constant#a1ffe0—
constant.character.escape, constant.character.string.escape, constant.regexp#ff7085—
entity.name.tag#ff7085—
entity.other.attribute-name.parent-selector#ff7085—
entity.other.attribute-name#57b3ffitalic
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#57b3ff—
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#c7ffeditalic
meta.decorator variable.other.readwrite, meta.decorator variable.other.property#57b3ffitalic
meta.decorator variable.other.object#57b3ff—
keyword, punctuation.definition.keyword#ff7085—
keyword.control.new, keyword.operator.new—bold
meta.selector#ff7085—
support#42ffc2italic
support.function.magic, support.variable, variable.other.predefined#a1ffe0regular
support.function, support.type.property-name—regular
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#79edff—
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#ffffffbf—
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#ff7085—
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#42ffc2—
constant.other.date, constant.other.timestamp#c7ffed—
variable.other.alias.yaml#57b3ffitalic underline
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def#ff7085regular
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#42ffc2italic
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#c7ffed—
storage.modifier#ff7085—
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#F9ECA8—
punctuation.definition.group.capture.regexp#ff7085—
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#ff8ccc—
punctuation.definition.character-class.regexp#42ffc2—
punctuation.definition.group.regexp#c7ffed—
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#ff8ccc—
meta.assertion.look-ahead.regexp#57b3ff—
string#F9ECA8—
punctuation.definition.string.begin, punctuation.definition.string.end#E9F284—
punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#8BE9FE—
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#ffffff80—
variable, constant.other.key.perl, support.variable.property, variable.other.constant.js, variable.other.constant.ts, variable.other.constant.tsx#ffffffbf—
meta.import variable.other.readwrite, meta.variable.assignment.destructured.object.coffee variable#c7ffeditalic
meta.import variable.other.readwrite.alias, meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable#ffffffbfnormal
meta.selectionset.graphql variable#F9ECA8—
meta.selectionset.graphql meta.arguments variable#ffffffbf—
entity.name.fragment.graphql, variable.fragment.graphql#42ffc2—
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#ffffffbf—
source.shell variable.other#a1ffe0—
support.constant#a1ffe0normal
meta.scope.prerequisites.makefile#F9ECA8—
meta.attribute-selector.scss#F9ECA8—
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss#ffffffbf—
meta.preprocessor.haskell#ffffff80—
log.error#ff7085bold
log.warning#F9ECA8bold
entity.name.type.enum.cs, variable.other.readwrite.cs, entity.name.variable.parameter.cs, variable.other.constant.gdscript, variable.parameter.function.language.gdscript#ffffffbf
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#ff7085
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#ff8ccc
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#42ffc2
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#c7ffed
entity.name.function.cs, entity.name.function.gdscript#57b3ff
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#abc9ff
variable.other.object.property.cs, entity.name.type.delegate.cs, variable.other.gdscript, variable.other.property.gdscript#bce0ff
comment.block.cs, comment.line.double-slash.cs, punctuation.definition.comment.cs, punctuation.definition.tag.cs, entity.name.tag.localname.cs#ffffff80
entity.name.function.decorator.gdscript#ffb373
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#ad75c4
constant.character.escape.nodepath.gdscript, keyword.control.flow.nodepath.gdscript#63c259
constant.character.escape, meta.literal.nodepath.gdscript#ffeda1