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#42b883
  • activityBar.background#333333
  • activityBar.foreground#ffffff
  • activityBar.inactiveForeground#ffffff66
  • activityBarBadge.background#42b883
  • activityBarBadge.foreground#ffffff
  • badge.background#4d4d4d
  • badge.foreground#ffffff
  • breadcrumb.activeSelectionForeground#e0e0e0
  • breadcrumb.background#1e1e1e
  • breadcrumb.focusForeground#e0e0e0
  • breadcrumb.foreground#cccccccc
  • button.background#10b981
  • button.foreground#ffffff
  • button.hoverBackground#42b883
  • button.secondaryBackground#3a3d41
  • button.secondaryForeground#ffffff
  • button.secondaryHoverBackground#45494e
  • checkbox.background#3c3c3c
  • checkbox.border#00000000
  • checkbox.foreground#cccccc
  • debugExceptionWidget.background#333333
  • debugExceptionWidget.border#474747
  • debugToolBar.background#333333
  • debugToolBar.border#474747
  • diffEditor.border#444444
  • diffEditor.insertedTextBackground#9bb95533
  • diffEditor.removedTextBackground#ff000033
  • dropdown.background#3c3c3c
  • dropdown.border#00000000
  • dropdown.foreground#cccccc
  • editor.background#1e1e1e
  • editor.findMatchBackground#f7f7f73c
  • editor.findMatchBorder#74879f
  • editor.findMatchHighlightBackground#f7f7f73c
  • editor.findMatchHighlightBorder#ffffff00
  • editor.findRangeHighlightBackground#3a3d4166
  • editor.findRangeHighlightBorder#ffffff00
  • editor.foldBackground#264f784d
  • editor.foreground#d4d4d4
  • editor.hoverHighlightBackground#264f7840
  • editor.inactiveSelectionBackground#3a3d41
  • editor.lineHighlightBackground#ffffff0A
  • editor.lineHighlightBorder#282828
  • editor.rangeHighlightBackground#ffffff0b
  • editor.rangeHighlightBorder#ffffff00
  • editor.selectionBackground#264f78
  • editor.selectionHighlightBackground#add6ff26
  • editor.selectionHighlightBorder#495F77
  • editor.wordHighlightBackground#575757b8
  • editor.wordHighlightStrongBackground#004972b8
  • editorBracketMatch.background#0064001a
  • editorBracketMatch.border#888888
  • editorCodeLens.foreground#999999
  • editorCursor.background#000000
  • editorCursor.foreground#aeafad
  • editorError.background#B73A3400
  • editorError.border#ffffff00
  • editorError.foreground#f48771
  • editorGroup.border#444444
  • editorGroup.emptyBackground#1e1e1e
  • editorGroupHeader.tabsBackground#252526
  • editorGutter.addedBackground#0c805d
  • editorGutter.background#1e1e1e
  • editorGutter.commentRangeForeground#c5c5c5
  • editorGutter.deletedBackground#ee5f5f
  • editorGutter.foldingControlForeground#c5c5c5
  • editorGutter.modifiedBackground#0c7d9d
  • editorHoverWidget.background#252526
  • editorHoverWidget.border#454545
  • editorHoverWidget.foreground#cccccc
  • editorIndentGuide.activeBackground#707070
  • editorIndentGuide.background#404040
  • editorInfo.background#4490BF00
  • editorInfo.border#4490BF00
  • editorInfo.foreground#75beff
  • editorLineNumber.activeForeground#c6c6c6
  • editorLineNumber.foreground#858585
  • editorLink.activeForeground#4e94ce
  • editorMarkerNavigation.background#2d2d30
  • editorMarkerNavigationError.background#f48771
  • editorMarkerNavigationInfo.background#75beff
  • editorMarkerNavigationWarning.background#cca700
  • editorOverviewRuler.background#25252500
  • editorOverviewRuler.border#7f7f7f4d
  • editorRuler.foreground#5a5a5a
  • editorSuggestWidget.background#252526
  • editorSuggestWidget.border#454545
  • editorSuggestWidget.foreground#d4d4d4
  • editorSuggestWidget.highlightForeground#42b883
  • editorSuggestWidget.selectedBackground#f5f5f51a
  • editorWarning.background#A9904000
  • editorWarning.border#ffffff00
  • editorWarning.foreground#34d399
  • editorWhitespace.foreground#e3e4e229
  • editorWidget.background#252526
  • editorWidget.foreground#cccccc
  • editorWidget.resizeBorder#5F5F5F
  • focusBorder#42b883
  • foreground#e5e5e5
  • 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
  • icon.foreground#e5e5e5
  • input.background#3c3c3c
  • input.border#00000000
  • input.foreground#cccccc
  • input.placeholderForeground#a6a6a6
  • inputOption.activeBackground#10b981b3
  • inputOption.activeBorder#007acc00
  • inputOption.activeForeground#ffffff
  • list.activeSelectionBackground#f5f5f51a
  • list.activeSelectionForeground#ffffff
  • list.dropBackground#383b3d
  • list.focusBackground#f5f5f51a
  • list.focusForeground#cccccc
  • list.highlightForeground#42b883
  • list.hoverBackground#2a2d2e
  • list.hoverForeground#cccccc
  • list.inactiveSelectionBackground#37373d
  • list.inactiveSelectionForeground#cccccc
  • listFilterWidget.background#047857
  • listFilterWidget.noMatchesOutline#10b98180
  • listFilterWidget.outline#00000000
  • menu.background#252526
  • menu.border#00000085
  • menu.foreground#cccccc
  • menu.selectionBackground#f5f5f51a
  • menu.selectionBorder#00000000
  • menu.selectionForeground#ffffff
  • menu.separatorBackground#bbbbbb
  • menubar.selectionBackground#ffffff1a
  • menubar.selectionForeground#cccccc
  • merge.commonContentBackground#282828
  • merge.commonHeaderBackground#383838
  • merge.currentContentBackground#27403B
  • merge.currentHeaderBackground#367366
  • merge.incomingContentBackground#28384B
  • merge.incomingHeaderBackground#395F8F
  • minimap.background#1e1e1e
  • minimap.errorHighlight#f48771
  • minimap.findMatchHighlight#f7f7f73c
  • minimap.selectionHighlight#264f78
  • minimap.warningHighlight#34d399
  • minimapGutter.addedBackground#0c805d
  • minimapGutter.deletedBackground#ee5f5f
  • minimapGutter.modifiedBackground#0c7d9d
  • notificationCenter.border#474747
  • notificationCenterHeader.background#303031
  • notificationCenterHeader.foreground#cccccc
  • notifications.background#252526
  • notifications.border#303031
  • notifications.foreground#cccccc
  • notificationsErrorIcon.foreground#f48771
  • notificationsInfoIcon.foreground#75beff
  • notificationsWarningIcon.foreground#cca700
  • notificationToast.border#474747
  • panel.background#1e1e1e
  • panel.border#80808059
  • panelSection.border#80808059
  • panelTitle.activeBorder#e7e7e7
  • panelTitle.activeForeground#e7e7e7
  • panelTitle.inactiveForeground#e7e7e799
  • peekView.border#10b981
  • peekViewEditor.background#f8fafc1a
  • peekViewEditor.matchHighlightBackground#9e86fb66
  • peekViewEditor.matchHighlightBorder#a78bfa
  • peekViewEditorGutter.background252526
  • peekViewResult.background#252526
  • peekViewResult.fileForeground#ffffff
  • peekViewResult.lineForeground#f7f7f7
  • peekViewResult.matchHighlightBackground#d8b4fe4d
  • peekViewResult.selectionBackground#3399ff33
  • peekViewResult.selectionForeground#ffffff
  • peekViewTitle.background#1e1e1e
  • peekViewTitleDescription.foreground#ccccccb3
  • peekViewTitleLabel.foreground#ffffff
  • pickerGroup.border#3f3f46
  • pickerGroup.foreground#42b883
  • progressBar.background#42b883
  • scrollbar.shadow#000000
  • scrollbarSlider.activeBackground#bfbfbf66
  • scrollbarSlider.background#79797966
  • scrollbarSlider.hoverBackground#646464b3
  • selection.background#f8fafc1a
  • settings.focusedRowBackground#ffffff07
  • settings.headerForeground#e5e5e5
  • sideBar.background#252526
  • sideBar.dropBackground#383b3d
  • sideBar.foreground#cccccc
  • sideBarSectionHeader.background#00000000
  • sideBarSectionHeader.border#cccccc33
  • sideBarSectionHeader.foreground#cccccc
  • sideBarTitle.foreground#bbbbbb
  • statusBar.background#007acc
  • statusBar.debuggingBackground#fa5252
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#ffffff
  • statusBar.noFolderBackground#68217a
  • statusBar.noFolderForeground#ffffff
  • statusBarItem.activeBackground#FFFFFF25
  • statusBarItem.hoverBackground#ffffff1f
  • statusBarItem.remoteBackground#16825d
  • statusBarItem.remoteForeground#ffffff
  • tab.activeBackground#1e1e1e
  • tab.activeBorder#00000000
  • tab.activeBorderTop#00000000
  • tab.activeForeground#ffffff
  • tab.border#252526
  • tab.inactiveBackground#2d2d2d
  • tab.inactiveForeground#ffffff80
  • 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#ffc078
  • terminal.ansiCyan#11a8cd
  • terminal.ansiGreen#0dbc79
  • terminal.ansiMagenta#bc3fbc
  • terminal.ansiRed#cd3131
  • terminal.ansiWhite#e5e5e5
  • terminal.ansiYellow#ff922b
  • terminal.border#80808059
  • terminal.foreground#cccccc
  • terminal.selectionBackground#ffffff40
  • terminalCursor.background#0087FF
  • terminalCursor.foreground#ffffff
  • textLink.foreground#34d399
  • titleBar.activeBackground#3c3c3c
  • titleBar.activeForeground#cccccc
  • titleBar.border#00000000
  • titleBar.inactiveBackground#3c3c3c99
  • titleBar.inactiveForeground#cccccc99
  • tree.indentGuidesStroke#585858
  • walkThrough.embeddedEditorBackground#00000050
  • widget.shadow#0000005c

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasisitalic
strongbold
header#A084E8
source#f7f7f7
meta.diff, meta.diff.header#7F848E
markup.inserted#1dcf9a
markup.deleted#E06C75
markup.changed#91B4D5
invalid#E06C75normal
invalid.deprecated#f7f7f7underline italic
entity.name.filename#FED7AA
markup.error#E06C75
markup.underlineunderline
markup.bold#C586C0bold
markup.heading#E0AED0
markup.italic#FA5AA4italic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#74cea4
markup.inline.raw, markup.raw.restructuredtext#1dcf9a
markup.underline.link, markup.underline.link.image#74cea4
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#f783ac
entity.name.directive.restructuredtext, markup.quote#FED7AAitalic
meta.separator.markdown#7F848E
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#1dcf9a
punctuation.definition.constant.restructuredtext#A084E8
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#A084E8
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end#f7f7f7
markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end#FED7AA
entity.name.type.class, entity.name.class#74cea4
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#A084E8italic
entity.other.inherited-class#74cea4italic
comment, punctuation.definition.comment, unused.comment, wildcard.comment#7F848E
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#f783ac
comment.block.documentation entity.name.type#74cea4italic
comment.block.documentation entity.name.type punctuation.definition.bracket#74cea4
comment.block.documentation variable#91B4D5italic
constant, variable.other.constant#A084E8
constant.character.escape, constant.character.string.escape, constant.regexp#f783ac
entity.name.tag#f783ac
entity.other.attribute-name.parent-selector#f783ac
entity.other.attribute-name#1dcf9aitalic
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#1dcf9a
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#91B4D5italic
meta.decorator variable.other.readwrite, meta.decorator variable.other.property#1dcf9aitalic
meta.decorator variable.other.object#1dcf9a
keyword, punctuation.definition.keyword#f783ac
keyword.control.new, keyword.operator.newbold
meta.selector#f783ac
support#74cea4
support.function.magic, support.variable, variable.other.predefined#A084E8
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#f783ac
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#f7f7f7
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#f783ac
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#74cea4
constant.other.date, constant.other.timestamp#91B4D5
variable.other.alias.yaml#1dcf9aitalic underline
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def#f783ac
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#74cea4italic
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#91B4D5
storage.modifier#f783ac
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#fed7aa
punctuation.definition.group.capture.regexp#f783ac
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#E06C75
punctuation.definition.character-class.regexp#74cea4
punctuation.definition.group.regexp#91B4D5
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#E06C75
meta.assertion.look-ahead.regexp#1dcf9a
string#FED7AA
punctuation.definition.string.begin, punctuation.definition.string.end#FED7AA
punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#66d9e8
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#7F848E
variable, constant.other.key.perl, variable.other.constant.js, variable.other.constant.ts, variable.other.constant.tsx#f7f7f7
meta.import variable.other.readwrite, meta.object-binding-pattern-variable variable.object.property, meta.variable.assignment.destructured.object.coffee variable#91B4D5italic
meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable#f7f7f7
meta.selectionset.graphql variable#FED7AA
meta.selectionset.graphql meta.arguments variable#f7f7f7
entity.name.fragment.graphql, variable.fragment.graphql#74cea4
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#f7f7f7
source.shell variable.other#A084E8
support.constant#A084E8
meta.scope.prerequisites.makefile#FED7AA
meta.attribute-selector.scss#FED7AA
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss#f7f7f7
meta.preprocessor.haskell#7F848E
entity.other.attribute-name, entity.name.function, support.type.media-names.css, support.type.property-names.css, entity.other.attribute-name.jsx, entity.other.attribute-name.html, variable.other.class.js#1dcf9a
variable.other.property.js, variable.other.property.tsx, variable.other.property.static.js, JSXNested, variable.other.readwrite.js, punctuation.semi-colon, punctuation.colon, punctuation.definition.tag#f7f7f7
variable.graphql, string, punctuation.definition.string.begin, punctuation.definition.string.end, meta.attribute-selector.scss, meta.attribute-selector.css#EAC394
keyword, storage, constant.length.units.css, source.inside-js.css.styled, constant.numeric.css, punctuation.definition.keyword, entity.name.tag, keyword.other.unit.percentage.css, keyword.other.unit.px.css, keyword.other.unit.rem.css, constant.length.units.css, constant.percentage.units.css, constant.time.units.css, constant.angle.units.css#FA5AA4
constant.numeric.css#D8B4FE
variable.parameter, variable.other.constant, variable.other.constant.ts, variable.other.constant.tsx, support.variable, constant, support.type.property-name.media.css, meta.property-values.css, support.constant#C586C0
support.class.component
variable.other.constant.object, variable.other.object, variable.other.object.ts, variable.other.object.tsx, variable.other.readwrite.shorthandpropertyname.js#A084E8
entity.name.type.parameter#91B4D5
support.constant.important.css, punctuation.important.css, support.function, support.function.css, support.function.transform.css, constant.language.pseudo.css, constant.language.pseudo.prefixed.css, entity.name.function.scss#A084E8
support, entity.name.type, meta.interface.ts, entity.other.inherited-class#66d9e8
meta.import variable.other.readwrite.alias, support.variable.property, variable.other.readwrite.ts, variable.other.readwrite.tsx, variable.other.readwrite.js, entity.name.type.class, variable.other.property.js, variable.other.property.ts, variable.other.property.tsx, variable.scss, storage.modifier.ts, variable.other.property.static.js, string.unquoted.js, meta.object-literal.key#E0AED0
token.info-token#6796E6
token.warn-token#CD9731
token.error-token#E06C75
token.debug-token#B267E6
constant.length.units.css, constant.percentage.units.css, support.type.media-names.css, support.type.property-names.css#9B87FD
meta.paragraph.markdown, text.html.derivative, JSXNested#FBF3E8
support.function#1dcf9a
entity.name.class.js#66d9e8