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#0081ff10
  • activityBar.activeBorder#bc00ca80
  • activityBar.background#000000
  • activityBar.foreground#a1a1a1
  • activityBar.inactiveForeground#6e6e6e
  • activityBarBadge.background#bc00ca
  • activityBarBadge.foreground#000000
  • badge.background#000000
  • badge.foreground#a1a1a1
  • breadcrumb.activeSelectionForeground#a1a1a1
  • breadcrumb.background#000000
  • breadcrumb.focusForeground#a1a1a1
  • breadcrumb.foreground#6e6e6e
  • breadcrumbPicker.background#1c1c1c
  • button.background#383838
  • button.foreground#a1a1a1
  • checkbox.background#383838
  • checkbox.border#1c1c1c
  • checkbox.foreground#a1a1a1
  • contrastBorder#1c1c1c
  • debugToolBar.background#383838
  • diffEditor.insertedTextBackground#008b0020
  • diffEditor.removedTextBackground#9f000050
  • dropdown.background#000000
  • dropdown.border#1c1c1c
  • dropdown.foreground#a1a1a1
  • editor.background#000000
  • editor.findMatchBackground#ffcf0080
  • editor.findMatchHighlightBackground#ffffff40
  • editor.findRangeHighlightBackground#55555575
  • editor.foldBackground#383838
  • editor.foreground#a1a1a1
  • editor.hoverHighlightBackground#1c1c1c
  • editor.lineHighlightBorder#000000
  • editor.rangeHighlightBackground#0081ff15
  • editor.selectionBackground#000000
  • editor.selectionHighlightBackground#000000
  • editor.snippetFinalTabstopHighlightBackground#000000
  • editor.snippetFinalTabstopHighlightBorder#008b00
  • editor.snippetTabstopHighlightBackground#000000
  • editor.snippetTabstopHighlightBorder#6e6e6e
  • editor.wordHighlightBackground#008b8b50
  • editor.wordHighlightStrongBackground#008b0050
  • editorCodeLens.foreground#6e6e6e
  • editorError.foreground#9f0000
  • editorGroup.border#0081ff
  • editorGroup.dropBackground#55555570
  • editorGroupHeader.tabsBackground#1c1c1c
  • editorGutter.addedBackground#008b0080
  • editorGutter.deletedBackground#9f000080
  • editorGutter.modifiedBackground#008b8b80
  • editorHoverWidget.background#000000
  • editorHoverWidget.border#6e6e6e
  • editorIndentGuide.activeBackground#ffffff45
  • editorIndentGuide.background#ffffff1A
  • editorLineNumber.foreground#6e6e6e
  • editorLink.activeForeground#008b8b
  • editorMarkerNavigation.background#383838
  • editorOverviewRuler.addedForeground#008b0080
  • editorOverviewRuler.border#1c1c1c
  • editorOverviewRuler.currentContentForeground#008b00
  • editorOverviewRuler.deletedForeground#9f000080
  • editorOverviewRuler.errorForeground#9f000080
  • editorOverviewRuler.incomingContentForeground#0081ff
  • editorOverviewRuler.infoForeground#008b8b80
  • editorOverviewRuler.modifiedForeground#008b8b80
  • editorOverviewRuler.selectionHighlightForeground#ffcf00
  • editorOverviewRuler.warningForeground#ffcf0080
  • editorOverviewRuler.wordHighlightForeground#008b8b
  • editorOverviewRuler.wordHighlightStrongForeground#008b00
  • editorRuler.foreground#ffffff1A
  • editorSuggestWidget.background#383838
  • editorSuggestWidget.foreground#a1a1a1
  • editorSuggestWidget.selectedBackground#000000
  • editorWarning.foreground#ffcf00
  • editorWhitespace.foreground#ffffff1A
  • editorWidget.background#383838
  • errorForeground#9f0000
  • extensionButton.prominentBackground#008b0090
  • extensionButton.prominentForeground#a1a1a1
  • extensionButton.prominentHoverBackground#008b0060
  • focusBorder#6e6e6e
  • foreground#a1a1a1
  • gitDecoration.conflictingResourceForeground#ffcf00
  • gitDecoration.deletedResourceForeground#9f0000
  • gitDecoration.ignoredResourceForeground#6e6e6e
  • gitDecoration.modifiedResourceForeground#008b8b
  • gitDecoration.untrackedResourceForeground#008b00
  • input.background#000000
  • input.border#1c1c1c
  • input.foreground#a1a1a1
  • input.placeholderForeground#6e6e6e
  • inputOption.activeBorder#0081ff
  • inputValidation.errorBackground#000000
  • inputValidation.errorBorder#9f0000
  • inputValidation.errorForeground#9f0000
  • inputValidation.infoBackground#000000
  • inputValidation.infoBorder#0081ff
  • inputValidation.infoForeground#0081ff
  • inputValidation.warningBackground#000000
  • inputValidation.warningBorder#ffcf00
  • inputValidation.warningForeground#ffcf00
  • list.activeSelectionBackground#000000
  • list.activeSelectionForeground#a1a1a1
  • list.dropBackground#000000
  • list.errorForeground#9f0000
  • list.focusBackground#55555575
  • list.highlightForeground#008b8b
  • list.hoverBackground#55555575
  • list.inactiveSelectionBackground#55555575
  • list.warningForeground#ffcf00
  • listFilterWidget.background#000000
  • listFilterWidget.noMatchesOutline#9f0000
  • listFilterWidget.outline#000000
  • merge.currentHeaderBackground#008b0090
  • merge.incomingHeaderBackground#0081ff90
  • notification.background#000000
  • notification.buttonBackground#000000
  • notification.buttonForeground#a1a1a1
  • notification.buttonHoverBackground#55555575
  • notification.errorBackground#9f0000
  • notification.errorForeground#000000
  • notification.foreground#a1a1a1
  • notification.infoBackground#0081ff
  • notification.infoForeground#000000
  • notification.warningBackground#ffcf00
  • notification.warningForeground#000000
  • notificationCenter.border#383838
  • notificationCenterHeader.background#000000
  • notificationCenterHeader.foreground#a1a1a1
  • notificationLink.foreground#008b8b
  • notifications.background#000000
  • notifications.border#383838
  • notifications.foreground#a1a1a1
  • notificationsErrorIcon.foreground#9f0000
  • notificationsInfoIcon.foreground#0081ff
  • notificationsWarningIcon.foreground#ffcf00
  • notificationToast.border#383838
  • panel.background#000000
  • panel.border#0081ff
  • panelInput.border#a1a1a1
  • panelTitle.activeBorder#bc00ca
  • panelTitle.activeForeground#a1a1a1
  • panelTitle.inactiveForeground#6e6e6e
  • peekView.border#000000
  • peekViewEditor.background#000000
  • peekViewEditor.matchHighlightBackground#ffff0080
  • peekViewResult.background#383838
  • peekViewResult.fileForeground#a1a1a1
  • peekViewResult.lineForeground#a1a1a1
  • peekViewResult.matchHighlightBackground#ffff0080
  • peekViewResult.selectionBackground#000000
  • peekViewResult.selectionForeground#a1a1a1
  • peekViewTitle.background#1c1c1c
  • peekViewTitleDescription.foreground#6e6e6e
  • peekViewTitleLabel.foreground#a1a1a1
  • pickerGroup.border#0081ff
  • pickerGroup.foreground#008b8b
  • progressBar.background#bc00ca
  • scrollbar.shadow#444444
  • selection.background#0081ff
  • settings.checkboxBackground#383838
  • settings.checkboxBorder#1c1c1c
  • settings.checkboxForeground#a1a1a1
  • settings.dropdownBackground#383838
  • settings.dropdownBorder#1c1c1c
  • settings.dropdownForeground#a1a1a1
  • settings.headerForeground#a1a1a1
  • settings.modifiedItemIndicator#ffcf00
  • settings.numberInputBackground#383838
  • settings.numberInputBorder#1c1c1c
  • settings.numberInputForeground#a1a1a1
  • settings.textInputBackground#383838
  • settings.textInputBorder#1c1c1c
  • settings.textInputForeground#a1a1a1
  • sideBar.background#383838
  • sideBarSectionHeader.background#000000
  • sideBarSectionHeader.border#1c1c1c
  • sideBarTitle.foreground#a1a1a1
  • statusBar.background#1c1c1c
  • statusBar.debuggingBackground#9f0000
  • statusBar.debuggingForeground#1c1c1c
  • statusBar.foreground#a1a1a1
  • statusBar.noFolderBackground#1c1c1c
  • statusBar.noFolderForeground#a1a1a1
  • statusBarItem.prominentBackground#9f0000
  • statusBarItem.prominentHoverBackground#ffcf00
  • statusBarItem.remoteBackground#0081ff
  • statusBarItem.remoteForeground#000000
  • tab.activeBackground#000000
  • tab.activeBorderTop#bc00ca80
  • tab.activeForeground#a1a1a1
  • tab.border#1c1c1c
  • tab.inactiveBackground#383838
  • tab.inactiveForeground#6e6e6e
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#0081ff
  • terminal.ansiBrightBlack#555555
  • terminal.ansiBrightBlue#0000ff
  • terminal.ansiBrightCyan#00cdcd
  • terminal.ansiBrightGreen#00ee00
  • terminal.ansiBrightMagenta#ff00ff
  • terminal.ansiBrightRed#ff0000
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#ffff00
  • terminal.ansiCyan#008b8b
  • terminal.ansiGreen#008b00
  • terminal.ansiMagenta#bc00ca
  • terminal.ansiRed#9f0000
  • terminal.ansiWhite#bbbbbb
  • terminal.ansiYellow#ffcf00
  • terminal.background#000000
  • terminal.border#a1a1a1
  • terminal.foreground#a1a1a1
  • terminal.selectionBackground#00000050
  • textBlockQuote.background#383838
  • titleBar.activeBackground#383838
  • titleBar.activeForeground#a1a1a1
  • titleBar.inactiveBackground#1c1c1c
  • titleBar.inactiveForeground#6e6e6e
  • walkThrough.embeddedEditorBackground#383838
  • welcomePage.buttonBackground#000000
  • welcomePage.buttonHoverBackground#55555575
  • widget.shadow#444444

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasisitalic
strongbold
header#0081ff
source#a1a1a1
meta.diff, meta.diff.header#6e6e6e
markup.inserted#008b00
markup.deleted#9f0000
markup.changed#ffcf00
invalid#9f0000underline italic
invalid.deprecated#a1a1a1underline italic
entity.name.filename#ffff00
markup.error#9f0000
markup.underlineunderline
markup.bold#ffcf00bold
markup.heading#0081ffbold
markup.italic#ffff00italic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#008b8b
markup.inline.raw, markup.raw.restructuredtext#008b00
markup.underline.link, markup.underline.link.image#008b8b
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#bc00ca
entity.name.directive.restructuredtext, markup.quote#ffff00italic
meta.separator.markdown#6e6e6e
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#008b00
punctuation.definition.constant.restructuredtext#0081ff
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#0081ff
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end#a1a1a1
markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end#ffff00
entity.name.type.class, entity.name.class#008b8bnormal
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#0081ffitalic
entity.other.inherited-class#008b8bitalic
comment, punctuation.definition.comment, unused.comment, wildcard.comment#6e6e6e
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#bc00ca
comment.block.documentation entity.name.type#008b8bitalic
comment.block.documentation entity.name.type punctuation.definition.bracket#008b8b
comment.block.documentation variable#ffcf00italic
constant, variable.other.constant#0081ff
constant.character.escape, constant.character.string.escape, constant.regexp#bc00ca
entity.name.tag#bc00ca
entity.other.attribute-name.parent-selector#bc00ca
entity.other.attribute-name#008b00italic
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#008b00
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#ffcf00italic
meta.decorator variable.other.readwrite, meta.decorator variable.other.property#008b00italic
meta.decorator variable.other.object#008b00
keyword, punctuation.definition.keyword#bc00ca
keyword.control.new, keyword.operator.newbold
meta.selector#bc00ca
support#008b8bitalic
support.function.magic, support.variable, variable.other.predefined#0081ffregular
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#bc00ca
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#a1a1a1
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#bc00ca
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#008b8b
constant.other.date, constant.other.timestamp#ffcf00
variable.other.alias.yaml#008b00italic underline
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def#bc00caregular
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#008b8bitalic
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#ffcf00
storage.modifier#bc00ca
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#ffff00
punctuation.definition.group.capture.regexp#bc00ca
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#9f0000
punctuation.definition.character-class.regexp#008b8b
punctuation.definition.group.regexp#ffcf00
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#9f0000
meta.assertion.look-ahead.regexp#008b00
string#ffff00
punctuation.definition.string.begin, punctuation.definition.string.end#0000ff
punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#0081ff
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#6e6e6e
variable, constant.other.key.perl, support.variable.property, variable.other.constant.js, variable.other.constant.ts, variable.other.constant.tsx#a1a1a1
meta.import variable.other.readwrite, meta.object-binding-pattern-variable variable.object.property, meta.variable.assignment.destructured.object.coffee variable#ffcf00italic
meta.import variable.other.readwrite.alias, meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable#a1a1a1normal
meta.selectionset.graphql variable#ffff00
meta.selectionset.graphql meta.arguments variable#a1a1a1
entity.name.fragment.graphql, variable.fragment.graphql#008b8b
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#a1a1a1
source.shell variable.other#0081ff
support.constant#0081ffnormal
meta.scope.prerequisites.makefile#ffff00
meta.attribute-selector.scss#ffff00
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss#a1a1a1
meta.preprocessor.haskell#6e6e6e
Tinted VSCode by Tinted Theming - VS Code Theme