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#282828
  • activityBar.activeBorder#d3b88e
  • activityBar.background#101010
  • activityBar.foreground#ffffff
  • activityBar.inactiveForeground#aaaaaa
  • activityBarBadge.background#d3b88e
  • activityBarBadge.foreground#101010
  • badge.background#d3b88e
  • badge.foreground#101010
  • breadcrumb.activeSelectionForeground#ffffff
  • breadcrumb.background#282828
  • breadcrumb.focusForeground#ffffff
  • breadcrumb.foreground#cccccc
  • breadcrumbPicker.background#101010
  • button.background#d3b88e
  • button.foreground#101010
  • contrastBorder#060606
  • debugToolBar.background#101010
  • diffEditor.border#d3b88e
  • diffEditor.diagonalFill#FF868650
  • diffEditor.insertedTextBackground#F4D68770
  • diffEditor.removedTextBackground#FF868650
  • dropdown.background#101010
  • dropdown.border#000000
  • dropdown.foreground#ffffff
  • editor.background#171717
  • editor.findMatchBackground#FFC59E80
  • editor.findMatchHighlightBackground#ffffff40
  • editor.findRangeHighlightBackground#F4D68775
  • editor.foldBackground#151515
  • editor.foreground#ffffff
  • editor.hoverHighlightBackground#9776ac50
  • editor.lineHighlightBorder#F4D6870c
  • editor.rangeHighlightBackground#F4D68715
  • editor.selectionBackground#F4D68741
  • editor.selectionHighlightBackground#F4D68775
  • editor.snippetFinalTabstopHighlightBackground#101010
  • editor.snippetFinalTabstopHighlightBorder#d3b88e
  • editor.snippetTabstopHighlightBackground#101010
  • editor.snippetTabstopHighlightBorder#aaaaaa
  • editor.wordHighlightBackground#9776ac50
  • editor.wordHighlightStrongBackground#F4D68757
  • editorCodeLens.foreground#aaaaaa
  • editorError.foreground#FF8686
  • editorGroup.border#000000
  • editorGroup.dropBackground#10101070
  • editorGroupHeader.tabsBackground#191919
  • editorGutter.addedBackground#d3b88e
  • editorGutter.background#151515
  • editorGutter.deletedBackground#FF8686
  • editorGutter.modifiedBackground#A6D9F7
  • editorHoverWidget.background#1b1b1b
  • editorHoverWidget.border#000000
  • editorIndentGuide.activeBackground#ffffff45
  • editorIndentGuide.background#ffffff1a
  • editorLineNumber.activeForeground#ffffff
  • editorLineNumber.foreground#5a5a5a
  • editorLink.activeForeground#A6D9F7
  • editorMarkerNavigation.background#101010
  • editorOverviewRuler.addedForeground#d3b88e
  • editorOverviewRuler.border#000000
  • editorOverviewRuler.currentContentForeground#ffffff
  • editorOverviewRuler.deletedForeground#FF8686
  • editorOverviewRuler.errorForeground#6d2222
  • editorOverviewRuler.incomingContentForeground#A6D9F7
  • editorOverviewRuler.infoForeground#78a4bd
  • editorOverviewRuler.modifiedForeground#FFEFB7
  • editorOverviewRuler.selectionHighlightForeground#ffffff
  • editorOverviewRuler.warningForeground#FFC59E
  • editorOverviewRuler.wordHighlightForeground#ffffff
  • editorOverviewRuler.wordHighlightStrongForeground#ffffff
  • editorRuler.foreground#ffffff1a
  • editorSuggestWidget.background#101010
  • editorSuggestWidget.foreground#ffffff
  • editorSuggestWidget.selectedBackground#F4D6875d
  • editorWarning.foreground#FFC59E
  • editorWhitespace.foreground#ffffff83
  • editorWidget.background#101010
  • errorForeground#FF8686
  • extensionButton.prominentBackground#d3b88e
  • extensionButton.prominentForeground#101010
  • extensionButton.prominentHoverBackground#d3b88e
  • focusBorder#040404
  • foreground#ffffff
  • gitDecoration.addedResourceForeground#d3b88e
  • gitDecoration.conflictingResourceForeground#FFC59E
  • gitDecoration.deletedResourceForeground#FF8686
  • gitDecoration.ignoredResourceForeground#aaaaaa
  • gitDecoration.modifiedResourceForeground#A6D9F7
  • gitDecoration.renamedResourceForeground#9b9da0
  • gitDecoration.untrackedResourceForeground#ac9576
  • input.background#222222
  • input.border#000000
  • input.foreground#ffffff
  • input.placeholderForeground#b0bcd3
  • inputOption.activeBorder#000000
  • inputValidation.errorBorder#FF8686
  • inputValidation.infoBorder#5775ad
  • inputValidation.warningBorder#FFC59E
  • list.activeSelectionBackground#353535
  • list.activeSelectionForeground#ffffff
  • list.dropBackground#d3b88e
  • list.errorForeground#FF8686
  • list.focusBackground#333333
  • list.highlightForeground#FFEFB7
  • list.hoverBackground#35353560
  • list.inactiveSelectionBackground#35353560
  • list.warningForeground#FFC59E
  • listFilterWidget.background#101010
  • listFilterWidget.noMatchesOutline#FF8686
  • listFilterWidget.outline#d3b88e
  • merge.currentHeaderBackground#F4D68790
  • merge.incomingHeaderBackground#A6D9F790
  • panel.background#101010
  • panel.border#d3b88e
  • panelTitle.activeBorder#d3b88e
  • panelTitle.activeForeground#ffffff
  • panelTitle.inactiveForeground#aaaaaa
  • peekView.border#d3b88e
  • peekViewEditor.background#101010
  • peekViewEditor.matchHighlightBackground#F4D6872d
  • peekViewResult.background#132013
  • peekViewResult.fileForeground#ffffff
  • peekViewResult.lineForeground#ffffff
  • peekViewResult.matchHighlightBackground#F4D6872d
  • peekViewResult.selectionBackground#d3b88e
  • peekViewResult.selectionForeground#ffffff
  • peekViewTitle.background#101010
  • peekViewTitleDescription.foreground#aaaaaa
  • peekViewTitleLabel.foreground#ffffff
  • pickerGroup.border#A6D9F7
  • pickerGroup.foreground#ac9576
  • progressBar.background#d3b88e
  • scrollbarSlider.background#252525
  • scrollbarSlider.hoverBackground#3a3a3a
  • selection.background#f5eb8c7e
  • settings.checkboxBackground#222222
  • settings.checkboxBorder#000000
  • settings.checkboxForeground#ffffff
  • settings.dropdownBackground#222222
  • settings.dropdownBorder#000000
  • settings.dropdownForeground#ffffff
  • settings.headerForeground#ffffff
  • settings.modifiedItemIndicator#d3b88e
  • settings.numberInputBackground#222222
  • settings.numberInputBorder#000000
  • settings.numberInputForeground#ffffff
  • settings.textInputBackground#222222
  • settings.textInputBorder#000000
  • settings.textInputForeground#ffffff
  • sideBar.background#151515
  • sideBar.foreground#dddddd
  • sideBarSectionHeader.background#282828
  • sideBarSectionHeader.border#000000
  • sideBarTitle.foreground#ffffff
  • statusBar.background#d3b88e
  • statusBar.debuggingBackground#d3b88e
  • statusBar.debuggingForeground#000000
  • statusBar.foreground#000000
  • statusBar.noFolderBackground#C7C7C7
  • statusBar.noFolderForeground#ffffff
  • statusBarItem.errorForeground#6d2222
  • statusBarItem.hoverBackground#ffffff36
  • statusBarItem.prominentBackground#d3b88e
  • statusBarItem.prominentHoverBackground#ffffff36
  • statusBarItem.remoteBackground#d3b88e
  • statusBarItem.remoteForeground#000000
  • statusBarItem.warningBackground#c74848
  • tab.activeBackground#282828
  • tab.activeBorderTop#d3b88e
  • tab.activeForeground#ffffff
  • tab.border#000000
  • tab.hoverBackground#282828
  • tab.hoverForeground#ffffff
  • tab.inactiveBackground#191919
  • tab.inactiveForeground#aaaaaa
  • terminal.ansiBlack#292929
  • terminal.ansiBlue#78a4bd
  • terminal.ansiBrightBlack#aaaaaa
  • terminal.ansiBrightBlue#A6D9F7
  • terminal.ansiBrightCyan#9cc5c4
  • terminal.ansiBrightGreen#96fed0
  • terminal.ansiBrightMagenta#b595d1
  • terminal.ansiBrightRed#ff7575
  • terminal.ansiBrightWhite#c9c6c9
  • terminal.ansiBrightYellow#FFEFB7
  • terminal.ansiCyan#76a9ac
  • terminal.ansiGreen#7bd1aa
  • terminal.ansiMagenta#85669f
  • terminal.ansiRed#FF8686
  • terminal.ansiWhite#ffffff
  • terminal.ansiYellow#FFC59E
  • terminal.background#171717
  • terminal.foreground#ffffff
  • textLink.activeForeground#6c7b8b
  • textLink.foreground#A6D9F7
  • titleBar.activeBackground#101010
  • titleBar.activeForeground#ffffff
  • titleBar.inactiveBackground#101010
  • titleBar.inactiveForeground#aaaaaa
  • walkThrough.embeddedEditorBackground#101010

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
source#ffffff
meta.selector#d3b88e
token.info-token#AFD8FF
token.warn-token#d3b88e
token.error-token#F44747
token.debug-token#FF869C
comment#5a5a5a
comment.line#5a5a5a
constant#bbe6ff
entity#ffffff
entity.name.function, entity.name.method#cb96b7
entity.name.type#bbe6ff
entity.name.class#d3b88e
entity.name.tag#f4e1b3
entity.other.inherited-class#bbe6ff
entity.other.attribute-name#e6e6e6
meta.selector entity.other.attribute-name.class#cb96b7
entity.other.attribute-name.class#99cebd
invalid#ff7575
keyword, keyword.operator#d3b88e
keyword.control#f4e1b3
keyword.operator.assignment, keyword.operator.arithmetic, keyword.operator.pattern#ffffff
keyword.operator.comparison, keyword.operator.increment, keyword.operator.logical, keyword.operator.relational, keyword.operator.spread, keyword.operator.ternary, keyword.control.conditional, keyword.control.loop, #f4e1b3
keyword.operator.new#f4e1b3
keyword.other.unit#e6e6e6
markup.underlineunderline
markup.underline.link#75ccffunderline
markup.boldbold
markup.heading#ffef75
markup.italicitalic
markup.list#d3b88e
markup.quote#d3b88eitalic
markup.raw#d3b88e
markup.other#ff7575
markup.changed#ffba75
markup.inserted#75ffac
markup.deleted#ff7575
storage.type#d3b88e
storage.type.function.arrow#dfd6c8
storage.modifier#f4e1b3
string#ffffff
string.quoted.triple#ffffff
string.quoted.other#ffffff
string.regexp#ffffff
string.interpolated#ffffff
support.function#a160af
support.class#d3b88e
support.type, support.variable.property#cb96b7
support.type.property-name#e6e6e6bold
support.constant#99cebd
support.constant.handlebars#D8C4AE
support.variable#99cebd
support.other#99cebd
variable#99cebd
variable.parameter#99cebd
variable.language#99cebd
variable.other#99cebd
variable.object.property#e6e6e6
variable.other.object.property#e6e6e6
variable.other.object, variable.other.constant.object#99cebd
meta.import variable.other.readwrite, meta.object-binding-pattern-variable variable.object.property, meta.variable.assignment.destructured.object.coffee variable #ffffff
meta.import variable.other.readwrite.alias , meta.export variable.other.readwrite.alias , meta.variable.assignment.destructured.object.coffee variable variable #ffffff
constant.other.symbol.hashkey punctuation.definition.constant.ruby, entity.other.attribute-name.placeholder punctuation # Sass placeholder `%` symbols, 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, punctuation.separator.list, string.unquoted.heredoc punctuation.definition.string, support.other.chomping-indicator.yaml, punctuation.separator.annotation#ffffff
keyword.operator.other.powershell # Commas, keyword.other.statement-separator.powershell, meta.function-call punctuation, punctuation.definition.arguments.begin, punctuation.definition.arguments.end, punctuation.definition.entity.begin, punctuation.definition.entity.end, punctuation.definition.tag.cs # HTML tags in comments, punctuation.definition.type.begin, punctuation.definition.type.end, punctuation.definition.tag, punctuation.definition.parameters.begin, punctuation.definition.parameters.end, punctuation.section.scope.begin, punctuation.section.scope.end, string.template meta.brace, string.template punctuation.accessor#dfd6c8
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 # PHP edge case, punctuation.section.embedded.end source.ruby # Issue with ruby's tmLanguage, punctuation.definition.variable.makefile#ffffff
meta.selectionset.graphql variable#e6e6e6
meta.selectionset.graphql meta.arguments variable#f4e1b3
support.type.graphql, support.type.builtin.graphql#bbe6ff
meta.arguments.graphql variable.parameter.graphql#cb96b7
meta.arguments.graphql variable.graphql#99cebd
entity.name.fragment.graphql, variable.fragment.graphql#ffffff
log.error#ff7575bold
log.warning#d3b88ebold
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#d3b88e
constant.other.date, constant.other.timestamp#ffffff
variable.other.alias.yaml#ffffff
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#F3E9D2
punctuation.definition.group.capture.regexp#d3b88e
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#DAF8D4
punctuation.definition.character-class.regexp#AFD8FF
punctuation.definition.group.regexp#FF869C
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#F3E9D2
meta.assertion.look-ahead.regexp#d3b88e
meta.scope.prerequisites.makefile#d3b88e
source.json meta.structure.dictionary.json support.type.property-name.json#d3b88e
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#FFB794
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#F3E9D2
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#FF869C
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#bbdeee
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#FFB794
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#AEAEAE
RLabs Themes Collection by RLabs Inc. - VS Code Theme