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#9cc5a020
  • activityBar.activeBorder#c26b6b
  • activityBar.background#121212
  • activityBar.foreground#f7f5f7
  • activityBar.inactiveForeground#717571
  • activityBarBadge.background#c26b6b
  • activityBarBadge.foreground#f7f5f7
  • badge.background#425542
  • badge.foreground#f7f5f5
  • breadcrumb.activeSelectionForeground#f7f5f5
  • breadcrumb.background#1f1f1f
  • breadcrumb.focusForeground#f7f5f5
  • breadcrumb.foreground#a9a9a9
  • breadcrumbPicker.background#151515
  • button.background#425542
  • button.foreground#f7f5f5
  • contrastBorder#060606
  • debugToolBar.background#242424
  • diffEditor.border#aabb96
  • diffEditor.diagonalFill#c26b6b50
  • diffEditor.insertedTextBackground#aabb9670
  • diffEditor.removedTextBackground#c26b6b50
  • dropdown.background#0b100a
  • dropdown.border#000000
  • dropdown.foreground#f7f5f5
  • editor.background#131211
  • editor.findMatchBackground#ffbb7780
  • editor.findMatchHighlightBackground#ffffff40
  • editor.findRangeHighlightBackground#42554275
  • editor.foldBackground#020202
  • editor.foreground#f7f5f5
  • editor.hoverHighlightBackground#ac957650
  • editor.lineHighlightBorder#778b770c
  • editor.rangeHighlightBackground#9dc59c15
  • editor.selectionBackground#65796579
  • editor.selectionHighlightBackground#42504575
  • editor.snippetFinalTabstopHighlightBackground#181818
  • editor.snippetFinalTabstopHighlightBorder#aabb96
  • editor.snippetTabstopHighlightBackground#181818
  • editor.snippetTabstopHighlightBorder#717571
  • editor.wordHighlightBackground#ac957650
  • editor.wordHighlightStrongBackground#aabb967a
  • editorCodeLens.foreground#717571
  • editorError.foreground#c26b6b
  • editorGroup.border#000000
  • editorGroup.dropBackground#1f1f1f70
  • editorGroupHeader.tabsBackground#1f1f1f
  • editorGutter.addedBackground#aabb96
  • editorGutter.background#151515
  • editorGutter.deletedBackground#c26b6b
  • editorGutter.modifiedBackground#9cb0c5
  • editorHoverWidget.background#181818
  • editorHoverWidget.border#000000
  • editorIndentGuide.activeBackground#ffffff45
  • editorIndentGuide.background#ffffff1a
  • editorLineNumber.foreground#717571
  • editorLink.activeForeground#9cb0c5
  • editorMarkerNavigation.background#171717
  • editorOverviewRuler.addedForeground#aabb96
  • editorOverviewRuler.border#0b100a
  • editorOverviewRuler.currentContentForeground#f7f5f5
  • editorOverviewRuler.deletedForeground#c26b6b
  • editorOverviewRuler.errorForeground#6d2222
  • editorOverviewRuler.incomingContentForeground#9cb0c5
  • editorOverviewRuler.infoForeground#445270
  • editorOverviewRuler.modifiedForeground#FFFFBB
  • editorOverviewRuler.selectionHighlightForeground#f7f5f5
  • editorOverviewRuler.warningForeground#ffbb77
  • editorOverviewRuler.wordHighlightForeground#F7F5F5
  • editorOverviewRuler.wordHighlightStrongForeground#FFFFFF
  • editorRuler.foreground#ffffff1a
  • editorSuggestWidget.background#171717
  • editorSuggestWidget.foreground#f7f5f5
  • editorSuggestWidget.selectedBackground#425542
  • editorWarning.foreground#ffbb77
  • editorWhitespace.foreground#ffffff83
  • editorWidget.background#181818
  • errorForeground#c26b6b
  • extensionButton.prominentBackground#aabb9690
  • extensionButton.prominentForeground#f7f5f5
  • extensionButton.prominentHoverBackground#aabb9660
  • focusBorder#040404
  • foreground#f7f5f5
  • gitDecoration.addedResourceForeground#aabb96
  • gitDecoration.conflictingResourceForeground#ffbb77
  • gitDecoration.deletedResourceForeground#c26b6b
  • gitDecoration.ignoredResourceForeground#717571
  • gitDecoration.modifiedResourceForeground#9cb0c5
  • gitDecoration.renamedResourceForeground#9b9da0
  • gitDecoration.untrackedResourceForeground#ac9576
  • input.background#333333
  • input.border#000000
  • input.foreground#f7f5f5
  • input.placeholderForeground#717571
  • inputOption.activeBorder#000000
  • inputValidation.errorBorder#c26b6b
  • inputValidation.infoBorder#5775ad
  • inputValidation.warningBorder#ffbb77
  • list.activeSelectionBackground#425542
  • list.activeSelectionForeground#f7f5f5
  • list.dropBackground#425542
  • list.errorForeground#c26b6b
  • list.focusBackground#42554275
  • list.highlightForeground#FFFFBB
  • list.hoverBackground#42554250
  • list.inactiveSelectionBackground#42554275
  • list.warningForeground#ffbb77
  • listFilterWidget.background#2d4026
  • listFilterWidget.noMatchesOutline#c26b6b
  • listFilterWidget.outline#425047
  • merge.currentHeaderBackground#aabb9690
  • merge.incomingHeaderBackground#9cb0c590
  • panel.background#181818
  • panel.border#a4c59c
  • panelTitle.activeBorder#c26b6b
  • panelTitle.activeForeground#f7f5f5
  • panelTitle.inactiveForeground#717571
  • peekView.border#425542
  • peekViewEditor.background#181818
  • peekViewEditor.matchHighlightBackground#ffff8080
  • peekViewResult.background#132013
  • peekViewResult.fileForeground#f7f5f5
  • peekViewResult.lineForeground#f7f5f5
  • peekViewResult.matchHighlightBackground#ffff8080
  • peekViewResult.selectionBackground#425542
  • peekViewResult.selectionForeground#f7f5f5
  • peekViewTitle.background#181818
  • peekViewTitleDescription.foreground#717571
  • peekViewTitleLabel.foreground#f7f5f5
  • pickerGroup.border#9cb0c5
  • pickerGroup.foreground#ac9576
  • progressBar.background#c26b6b
  • selection.background#425542
  • settings.checkboxBackground#292929
  • settings.checkboxBorder#000000
  • settings.checkboxForeground#f7f5f5
  • settings.dropdownBackground#262626
  • settings.dropdownBorder#000000
  • settings.dropdownForeground#f7f5f5
  • settings.headerForeground#f7f5f5
  • settings.modifiedItemIndicator#ffbb77
  • settings.numberInputBackground#212121
  • settings.numberInputBorder#000000
  • settings.numberInputForeground#f7f5f5
  • settings.textInputBackground#282828
  • settings.textInputBorder#000000
  • settings.textInputForeground#f7f5f5
  • sideBar.background#181818
  • sideBarSectionHeader.background#181818
  • sideBarSectionHeader.border#000000
  • sideBarTitle.foreground#f7f5f5
  • statusBar.background#c26b6b
  • statusBar.debuggingBackground#aabb96
  • statusBar.debuggingForeground#000000
  • statusBar.foreground#000000
  • statusBar.noFolderBackground#757575
  • statusBar.noFolderForeground#f7f5f5
  • statusBarItem.errorForeground#6d2222
  • statusBarItem.hoverBackground#ffffff36
  • statusBarItem.prominentBackground#c26b6b
  • statusBarItem.prominentHoverBackground#ffffff36
  • statusBarItem.remoteBackground#aabb96
  • statusBarItem.remoteForeground#000000
  • statusBarItem.warningBackground#c74848
  • tab.activeBackground#1f1f1f
  • tab.activeBorderTop#c26b6b
  • tab.activeForeground#f7f5f5
  • tab.border#000000
  • tab.hoverBackground#1a1a1a
  • tab.hoverForeground#a1a8a1
  • tab.inactiveBackground#131313
  • tab.inactiveForeground#717571
  • terminal.ansiBlack#292929
  • terminal.ansiBlue#445270
  • terminal.ansiBrightBlack#717571
  • terminal.ansiBrightBlue#9CB0C5
  • terminal.ansiBrightCyan#9cbec5
  • terminal.ansiBrightGreen#99B999
  • terminal.ansiBrightMagenta#c096e7
  • terminal.ansiBrightRed#ff7575
  • terminal.ansiBrightWhite#c9c6c9
  • terminal.ansiBrightYellow#FFFFBB
  • terminal.ansiCyan#76a9ac
  • terminal.ansiGreen#667566
  • terminal.ansiMagenta#9b7ab9
  • terminal.ansiRed#c26b6b
  • terminal.ansiWhite#f7f5f7
  • terminal.ansiYellow#ffbb77
  • terminal.background#131211
  • terminal.foreground#f7f5f5
  • textLink.activeForeground#6c7b8b
  • textLink.foreground#9cb0c5
  • titleBar.activeBackground#181818
  • titleBar.activeForeground#f7f5f5
  • titleBar.inactiveBackground#1d1d1d
  • titleBar.inactiveForeground#717571
  • walkThrough.embeddedEditorBackground#242424

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
meta.tag, string#FFFFFF
meta.diff, meta.diff.header#717571
meta.link.reference.def.restructuredtext, string.other.link.description, string.other.link.title#9CB0C5
emphasisitalic
strongbold
invalid#C26B6Bstrikethrough
invalid.deprecated#F7F5F5underline italic
header#9CB0C5
source.ini, source.ignore, source#AABB96
markup.inserted#9CB0C5
markup.deleted#C26B6B
markup.changed#AABB96
markup.error#C26B6B
markup.underlineunderline
markup.bold#FFBB77bold
markup.heading#ffbb77bold
markup.italic#FFFFBBitalic
markup.inline.raw, markup.raw.restructuredtext#AABB96
markup.underline.link, markup.underline.link.image, markup.quote#FFFFBB
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#AC9576
meta.separator.markdown#717571
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#AABB96
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#ffbb77
entity.name.filename#FFFFBB
entity.name.directive.restructuredtext#FFFFBBitalic
entity.name.class, entity.name.type, entity.name.type.class, entity.other.inherited-class, entity.name.fragment.graphql, variable.fragment.graphql#AC9576
entity.name.tag#C26B6B
entity.other.attribute-name.parent-selector#C26B6B
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#667566
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#99B999
support, entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css#F8CF98
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#C26B6B
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#FFBB77
entity.other.attribute-name, meta.object-literal.key.js#c4b19d
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#c09b9b
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#AC9576
storage.modifier#C26B6B
punctuation.definition.constant.restructuredtext#ffbb77
storage.type.generic.java#ADADAD
comment, punctuation.definition.comment, unused.comment, wildcard.comment#717571
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#C26B6B
constant#9CB0C5
constant.other.color, constant.other.key.perl#6E3636
constant.character.escape, constant.character.string.escape, constant.regexp, constant.language#C26B6B
constant.other.date, constant.other.timestamp#FFBB77
constant.language.empty-list.haskell, constant.other.symbol.hashkey, constant.other.symbol.hashkey.ruby#F7F5F5
keyword.operator.other.powershell, keyword.other.statement-separator.powershell#ADADAD
keyword.operator.dereference.java, keyword.operator.navigation.groovy#F7F5F5
keyword.operator#FFFFFF
keyword.other.unit#d8e0e7
keyword.control, keyword.other.template, keyword.other.substitution#8F8F8F
keyword.expressions-and-types.swift, keyword.other.this#9CB0C5
keyword.control.import, keyword.control.from#6E3636
keyword.control.new, keyword.operator.new#cf3c3c
meta.attribute-selector.scss#FFFFBB
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#cf3c3c
keyword.control.at-rule.apply.tailwind#C26B6Bbold
meta.selector#9C6666
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#AC9576
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#F7F5F5
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#F7F5F5
punctuation.definition.directive.restructuredtext#9CB0C5
punctuation.separator.inheritance.php#6E3636
variable.other.alias.yaml#AABB96underline
variable.language, variable.language punctuation.definition.variable.php, variable.other.readwrite.instance.ruby, variable.parameter.function.language.special, variable.other.constant#9CB0C5
variable.object.property, variable.other.object.property#cacaca
variable.other.object#ddbb88
meta.import variable.other.readwrite, meta.object-binding-pattern-variable variable.object.property, meta.variable.assignment.destructured.object.coffee variable#525D69
meta.import variable.other.readwrite.alias, meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable, variable.other.readwrite.js#D8B69B
meta.selectionset.graphql meta.arguments variable#AABB96
variable.graphql#D7E5DD
support.variable.property, keyword.operation.graphql#cf3c3c
source.shell variable.other#9CB0C5
support.function.magic, support.variable, variable.other.predefined, storage.modifier.async#FFBB77
support.function, support.type.property-name#688099
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def, support.variable.property.js#C26B6B
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#FFF9A6
punctuation.definition.group.capture.regexp#C26B6B
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#C26B6B
punctuation.definition.character-class.regexp#AC9576
punctuation.definition.group.regexp#FFBB77
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#C26B6B
meta.assertion.look-ahead.regexp#AABB96
meta.scope.prerequisites.makefile#FFFFBB
source.json meta.structure.dictionary.json support.type.property-name.json#AABB96
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#FFC697
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#FFFFC2
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#ABC8FD
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#C5A0E7
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