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#59c2ff10
  • activityBar.activeBorder#d2a6ff80
  • activityBar.background#0b0e14
  • activityBar.foreground#e6e1cf
  • activityBar.inactiveForeground#3e4b59
  • activityBarBadge.background#d2a6ff
  • activityBarBadge.foreground#0b0e14
  • badge.background#131721
  • badge.foreground#e6e1cf
  • breadcrumb.activeSelectionForeground#e6e1cf
  • breadcrumb.background#0b0e14
  • breadcrumb.focusForeground#e6e1cf
  • breadcrumb.foreground#3e4b59
  • breadcrumbPicker.background#06070a
  • button.background#0a0d13
  • button.foreground#e6e1cf
  • checkbox.background#0a0d13
  • checkbox.border#06070a
  • checkbox.foreground#e6e1cf
  • contrastBorder#06070a
  • debugToolBar.background#0a0d13
  • diffEditor.insertedTextBackground#aad94c20
  • diffEditor.removedTextBackground#f0717850
  • dropdown.background#0b0e14
  • dropdown.border#06070a
  • dropdown.foreground#e6e1cf
  • editor.background#0b0e14
  • editor.findMatchBackground#ff8f4080
  • editor.findMatchHighlightBackground#f2f0e740
  • editor.findRangeHighlightBackground#20222975
  • editor.foldBackground#0a0d13
  • editor.foreground#e6e1cf
  • editor.hoverHighlightBackground#06070a
  • editor.lineHighlightBorder#131721
  • editor.rangeHighlightBackground#59c2ff15
  • editor.selectionBackground#131721
  • editor.selectionHighlightBackground#131721
  • editor.snippetFinalTabstopHighlightBackground#0b0e14
  • editor.snippetFinalTabstopHighlightBorder#aad94c
  • editor.snippetTabstopHighlightBackground#0b0e14
  • editor.snippetTabstopHighlightBorder#3e4b59
  • editor.wordHighlightBackground#95e6cb50
  • editor.wordHighlightStrongBackground#aad94c50
  • editorCodeLens.foreground#3e4b59
  • editorError.foreground#f07178
  • editorGroup.border#59c2ff
  • editorGroup.dropBackground#20222970
  • editorGroupHeader.tabsBackground#06070a
  • editorGutter.addedBackground#aad94c80
  • editorGutter.deletedBackground#f0717880
  • editorGutter.modifiedBackground#95e6cb80
  • editorHoverWidget.background#0b0e14
  • editorHoverWidget.border#3e4b59
  • editorIndentGuide.activeBackground#f2f0e745
  • editorIndentGuide.background#f2f0e71A
  • editorLineNumber.foreground#3e4b59
  • editorLink.activeForeground#95e6cb
  • editorMarkerNavigation.background#0a0d13
  • editorOverviewRuler.addedForeground#aad94c80
  • editorOverviewRuler.border#06070a
  • editorOverviewRuler.currentContentForeground#aad94c
  • editorOverviewRuler.deletedForeground#f0717880
  • editorOverviewRuler.errorForeground#f0717880
  • editorOverviewRuler.incomingContentForeground#59c2ff
  • editorOverviewRuler.infoForeground#95e6cb80
  • editorOverviewRuler.modifiedForeground#95e6cb80
  • editorOverviewRuler.selectionHighlightForeground#ff8f40
  • editorOverviewRuler.warningForeground#ff8f4080
  • editorOverviewRuler.wordHighlightForeground#95e6cb
  • editorOverviewRuler.wordHighlightStrongForeground#aad94c
  • editorRuler.foreground#f2f0e71A
  • editorSuggestWidget.background#0a0d13
  • editorSuggestWidget.foreground#e6e1cf
  • editorSuggestWidget.selectedBackground#131721
  • editorWarning.foreground#ff8f40
  • editorWhitespace.foreground#f2f0e71A
  • editorWidget.background#0a0d13
  • errorForeground#f07178
  • extensionButton.prominentBackground#aad94c90
  • extensionButton.prominentForeground#e6e1cf
  • extensionButton.prominentHoverBackground#aad94c60
  • focusBorder#3e4b59
  • foreground#e6e1cf
  • gitDecoration.conflictingResourceForeground#ff8f40
  • gitDecoration.deletedResourceForeground#f07178
  • gitDecoration.ignoredResourceForeground#3e4b59
  • gitDecoration.modifiedResourceForeground#95e6cb
  • gitDecoration.untrackedResourceForeground#aad94c
  • input.background#0b0e14
  • input.border#06070a
  • input.foreground#e6e1cf
  • input.placeholderForeground#3e4b59
  • inputOption.activeBorder#59c2ff
  • inputValidation.errorBackground#0b0e14
  • inputValidation.errorBorder#f07178
  • inputValidation.errorForeground#f07178
  • inputValidation.infoBackground#0b0e14
  • inputValidation.infoBorder#59c2ff
  • inputValidation.infoForeground#59c2ff
  • inputValidation.warningBackground#0b0e14
  • inputValidation.warningBorder#ff8f40
  • inputValidation.warningForeground#ff8f40
  • list.activeSelectionBackground#131721
  • list.activeSelectionForeground#e6e1cf
  • list.dropBackground#131721
  • list.errorForeground#f07178
  • list.focusBackground#20222975
  • list.highlightForeground#95e6cb
  • list.hoverBackground#20222975
  • list.inactiveSelectionBackground#20222975
  • list.warningForeground#ff8f40
  • listFilterWidget.background#0b0e14
  • listFilterWidget.noMatchesOutline#f07178
  • listFilterWidget.outline#131721
  • merge.currentHeaderBackground#aad94c90
  • merge.incomingHeaderBackground#59c2ff90
  • notification.background#0b0e14
  • notification.buttonBackground#131721
  • notification.buttonForeground#e6e1cf
  • notification.buttonHoverBackground#20222975
  • notification.errorBackground#f07178
  • notification.errorForeground#0b0e14
  • notification.foreground#e6e1cf
  • notification.infoBackground#59c2ff
  • notification.infoForeground#0b0e14
  • notification.warningBackground#ff8f40
  • notification.warningForeground#0b0e14
  • notificationCenter.border#0a0d13
  • notificationCenterHeader.background#0b0e14
  • notificationCenterHeader.foreground#e6e1cf
  • notificationLink.foreground#95e6cb
  • notifications.background#0b0e14
  • notifications.border#0a0d13
  • notifications.foreground#e6e1cf
  • notificationsErrorIcon.foreground#f07178
  • notificationsInfoIcon.foreground#59c2ff
  • notificationsWarningIcon.foreground#ff8f40
  • notificationToast.border#0a0d13
  • panel.background#0b0e14
  • panel.border#59c2ff
  • panelInput.border#e6e1cf
  • panelTitle.activeBorder#d2a6ff
  • panelTitle.activeForeground#e6e1cf
  • panelTitle.inactiveForeground#3e4b59
  • peekView.border#131721
  • peekViewEditor.background#0b0e14
  • peekViewEditor.matchHighlightBackground#e6b67380
  • peekViewResult.background#0a0d13
  • peekViewResult.fileForeground#e6e1cf
  • peekViewResult.lineForeground#e6e1cf
  • peekViewResult.matchHighlightBackground#e6b67380
  • peekViewResult.selectionBackground#131721
  • peekViewResult.selectionForeground#e6e1cf
  • peekViewTitle.background#06070a
  • peekViewTitleDescription.foreground#3e4b59
  • peekViewTitleLabel.foreground#e6e1cf
  • pickerGroup.border#59c2ff
  • pickerGroup.foreground#95e6cb
  • progressBar.background#d2a6ff
  • scrollbar.shadow#444444
  • selection.background#59c2ff
  • settings.checkboxBackground#0a0d13
  • settings.checkboxBorder#06070a
  • settings.checkboxForeground#e6e1cf
  • settings.dropdownBackground#0a0d13
  • settings.dropdownBorder#06070a
  • settings.dropdownForeground#e6e1cf
  • settings.headerForeground#e6e1cf
  • settings.modifiedItemIndicator#ff8f40
  • settings.numberInputBackground#0a0d13
  • settings.numberInputBorder#06070a
  • settings.numberInputForeground#e6e1cf
  • settings.textInputBackground#0a0d13
  • settings.textInputBorder#06070a
  • settings.textInputForeground#e6e1cf
  • sideBar.background#0a0d13
  • sideBarSectionHeader.background#0b0e14
  • sideBarSectionHeader.border#06070a
  • sideBarTitle.foreground#e6e1cf
  • statusBar.background#06070a
  • statusBar.debuggingBackground#f07178
  • statusBar.debuggingForeground#06070a
  • statusBar.foreground#e6e1cf
  • statusBar.noFolderBackground#06070a
  • statusBar.noFolderForeground#e6e1cf
  • statusBarItem.prominentBackground#f07178
  • statusBarItem.prominentHoverBackground#ff8f40
  • statusBarItem.remoteBackground#59c2ff
  • statusBarItem.remoteForeground#0b0e14
  • tab.activeBackground#0b0e14
  • tab.activeBorderTop#d2a6ff80
  • tab.activeForeground#e6e1cf
  • tab.border#06070a
  • tab.inactiveBackground#0a0d13
  • tab.inactiveForeground#3e4b59
  • terminal.ansiBlack#131721
  • terminal.ansiBlue#59c2ff
  • terminal.ansiBrightBlack#202229
  • terminal.ansiBrightBlue#73b8ff
  • terminal.ansiBrightCyan#39bae6
  • terminal.ansiBrightGreen#7fd962
  • terminal.ansiBrightMagenta#ddbcff
  • terminal.ansiBrightRed#f26d78
  • terminal.ansiBrightWhite#f2f0e7
  • terminal.ansiBrightYellow#e6b673
  • terminal.ansiCyan#95e6cb
  • terminal.ansiGreen#aad94c
  • terminal.ansiMagenta#d2a6ff
  • terminal.ansiRed#f07178
  • terminal.ansiWhite#ece8db
  • terminal.ansiYellow#ff8f40
  • terminal.background#0b0e14
  • terminal.border#e6e1cf
  • terminal.foreground#e6e1cf
  • terminal.selectionBackground#13172150
  • textBlockQuote.background#0a0d13
  • titleBar.activeBackground#0a0d13
  • titleBar.activeForeground#e6e1cf
  • titleBar.inactiveBackground#06070a
  • titleBar.inactiveForeground#3e4b59
  • walkThrough.embeddedEditorBackground#0a0d13
  • welcomePage.buttonBackground#131721
  • welcomePage.buttonHoverBackground#20222975
  • widget.shadow#444444

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasisitalic
strongbold
header#59c2ff
source#e6e1cf
meta.diff, meta.diff.header#3e4b59
markup.inserted#aad94c
markup.deleted#f07178
markup.changed#ff8f40
invalid#f07178underline italic
invalid.deprecated#e6e1cfunderline italic
entity.name.filename#e6b673
markup.error#f07178
markup.underlineunderline
markup.bold#ff8f40bold
markup.heading#59c2ffbold
markup.italic#e6b673italic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#95e6cb
markup.inline.raw, markup.raw.restructuredtext#aad94c
markup.underline.link, markup.underline.link.image#95e6cb
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#d2a6ff
entity.name.directive.restructuredtext, markup.quote#e6b673italic
meta.separator.markdown#3e4b59
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#aad94c
punctuation.definition.constant.restructuredtext#59c2ff
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#59c2ff
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end#e6e1cf
markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end#e6b673
entity.name.type.class, entity.name.class#95e6cbnormal
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#59c2ffitalic
entity.other.inherited-class#95e6cbitalic
comment, punctuation.definition.comment, unused.comment, wildcard.comment#3e4b59
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#d2a6ff
comment.block.documentation entity.name.type#95e6cbitalic
comment.block.documentation entity.name.type punctuation.definition.bracket#95e6cb
comment.block.documentation variable#ff8f40italic
constant, variable.other.constant#59c2ff
constant.character.escape, constant.character.string.escape, constant.regexp#d2a6ff
entity.name.tag#d2a6ff
entity.other.attribute-name.parent-selector#d2a6ff
entity.other.attribute-name#aad94citalic
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#aad94c
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#ff8f40italic
meta.decorator variable.other.readwrite, meta.decorator variable.other.property#aad94citalic
meta.decorator variable.other.object#aad94c
keyword, punctuation.definition.keyword#d2a6ff
keyword.control.new, keyword.operator.newbold
meta.selector#d2a6ff
support#95e6cbitalic
support.function.magic, support.variable, variable.other.predefined#59c2ffregular
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#d2a6ff
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#e6e1cf
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#d2a6ff
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#95e6cb
constant.other.date, constant.other.timestamp#ff8f40
variable.other.alias.yaml#aad94citalic underline
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def#d2a6ffregular
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#95e6cbitalic
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#ff8f40
storage.modifier#d2a6ff
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#e6b673
punctuation.definition.group.capture.regexp#d2a6ff
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#f07178
punctuation.definition.character-class.regexp#95e6cb
punctuation.definition.group.regexp#ff8f40
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#f07178
meta.assertion.look-ahead.regexp#aad94c
string#e6b673
punctuation.definition.string.begin, punctuation.definition.string.end#ffb454
punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#59c2ff
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#3e4b59
variable, constant.other.key.perl, support.variable.property, variable.other.constant.js, variable.other.constant.ts, variable.other.constant.tsx#e6e1cf
meta.import variable.other.readwrite, meta.object-binding-pattern-variable variable.object.property, meta.variable.assignment.destructured.object.coffee variable#ff8f40italic
meta.import variable.other.readwrite.alias, meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable#e6e1cfnormal
meta.selectionset.graphql variable#e6b673
meta.selectionset.graphql meta.arguments variable#e6e1cf
entity.name.fragment.graphql, variable.fragment.graphql#95e6cb
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#e6e1cf
source.shell variable.other#59c2ff
support.constant#59c2ffnormal
meta.scope.prerequisites.makefile#e6b673
meta.attribute-selector.scss#e6b673
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss#e6e1cf
meta.preprocessor.haskell#3e4b59
Tinted VSCode by Tinted Theming - VS Code Theme