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#F1EEEF70
  • activityBar.activeBorder#255B52
  • activityBar.background#fffbdd
  • activityBar.foreground#18201F
  • activityBar.inactiveForeground#AAA99F
  • activityBarBadge.background#26554E
  • activityBarBadge.foreground#18201F
  • activityBarTop.foreground#18201F
  • badge.background#26554E
  • badge.foreground#18201F
  • breadcrumb.activeForeground#18201F
  • breadcrumb.activeSelectionForeground#18201F
  • breadcrumb.background#fffbdd
  • breadcrumb.focusForeground#18201F
  • breadcrumb.foreground#AAA99F
  • breadcrumbPicker.background#fffbdd
  • button.background#26554Edb
  • button.foreground#18201F
  • button.hoverBackground#26554E
  • button.secondaryBackground#255B52db
  • button.secondaryForeground#18201F
  • button.secondaryHoverBackground#255B52
  • checkbox.background#fffcd7
  • checkbox.foreground#18201F
  • debugToolBar.background#4B739B
  • debugToolBar.foreground#18201F
  • descriptionForeground#2B3B39
  • diffEditor.diagonalFill#4B739B
  • diffEditor.insertedLineBackground#4B739B40
  • diffEditor.insertedTextBackground#4B739B50
  • diffEditor.insertedTextBorder#4B739B
  • diffEditor.removedLineBackground#7F343440
  • diffEditor.removedTextBackground#7F343450
  • diffEditor.removedTextBorder#7F3434
  • diffEditorGutter.insertedLineBackground#4B739B
  • diffEditorGutter.removedLineBackground#7F3434
  • disabledForeground#AAA99F
  • dropdown.background#cdc7bb
  • dropdown.border#E5E1E2
  • dropdown.foreground#18201F
  • editor.background#fffcd7
  • editor.findMatchBackground#D1BED570
  • editor.findMatchForeground#18201F
  • editor.findMatchHighlightBackground#F1EEEF70
  • editor.findMatchHighlightForeground#18201F
  • editor.findRangeHighlightBackground#D0DCDA70
  • editor.foldBackground#F1EEEF70
  • editor.foldPlaceholderForeground#18201F
  • editor.foreground#18201F
  • editor.hoverHighlightBackground#F1EEEF70
  • editor.inactiveSelectionBackground#D0DCDA70
  • editor.lineHighlightBackground#00000010
  • editor.placeholder.foreground#2B3B39
  • editor.rangeHighlightBackground#F1EEEF70
  • editor.selectionBackground#D0DCDA70
  • editor.selectionForeground#18201F
  • editor.selectionHighlightBackground#D0DCDA70
  • editor.snippetFinalTabstopHighlightBackground#F1EEEF70
  • editor.snippetTabstopHighlightBackground#F1EEEF70
  • editor.symbolHighlightBackground#F1EEEF70
  • editor.wordHighlightBackground#F1EEEF70
  • editor.wordHighlightStrongBackground#F1EEEF50
  • editor.wordHighlightTextBackground#F1EEEF70
  • editorCodeLens.foreground#AAA99F
  • editorCursor.background#F1EEEF70
  • editorCursor.foreground#255B52
  • editorError.foreground#7F3434
  • editorGroup.border#E5E1E2
  • editorGroup.dropBackground#cdc7bb
  • editorGroup.emptyBackground#fffcd7
  • editorGroupHeader.border#E5E1E2
  • editorGroupHeader.tabsBackground#fffcd7
  • editorGutter.addedBackground#2C542C
  • editorGutter.background#fffcd7
  • editorGutter.commentRangeForeground#AAA99F
  • editorGutter.deletedBackground#7F3434
  • editorGutter.modifiedBackground#4B739B
  • editorHint.foreground#2C542C
  • editorHoverWidget.background#fffcd7
  • editorHoverWidget.border#E5E1E2
  • editorHoverWidget.foreground#18201F
  • editorHoverWidget.highlightForeground#18201F
  • editorHoverWidget.statusBarBackground#fffcd7
  • editorIndentGuide.activeBackground1#255B52
  • editorIndentGuide.background1#F1EEEF70
  • editorInfo.foreground#4B739B
  • editorLineNumber.activeForeground#255B52
  • editorLineNumber.dimmedForeground#AAA99F90
  • editorLineNumber.foreground#AAA99F
  • editorLink.activeForeground#4B739B
  • editorMarkerNavigation.background#fffbdd
  • editorMarkerNavigationError.background#fffbdd
  • editorMarkerNavigationWarning.background#fffbdd
  • editorMultiCursor.primary.background#F1EEEF70
  • editorMultiCursor.primary.foreground#255B52
  • editorMultiCursor.secondary.background#F1EEEF70
  • editorMultiCursor.secondary.foreground#18201F
  • editorOverviewRuler.addedForeground#2C542C
  • editorOverviewRuler.border#E5E1E2
  • editorOverviewRuler.commentForeground#AAA99F
  • editorOverviewRuler.commonContentForeground#18201F
  • editorOverviewRuler.currentContentForeground#4B739B
  • editorOverviewRuler.deletedForeground#7F3434
  • editorOverviewRuler.errorForeground#7F3434
  • editorOverviewRuler.findMatchForeground#18201F
  • editorOverviewRuler.incomingContentForeground#2C542C
  • editorOverviewRuler.infoForeground#4B739B
  • editorOverviewRuler.modifiedForeground#4B739B
  • editorOverviewRuler.rangeHighlightForeground#F1EEEF70
  • editorOverviewRuler.selectionHighlightForeground#D0DCDA70
  • editorOverviewRuler.warningForeground#7C5937
  • editorOverviewRuler.wordHighlightForeground#F1EEEF70
  • editorOverviewRuler.wordHighlightStrongForeground#F1EEEF70
  • editorRuler.foreground#F1EEEF70
  • editorSuggestWidget.background#fffcd7
  • editorSuggestWidget.border#E5E1E2
  • editorSuggestWidget.focusHighlightForeground#18201F
  • editorSuggestWidget.foreground#AAA99F
  • editorSuggestWidget.highlightForeground#18201F
  • editorSuggestWidget.selectedBackground#26554E80
  • editorSuggestWidget.selectedForeground#18201F
  • editorUnicodeHighlight.background#F1EEEF70
  • editorWarning.foreground#7C5937
  • editorWhitespace.foreground#F1EEEF70
  • editorWidget.background#fffcd7
  • editorWidget.border#E5E1E2
  • editorWidget.foreground#18201F
  • errorForeground#7F3434
  • extensionButton.prominentBackground#26554Eaa
  • extensionButton.prominentForeground#18201F
  • extensionButton.prominentHoverBackground#26554E
  • focusBorder#E5E1E2
  • foreground#18201F
  • gitDecoration.addedResourceForeground#2C542C
  • gitDecoration.conflictingResourceForeground#7C5937
  • gitDecoration.deletedResourceForeground#7F3434
  • gitDecoration.ignoredResourceForeground#AAA99F
  • gitDecoration.modifiedResourceForeground#4B739B
  • gitDecoration.renamedResourceForeground#255B52
  • gitDecoration.untrackedResourceForeground#2B3B39
  • input.background#fffcd7
  • input.border#AAA99F
  • input.foreground#18201F
  • input.placeholderForeground#AAA99F
  • inputOption.activeBorder#255B52
  • inputValidation.errorBorder#7F3434
  • inputValidation.infoBorder#4B739B
  • inputValidation.warningBorder#7C5937
  • list.activeSelectionBackground#26554E70
  • list.activeSelectionForeground#18201F
  • list.dropBackground#cdc7bb
  • list.dropBetweenBackground#E5E1E2
  • list.errorForeground#7F3434
  • list.focusBackground#26554E50
  • list.focusForeground#18201F
  • list.highlightForeground#255B52
  • list.hoverBackground#26554E20
  • list.hoverForeground#18201F
  • list.inactiveFocusBackground#fffbdd
  • list.inactiveSelectionBackground#26554E60
  • list.inactiveSelectionForeground#2B3B39
  • list.warningForeground#7C5937
  • listFilterWidget.background#cdc7bb
  • listFilterWidget.noMatchesOutline#7F3434
  • listFilterWidget.outline#E5E1E2
  • merge.border#E5E1E2
  • merge.currentContentBackground#4B739B20
  • merge.currentHeaderBackground#4B739B40
  • merge.incomingContentBackground#2C542C20
  • merge.incomingHeaderBackground#2C542C40
  • mergeEditor.change.background#7C5937
  • notificationLink.foreground#4B739B
  • notifications.background#fffbdd
  • notifications.border#E5E1E2
  • notifications.foreground#18201F
  • notificationsErrorIcon.foreground#7F3434
  • notificationsInfoIcon.foreground#4B739B
  • notificationsWarningIcon.foreground#7C5937
  • panel.background#fffbdd
  • panel.border#255B52
  • panelInput.border#AAA99F
  • panelTitle.activeBorder#255B52
  • panelTitle.activeForeground#18201F
  • panelTitle.inactiveForeground#AAA99F
  • peekView.border#26554E
  • peekViewEditor.background#fffcd7
  • peekViewEditor.matchHighlightBackground#D1BED570
  • peekViewResult.background#fffcd7
  • peekViewResult.fileForeground#18201F
  • peekViewResult.lineForeground#18201F
  • peekViewResult.matchHighlightBackground#F1EEEF70
  • peekViewResult.selectionBackground#fffbdd
  • peekViewResult.selectionForeground#18201F
  • peekViewTitle.background#fffcd7
  • peekViewTitleDescription.foreground#2B3B39
  • peekViewTitleLabel.foreground#18201F
  • pickerGroup.border#26554E
  • pickerGroup.foreground#651772
  • progressBar.background#255B52
  • selection.background#26554E50
  • settings.checkboxBackground#fffcd7
  • settings.checkboxBorder#E5E1E2
  • settings.checkboxForeground#18201F
  • settings.dropdownBackground#fffcd7
  • settings.dropdownBorder#E5E1E2
  • settings.dropdownForeground#18201F
  • settings.focusedRowBackground#F1EEEF70
  • settings.focusedRowBorder#AAA99F
  • settings.headerBorder#E5E1E2
  • settings.headerForeground#18201F
  • settings.inactiveSelectedItemBorder#AAA99F
  • settings.modifiedItemIndicator#7C5937
  • settings.numberInputBackground#fffcd7
  • settings.numberInputBorder#AAA99F
  • settings.numberInputForeground#18201F
  • settings.rowHoverBackground#F1EEEF70
  • settings.settingsHeaderHoverForeground#18201F
  • settings.textInputBackground#fffcd7
  • settings.textInputBorder#AAA99F
  • settings.textInputForeground#18201F
  • sideBar.background#fffcd7
  • sideBarActivityBarTop.border#E5E1E2
  • sideBarSectionHeader.background#fffbdd
  • sideBarSectionHeader.border#E5E1E2
  • sideBarStickyScroll.background#fffcd7
  • sideBarStickyScroll.border#E5E1E2
  • sideBarStickyScroll.shadow#E5E1E2
  • sideBarTitle.background#fffcd7
  • sideBarTitle.foreground#18201F
  • statusBar.background#26554E
  • statusBar.debuggingBackground#7C5937
  • statusBar.debuggingForeground#18201F
  • statusBar.foreground#18201F
  • statusBar.noFolderBackground#2B3B39
  • statusBar.noFolderForeground#F2F2F2
  • statusBarItem.activeBackground#26554Eaa
  • statusBarItem.errorBackground#7F3434
  • statusBarItem.errorForeground#18201F
  • statusBarItem.errorHoverBackground#7F3434aa
  • statusBarItem.hoverBackground#26554Eaa
  • statusBarItem.prominentBackground#26554Eaa
  • statusBarItem.prominentForeground#F2F2F2
  • statusBarItem.prominentHoverBackground#26554Eaa
  • statusBarItem.prominentHoverForeground#F2F2F2
  • statusBarItem.remoteBackground#255B52
  • statusBarItem.remoteForeground#18201F
  • statusBarItem.remoteHoverBackground#255B52aa
  • statusBarItem.warningBackground#7C5937
  • statusBarItem.warningForeground#18201F
  • statusBarItem.warningHoverBackground#7C5937aa
  • tab.activeBackground#fffbdd
  • tab.activeBorderTop#255B52
  • tab.activeForeground#18201F
  • tab.border#E5E1E2
  • tab.hoverBackground#fffbdd80
  • tab.hoverForeground#18201F
  • tab.inactiveBackground#fffcd7
  • tab.inactiveForeground#AAA99F
  • tab.selectedBackground#F1EEEF70
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#665F7A
  • terminal.ansiBrightBlack#444444
  • terminal.ansiBrightBlue#9E7BFF
  • terminal.ansiBrightCyan#00AAA0
  • terminal.ansiBrightGreen#00B00B
  • terminal.ansiBrightMagenta#CE6CFF
  • terminal.ansiBrightRed#D96A00
  • terminal.ansiBrightWhite#898900
  • terminal.ansiBrightYellow#9F8600
  • terminal.ansiCyan#00A79E
  • terminal.ansiGreen#00AB08
  • terminal.ansiMagenta#C75BFF
  • terminal.ansiRed#E96600
  • terminal.ansiWhite#C47400
  • terminal.ansiYellow#AA8900
  • terminal.background#fffcd7
  • terminal.border#E5E1E2
  • terminal.foreground#18201F
  • terminal.inactiveSelectionBackground#D0DCDA70
  • terminal.selectionBackground#D0DCDA70
  • textBlockQuote.background#cdc7bb
  • textBlockQuote.border#E5E1E2
  • textCodeBlock.background#cdc7bb
  • textLink.activeForeground#4B739B
  • textLink.foreground#26554E
  • textPreformat.background#cdc7bb
  • textPreformat.foreground#18201F
  • textSeparator.foreground#18201F
  • titleBar.activeBackground#fffbdd
  • titleBar.activeForeground#18201F
  • titleBar.inactiveBackground#fffbdd
  • titleBar.inactiveForeground#AAA99F
  • widget.border#E5E1E2

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
meta.tag, string#18201F
meta.diff, meta.diff.header#AAA99F
meta.link.reference.def.restructuredtext, string.other.link.description, string.other.link.title#00A98F
emphasisitalic
strongbold
invalid#7F3434strikethrough
invalid.deprecated#18201Funderline italic
header#00A98F
source.ini, source.ignore, source#2B3B39
markup.inserted#00A98F
markup.deleted#7F3434
markup.changed#4B739B
markup.error#7F3434
markup.underlineunderline
markup.bold#7C5937bold
markup.heading#255B52bold
markup.italic#2B3B39italic
markup.inline.raw, markup.raw.restructuredtext#255B52
markup.underline.link, markup.underline.link.image, markup.quote#4B739B
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#26554E
meta.separator.markdown#255B52
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#685C18
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#7C5937
entity.name.class, entity.name.type.class, entity.other.inherited-class#26554E
entity.name.tag, entity.other.attribute-name.parent-selector#009E87
entity.other.attribute-name#26554E
entity.name.function, meta.function-call, meta.method-call, meta.method#255B52
meta.selector.css, meta.at-rule.function variable, meta.at-rule.mixin variable, variable.parameter, entity.name.variable.parameter#206A5F
support#4E0E18
entity.name, variable.other.key#255B52
entity.name.type#681824
entity.name.type.module, entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#5A1F16
entity.other.attribute-name, entity.other.attribute-name.pseudo-class.css#A18900
entity.other.attribute-name.class.css#255B52
storage.class, storage.type#26554E
storage.modifier#661925
comment, punctuation.definition.comment, unused.comment, wildcard.comment#AAA99F
constant#00A98F
constant.other.color#661521
constant.character.escape, constant.character.string.escape, constant.regexp, constant.language#541060
constant.other.date, constant.other.timestamp#18685C
keyword.operator#009F85
keyword.other.unit#4E1259
keyword.control, keyword.other.template, keyword.other.substitution#146C5F
keyword.other.this#00A98F
keyword.control.import, keyword.control.from#1F4B51
keyword.control.new, keyword.operator.new, keyword.other.important.css#26554E
keyword.control.flow, keyword.control.loop, keyword.control.conditional, keyword.operator.logical, keyword.operator.relational, keyword.operator.comparison, keyword.operator.ternary#16616A
meta.attribute-selector.scss#A48B00
entity.name.tag.css, entity.name.tag.less, entity.name.tag.custom.css#009E87
entity.name.tag.wildcard.css, entity.name.tag.wildcard.less, entity.name.tag.wildcard.scss, entity.name.tag.wildcard.sass#196566
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#26554E
support.constant.property-value.css, constant.numeric.css#2B3B39
keyword.control.at-rule.apply.tailwind#1F4B51
keyword.control.at-rule.tailwind.tailwind#146C5F
keyword.control.at-rule.layer.tailwind#16616A
meta.selector#A48B00
punctuation.definition.string.begin, punctuation.definition.string.end, punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#59363B
punctuation.definition.constant.restructuredtext#00A98F
string.quoted.docstring.multi#255B52
punctuation.definition.keyword.css, punctuation.section.property-list.begin.bracket.curly.css, punctuation.section.property-list.end.bracket.curly.css, punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss#59363B
punctuation, punctuation.definition.tag, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html#196566
entity.other.attribute-name punctuation, meta.brace.square, meta.group.toml, meta.group.double.toml, punctuation.definition.block.scalar.folded.yaml, punctuation.definition.block.scalar.literal.yaml, punctuation.definition.block.sequence.item.yaml, punctuation.separator#C47400
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.type.begin, punctuation.definition.type.end, punctuation.section.scope.begin, punctuation.section.scope.end#684840
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.end, punctuation.definition.variable.makefile#FF6359
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#88514E
punctuation.definition.directive.restructuredtext#00A98F
variable#6A202B
variable.other.alias.yaml#6A202Bunderline
variable.language, variable.parameter.function.language.special#541060
variable.other.constant#783821
support.variable#6A202B
variable.other.property, support.variable.property, variable.object.property, variable.other.object.property#644220
support.function.magic, variable.other.predefined, storage.modifier.async, keyword.control.trycatch, keyword.control.trycatch.js, keyword.control.trycatch.ts#7C5937
support.function, support.type.property-name#7F8A00
storage#197063
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#AA8900
punctuation.definition.group.capture.regexp#E96600
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#E96600
punctuation.definition.character-class.regexp#9F8600
punctuation.definition.group.regexp#9E7BFF
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#E96600
meta.assertion.look-ahead.regexp#9E7BFF
source.json meta.structure.dictionary.json support.type.property-name.json#255B52
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#26554E
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#4B739B
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#7C5937
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#7F3434
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#2C542C
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#255B52
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#26554E
token.info-token#4B739B
token.warn-token#7C5937
token.error-token#7F3434
token.debug-token#7C5937
RLabs Themes Collection by RLabs Inc. - VS Code Theme