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#1d44dd10
  • activityBar.activeBorder#6d1bed80
  • activityBar.background#f7f7f7
  • activityBar.foreground#38383a
  • activityBar.inactiveForeground#a6a7ae
  • activityBarBadge.background#6d1bed
  • activityBarBadge.foreground#f7f7f7
  • badge.background#cbccd4
  • badge.foreground#38383a
  • breadcrumb.activeSelectionForeground#38383a
  • breadcrumb.background#f7f7f7
  • breadcrumb.focusForeground#38383a
  • breadcrumb.foreground#a6a7ae
  • breadcrumbPicker.background#494a4d
  • button.background#93949a
  • button.foreground#38383a
  • checkbox.background#93949a
  • checkbox.border#494a4d
  • checkbox.foreground#38383a
  • contrastBorder#494a4d
  • debugToolBar.background#93949a
  • diffEditor.insertedTextBackground#20883920
  • diffEditor.removedTextBackground#c80d4150
  • dropdown.background#f7f7f7
  • dropdown.border#494a4d
  • dropdown.foreground#38383a
  • editor.background#f7f7f7
  • editor.findMatchBackground#d44d1680
  • editor.findMatchHighlightBackground#1c1d2140
  • editor.findRangeHighlightBackground#dddee875
  • editor.foldBackground#93949a
  • editor.foreground#38383a
  • editor.hoverHighlightBackground#494a4d
  • editor.lineHighlightBorder#cbccd4
  • editor.rangeHighlightBackground#1d44dd15
  • editor.selectionBackground#cbccd4
  • editor.selectionHighlightBackground#cbccd4
  • editor.snippetFinalTabstopHighlightBackground#f7f7f7
  • editor.snippetFinalTabstopHighlightBorder#208839
  • editor.snippetTabstopHighlightBackground#f7f7f7
  • editor.snippetTabstopHighlightBorder#a6a7ae
  • editor.wordHighlightBackground#1e4d7a50
  • editor.wordHighlightStrongBackground#20883950
  • editorCodeLens.foreground#a6a7ae
  • editorError.foreground#c80d41
  • editorGroup.border#1d44dd
  • editorGroup.dropBackground#dddee870
  • editorGroupHeader.tabsBackground#494a4d
  • editorGutter.addedBackground#20883980
  • editorGutter.deletedBackground#c80d4180
  • editorGutter.modifiedBackground#1e4d7a80
  • editorHoverWidget.background#f7f7f7
  • editorHoverWidget.border#a6a7ae
  • editorIndentGuide.activeBackground#1c1d2145
  • editorIndentGuide.background#1c1d211A
  • editorLineNumber.foreground#a6a7ae
  • editorLink.activeForeground#1e4d7a
  • editorMarkerNavigation.background#93949a
  • editorOverviewRuler.addedForeground#20883980
  • editorOverviewRuler.border#494a4d
  • editorOverviewRuler.currentContentForeground#208839
  • editorOverviewRuler.deletedForeground#c80d4180
  • editorOverviewRuler.errorForeground#c80d4180
  • editorOverviewRuler.incomingContentForeground#1d44dd
  • editorOverviewRuler.infoForeground#1e4d7a80
  • editorOverviewRuler.modifiedForeground#1e4d7a80
  • editorOverviewRuler.selectionHighlightForeground#d44d16
  • editorOverviewRuler.warningForeground#d44d1680
  • editorOverviewRuler.wordHighlightForeground#1e4d7a
  • editorOverviewRuler.wordHighlightStrongForeground#208839
  • editorRuler.foreground#1c1d211A
  • editorSuggestWidget.background#93949a
  • editorSuggestWidget.foreground#38383a
  • editorSuggestWidget.selectedBackground#cbccd4
  • editorWarning.foreground#d44d16
  • editorWhitespace.foreground#1c1d211A
  • editorWidget.background#93949a
  • errorForeground#c80d41
  • extensionButton.prominentBackground#20883990
  • extensionButton.prominentForeground#38383a
  • extensionButton.prominentHoverBackground#20883960
  • focusBorder#a6a7ae
  • foreground#38383a
  • gitDecoration.conflictingResourceForeground#d44d16
  • gitDecoration.deletedResourceForeground#c80d41
  • gitDecoration.ignoredResourceForeground#a6a7ae
  • gitDecoration.modifiedResourceForeground#1e4d7a
  • gitDecoration.untrackedResourceForeground#208839
  • input.background#f7f7f7
  • input.border#494a4d
  • input.foreground#38383a
  • input.placeholderForeground#a6a7ae
  • inputOption.activeBorder#1d44dd
  • inputValidation.errorBackground#f7f7f7
  • inputValidation.errorBorder#c80d41
  • inputValidation.errorForeground#c80d41
  • inputValidation.infoBackground#f7f7f7
  • inputValidation.infoBorder#1d44dd
  • inputValidation.infoForeground#1d44dd
  • inputValidation.warningBackground#f7f7f7
  • inputValidation.warningBorder#d44d16
  • inputValidation.warningForeground#d44d16
  • list.activeSelectionBackground#cbccd4
  • list.activeSelectionForeground#38383a
  • list.dropBackground#cbccd4
  • list.errorForeground#c80d41
  • list.focusBackground#dddee875
  • list.highlightForeground#1e4d7a
  • list.hoverBackground#dddee875
  • list.inactiveSelectionBackground#dddee875
  • list.warningForeground#d44d16
  • listFilterWidget.background#f7f7f7
  • listFilterWidget.noMatchesOutline#c80d41
  • listFilterWidget.outline#cbccd4
  • merge.currentHeaderBackground#20883990
  • merge.incomingHeaderBackground#1d44dd90
  • notification.background#f7f7f7
  • notification.buttonBackground#cbccd4
  • notification.buttonForeground#38383a
  • notification.buttonHoverBackground#dddee875
  • notification.errorBackground#c80d41
  • notification.errorForeground#f7f7f7
  • notification.foreground#38383a
  • notification.infoBackground#1d44dd
  • notification.infoForeground#f7f7f7
  • notification.warningBackground#d44d16
  • notification.warningForeground#f7f7f7
  • notificationCenter.border#93949a
  • notificationCenterHeader.background#f7f7f7
  • notificationCenterHeader.foreground#38383a
  • notificationLink.foreground#1e4d7a
  • notifications.background#f7f7f7
  • notifications.border#93949a
  • notifications.foreground#38383a
  • notificationsErrorIcon.foreground#c80d41
  • notificationsInfoIcon.foreground#1d44dd
  • notificationsWarningIcon.foreground#d44d16
  • notificationToast.border#93949a
  • panel.background#f7f7f7
  • panel.border#1d44dd
  • panelInput.border#38383a
  • panelTitle.activeBorder#6d1bed
  • panelTitle.activeForeground#38383a
  • panelTitle.inactiveForeground#a6a7ae
  • peekView.border#cbccd4
  • peekViewEditor.background#f7f7f7
  • peekViewEditor.matchHighlightBackground#b7932680
  • peekViewResult.background#93949a
  • peekViewResult.fileForeground#38383a
  • peekViewResult.lineForeground#38383a
  • peekViewResult.matchHighlightBackground#b7932680
  • peekViewResult.selectionBackground#cbccd4
  • peekViewResult.selectionForeground#38383a
  • peekViewTitle.background#494a4d
  • peekViewTitleDescription.foreground#a6a7ae
  • peekViewTitleLabel.foreground#38383a
  • pickerGroup.border#1d44dd
  • pickerGroup.foreground#1e4d7a
  • progressBar.background#6d1bed
  • scrollbar.shadow#444444
  • selection.background#1d44dd
  • settings.checkboxBackground#93949a
  • settings.checkboxBorder#494a4d
  • settings.checkboxForeground#38383a
  • settings.dropdownBackground#93949a
  • settings.dropdownBorder#494a4d
  • settings.dropdownForeground#38383a
  • settings.headerForeground#38383a
  • settings.modifiedItemIndicator#d44d16
  • settings.numberInputBackground#93949a
  • settings.numberInputBorder#494a4d
  • settings.numberInputForeground#38383a
  • settings.textInputBackground#93949a
  • settings.textInputBorder#494a4d
  • settings.textInputForeground#38383a
  • sideBar.background#93949a
  • sideBarSectionHeader.background#f7f7f7
  • sideBarSectionHeader.border#494a4d
  • sideBarTitle.foreground#38383a
  • statusBar.background#494a4d
  • statusBar.debuggingBackground#c80d41
  • statusBar.debuggingForeground#494a4d
  • statusBar.foreground#38383a
  • statusBar.noFolderBackground#494a4d
  • statusBar.noFolderForeground#38383a
  • statusBarItem.prominentBackground#c80d41
  • statusBarItem.prominentHoverBackground#d44d16
  • statusBarItem.remoteBackground#1d44dd
  • statusBarItem.remoteForeground#f7f7f7
  • tab.activeBackground#f7f7f7
  • tab.activeBorderTop#6d1bed80
  • tab.activeForeground#38383a
  • tab.border#494a4d
  • tab.inactiveBackground#93949a
  • tab.inactiveForeground#a6a7ae
  • terminal.ansiBlack#cbccd4
  • terminal.ansiBlue#1d44dd
  • terminal.ansiBrightBlack#dddee8
  • terminal.ansiBrightBlue#1085d9
  • terminal.ansiBrightCyan#5a7fac
  • terminal.ansiBrightGreen#34b253
  • terminal.ansiBrightMagenta#c00cb2
  • terminal.ansiBrightRed#fb496d
  • terminal.ansiBrightWhite#1c1d21
  • terminal.ansiBrightYellow#b79326
  • terminal.ansiCyan#1e4d7a
  • terminal.ansiGreen#208839
  • terminal.ansiMagenta#6d1bed
  • terminal.ansiRed#c80d41
  • terminal.ansiWhite#000000
  • terminal.ansiYellow#d44d16
  • terminal.background#f7f7f7
  • terminal.border#38383a
  • terminal.foreground#38383a
  • terminal.selectionBackground#cbccd450
  • textBlockQuote.background#93949a
  • titleBar.activeBackground#93949a
  • titleBar.activeForeground#38383a
  • titleBar.inactiveBackground#494a4d
  • titleBar.inactiveForeground#a6a7ae
  • walkThrough.embeddedEditorBackground#93949a
  • welcomePage.buttonBackground#cbccd4
  • welcomePage.buttonHoverBackground#dddee875
  • widget.shadow#444444

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasisitalic
strongbold
header#1d44dd
source#38383a
meta.diff, meta.diff.header#a6a7ae
markup.inserted#208839
markup.deleted#c80d41
markup.changed#d44d16
invalid#c80d41underline italic
invalid.deprecated#38383aunderline italic
entity.name.filename#b79326
markup.error#c80d41
markup.underlineunderline
markup.bold#d44d16bold
markup.heading#1d44ddbold
markup.italic#b79326italic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#1e4d7a
markup.inline.raw, markup.raw.restructuredtext#208839
markup.underline.link, markup.underline.link.image#1e4d7a
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#6d1bed
entity.name.directive.restructuredtext, markup.quote#b79326italic
meta.separator.markdown#a6a7ae
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#208839
punctuation.definition.constant.restructuredtext#1d44dd
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#1d44dd
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end#38383a
markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end#b79326
entity.name.type.class, entity.name.class#1e4d7anormal
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#1d44dditalic
entity.other.inherited-class#1e4d7aitalic
comment, punctuation.definition.comment, unused.comment, wildcard.comment#a6a7ae
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#6d1bed
comment.block.documentation entity.name.type#1e4d7aitalic
comment.block.documentation entity.name.type punctuation.definition.bracket#1e4d7a
comment.block.documentation variable#d44d16italic
constant, variable.other.constant#1d44dd
constant.character.escape, constant.character.string.escape, constant.regexp#6d1bed
entity.name.tag#6d1bed
entity.other.attribute-name.parent-selector#6d1bed
entity.other.attribute-name#208839italic
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#208839
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#d44d16italic
meta.decorator variable.other.readwrite, meta.decorator variable.other.property#208839italic
meta.decorator variable.other.object#208839
keyword, punctuation.definition.keyword#6d1bed
keyword.control.new, keyword.operator.newbold
meta.selector#6d1bed
support#1e4d7aitalic
support.function.magic, support.variable, variable.other.predefined#1d44ddregular
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#6d1bed
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#38383a
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#6d1bed
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#1e4d7a
constant.other.date, constant.other.timestamp#d44d16
variable.other.alias.yaml#208839italic underline
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def#6d1bedregular
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#1e4d7aitalic
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#d44d16
storage.modifier#6d1bed
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#b79326
punctuation.definition.group.capture.regexp#6d1bed
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#c80d41
punctuation.definition.character-class.regexp#1e4d7a
punctuation.definition.group.regexp#d44d16
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#c80d41
meta.assertion.look-ahead.regexp#208839
string#b79326
punctuation.definition.string.begin, punctuation.definition.string.end#1085d9
punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#1d44dd
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#a6a7ae
variable, constant.other.key.perl, support.variable.property, variable.other.constant.js, variable.other.constant.ts, variable.other.constant.tsx#38383a
meta.import variable.other.readwrite, meta.object-binding-pattern-variable variable.object.property, meta.variable.assignment.destructured.object.coffee variable#d44d16italic
meta.import variable.other.readwrite.alias, meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable#38383anormal
meta.selectionset.graphql variable#b79326
meta.selectionset.graphql meta.arguments variable#38383a
entity.name.fragment.graphql, variable.fragment.graphql#1e4d7a
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#38383a
source.shell variable.other#1d44dd
support.constant#1d44ddnormal
meta.scope.prerequisites.makefile#b79326
meta.attribute-selector.scss#b79326
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss#38383a
meta.preprocessor.haskell#a6a7ae
Tinted VSCode by Tinted Theming - VS Code Theme