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#0084bc10
  • activityBar.activeBorder#a625a480
  • activityBar.background#2a2b32
  • activityBar.foreground#cfd0d2
  • activityBar.inactiveForeground#797c84
  • activityBarBadge.background#a625a4
  • activityBarBadge.foreground#2a2b32
  • badge.background#373942
  • badge.foreground#cfd0d2
  • breadcrumb.activeSelectionForeground#cfd0d2
  • breadcrumb.background#2a2b32
  • breadcrumb.focusForeground#cfd0d2
  • breadcrumb.foreground#797c84
  • breadcrumbPicker.background#1a1b1f
  • button.background#34363e
  • button.foreground#cfd0d2
  • checkbox.background#34363e
  • checkbox.border#1a1b1f
  • checkbox.foreground#cfd0d2
  • contrastBorder#1a1b1f
  • debugToolBar.background#34363e
  • diffEditor.insertedTextBackground#4fa14f20
  • diffEditor.removedTextBackground#e4564950
  • dropdown.background#2a2b32
  • dropdown.border#1a1b1f
  • dropdown.foreground#cfd0d2
  • editor.background#2a2b32
  • editor.findMatchBackground#c0840080
  • editor.findMatchHighlightBackground#ffffff40
  • editor.findRangeHighlightBackground#4f525d75
  • editor.foldBackground#34363e
  • editor.foreground#cfd0d2
  • editor.hoverHighlightBackground#1a1b1f
  • editor.lineHighlightBorder#373942
  • editor.rangeHighlightBackground#0084bc15
  • editor.selectionBackground#373942
  • editor.selectionHighlightBackground#373942
  • editor.snippetFinalTabstopHighlightBackground#2a2b32
  • editor.snippetFinalTabstopHighlightBorder#4fa14f
  • editor.snippetTabstopHighlightBackground#2a2b32
  • editor.snippetTabstopHighlightBorder#797c84
  • editor.wordHighlightBackground#0996b350
  • editor.wordHighlightStrongBackground#4fa14f50
  • editorCodeLens.foreground#797c84
  • editorError.foreground#e45649
  • editorGroup.border#0084bc
  • editorGroup.dropBackground#4f525d70
  • editorGroupHeader.tabsBackground#1a1b1f
  • editorGutter.addedBackground#4fa14f80
  • editorGutter.deletedBackground#e4564980
  • editorGutter.modifiedBackground#0996b380
  • editorHoverWidget.background#2a2b32
  • editorHoverWidget.border#797c84
  • editorIndentGuide.activeBackground#ffffff45
  • editorIndentGuide.background#ffffff1A
  • editorLineNumber.foreground#797c84
  • editorLink.activeForeground#0996b3
  • editorMarkerNavigation.background#34363e
  • editorOverviewRuler.addedForeground#4fa14f80
  • editorOverviewRuler.border#1a1b1f
  • editorOverviewRuler.currentContentForeground#4fa14f
  • editorOverviewRuler.deletedForeground#e4564980
  • editorOverviewRuler.errorForeground#e4564980
  • editorOverviewRuler.incomingContentForeground#0084bc
  • editorOverviewRuler.infoForeground#0996b380
  • editorOverviewRuler.modifiedForeground#0996b380
  • editorOverviewRuler.selectionHighlightForeground#c08400
  • editorOverviewRuler.warningForeground#c0840080
  • editorOverviewRuler.wordHighlightForeground#0996b3
  • editorOverviewRuler.wordHighlightStrongForeground#4fa14f
  • editorRuler.foreground#ffffff1A
  • editorSuggestWidget.background#34363e
  • editorSuggestWidget.foreground#cfd0d2
  • editorSuggestWidget.selectedBackground#373942
  • editorWarning.foreground#c08400
  • editorWhitespace.foreground#ffffff1A
  • editorWidget.background#34363e
  • errorForeground#e45649
  • extensionButton.prominentBackground#4fa14f90
  • extensionButton.prominentForeground#cfd0d2
  • extensionButton.prominentHoverBackground#4fa14f60
  • focusBorder#797c84
  • foreground#cfd0d2
  • gitDecoration.conflictingResourceForeground#c08400
  • gitDecoration.deletedResourceForeground#e45649
  • gitDecoration.ignoredResourceForeground#797c84
  • gitDecoration.modifiedResourceForeground#0996b3
  • gitDecoration.untrackedResourceForeground#4fa14f
  • input.background#2a2b32
  • input.border#1a1b1f
  • input.foreground#cfd0d2
  • input.placeholderForeground#797c84
  • inputOption.activeBorder#0084bc
  • inputValidation.errorBackground#2a2b32
  • inputValidation.errorBorder#e45649
  • inputValidation.errorForeground#e45649
  • inputValidation.infoBackground#2a2b32
  • inputValidation.infoBorder#0084bc
  • inputValidation.infoForeground#0084bc
  • inputValidation.warningBackground#2a2b32
  • inputValidation.warningBorder#c08400
  • inputValidation.warningForeground#c08400
  • list.activeSelectionBackground#373942
  • list.activeSelectionForeground#cfd0d2
  • list.dropBackground#373942
  • list.errorForeground#e45649
  • list.focusBackground#4f525d75
  • list.highlightForeground#0996b3
  • list.hoverBackground#4f525d75
  • list.inactiveSelectionBackground#4f525d75
  • list.warningForeground#c08400
  • listFilterWidget.background#2a2b32
  • listFilterWidget.noMatchesOutline#e45649
  • listFilterWidget.outline#373942
  • merge.currentHeaderBackground#4fa14f90
  • merge.incomingHeaderBackground#0084bc90
  • notification.background#2a2b32
  • notification.buttonBackground#373942
  • notification.buttonForeground#cfd0d2
  • notification.buttonHoverBackground#4f525d75
  • notification.errorBackground#e45649
  • notification.errorForeground#2a2b32
  • notification.foreground#cfd0d2
  • notification.infoBackground#0084bc
  • notification.infoForeground#2a2b32
  • notification.warningBackground#c08400
  • notification.warningForeground#2a2b32
  • notificationCenter.border#34363e
  • notificationCenterHeader.background#2a2b32
  • notificationCenterHeader.foreground#cfd0d2
  • notificationLink.foreground#0996b3
  • notifications.background#2a2b32
  • notifications.border#34363e
  • notifications.foreground#cfd0d2
  • notificationsErrorIcon.foreground#e45649
  • notificationsInfoIcon.foreground#0084bc
  • notificationsWarningIcon.foreground#c08400
  • notificationToast.border#34363e
  • panel.background#2a2b32
  • panel.border#0084bc
  • panelInput.border#cfd0d2
  • panelTitle.activeBorder#a625a4
  • panelTitle.activeForeground#cfd0d2
  • panelTitle.inactiveForeground#797c84
  • peekView.border#373942
  • peekViewEditor.background#2a2b32
  • peekViewEditor.matchHighlightBackground#e4c07a80
  • peekViewResult.background#34363e
  • peekViewResult.fileForeground#cfd0d2
  • peekViewResult.lineForeground#cfd0d2
  • peekViewResult.matchHighlightBackground#e4c07a80
  • peekViewResult.selectionBackground#373942
  • peekViewResult.selectionForeground#cfd0d2
  • peekViewTitle.background#1a1b1f
  • peekViewTitleDescription.foreground#797c84
  • peekViewTitleLabel.foreground#cfd0d2
  • pickerGroup.border#0084bc
  • pickerGroup.foreground#0996b3
  • progressBar.background#a625a4
  • scrollbar.shadow#444444
  • selection.background#0084bc
  • settings.checkboxBackground#34363e
  • settings.checkboxBorder#1a1b1f
  • settings.checkboxForeground#cfd0d2
  • settings.dropdownBackground#34363e
  • settings.dropdownBorder#1a1b1f
  • settings.dropdownForeground#cfd0d2
  • settings.headerForeground#cfd0d2
  • settings.modifiedItemIndicator#c08400
  • settings.numberInputBackground#34363e
  • settings.numberInputBorder#1a1b1f
  • settings.numberInputForeground#cfd0d2
  • settings.textInputBackground#34363e
  • settings.textInputBorder#1a1b1f
  • settings.textInputForeground#cfd0d2
  • sideBar.background#34363e
  • sideBarSectionHeader.background#2a2b32
  • sideBarSectionHeader.border#1a1b1f
  • sideBarTitle.foreground#cfd0d2
  • statusBar.background#1a1b1f
  • statusBar.debuggingBackground#e45649
  • statusBar.debuggingForeground#1a1b1f
  • statusBar.foreground#cfd0d2
  • statusBar.noFolderBackground#1a1b1f
  • statusBar.noFolderForeground#cfd0d2
  • statusBarItem.prominentBackground#e45649
  • statusBarItem.prominentHoverBackground#c08400
  • statusBarItem.remoteBackground#0084bc
  • statusBarItem.remoteForeground#2a2b32
  • tab.activeBackground#2a2b32
  • tab.activeBorderTop#a625a480
  • tab.activeForeground#cfd0d2
  • tab.border#1a1b1f
  • tab.inactiveBackground#34363e
  • tab.inactiveForeground#797c84
  • terminal.ansiBlack#373942
  • terminal.ansiBlue#0084bc
  • terminal.ansiBrightBlack#4f525d
  • terminal.ansiBrightBlue#61afef
  • terminal.ansiBrightCyan#56b5c1
  • terminal.ansiBrightGreen#98c379
  • terminal.ansiBrightMagenta#c577dd
  • terminal.ansiBrightRed#df6c75
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#e4c07a
  • terminal.ansiCyan#0996b3
  • terminal.ansiGreen#4fa14f
  • terminal.ansiMagenta#a625a4
  • terminal.ansiRed#e45649
  • terminal.ansiWhite#fafafa
  • terminal.ansiYellow#c08400
  • terminal.background#2a2b32
  • terminal.border#cfd0d2
  • terminal.foreground#cfd0d2
  • terminal.selectionBackground#37394250
  • textBlockQuote.background#34363e
  • titleBar.activeBackground#34363e
  • titleBar.activeForeground#cfd0d2
  • titleBar.inactiveBackground#1a1b1f
  • titleBar.inactiveForeground#797c84
  • walkThrough.embeddedEditorBackground#34363e
  • welcomePage.buttonBackground#373942
  • welcomePage.buttonHoverBackground#4f525d75
  • widget.shadow#444444

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasisitalic
strongbold
header#0084bc
source#cfd0d2
meta.diff, meta.diff.header#797c84
markup.inserted#4fa14f
markup.deleted#e45649
markup.changed#c08400
invalid#e45649underline italic
invalid.deprecated#cfd0d2underline italic
entity.name.filename#e4c07a
markup.error#e45649
markup.underlineunderline
markup.bold#c08400bold
markup.heading#0084bcbold
markup.italic#e4c07aitalic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#0996b3
markup.inline.raw, markup.raw.restructuredtext#4fa14f
markup.underline.link, markup.underline.link.image#0996b3
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#a625a4
entity.name.directive.restructuredtext, markup.quote#e4c07aitalic
meta.separator.markdown#797c84
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#4fa14f
punctuation.definition.constant.restructuredtext#0084bc
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#0084bc
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end#cfd0d2
markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end#e4c07a
entity.name.type.class, entity.name.class#0996b3normal
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#0084bcitalic
entity.other.inherited-class#0996b3italic
comment, punctuation.definition.comment, unused.comment, wildcard.comment#797c84
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#a625a4
comment.block.documentation entity.name.type#0996b3italic
comment.block.documentation entity.name.type punctuation.definition.bracket#0996b3
comment.block.documentation variable#c08400italic
constant, variable.other.constant#0084bc
constant.character.escape, constant.character.string.escape, constant.regexp#a625a4
entity.name.tag#a625a4
entity.other.attribute-name.parent-selector#a625a4
entity.other.attribute-name#4fa14fitalic
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#4fa14f
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#c08400italic
meta.decorator variable.other.readwrite, meta.decorator variable.other.property#4fa14fitalic
meta.decorator variable.other.object#4fa14f
keyword, punctuation.definition.keyword#a625a4
keyword.control.new, keyword.operator.newbold
meta.selector#a625a4
support#0996b3italic
support.function.magic, support.variable, variable.other.predefined#0084bcregular
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#a625a4
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#cfd0d2
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#a625a4
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#0996b3
constant.other.date, constant.other.timestamp#c08400
variable.other.alias.yaml#4fa14fitalic underline
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def#a625a4regular
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#0996b3italic
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#c08400
storage.modifier#a625a4
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#e4c07a
punctuation.definition.group.capture.regexp#a625a4
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#e45649
punctuation.definition.character-class.regexp#0996b3
punctuation.definition.group.regexp#c08400
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#e45649
meta.assertion.look-ahead.regexp#4fa14f
string#e4c07a
punctuation.definition.string.begin, punctuation.definition.string.end#c0aa00
punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#0084bc
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#797c84
variable, constant.other.key.perl, support.variable.property, variable.other.constant.js, variable.other.constant.ts, variable.other.constant.tsx#cfd0d2
meta.import variable.other.readwrite, meta.object-binding-pattern-variable variable.object.property, meta.variable.assignment.destructured.object.coffee variable#c08400italic
meta.import variable.other.readwrite.alias, meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable#cfd0d2normal
meta.selectionset.graphql variable#e4c07a
meta.selectionset.graphql meta.arguments variable#cfd0d2
entity.name.fragment.graphql, variable.fragment.graphql#0996b3
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#cfd0d2
source.shell variable.other#0084bc
support.constant#0084bcnormal
meta.scope.prerequisites.makefile#e4c07a
meta.attribute-selector.scss#e4c07a
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss#cfd0d2
meta.preprocessor.haskell#797c84
Tinted VSCode by Tinted Theming - VS Code Theme