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#1b141b
  • activityBar.activeBorder#4b9c7c
  • activityBar.activeFocusBorder#ff0000
  • activityBar.background#080608
  • activityBar.foreground#f7f5f7
  • activityBar.inactiveForeground#717574
  • activityBarBadge.background#6bc2a1
  • activityBarBadge.foreground#000000
  • badge.background#4b9c7c
  • badge.foreground#000000
  • breadcrumb.activeSelectionForeground#f7f5f7
  • breadcrumb.background#1b141b
  • breadcrumb.focusForeground#f7f5f7
  • breadcrumb.foreground#a9a9a9
  • breadcrumbPicker.background#0f0c0f
  • button.background#4b9c7c
  • button.foreground#202020
  • contrastBorder#060606
  • debugToolBar.background#0f0c0f
  • diffEditor.border#6bc2a1
  • diffEditor.diagonalFill#c26b6b50
  • diffEditor.insertedTextBackground#6bc2a170
  • diffEditor.removedTextBackground#c26b6b50
  • dropdown.background#0b100a
  • dropdown.border#000000
  • dropdown.foreground#f7f5f7
  • editor.background#080608
  • editor.findMatchBackground#D6997180
  • editor.findMatchHighlightBackground#ffffff40
  • editor.findRangeHighlightBackground#6bc2a175
  • editor.foldBackground#1b151b
  • editor.foreground#f7f5f7
  • editor.hoverHighlightBackground#9776ac50
  • editor.lineHighlightBorder#6bc2a10c
  • editor.rangeHighlightBackground#6bc2a115
  • editor.selectionBackground#6bc2a141
  • editor.selectionHighlightBackground#6bc2a175
  • editor.snippetFinalTabstopHighlightBackground#0f0c0f
  • editor.snippetFinalTabstopHighlightBorder#4b9c7c
  • editor.snippetTabstopHighlightBackground#0f0c0f
  • editor.snippetTabstopHighlightBorder#737175
  • editor.wordHighlightBackground#9776ac50
  • editor.wordHighlightStrongBackground#6bc2a157
  • editorCodeLens.foreground#737175
  • editorError.foreground#c26b6b
  • editorGroup.border#000000
  • editorGroup.dropBackground#0f0c0f70
  • editorGroupHeader.tabsBackground#0f0c0f
  • editorGutter.addedBackground#6bc2a1
  • editorGutter.background#0f0c0f
  • editorGutter.deletedBackground#c26b6b
  • editorGutter.modifiedBackground#9cb0c5
  • editorHoverWidget.background#1b161b
  • editorHoverWidget.border#000000
  • editorIndentGuide.activeBackground#ffffff45
  • editorIndentGuide.background#ffffff1a
  • editorLineNumber.foreground#7b7a7c
  • editorLink.activeForeground#9cb0c5
  • editorMarkerNavigation.background#1b151b
  • editorOverviewRuler.addedForeground#6bc2a1
  • editorOverviewRuler.border#000000
  • editorOverviewRuler.currentContentForeground#f7f5f7
  • editorOverviewRuler.deletedForeground#c26b6b
  • editorOverviewRuler.errorForeground#6d2222
  • editorOverviewRuler.incomingContentForeground#9cb0c5
  • editorOverviewRuler.infoForeground#445270
  • editorOverviewRuler.modifiedForeground#E2D4A2
  • editorOverviewRuler.selectionHighlightForeground#f7f5f7
  • editorOverviewRuler.warningForeground#D69971
  • editorOverviewRuler.wordHighlightForeground#f7f5f7
  • editorOverviewRuler.wordHighlightStrongForeground#FFFFFF
  • editorRuler.foreground#ffffff1a
  • editorSuggestWidget.background#0f0c0f
  • editorSuggestWidget.foreground#f7f5f7
  • editorSuggestWidget.selectedBackground#6bc2a15d
  • editorWarning.foreground#D69971
  • editorWhitespace.foreground#ffffff83
  • editorWidget.background#0f0c0f
  • errorForeground#c26b6b
  • extensionButton.prominentBackground#6bc2a190
  • extensionButton.prominentForeground#f7f5f7
  • extensionButton.prominentHoverBackground#6bc2a160
  • focusBorder#040404
  • foreground#f7f5f7
  • gitDecoration.addedResourceForeground#6bc2a1
  • gitDecoration.conflictingResourceForeground#D69971
  • gitDecoration.deletedResourceForeground#c26b6b
  • gitDecoration.ignoredResourceForeground#737175
  • gitDecoration.modifiedResourceForeground#9cb0c5
  • gitDecoration.renamedResourceForeground#9b9da0
  • gitDecoration.untrackedResourceForeground#ac9576
  • input.background#201822
  • input.border#000000
  • input.foreground#f7f5f7
  • input.placeholderForeground#959297
  • inputOption.activeBorder#000000
  • inputValidation.errorBorder#c26b6b
  • inputValidation.infoBorder#5775ad
  • inputValidation.warningBorder#D69971
  • list.activeSelectionBackground#6bc2a188
  • list.activeSelectionForeground#f7f5f7
  • list.dropBackground#6bc2a1
  • list.errorForeground#c26b6b
  • list.focusBackground#6bc2a15e
  • list.highlightForeground#E2D4A2
  • list.hoverBackground#6bc2a136
  • list.inactiveSelectionBackground#6bc2a15b
  • list.warningForeground#D69971
  • listFilterWidget.background#080608
  • listFilterWidget.noMatchesOutline#c26b6b
  • listFilterWidget.outline#6bc2a1
  • merge.currentHeaderBackground#6bc2a190
  • merge.incomingHeaderBackground#9cb0c590
  • panel.background#080608
  • panel.border#b86fa7
  • panelTitle.activeBorder#6bc2a1
  • panelTitle.activeForeground#f7f5f7
  • panelTitle.inactiveForeground#737175
  • peekView.border#6bc2a1
  • peekViewEditor.background#0f0c0f
  • peekViewEditor.matchHighlightBackground#6bc2a12d
  • peekViewResult.background#132013
  • peekViewResult.fileForeground#f7f5f7
  • peekViewResult.lineForeground#f7f5f7
  • peekViewResult.matchHighlightBackground#6bc2a12d
  • peekViewResult.selectionBackground#6bc2a1
  • peekViewResult.selectionForeground#f7f5f7
  • peekViewTitle.background#0f0c0f
  • peekViewTitleDescription.foreground#737175
  • peekViewTitleLabel.foreground#f7f5f7
  • pickerGroup.border#9cb0c5
  • pickerGroup.foreground#ac9576
  • progressBar.background#4b9c7c
  • selection.background#6bc2a162
  • settings.checkboxBackground#201822
  • settings.checkboxBorder#000000
  • settings.checkboxForeground#f7f5f7
  • settings.dropdownBackground#201822
  • settings.dropdownBorder#000000
  • settings.dropdownForeground#f7f5f7
  • settings.headerForeground#f7f5f7
  • settings.modifiedItemIndicator#4b9c7c
  • settings.numberInputBackground#201822
  • settings.numberInputBorder#000000
  • settings.numberInputForeground#f7f5f7
  • settings.textInputBackground#201822
  • settings.textInputBorder#000000
  • settings.textInputForeground#f7f5f7
  • sideBar.background#0a080a
  • sideBarSectionHeader.background#0f0c0f
  • sideBarSectionHeader.border#000000
  • sideBarTitle.foreground#f7f5f7
  • statusBar.background#6bc2a1
  • statusBar.debuggingBackground#6bc2a1
  • statusBar.debuggingForeground#000000
  • statusBar.foreground#000000
  • statusBar.noFolderBackground#757575
  • statusBar.noFolderForeground#f7f5f7
  • statusBarItem.errorForeground#6d2222
  • statusBarItem.hoverBackground#ffffff36
  • statusBarItem.prominentBackground#6bc2a1
  • statusBarItem.prominentHoverBackground#ffffff36
  • statusBarItem.remoteBackground#966996
  • statusBarItem.remoteForeground#000000
  • statusBarItem.warningBackground#c74848
  • tab.activeBackground#1b141b
  • tab.activeBorderTop#4b9c7c
  • tab.activeForeground#f7f5f7
  • tab.border#000000
  • tab.hoverBackground#1a141a
  • tab.hoverForeground#a5a1a8
  • tab.inactiveBackground#0e0b0e
  • tab.inactiveForeground#737175
  • terminal.ansiBlack#292929
  • terminal.ansiBlue#445270
  • terminal.ansiBrightBlack#737175
  • terminal.ansiBrightBlue#9CB0C5
  • terminal.ansiBrightCyan#9cbec5
  • terminal.ansiBrightGreen#99B999
  • terminal.ansiBrightMagenta#c096e7
  • terminal.ansiBrightRed#ff7575
  • terminal.ansiBrightWhite#c9c6c9
  • terminal.ansiBrightYellow#E2D4A2
  • terminal.ansiCyan#76a9ac
  • terminal.ansiGreen#667566
  • terminal.ansiMagenta#9b7ab9
  • terminal.ansiRed#c26b6b
  • terminal.ansiWhite#f7f5f7
  • terminal.ansiYellow#D69971
  • terminal.background#0f0c0f
  • terminal.foreground#f7f5f7
  • textLink.activeForeground#6c7b8b
  • textLink.foreground#9cb0c5
  • titleBar.activeBackground#0f0c0f
  • titleBar.activeForeground#f7f5f7
  • titleBar.inactiveBackground#0f0c0f
  • titleBar.inactiveForeground#737175
  • walkThrough.embeddedEditorBackground#0f0c0f

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
meta.tag, string#FFFFFF
meta.diff, meta.diff.header#737175
meta.link.reference.def.restructuredtext, string.other.link.description, string.other.link.title#A6D9F7
emphasisitalic
strongbold
invalid#C26B6Bstrikethrough
invalid.deprecated#f7f5f7underline italic
header#A6D9F7
source.ini, source.ignore, source#d6d6d6
markup.inserted#A6D9F7
markup.deleted#C26B6B
markup.changed#6bc2a1
markup.error#C26B6B
markup.underlineunderline
markup.bold#D69971bold
markup.heading#6bc2a1bold
markup.italic#E2D4A2italic
markup.inline.raw, markup.raw.restructuredtext#AC92A6
markup.underline.link, markup.underline.link.image, markup.quote#E2D4A2
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#AC92A6
meta.separator.markdown#737175
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#b86fa7
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#D69971
entity.name.filename#E2D4A2
entity.name.directive.restructuredtext#E2D4A2italic
entity.name.class, entity.name.type.class, entity.other.inherited-class, entity.name.fragment.graphql, variable.fragment.graphql#D69971
entity.name.tag#b86fa7
entity.other.attribute-name.parent-selector#6bc2a1
entity.other.attribute-name, meta.object-literal.key.js#c4b19d
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#E4D6A7
source.css, entity.other.attribute-name.class.css, entity.name.variable.parameter, meta.selector.css, 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#dfdfdf
support, entity.name.type, entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css#AC92A6
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#6bc2a1
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#D69971
entity.other.attribute-name, meta.object-literal.key.js#6bc2a1
source.css support.type.property-name, source.sass support.type.property-name, source.scss support.type.property-name, source.less support.type.property-name, source.stylus support.type.property-name, source.postcss support.type.property-name#b86fa7
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#D3BD73
storage.modifier#6bc2a1
punctuation.definition.constant.restructuredtext#D69971
storage.type.generic.java#ADADAD
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def, support.variable.property.js#6bc2a1
comment, punctuation.definition.comment, unused.comment, wildcard.comment#737175
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#6bc2a1
constant#6c9fbd
constant.other.color, constant.other.key.perl#D69971
constant.character.escape, constant.character.string.escape, constant.regexp, constant.language#AC92A6
constant.other.date, constant.other.timestamp#6c9fbd
constant.language.empty-list.haskell, constant.other.symbol.hashkey, constant.other.symbol.hashkey.ruby#f7f5f7
keyword.operator.other.powershell, keyword.other.statement-separator.powershell#ADADAD
keyword.operator.dereference.java, keyword.operator.navigation.groovy#f7f5f7
keyword.operator#FFFFFF
keyword.other.unit#d8e0e7
keyword.control, keyword.other.template, keyword.other.substitution#8F8F8F
keyword.expressions-and-types.swift, keyword.other.this#D69971
keyword.control.import, keyword.control.from, keyword.control.export#358265
keyword.control.new, keyword.operator.new#6bc2a1
meta.attribute-selector.scss#E2D4A2
keyword.other.important.css, support.variable.property, keyword.control.flow, keyword.control.loop, keyword.control.conditional, keyword.operator.logical, keyword.operator.relational, keyword.operator.comparison, keyword.operator.ternary#358265
keyword.control.at-rule.apply.tailwind#6bc2a1bold
meta.selector#DEB191
meta.at-rule.apply.tailwind#657465
keyword.primitive-datatypes.swift, keyword.type.cs, meta.protocol-list.objc, meta.return-type.objc, source.powershell entity.other.attribute-name#D69971
punctuation.definition.string.begin, punctuation.definition.string.end, punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#CED5E0
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#A0A7A0
punctuation.definition.keyword.css#8F8F8Fbold
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss#f7f5f7
punctuation, punctuation.definition.tag, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.section.embedded#8F8F8F
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.brace.square, 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#FFFFFF
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, string.template meta.brace, string.template punctuation.accessor#ADADAD
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#868686
meta.scope.for-loop.shell punctuation.definition.string.begin, meta.scope.for-loop.shell punctuation.definition.string.end, meta.scope.for-loop.shell string, 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#f7f5f7
punctuation.definition.directive.restructuredtext#9CB0C5
punctuation.separator.inheritance.php#b86fa7
variable.other.alias.yaml#6bc2a1underline
variable.language, variable.language punctuation.definition.variable.php, variable.other.readwrite.instance.ruby, variable.parameter.function.language.special, variable.other.constant#b86fa7
variable.object.property, variable.other.object.property#acacac
variable.other.object#DEB191
meta.import variable.other.readwrite, meta.object-binding-pattern-variable variable.object.property, meta.variable.assignment.destructured.object.coffee variable#D69971
meta.import variable.other.readwrite.alias, meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable, variable.other.readwrite.js#bdbcbc
meta.selectionset.graphql meta.arguments variable#D69971
variable.graphql#acacac
support.variable.property, keyword.operation.graphql#D69971
source.shell variable.other#AC92A6
support.function.magic, support.variable, variable.other.predefined, storage.modifier.async#D69971
support.function, support.type.property-name#A6D9F7
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#E2D4A2
punctuation.definition.group.capture.regexp#b86fa7
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#6bc2a1
punctuation.definition.character-class.regexp#D69971
punctuation.definition.group.regexp#AC92A6
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#E2D4A2
meta.assertion.look-ahead.regexp#6bc2a1
meta.scope.prerequisites.makefile#E2D4A2
source.json meta.structure.dictionary.json support.type.property-name.json#6bc2a1
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#AC92A6
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#E2D4A2
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#F1A9A7
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#DEA6A8
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#FF9797
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#C7C6C9
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#757575
token.info-token#ABC8FD
token.warn-token#FFFFC2
token.error-token#F44747
token.debug-token#FFC697
RLabs Themes Collection by RLabs Inc. - VS Code Theme