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.underline—underline
markup.underline.link#75ccffunderline
markup.bold—bold
markup.heading#ffef75—
markup.italic—italic
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