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#6d9cbe10
  • activityBar.activeBorder#d0d0ff80
  • activityBar.background#2b2b2b
  • activityBar.foreground#cbcbcb
  • activityBar.inactiveForeground#656565
  • activityBarBadge.background#d0d0ff
  • activityBarBadge.foreground#2b2b2b
  • badge.background#000000
  • badge.foreground#cbcbcb
  • breadcrumb.activeSelectionForeground#cbcbcb
  • breadcrumb.background#2b2b2b
  • breadcrumb.focusForeground#cbcbcb
  • breadcrumb.foreground#656565
  • breadcrumbPicker.background#101010
  • button.background#212121
  • button.foreground#cbcbcb
  • checkbox.background#212121
  • checkbox.border#101010
  • checkbox.foreground#cbcbcb
  • contrastBorder#101010
  • debugToolBar.background#212121
  • diffEditor.insertedTextBackground#519f5020
  • diffEditor.removedTextBackground#da493950
  • dropdown.background#2b2b2b
  • dropdown.border#101010
  • dropdown.foreground#cbcbcb
  • editor.background#2b2b2b
  • editor.findMatchBackground#ffd24a80
  • editor.findMatchHighlightBackground#ffffff40
  • editor.findRangeHighlightBackground#32323275
  • editor.foldBackground#212121
  • editor.foreground#cbcbcb
  • editor.hoverHighlightBackground#101010
  • editor.lineHighlightBorder#000000
  • editor.rangeHighlightBackground#6d9cbe15
  • editor.selectionBackground#000000
  • editor.selectionHighlightBackground#000000
  • editor.snippetFinalTabstopHighlightBackground#2b2b2b
  • editor.snippetFinalTabstopHighlightBorder#519f50
  • editor.snippetTabstopHighlightBackground#2b2b2b
  • editor.snippetTabstopHighlightBorder#656565
  • editor.wordHighlightBackground#6e9cbe50
  • editor.wordHighlightStrongBackground#519f5050
  • editorCodeLens.foreground#656565
  • editorError.foreground#da4939
  • editorGroup.border#6d9cbe
  • editorGroup.dropBackground#32323270
  • editorGroupHeader.tabsBackground#101010
  • editorGutter.addedBackground#519f5080
  • editorGutter.deletedBackground#da493980
  • editorGutter.modifiedBackground#6e9cbe80
  • editorHoverWidget.background#2b2b2b
  • editorHoverWidget.border#656565
  • editorIndentGuide.activeBackground#ffffff45
  • editorIndentGuide.background#ffffff1A
  • editorLineNumber.foreground#656565
  • editorLink.activeForeground#6e9cbe
  • editorMarkerNavigation.background#212121
  • editorOverviewRuler.addedForeground#519f5080
  • editorOverviewRuler.border#101010
  • editorOverviewRuler.currentContentForeground#519f50
  • editorOverviewRuler.deletedForeground#da493980
  • editorOverviewRuler.errorForeground#da493980
  • editorOverviewRuler.incomingContentForeground#6d9cbe
  • editorOverviewRuler.infoForeground#6e9cbe80
  • editorOverviewRuler.modifiedForeground#6e9cbe80
  • editorOverviewRuler.selectionHighlightForeground#ffd24a
  • editorOverviewRuler.warningForeground#ffd24a80
  • editorOverviewRuler.wordHighlightForeground#6e9cbe
  • editorOverviewRuler.wordHighlightStrongForeground#519f50
  • editorRuler.foreground#ffffff1A
  • editorSuggestWidget.background#212121
  • editorSuggestWidget.foreground#cbcbcb
  • editorSuggestWidget.selectedBackground#000000
  • editorWarning.foreground#ffd24a
  • editorWhitespace.foreground#ffffff1A
  • editorWidget.background#212121
  • errorForeground#da4939
  • extensionButton.prominentBackground#519f5090
  • extensionButton.prominentForeground#cbcbcb
  • extensionButton.prominentHoverBackground#519f5060
  • focusBorder#656565
  • foreground#cbcbcb
  • gitDecoration.conflictingResourceForeground#ffd24a
  • gitDecoration.deletedResourceForeground#da4939
  • gitDecoration.ignoredResourceForeground#656565
  • gitDecoration.modifiedResourceForeground#6e9cbe
  • gitDecoration.untrackedResourceForeground#519f50
  • input.background#2b2b2b
  • input.border#101010
  • input.foreground#cbcbcb
  • input.placeholderForeground#656565
  • inputOption.activeBorder#6d9cbe
  • inputValidation.errorBackground#2b2b2b
  • inputValidation.errorBorder#da4939
  • inputValidation.errorForeground#da4939
  • inputValidation.infoBackground#2b2b2b
  • inputValidation.infoBorder#6d9cbe
  • inputValidation.infoForeground#6d9cbe
  • inputValidation.warningBackground#2b2b2b
  • inputValidation.warningBorder#ffd24a
  • inputValidation.warningForeground#ffd24a
  • list.activeSelectionBackground#000000
  • list.activeSelectionForeground#cbcbcb
  • list.dropBackground#000000
  • list.errorForeground#da4939
  • list.focusBackground#32323275
  • list.highlightForeground#6e9cbe
  • list.hoverBackground#32323275
  • list.inactiveSelectionBackground#32323275
  • list.warningForeground#ffd24a
  • listFilterWidget.background#2b2b2b
  • listFilterWidget.noMatchesOutline#da4939
  • listFilterWidget.outline#000000
  • merge.currentHeaderBackground#519f5090
  • merge.incomingHeaderBackground#6d9cbe90
  • notification.background#2b2b2b
  • notification.buttonBackground#000000
  • notification.buttonForeground#cbcbcb
  • notification.buttonHoverBackground#32323275
  • notification.errorBackground#da4939
  • notification.errorForeground#2b2b2b
  • notification.foreground#cbcbcb
  • notification.infoBackground#6d9cbe
  • notification.infoForeground#2b2b2b
  • notification.warningBackground#ffd24a
  • notification.warningForeground#2b2b2b
  • notificationCenter.border#212121
  • notificationCenterHeader.background#2b2b2b
  • notificationCenterHeader.foreground#cbcbcb
  • notificationLink.foreground#6e9cbe
  • notifications.background#2b2b2b
  • notifications.border#212121
  • notifications.foreground#cbcbcb
  • notificationsErrorIcon.foreground#da4939
  • notificationsInfoIcon.foreground#6d9cbe
  • notificationsWarningIcon.foreground#ffd24a
  • notificationToast.border#212121
  • panel.background#2b2b2b
  • panel.border#6d9cbe
  • panelInput.border#cbcbcb
  • panelTitle.activeBorder#d0d0ff
  • panelTitle.activeForeground#cbcbcb
  • panelTitle.inactiveForeground#656565
  • peekView.border#000000
  • peekViewEditor.background#2b2b2b
  • peekViewEditor.matchHighlightBackground#ffff7c80
  • peekViewResult.background#212121
  • peekViewResult.fileForeground#cbcbcb
  • peekViewResult.lineForeground#cbcbcb
  • peekViewResult.matchHighlightBackground#ffff7c80
  • peekViewResult.selectionBackground#000000
  • peekViewResult.selectionForeground#cbcbcb
  • peekViewTitle.background#101010
  • peekViewTitleDescription.foreground#656565
  • peekViewTitleLabel.foreground#cbcbcb
  • pickerGroup.border#6d9cbe
  • pickerGroup.foreground#6e9cbe
  • progressBar.background#d0d0ff
  • scrollbar.shadow#444444
  • selection.background#6d9cbe
  • settings.checkboxBackground#212121
  • settings.checkboxBorder#101010
  • settings.checkboxForeground#cbcbcb
  • settings.dropdownBackground#212121
  • settings.dropdownBorder#101010
  • settings.dropdownForeground#cbcbcb
  • settings.headerForeground#cbcbcb
  • settings.modifiedItemIndicator#ffd24a
  • settings.numberInputBackground#212121
  • settings.numberInputBorder#101010
  • settings.numberInputForeground#cbcbcb
  • settings.textInputBackground#212121
  • settings.textInputBorder#101010
  • settings.textInputForeground#cbcbcb
  • sideBar.background#212121
  • sideBarSectionHeader.background#2b2b2b
  • sideBarSectionHeader.border#101010
  • sideBarTitle.foreground#cbcbcb
  • statusBar.background#101010
  • statusBar.debuggingBackground#da4939
  • statusBar.debuggingForeground#101010
  • statusBar.foreground#cbcbcb
  • statusBar.noFolderBackground#101010
  • statusBar.noFolderForeground#cbcbcb
  • statusBarItem.prominentBackground#da4939
  • statusBarItem.prominentHoverBackground#ffd24a
  • statusBarItem.remoteBackground#6d9cbe
  • statusBarItem.remoteForeground#2b2b2b
  • tab.activeBackground#2b2b2b
  • tab.activeBorderTop#d0d0ff80
  • tab.activeForeground#cbcbcb
  • tab.border#101010
  • tab.inactiveBackground#212121
  • tab.inactiveForeground#656565
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#6d9cbe
  • terminal.ansiBrightBlack#323232
  • terminal.ansiBrightBlue#9fcef0
  • terminal.ansiBrightCyan#a0cef0
  • terminal.ansiBrightGreen#83d182
  • terminal.ansiBrightMagenta#ffffff
  • terminal.ansiBrightRed#ff7b6b
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#ffff7c
  • terminal.ansiCyan#6e9cbe
  • terminal.ansiGreen#519f50
  • terminal.ansiMagenta#d0d0ff
  • terminal.ansiRed#da4939
  • terminal.ansiWhite#ffffff
  • terminal.ansiYellow#ffd24a
  • terminal.background#2b2b2b
  • terminal.border#cbcbcb
  • terminal.foreground#cbcbcb
  • terminal.selectionBackground#00000050
  • textBlockQuote.background#212121
  • titleBar.activeBackground#212121
  • titleBar.activeForeground#cbcbcb
  • titleBar.inactiveBackground#101010
  • titleBar.inactiveForeground#656565
  • walkThrough.embeddedEditorBackground#212121
  • welcomePage.buttonBackground#000000
  • welcomePage.buttonHoverBackground#32323275
  • widget.shadow#444444

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasisitalic
strongbold
header#6d9cbe
source#cbcbcb
meta.diff, meta.diff.header#656565
markup.inserted#519f50
markup.deleted#da4939
markup.changed#ffd24a
invalid#da4939underline italic
invalid.deprecated#cbcbcbunderline italic
entity.name.filename#ffff7c
markup.error#da4939
markup.underlineunderline
markup.bold#ffd24abold
markup.heading#6d9cbebold
markup.italic#ffff7citalic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#6e9cbe
markup.inline.raw, markup.raw.restructuredtext#519f50
markup.underline.link, markup.underline.link.image#6e9cbe
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#d0d0ff
entity.name.directive.restructuredtext, markup.quote#ffff7citalic
meta.separator.markdown#656565
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#519f50
punctuation.definition.constant.restructuredtext#6d9cbe
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#6d9cbe
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end#cbcbcb
markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end#ffff7c
entity.name.type.class, entity.name.class#6e9cbenormal
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#6d9cbeitalic
entity.other.inherited-class#6e9cbeitalic
comment, punctuation.definition.comment, unused.comment, wildcard.comment#656565
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#d0d0ff
comment.block.documentation entity.name.type#6e9cbeitalic
comment.block.documentation entity.name.type punctuation.definition.bracket#6e9cbe
comment.block.documentation variable#ffd24aitalic
constant, variable.other.constant#6d9cbe
constant.character.escape, constant.character.string.escape, constant.regexp#d0d0ff
entity.name.tag#d0d0ff
entity.other.attribute-name.parent-selector#d0d0ff
entity.other.attribute-name#519f50italic
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#519f50
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#ffd24aitalic
meta.decorator variable.other.readwrite, meta.decorator variable.other.property#519f50italic
meta.decorator variable.other.object#519f50
keyword, punctuation.definition.keyword#d0d0ff
keyword.control.new, keyword.operator.newbold
meta.selector#d0d0ff
support#6e9cbeitalic
support.function.magic, support.variable, variable.other.predefined#6d9cberegular
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#d0d0ff
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#cbcbcb
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#d0d0ff
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#6e9cbe
constant.other.date, constant.other.timestamp#ffd24a
variable.other.alias.yaml#519f50italic underline
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def#d0d0ffregular
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#6e9cbeitalic
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#ffd24a
storage.modifier#d0d0ff
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#ffff7c
punctuation.definition.group.capture.regexp#d0d0ff
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#da4939
punctuation.definition.character-class.regexp#6e9cbe
punctuation.definition.group.regexp#ffd24a
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#da4939
meta.assertion.look-ahead.regexp#519f50
string#ffff7c
punctuation.definition.string.begin, punctuation.definition.string.end#9fcef0
punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#6d9cbe
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#656565
variable, constant.other.key.perl, support.variable.property, variable.other.constant.js, variable.other.constant.ts, variable.other.constant.tsx#cbcbcb
meta.import variable.other.readwrite, meta.object-binding-pattern-variable variable.object.property, meta.variable.assignment.destructured.object.coffee variable#ffd24aitalic
meta.import variable.other.readwrite.alias, meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable#cbcbcbnormal
meta.selectionset.graphql variable#ffff7c
meta.selectionset.graphql meta.arguments variable#cbcbcb
entity.name.fragment.graphql, variable.fragment.graphql#6e9cbe
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#cbcbcb
source.shell variable.other#6d9cbe
support.constant#6d9cbenormal
meta.scope.prerequisites.makefile#ffff7c
meta.attribute-selector.scss#ffff7c
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss#cbcbcb
meta.preprocessor.haskell#656565
Tinted VSCode by Tinted Theming - VS Code Theme