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#fb9688
  • activityBar.background#151521
  • activityBar.foreground#fb9688
  • activityBar.inactiveForeground#ffffff66
  • activityBarBadge.background#fbe4d0
  • activityBarBadge.foreground#151521
  • badge.background#fbe4d0
  • badge.foreground#151521
  • breadcrumb.activeSelectionForeground#ededed
  • breadcrumb.background#1e1e2a
  • breadcrumb.focusForeground#ededed
  • breadcrumb.foreground#cccccc
  • button.background#fb9688
  • button.foreground#3a3d41
  • button.hoverBackground#f57f70
  • button.secondaryBackground#151521
  • button.secondaryForeground#3a3d41
  • button.secondaryHoverBackground#45494e
  • debugExceptionWidget.background#1e1e2a
  • debugExceptionWidget.border#454545
  • debugToolBar.background#1e1e2a
  • debugToolBar.border#474747
  • diffEditor.border#444444
  • diffEditor.insertedTextBackground#9bb95533
  • diffEditor.removedTextBackground#ff000033
  • dropdown.background#151521
  • dropdown.border#000000
  • dropdown.foreground#cccccc
  • editor.background#151521
  • 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#1e1e2a
  • editor.rangeHighlightBackground#ffffff0a
  • editor.selectionBackground#3a3d41
  • editor.selectionHighlightBackground#add6ff26
  • editor.selectionHighlightBorder#b8b8c2
  • editor.wordHighlightBackground#575757b8
  • editor.wordHighlightStrongBackground#b8b8c26e
  • editorBracketHighlight.foreground1#cccccc
  • editorBracketHighlight.foreground2#fb9688
  • editorBracketHighlight.foreground3#2df4df
  • editorBracketHighlight.foreground4#ffb86c
  • editorBracketHighlight.foreground5#c29cfa
  • editorBracketHighlight.foreground6#6ef79f
  • editorBracketHighlight.unexpectedBracket.foreground#ff6b4a
  • 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#151521
  • editorGroupHeader.tabsBackground#151521
  • editorGutter.addedBackground#1dc057
  • editorGutter.background#151521
  • editorGutter.deletedBackground#c04b31
  • editorGutter.foldingControlForeground#c5c5c5
  • editorGutter.modifiedBackground#18b8a7
  • editorHoverWidget.background#151521
  • editorHoverWidget.border#454545
  • editorHoverWidget.foreground#cccccc
  • editorIndentGuide.activeBackground#707070
  • editorIndentGuide.background#404040
  • editorInfo.background#4490BF00
  • editorInfo.foreground#75beff
  • editorLineNumber.activeForeground#fb9688
  • editorLineNumber.foreground#858585
  • editorLink.activeForeground#c29cfa
  • editorMarkerNavigation.background#1e1e2a
  • 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#1e1e2a
  • editorSuggestWidget.border#454545
  • editorSuggestWidget.foreground#cccccc
  • editorSuggestWidget.highlightForeground#fb9688
  • editorSuggestWidget.selectedBackground#3a3d41
  • editorWarning.background#A9904000
  • editorWarning.border#ffffff00
  • editorWarning.foreground#cca700
  • editorWhitespace.foreground#e3e4e229
  • editorWidget.background#1e1e2a
  • editorWidget.foreground#cccccc
  • editorWidget.resizeBorder#5F5F5F
  • errorForeground#ff6b4a
  • focusBorder#fbe4d0
  • 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#151521
  • input.border#000000
  • input.foreground#cccccc
  • input.placeholderForeground#a6a6a6
  • inputOption.activeBorder#007acc00
  • list.activeSelectionBackground#3a3d41
  • list.activeSelectionForeground#ffffff
  • list.dropBackground#3a3d41
  • list.focusBackground#151521
  • list.focusForeground#cccccc
  • list.highlightForeground#fb9688
  • list.hoverBackground#151521
  • list.hoverForeground#cccccc
  • list.inactiveSelectionBackground#3a3d4174
  • list.inactiveSelectionForeground#cccccc
  • listFilterWidget.background#653723
  • listFilterWidget.noMatchesOutline#be1100
  • listFilterWidget.outline#00000000
  • menu.background#1e1e2a
  • 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#151521
  • panel.border#80808059
  • panelTitle.activeBorder#e7e7e7
  • panelTitle.activeForeground#e7e7e7
  • panelTitle.inactiveForeground#e7e7e799
  • peekView.border#c29cfa
  • peekViewEditor.background#1e1e2a
  • peekViewEditor.matchHighlightBackground#fb968899
  • peekViewEditor.matchHighlightBorder#fb9688
  • peekViewEditorGutter.background#1e1e2a
  • peekViewResult.background#151521
  • peekViewResult.fileForeground#ffffff
  • peekViewResult.lineForeground#ededed
  • peekViewResult.matchHighlightBackground#fb96884d
  • peekViewResult.selectionBackground#3a3d41
  • peekViewResult.selectionForeground#ededed
  • peekViewTitle.background#1e1e2a
  • peekViewTitleDescription.foreground#ccccccb3
  • peekViewTitleLabel.foreground#ededed
  • pickerGroup.border#3f3f46
  • pickerGroup.foreground#fb9688
  • progressBar.background#fb9688
  • scrollbar.shadow#1e1e2a
  • selection.background#a74d25
  • settings.focusedRowBackground#ffffff07
  • settings.headerForeground#cccccc
  • sideBar.background#1e1e2a
  • sideBar.dropBackground#3a3d41
  • sideBar.foreground#cccccc
  • sideBarSectionHeader.background#151521
  • sideBarSectionHeader.border#cccccc33
  • sideBarSectionHeader.foreground#c29cfa
  • sideBarTitle.foreground#ededed
  • statusBar.background#1e1e2a
  • statusBar.border#151521
  • statusBar.debuggingBackground#ffb86c
  • statusBar.debuggingBorder#151521
  • statusBar.debuggingForeground#3a3d41
  • statusBar.foreground#fbe4d0
  • statusBar.noFolderBackground#c29cfa
  • statusBar.noFolderBorder#151521
  • statusBar.noFolderForeground#3a3d41
  • statusBarItem.activeBackground#FFFFFF25
  • statusBarItem.hoverBackground#ffffff1f
  • statusBarItem.remoteBackground#6ef79f
  • statusBarItem.remoteForeground#3a3d41
  • tab.activeBackground#1e1e2a
  • tab.activeBorder#00000000
  • tab.activeBorderTop#fb968880
  • tab.activeForeground#fbe4d0
  • tab.inactiveBackground#151521
  • tab.inactiveForeground#fbe4d04c
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#2472c8
  • terminal.ansiBrightBlack#666666
  • terminal.ansiBrightBlue#3b8eea
  • terminal.ansiBrightCyan#29b8db
  • terminal.ansiBrightGreen#23d18b
  • terminal.ansiBrightMagenta#d670d6
  • terminal.ansiBrightRed#f14c4c
  • terminal.ansiBrightWhite#e5e5e5
  • terminal.ansiBrightYellow#f5f543
  • terminal.ansiCyan#11a8cd
  • terminal.ansiGreen#0dbc79
  • terminal.ansiMagenta#bc3fbc
  • terminal.ansiRed#cd3131
  • terminal.ansiWhite#e5e5e5
  • terminal.ansiYellow#e5e510
  • terminal.background#151521
  • terminal.foreground#cccccc
  • titleBar.activeBackground#151521
  • titleBar.activeForeground#cccccc
  • titleBar.border#00000000
  • titleBar.inactiveBackground#1e1e2a99
  • titleBar.inactiveForeground#cccccc99
  • walkThrough.embeddedEditorBackground#1e1e2a
  • widget.shadow#0000005c

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasisitalic
strongbold
header#c29cfa
meta.diff, meta.diff.header#858585
markup.inserted#ffb86c
markup.deleted#ff6b4a
markup.changed#6ef79f
invalid#ff6b4aunderline italic
invalid.deprecated#ccccccunderline italic
entity.name.filename#fbe4d0
markup.error#ff6b4a
markup.underlineunderline
markup.bold#6ef79fbold
markup.heading#c29cfabold
markup.italic#fbe4d0italic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#2df4df
markup.inline.raw, markup.raw.restructuredtext#ffb86c
markup.underline.link, markup.underline.link.image#2df4df
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#fb9688
entity.name.directive.restructuredtext, markup.quote#fbe4d0italic
meta.separator.markdown#858585
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#ffb86c
punctuation.definition.constant.restructuredtext#c29cfa
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#c29cfa
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#fbe4d0
entity.name.type.class, entity.name.function, entity.name.class#2df4dfnormal
entity.name.function#6ef79fnormal
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#2df4dfitalic
entity.other.inherited-class#2df4dfitalic
comment, punctuation.definition.comment, unused.comment, wildcard.comment#858585
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#fb9688
comment.block.documentation entity.name.type#2df4dfitalic
comment.block.documentation entity.name.type punctuation.definition.bracket#2df4df
comment.block.documentation variable#6ef79fitalic
constant, variable.other.constant#c29cfa
constant.character.escape, constant.character.string.escape, constant.regexp#fb9688
entity.name.tag#fb9688
entity.other.attribute-name.parent-selector#fb9688
entity.other.attribute-name#6ef79fitalic
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#ffb86c
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#6ef79fitalic
meta.decorator variable.other.readwrite, meta.decorator variable.other.property#ffb86citalic
meta.decorator variable.other.object#ffb86c
keyword, punctuation.definition.keyword#fb9688
keyword.control.new, keyword.operator.newbold
meta.selector#fb9688
support#2df4dfitalic
support.function.magic, support.variable, variable.other.predefined#c29cfaregular
support.function, support.type.property-name#fbe4d0regular
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#fb9688
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#fb9688
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#2df4df
constant.other.date, constant.other.timestamp#6ef79f
variable.other.alias.yaml#ffb86citalic underline
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def#fb9688regular
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#2df4dfitalic
entity.name.type, entity.name.type.interface#c29cfaitalic
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#6ef79f
storage.modifier#fb9688
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#fbe4d0
punctuation.definition.group.capture.regexp#fb9688
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#ff6b4a
punctuation.definition.character-class.regexp#2df4df
punctuation.definition.group.regexp#6ef79f
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#ff6b4a
meta.assertion.look-ahead.regexp#ffb86c
string#ffb86c
punctuation.definition.string.begin, punctuation.definition.string.end#fbe4d0
punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#2df4df
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#fbe4d0
constant.numeric#ededed
meta.import variable.other.readwrite, meta.variable.assignment.destructured.object.coffee variable#6ef79fitalic
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#fbe4d0
meta.selectionset.graphql meta.arguments variable#cccccc
entity.name.fragment.graphql, variable.fragment.graphql#2df4df
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#c29cfa
support.constant#c29cfanormal
meta.scope.prerequisites.makefile#fbe4d0
meta.attribute-selector.scss#fbe4d0
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss#cccccc
meta.preprocessor.haskell#858585
log.error#ff6b4abold
log.warning#fbe4d0bold