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.background#1a1a1a
  • activityBar.foreground#7d7d7d
  • activityBar.inactiveForeground#ffffff66
  • activityBarBadge.background#13fba7
  • activityBarBadge.foreground#ffffff
  • badge.background#4d4d4d
  • badge.foreground#ffffff
  • breadcrumb.activeSelectionForeground#e0e0e0
  • breadcrumb.background#1e1e1e
  • breadcrumb.focusForeground#e0e0e0
  • breadcrumb.foreground#cccccccc
  • button.background#13fba7
  • button.foreground#ffffff
  • button.hoverBackground#11c59a
  • button.secondaryBackground#3a3d41
  • button.secondaryForeground#ffffff
  • button.secondaryHoverBackground#45494e
  • checkbox.background#2a2a2a
  • checkbox.border#00000000
  • checkbox.foreground#cccccc
  • debugExceptionWidget.background#333333
  • debugExceptionWidget.border#474747
  • debugToolBar.background#333333
  • debugToolBar.border#474747
  • diffEditor.border#00000000
  • diffEditor.insertedTextBackground#9bb95533
  • diffEditor.insertedTextBorder#00000000
  • diffEditor.removedTextBackground#fd577e26
  • diffEditor.removedTextBorder#00000000
  • dropdown.background#2a2a2a
  • dropdown.border#00000000
  • dropdown.foreground#cccccc
  • editor.background#1e1e1e
  • editor.findMatchBackground#515c6a
  • editor.findMatchBorder#74879f
  • editor.findMatchHighlightBackground#2c343f
  • 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#f9215d1a
  • editorError.border#ffffff00
  • editorError.foreground#f9215d
  • editorGroup.border#444444
  • editorGroup.emptyBackground#1e1e1e
  • editorGroupHeader.tabsBackground#1a1a1a
  • editorGroupHeader.tabsBorder#1a1a1a
  • editorGutter.addedBackground#13fba7
  • editorGutter.background#1e1e1e
  • editorGutter.commentRangeForeground#9aa6b1
  • editorGutter.deletedBackground#13fba7
  • editorGutter.foldingControlForeground#9aa6b1
  • 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#1a1a1a
  • editorMarkerNavigationError.background#f9215d80
  • editorMarkerNavigationInfo.background#21b2f980
  • editorMarkerNavigationWarning.background#f9b92180
  • editorOverviewRuler.background#25252500
  • editorOverviewRuler.border#7f7f7f4d
  • editorRuler.foreground#5a5a5a
  • editorSuggestWidget.background#1a1a1a
  • editorSuggestWidget.border#38374e88
  • editorSuggestWidget.foreground#d4d4d4
  • editorSuggestWidget.highlightForeground#13fba7
  • editorSuggestWidget.selectedBackground#2c343f
  • editorWarning.background#cba8381a
  • editorWarning.border#ffffff00
  • editorWarning.foreground#d9b823
  • editorWhitespace.foreground#e3e4e229
  • editorWidget.background#252526
  • editorWidget.foreground#cccccc
  • editorWidget.resizeBorder#5F5F5F
  • focusBorder#444444
  • foreground#888888
  • 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#888888
  • input.background#2a2a2a
  • input.border#00000000
  • input.foreground#cccccc
  • input.placeholderForeground#a6a6a6
  • inputOption.activeBackground#2c343f
  • inputOption.activeBorder#007acc00
  • inputOption.activeForeground#ffffff
  • list.activeSelectionBackground#ffffff10
  • list.activeSelectionForeground#ffffff
  • list.dropBackground#383b3d
  • list.focusBackground#292929
  • list.focusForeground#cccccc
  • list.highlightForeground#13fba7
  • list.hoverBackground#2a2d2e
  • list.hoverForeground#cccccc
  • list.inactiveSelectionBackground#37373d
  • list.inactiveSelectionForeground#cccccc
  • listFilterWidget.background#431b24
  • listFilterWidget.noMatchesOutline#00000000
  • listFilterWidget.outline#00000000
  • menu.background#252526
  • menu.border#00000085
  • menu.foreground#cccccc
  • menu.selectionBackground#ffffff10
  • 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#f9215d
  • minimap.findMatchHighlight#515c6a
  • minimap.selectionHighlight#264f78
  • minimap.warningHighlight#d9b823
  • minimapGutter.addedBackground#13fba7
  • minimapGutter.deletedBackground#13fba7
  • 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#1a1a1a
  • panel.border#80808059
  • panelSection.border#80808059
  • panelTitle.activeBorder#e7e7e7
  • panelTitle.activeForeground#e7e7e7
  • panelTitle.inactiveForeground#e7e7e799
  • peekView.border#444444
  • peekViewEditor.background#242424
  • peekViewEditor.matchHighlightBackground#ff8f0099
  • peekViewEditor.matchHighlightBorder#ee931e
  • peekViewEditorGutter.background#001f33
  • peekViewResult.background#252526
  • peekViewResult.fileForeground#ffffff
  • peekViewResult.lineForeground#bbbbbb
  • peekViewResult.matchHighlightBackground#ea5c004d
  • peekViewResult.selectionBackground#3399ff33
  • peekViewResult.selectionForeground#ffffff
  • peekViewTitle.background#1e1e1e
  • peekViewTitleDescription.foreground#ccccccb3
  • peekViewTitleLabel.foreground#ffffff
  • pickerGroup.border#363636
  • pickerGroup.foreground#13fba7
  • progressBar.background#13fba7
  • scrollbar.shadow#1f1f1f
  • scrollbarSlider.activeBackground#bfbfbf66
  • scrollbarSlider.background#79797966
  • scrollbarSlider.hoverBackground#646464b3
  • selection.background#13fba7
  • settings.focusedRowBackground#ffffff07
  • settings.headerForeground#888888
  • sideBar.background#252526
  • sideBar.dropBackground#383b3d
  • sideBar.foreground#cccccc
  • sideBarSectionHeader.background#00000000
  • sideBarSectionHeader.border#cccccc33
  • sideBarSectionHeader.foreground#cccccc
  • sideBarTitle.foreground#bbbbbb
  • statusBar.background#1a1a1a
  • statusBar.border#7e7e7e
  • statusBar.debuggingBackground#181c21
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#7e7e7e
  • statusBar.noFolderBackground#181c21
  • statusBar.noFolderForeground#ffffff
  • statusBarItem.activeBackground#FFFFFF25
  • statusBarItem.hoverBackground#ffffff1f
  • statusBarItem.remoteBackground#13fba7
  • statusBarItem.remoteForeground#ffffff
  • tab.activeBackground#1e1e1e
  • tab.activeBorder#13fba7
  • tab.activeBorderTop#00000000
  • tab.activeForeground#ffffff
  • tab.border#252526
  • tab.inactiveBackground#2d2d2d
  • tab.inactiveForeground#ffffff80
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#2472c8
  • terminal.ansiBrightBlack#d466ff
  • terminal.ansiBrightBlue#3b8eea
  • terminal.ansiBrightCyan#29b8db
  • terminal.ansiBrightGreen#23d18b
  • terminal.ansiBrightMagenta#d670d6
  • terminal.ansiBrightRed#f14c4c
  • terminal.ansiBrightWhite#e5e5e5
  • terminal.ansiBrightYellow#ea5d6d
  • terminal.ansiCyan#13FBA7
  • terminal.ansiGreen#0dbc79
  • terminal.ansiMagenta#bc3fbc
  • terminal.ansiRed#cd3131
  • terminal.ansiWhite#e5e5e5
  • terminal.ansiYellow#e5e510
  • terminal.border#80808059
  • terminal.foreground#cccccc
  • terminal.selectionBackground#2c343f
  • terminalCursor.background#101317
  • terminalCursor.foreground#ffffff
  • textLink.foreground#13fba7
  • titleBar.activeBackground#1a1a1a
  • titleBar.activeForeground#cccccc
  • titleBar.border#00000000
  • titleBar.inactiveBackground#252526
  • 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#d466ff
meta.diff, meta.diff.header#7E8392
markup.inserted#13fba7
markup.deleted#ff4b61
markup.changed#ff9960
invalid#ff4b61underline italic
invalid.deprecated#f6f6f4underline italic
entity.name.filename#ffe176
markup.error#ff4b61
markup.underlineunderline
markup.bold#ff9960bold
markup.heading#d466ffbold
markup.italic#ffe176italic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#73F9F1
markup.inline.raw, markup.raw.restructuredtext#13fba7
markup.underline.link, markup.underline.link.image#73F9F1
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#FF5F72
entity.name.directive.restructuredtext, markup.quote#ffe176italic
meta.separator.markdown#7E8392
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#13fba7
punctuation.definition.constant.restructuredtext#d466ff
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#d466ff
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end#f6f6f4
markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end#ffe176
entity.name.type.class, entity.name.class#73F9F1normal
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#d466ffitalic
entity.other.inherited-class#73F9F1italic
comment, punctuation.definition.comment, unused.comment, wildcard.comment#7E8392
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#FF5F72
comment.block.documentation entity.name.type#73F9F1italic
comment.block.documentation entity.name.type punctuation.definition.bracket#73F9F1
comment.block.documentation variable#ff9960italic
constant, variable.other.constant#d466ff
constant.character.escape, constant.character.string.escape, constant.regexp#FF5F72
entity.name.tag#FF5F72
entity.other.attribute-name.parent-selector#FF5F72
entity.other.attribute-name#13fba7italic
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#13fba7
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#ff9960italic
meta.decorator variable.other.readwrite, meta.decorator variable.other.property#13fba7italic
meta.decorator variable.other.object#13fba7
keyword, punctuation.definition.keyword, punctuation.quasi.element, punctuation.accessor#FF5F72
keyword.control.new, keyword.operator.newbold
meta.selector#FF5F72
support#73F9F1italic
support.function.magic, support.variable, variable.other.predefined#d466ffregular
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#FF5F72
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#f6f6f4
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#FF5F72
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#73F9F1
constant.other.date, constant.other.timestamp#ff9960
variable.other.alias.yaml#13fba7italic underline
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def#FF5F72regular
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#73F9F1italic
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#ff9960
storage.modifier#FF5F72
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#ffe176
punctuation.definition.group.capture.regexp#FF5F72
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#ff4b61
punctuation.definition.character-class.regexp#73F9F1
punctuation.definition.group.regexp#ff9960
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#ff4b61
meta.assertion.look-ahead.regexp#13fba7
string#ffe176
punctuation.definition.string.begin, punctuation.definition.string.end#E3EC79
punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#73F9F1
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#7E8392
variable, constant.other.key.perl, support.variable.property#f6f6f4
meta.import variable.other.readwrite, meta.variable.assignment.destructured.object.coffee variable#ff9960italic
meta.import variable.other.readwrite.alias, meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable#f6f6f4normal
meta.selectionset.graphql variable#ffe176
meta.selectionset.graphql meta.arguments variable#f6f6f4
entity.name.fragment.graphql, variable.fragment.graphql#73F9F1
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#f6f6f4
source.shell variable.other#d466ff
support.constant#d466ffnormal
meta.scope.prerequisites.makefile#ffe176
meta.attribute-selector.scss#ffe176
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss#f6f6f4
meta.preprocessor.haskell#7E8392
log.error#ff4b61bold
log.warning#FFEB81bold