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#ef9f94
  • activityBar.background#1a1a26
  • activityBar.foreground#ef9f94
  • activityBar.inactiveForeground#ffffff66
  • activityBarBadge.background#f6e4d5
  • activityBarBadge.foreground#1a1a26
  • badge.background#f6e4d5
  • badge.foreground#1a1a26
  • breadcrumb.activeSelectionForeground#ededed
  • breadcrumb.background#23232f
  • breadcrumb.focusForeground#ededed
  • breadcrumb.foreground#cccccc
  • button.background#ef9f94
  • button.foreground#3a3d41
  • button.hoverBackground#f57f70
  • button.secondaryBackground#1a1a26
  • button.secondaryForeground#3a3d41
  • button.secondaryHoverBackground#45494e
  • debugExceptionWidget.background#23232f
  • debugExceptionWidget.border#454545
  • debugToolBar.background#23232f
  • debugToolBar.border#474747
  • diffEditor.border#444444
  • diffEditor.insertedTextBackground#9bb95533
  • diffEditor.removedTextBackground#ff000033
  • dropdown.background#1a1a26
  • dropdown.border#000000
  • dropdown.foreground#cccccc
  • editor.background#1a1a26
  • editor.findMatchBackground#515c6a
  • editor.findMatchHighlightBackground#3a3d41
  • editor.findRangeHighlightBackground#3a3d4166
  • editor.foldBackground#3a3d41
  • editor.foreground#ededed
  • editor.hoverHighlightBackground#264f7840
  • editor.inactiveSelectionBackground#3a3d416e
  • editor.lineHighlightBackground#ffffff0a
  • editor.lineHighlightBorder#23232f
  • editor.rangeHighlightBackground#ffffff0a
  • editor.selectionBackground#3a3d41
  • editor.selectionHighlightBackground#add6ff26
  • editor.selectionHighlightBorder#b8b8c2
  • editor.wordHighlightBackground#575757b8
  • editor.wordHighlightStrongBackground#b8b8c26e
  • editorBracketHighlight.foreground1#cccccc
  • editorBracketHighlight.foreground2#ef9f94
  • editorBracketHighlight.foreground3#43dece
  • editorBracketHighlight.foreground4#f0b77b
  • editorBracketHighlight.foreground5#c4a6f0
  • editorBracketHighlight.foreground6#7de8a3
  • editorBracketHighlight.unexpectedBracket.foreground#ed765c
  • editorBracketMatch.background#0064001a
  • editorBracketMatch.border#888888
  • editorCodeLens.foreground#999999
  • editorCursor.foreground#b8b8c2
  • editorError.background#B73A3400
  • editorError.border#ffffff00
  • editorError.foreground#f48771
  • editorGroup.border#444444
  • editorGroup.emptyBackground#1a1a26
  • editorGroupHeader.tabsBackground#1a1a26
  • editorGutter.addedBackground#1dc057
  • editorGutter.background#1a1a26
  • editorGutter.deletedBackground#c04b31
  • editorGutter.foldingControlForeground#c5c5c5
  • editorGutter.modifiedBackground#18b8a7
  • editorHoverWidget.background#1a1a26
  • editorHoverWidget.border#454545
  • editorHoverWidget.foreground#cccccc
  • editorIndentGuide.activeBackground#707070
  • editorIndentGuide.background#404040
  • editorInfo.background#4490BF00
  • editorInfo.foreground#75beff
  • editorLineNumber.activeForeground#ef9f94
  • editorLineNumber.foreground#858585
  • editorLink.activeForeground#c4a6f0
  • editorMarkerNavigation.background#23232f
  • editorMarkerNavigationError.background#f48771
  • editorMarkerNavigationInfo.background#75beff
  • editorMarkerNavigationWarning.background#cca700
  • editorOverviewRuler.background#25252500
  • editorOverviewRuler.border#ffffff0a
  • editorOverviewRuler.currentContentForeground#367366
  • editorOverviewRuler.incomingContentForeground#74398f
  • editorRuler.foreground#5a5a5a
  • editorSuggestWidget.background#23232f
  • editorSuggestWidget.border#454545
  • editorSuggestWidget.foreground#cccccc
  • editorSuggestWidget.highlightForeground#ef9f94
  • editorSuggestWidget.selectedBackground#3a3d41
  • editorWarning.background#A9904000
  • editorWarning.border#ffffff00
  • editorWarning.foreground#cca700
  • editorWhitespace.foreground#e3e4e229
  • editorWidget.background#23232f
  • editorWidget.foreground#cccccc
  • editorWidget.resizeBorder#5F5F5F
  • errorForeground#ed765c
  • focusBorder#f6e4d5
  • foreground#cccccc
  • gitDecoration.addedResourceForeground#81b88b
  • gitDecoration.conflictingResourceForeground#6c6cc4
  • gitDecoration.deletedResourceForeground#c74e39
  • gitDecoration.ignoredResourceForeground#8c8c8c
  • gitDecoration.modifiedResourceForeground#e2c08d
  • gitDecoration.stageDeletedResourceForeground#c74e39
  • gitDecoration.stageModifiedResourceForeground#e2c08d
  • gitDecoration.submoduleResourceForeground#8db9e2
  • gitDecoration.untrackedResourceForeground#73c991
  • input.background#1a1a26
  • input.border#000000
  • input.foreground#cccccc
  • input.placeholderForeground#a6a6a6
  • inputOption.activeBorder#007acc00
  • list.activeSelectionBackground#3a3d41
  • list.activeSelectionForeground#ffffff
  • list.dropBackground#3a3d41
  • list.focusBackground#1a1a26
  • list.focusForeground#cccccc
  • list.highlightForeground#ef9f94
  • list.hoverBackground#1a1a26
  • list.hoverForeground#cccccc
  • list.inactiveSelectionBackground#3a3d4174
  • list.inactiveSelectionForeground#cccccc
  • listFilterWidget.background#653723
  • listFilterWidget.noMatchesOutline#be1100
  • listFilterWidget.outline#00000000
  • menu.background#23232f
  • menu.border#00000085
  • menu.foreground#cccccc
  • menu.selectionBackground#3a3d41
  • menu.selectionBorder#00000000
  • menu.selectionForeground#ffffff
  • menu.separatorBackground#bbbbbb
  • merge.commonContentBackground#282828
  • merge.commonHeaderBackground#3a3d41
  • merge.currentContentBackground#27403b
  • merge.currentHeaderBackground#367366
  • merge.incomingContentBackground#43284b
  • merge.incomingHeaderBackground#74398f
  • panel.background#1a1a26
  • panel.border#80808059
  • panelTitle.activeBorder#e7e7e7
  • panelTitle.activeForeground#e7e7e7
  • panelTitle.inactiveForeground#e7e7e799
  • peekView.border#c4a6f0
  • peekViewEditor.background#23232f
  • peekViewEditor.matchHighlightBackground#fb968899
  • peekViewEditor.matchHighlightBorder#ef9f94
  • peekViewEditorGutter.background#23232f
  • peekViewResult.background#1a1a26
  • peekViewResult.fileForeground#ffffff
  • peekViewResult.lineForeground#ededed
  • peekViewResult.matchHighlightBackground#fb96884d
  • peekViewResult.selectionBackground#3a3d41
  • peekViewResult.selectionForeground#ededed
  • peekViewTitle.background#23232f
  • peekViewTitleDescription.foreground#ccccccb3
  • peekViewTitleLabel.foreground#ededed
  • pickerGroup.border#3f3f46
  • pickerGroup.foreground#ef9f94
  • progressBar.background#ef9f94
  • scrollbar.shadow#23232f
  • selection.background#935539
  • settings.focusedRowBackground#ffffff07
  • settings.headerForeground#cccccc
  • sideBar.background#23232f
  • sideBar.dropBackground#3a3d41
  • sideBar.foreground#cccccc
  • sideBarSectionHeader.background#1a1a26
  • sideBarSectionHeader.border#cccccc33
  • sideBarSectionHeader.foreground#c4a6f0
  • sideBarTitle.foreground#ededed
  • statusBar.background#23232f
  • statusBar.border#1a1a26
  • statusBar.debuggingBackground#f0b77b
  • statusBar.debuggingBorder#1a1a26
  • statusBar.debuggingForeground#3a3d41
  • statusBar.foreground#f6e4d5
  • statusBar.noFolderBackground#c4a6f0
  • statusBar.noFolderBorder#1a1a26
  • statusBar.noFolderForeground#3a3d41
  • statusBarItem.activeBackground#FFFFFF25
  • statusBarItem.hoverBackground#ffffff1f
  • statusBarItem.remoteBackground#7de8a3
  • statusBarItem.remoteForeground#3a3d41
  • tab.activeBackground#23232f
  • tab.activeBorder#00000000
  • tab.activeBorderTop#fb968880
  • tab.activeForeground#f6e4d5
  • tab.inactiveBackground#1a1a26
  • tab.inactiveForeground#fbe4d04c
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#3c73b0
  • terminal.ansiBrightBlack#666666
  • terminal.ansiBrightBlue#518fd4
  • terminal.ansiBrightCyan#42a9c2
  • terminal.ansiBrightGreen#3bb986
  • terminal.ansiBrightMagenta#c482c4
  • terminal.ansiBrightRed#de5f5f
  • terminal.ansiBrightWhite#e5e5e5
  • terminal.ansiBrightYellow#e1e157
  • terminal.ansiCyan#279bb7
  • terminal.ansiGreen#21a874
  • terminal.ansiMagenta#a358a3
  • terminal.ansiRed#b44a4a
  • terminal.ansiWhite#e5e5e5
  • terminal.ansiYellow#cccc29
  • terminal.background#1a1a26
  • terminal.foreground#cccccc
  • titleBar.activeBackground#1a1a26
  • titleBar.activeForeground#cccccc
  • titleBar.border#00000000
  • titleBar.inactiveBackground#1e1e2a99
  • titleBar.inactiveForeground#cccccc99
  • walkThrough.embeddedEditorBackground#23232f
  • widget.shadow#0000005c

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasisitalic
strongbold
header#c4a6f0
meta.diff, meta.diff.header#858585
markup.inserted#f0b77b
markup.deleted#ed765c
markup.changed#7de8a3
invalid#ed765cunderline italic
invalid.deprecated#ccccccunderline italic
entity.name.filename#f6e4d5
markup.error#ed765c
markup.underlineunderline
markup.bold#7de8a3bold
markup.heading#c4a6f0bold
markup.italic#f6e4d5italic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#43dece
markup.inline.raw, markup.raw.restructuredtext#f0b77b
markup.underline.link, markup.underline.link.image#43dece
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#ef9f94
entity.name.directive.restructuredtext, markup.quote#f6e4d5italic
meta.separator.markdown#858585
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#f0b77b
punctuation.definition.constant.restructuredtext#c4a6f0
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#c4a6f0
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end#cccccc
markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end#f6e4d5
entity.name.type.class, entity.name.function, entity.name.class#43decenormal
entity.name.function#7de8a3normal
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#43deceitalic
entity.other.inherited-class#43deceitalic
comment, punctuation.definition.comment, unused.comment, wildcard.comment#858585
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#ef9f94
comment.block.documentation entity.name.type#43deceitalic
comment.block.documentation entity.name.type punctuation.definition.bracket#43dece
comment.block.documentation variable#7de8a3italic
constant, variable.other.constant#c4a6f0
constant.character.escape, constant.character.string.escape, constant.regexp#ef9f94
entity.name.tag#ef9f94
entity.other.attribute-name.parent-selector#ef9f94
entity.other.attribute-name#7de8a3italic
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#f0b77b
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#7de8a3italic
meta.decorator variable.other.readwrite, meta.decorator variable.other.property#f0b77bitalic
meta.decorator variable.other.object#f0b77b
keyword, punctuation.definition.keyword#ef9f94
keyword.control.new, keyword.operator.newbold
meta.selector#ef9f94
support#43deceitalic
support.function.magic, support.variable, variable.other.predefined#c4a6f0regular
support.function, support.type.property-name#f6e4d5regular
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#ef9f94
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#cccccc
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#ef9f94
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#43dece
constant.other.date, constant.other.timestamp#7de8a3
variable.other.alias.yaml#f0b77bitalic underline
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def#ef9f94regular
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#43deceitalic
entity.name.type, entity.name.type.interface#c4a6f0italic
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#7de8a3
storage.modifier#ef9f94
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#f6e4d5
punctuation.definition.group.capture.regexp#ef9f94
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#ed765c
punctuation.definition.character-class.regexp#43dece
punctuation.definition.group.regexp#7de8a3
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#ed765c
meta.assertion.look-ahead.regexp#f0b77b
string#f0b77b
punctuation.definition.string.begin, punctuation.definition.string.end#f6e4d5
punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#43dece
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#858585
variable, constant.numeric, constant.other.key.perl, support.variable.property, variable.other.constant.js, variable.other.constant.ts, variable.other.constant.tsx#f6e4d5
constant.numeric#ededed
meta.import variable.other.readwrite, meta.variable.assignment.destructured.object.coffee variable#7de8a3italic
meta.import variable.other.readwrite.alias, meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable#ccccccnormal
meta.selectionset.graphql variable#f6e4d5
meta.selectionset.graphql meta.arguments variable#cccccc
entity.name.fragment.graphql, variable.fragment.graphql#43dece
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#cccccc
source.shell variable.other#c4a6f0
support.constant#c4a6f0normal
meta.scope.prerequisites.makefile#f6e4d5
meta.attribute-selector.scss#f6e4d5
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss#cccccc
meta.preprocessor.haskell#858585
log.error#ed765cbold
log.warning#f6e4d5bold