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#14161e
  • activityBar.activeBorder#61c5e6
  • activityBar.background#14161e
  • activityBar.dropBackground#14161e
  • activityBar.foreground#f2f4f4
  • activityBarBadge.background#61c5e6
  • activityBarBadge.foreground#14161e
  • badge.background#61c5e6
  • badge.foreground#14161e
  • button.background#61c5e6ee
  • button.foreground#14161e
  • button.hoverBackground#61c5e6
  • button.secondaryBackground#434c5e
  • button.secondaryForeground#f2f4f4
  • button.secondaryHoverBackground#4c566a
  • charts.blue#77b1eb
  • charts.foreground#f2f4f4
  • charts.green#a3be8c
  • charts.lines#61c5e6
  • charts.orange#d08770
  • charts.purple#b48ead
  • charts.red#ce606b
  • charts.yellow#ebcb8b
  • checkbox.border#ffffff18
  • debugConsole.errorForeground#ce606b
  • debugConsole.infoForeground#61c5e6
  • debugConsole.sourceForeground#616e88
  • debugConsole.warningForeground#ebcb8b
  • debugConsoleInputIcon.foreground#77b1eb
  • debugExceptionWidget.background#4c566a
  • debugExceptionWidget.border#14161e
  • debugToolBar.background#14161e
  • descriptionForeground#f2f4f4e6
  • diffEditor.insertedTextBackground#77b1eb33
  • diffEditor.removedTextBackground#ce606b4d
  • dropdown.background#14161e
  • dropdown.border#ffffff18
  • dropdown.foreground#f2f4f4
  • editor.background#14161e
  • editor.findMatchBackground#0052f5b2
  • editor.findMatchHighlightBackground#0052f5b2
  • editor.findRangeHighlightBackground#61c5e633
  • editor.focusedStackFrameHighlightBackground#5e81ac
  • editor.foreground#f2f4f4
  • editor.hoverHighlightBackground#14161e
  • editor.inactiveSelectionBackground#434c5ecc
  • editor.inlineValuesBackground#4c566a
  • editor.inlineValuesForeground#eceff4
  • editor.lineHighlightBackground#3f4c6828
  • editor.lineHighlightBorder#343b4840
  • editor.rangeHighlightBackground#434c5e52
  • editor.selectionBackground#434c5e5b
  • editor.selectionHighlightBackground#434c5e66
  • editor.selectionHighlightBorder#ffffff18
  • editor.stackFrameHighlightBackground#5e81ac
  • editor.wordHighlightBackground#61c5e646
  • editor.wordHighlightStrongBackground#0044ff4d
  • editorActiveLineNumber.foreground#f2f4f4cc
  • editorBracketHighlight.foreground1#a7aae0
  • editorBracketHighlight.foreground2#61c5e6
  • editorBracketHighlight.foreground3#77b1eb
  • editorBracketHighlight.foreground4#5e81ac
  • editorBracketHighlight.foreground5#a7aae0
  • editorBracketHighlight.foreground6#61c5e6
  • editorBracketHighlight.unexpectedBracket.foreground#ce606b
  • editorBracketMatch.background#14161e00
  • editorBracketMatch.border#61c5e6
  • editorCodeLens.foreground#4c566a
  • editorCursor.background#000000
  • editorCursor.foreground#00fff7
  • editorError.border#ce606b00
  • editorError.foreground#ce606b
  • editorGroup.background#14161e
  • editorGroup.border#ffffff18
  • editorGroup.dropBackground#111418d7
  • editorGroupHeader.border#ffffff18
  • editorGroupHeader.noTabsBackground#14161e
  • editorGroupHeader.tabsBackground#14161e
  • editorGroupHeader.tabsBorder#14161e00
  • editorGutter.addedBackground#a3be8c
  • editorGutter.background#14161e
  • editorGutter.deletedBackground#ce606b
  • editorGutter.modifiedBackground#ebcb8b
  • editorHint.border#ebcb8b00
  • editorHint.foreground#ebcb8b
  • editorHoverWidget.background#0a161a
  • editorHoverWidget.border#14161e
  • editorIndentGuide.activeBackground#4c566a
  • editorIndentGuide.background#434c5eb3
  • editorInlayHint.background#434c5e
  • editorInlayHint.foreground#f2f4f4
  • editorLineNumber.activeForeground#f2f4f4
  • editorLineNumber.foreground#4c566a
  • editorLink.activeForeground#61c5e6
  • editorMarkerNavigation.background#5e81acc0
  • editorMarkerNavigationError.background#ce606bc0
  • editorMarkerNavigationWarning.background#ebcb8bc0
  • editorOverviewRuler.addedForeground#a3be8c
  • editorOverviewRuler.border#14161e
  • editorOverviewRuler.currentContentForeground#14161e
  • editorOverviewRuler.deletedForeground#ce606b
  • editorOverviewRuler.errorForeground#ce606b
  • editorOverviewRuler.findMatchForeground#61c5e666
  • editorOverviewRuler.incomingContentForeground#14161e
  • editorOverviewRuler.infoForeground#77b1eb
  • editorOverviewRuler.modifiedForeground#ebcb8b
  • editorOverviewRuler.rangeHighlightForeground#61c5e666
  • editorOverviewRuler.selectionHighlightForeground#61c5e666
  • editorOverviewRuler.warningForeground#ebcb8b
  • editorOverviewRuler.wordHighlightForeground#61c5e666
  • editorOverviewRuler.wordHighlightStrongForeground#61c5e666
  • editorRuler.foreground#434c5e
  • editorSuggestWidget.background#14161e
  • editorSuggestWidget.border#14161e
  • editorSuggestWidget.focusHighlightForeground#61c5e6
  • editorSuggestWidget.foreground#f2f4f4
  • editorSuggestWidget.highlightForeground#61c5e6
  • editorSuggestWidget.selectedBackground#434c5e
  • editorSuggestWidget.selectedForeground#f2f4f4
  • editorWarning.border#ebcb8b00
  • editorWarning.foreground#ebcb8b
  • editorWhitespace.foreground#4c566ab3
  • editorWidget.background#14161e
  • editorWidget.border#14161e
  • errorForeground#ce606b
  • extensionButton.prominentBackground#434c5e
  • extensionButton.prominentForeground#f2f4f4
  • extensionButton.prominentHoverBackground#4c566a
  • focusBorder#14161e
  • foreground#f2f4f4
  • gitDecoration.conflictingResourceForeground#5e81ac
  • gitDecoration.deletedResourceForeground#ce606b
  • gitDecoration.ignoredResourceForeground#f2f4f466
  • gitDecoration.modifiedResourceForeground#ebcb8b
  • gitDecoration.stageDeletedResourceForeground#ce606b
  • gitDecoration.stageModifiedResourceForeground#ebcb8b
  • gitDecoration.submoduleResourceForeground#a7aae0
  • gitDecoration.untrackedResourceForeground#a3be8c
  • input.background#14161e
  • input.border#ffffff18
  • input.foreground#f2f4f4
  • input.placeholderForeground#f2f4f499
  • inputOption.activeBackground#5e81ac
  • inputOption.activeBorder#5e81ac
  • inputOption.activeForeground#eceff4
  • inputValidation.errorBackground#ce606b
  • inputValidation.errorBorder#ce606b
  • inputValidation.infoBackground#77b1eb
  • inputValidation.infoBorder#77b1eb
  • inputValidation.warningBackground#d08770
  • inputValidation.warningBorder#d08770
  • keybindingLabel.background#4c566a
  • keybindingLabel.border#4c566a
  • keybindingLabel.bottomBorder#4c566a
  • keybindingLabel.foreground#f2f4f4
  • list.activeSelectionBackground#61c5e6
  • list.activeSelectionForeground#14161e
  • list.dropBackground#61c5e699
  • list.errorForeground#ce606b
  • list.focusBackground#61c5e699
  • list.focusForeground#f2f4f4
  • list.focusHighlightForeground#eceff4
  • list.highlightForeground#61c5e6
  • list.hoverBackground#14161e
  • list.hoverForeground#eceff4
  • list.inactiveFocusBackground#434c5ecc
  • list.inactiveSelectionBackground#434c5e
  • list.inactiveSelectionForeground#f2f4f4
  • list.warningForeground#ebcb8b
  • merge.border#14161e00
  • merge.currentContentBackground#77b1eb4d
  • merge.currentHeaderBackground#77b1eb66
  • merge.incomingContentBackground#a7aae04d
  • merge.incomingHeaderBackground#a7aae066
  • minimap.background#14161e
  • minimap.errorHighlight#ce606bcc
  • minimap.findMatchHighlight#61c5e6
  • minimap.selectionHighlight#61c5e6cc
  • minimap.warningHighlight#ebcb8bcc
  • minimapGutter.addedBackground#a3be8c
  • minimapGutter.deletedBackground#ce606b
  • minimapGutter.modifiedBackground#ebcb8b
  • minimapSlider.activeBackground#434c5eaa
  • minimapSlider.background#434c5e99
  • minimapSlider.hoverBackground#434c5eaa
  • notification.background#14161e
  • notification.buttonBackground#434c5e
  • notification.buttonForeground#f2f4f4
  • notification.buttonHoverBackground#4c566a
  • notification.errorBackground#ce606b
  • notification.errorForeground#14161e
  • notification.foreground#f2f4f4
  • notification.infoBackground#61c5e6
  • notification.infoForeground#14161e
  • notification.warningBackground#ebcb8b
  • notification.warningForeground#14161e
  • notificationCenter.border#14161e00
  • notificationCenterHeader.background#14161e
  • notificationCenterHeader.foreground#61c5e6
  • notificationLink.foreground#61c5e6
  • notifications.background#14161e
  • notifications.border#14161e
  • notifications.foreground#f2f4f4
  • notificationToast.border#14161e00
  • panel.background#14161e
  • panel.border#ffffff18
  • panelTitle.activeBorder#61c5e600
  • panelTitle.activeForeground#61c5e6
  • panelTitle.inactiveForeground#f2f4f4
  • peekView.border#ffffff18
  • peekViewEditor.background#14161e
  • peekViewEditor.matchHighlightBackground#61c5e64d
  • peekViewEditorGutter.background#14161e
  • peekViewResult.background#14161e
  • peekViewResult.fileForeground#61c5e6
  • peekViewResult.lineForeground#f2f4f466
  • peekViewResult.matchHighlightBackground#61c5e6cc
  • peekViewResult.selectionBackground#434c5e
  • peekViewResult.selectionForeground#f2f4f4
  • peekViewTitle.background#14161e
  • peekViewTitleDescription.foreground#f2f4f4
  • peekViewTitleLabel.foreground#61c5e6
  • pickerGroup.border#14161e
  • pickerGroup.foreground#61c5e6
  • progressBar.background#61c5e6
  • quickInputList.focusBackground#61c5e6
  • quickInputList.focusForeground#14161e
  • sash.hoverBorder#61c5e6
  • scrollbar.shadow#00000066
  • scrollbarSlider.activeBackground#434c5eaa
  • scrollbarSlider.background#434c5e99
  • scrollbarSlider.hoverBackground#434c5eaa
  • selection.background#61c5e699
  • sideBar.background#14161e
  • sideBar.border#ffffff18
  • sideBar.foreground#f2f4f4
  • sideBarSectionHeader.background#14161e
  • sideBarSectionHeader.foreground#f2f4f4
  • sideBarTitle.foreground#f2f4f4
  • statusBar.background#14161e
  • statusBar.border#ffffff18
  • statusBar.debuggingBackground#5e81ac
  • statusBar.debuggingForeground#f2f4f4
  • statusBar.foreground#f2f4f4
  • statusBar.noFolderBackground#14161e
  • statusBar.noFolderForeground#f2f4f4
  • statusBarItem.activeBackground#4c566a
  • statusBarItem.errorBackground#14161e
  • statusBarItem.errorForeground#ce606b
  • statusBarItem.hoverBackground#434c5e
  • statusBarItem.prominentBackground#14161e
  • statusBarItem.prominentHoverBackground#434c5e
  • statusBarItem.warningBackground#ebcb8b
  • statusBarItem.warningForeground#14161e
  • tab.activeBackground#14161e
  • tab.activeBorder#61c5e6
  • tab.activeBorderTop#61c5e600
  • tab.activeForeground#61c5e6
  • tab.border#14161e00
  • tab.hoverBackground#14161ecc
  • tab.hoverBorder#fff
  • tab.inactiveBackground#14161e
  • tab.inactiveForeground#f2f4f466
  • tab.lastPinnedBorder#4c566a
  • tab.unfocusedActiveBorder#61c5e600
  • tab.unfocusedActiveBorderTop#61c5e600
  • tab.unfocusedActiveForeground#f2f4f499
  • tab.unfocusedHoverBackground#14161eb3
  • tab.unfocusedHoverBorder#61c5e600
  • tab.unfocusedInactiveForeground#f2f4f466
  • terminal.ansiBlack#14161e
  • terminal.ansiBlue#77b1eb
  • terminal.ansiBrightBlack#4c566a
  • terminal.ansiBrightBlue#77b1eb
  • terminal.ansiBrightCyan#a7aae0
  • terminal.ansiBrightGreen#a3be8c
  • terminal.ansiBrightMagenta#b48ead
  • terminal.ansiBrightRed#ce606b
  • terminal.ansiBrightWhite#eceff4
  • terminal.ansiBrightYellow#ebcb8b
  • terminal.ansiCyan#61c5e6
  • terminal.ansiGreen#a3be8c
  • terminal.ansiMagenta#b48ead
  • terminal.ansiRed#ce606b
  • terminal.ansiWhite#e5e9f0
  • terminal.ansiYellow#ebcb8b
  • terminal.background#14161e
  • terminal.foreground#f2f4f4
  • terminal.tab.activeBorder#61c5e6
  • textBlockQuote.background#14161e
  • textBlockQuote.border#77b1eb
  • textCodeBlock.background#4c566a
  • textLink.activeForeground#61c5e6
  • textLink.foreground#61c5e6
  • textPreformat.foreground#a7aae0
  • textSeparator.foreground#eceff4
  • titleBar.activeBackground#14161e
  • titleBar.activeForeground#f2f4f4
  • titleBar.border#14161e00
  • titleBar.inactiveBackground#14161e
  • titleBar.inactiveForeground#f2f4f466
  • tree.indentGuidesStroke#616e88
  • walkThrough.embeddedEditorBackground#14161e
  • welcomePage.buttonBackground#434c5e
  • welcomePage.buttonHoverBackground#4c566a
  • widget.border#61c5e6
  • widget.shadow#14161e

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#f2f4f4ff
emphasisitalic
strongbold
comment#616E88
constant.character#EBCB8B
constant.character.escape#EBCB8B
constant.language#77b1eb
constant.numeric#B48EAD
constant.regexp#EBCB8B
entity.name.class, entity.name.type.class#a7aae0
entity.name.function#61c5e6
entity.name.tag#77b1eb
entity.other.attribute-name#a7aae0
entity.other.inherited-class#a7aae0bold
invalid.deprecated#f2f4f4
invalid.illegal#f2f4f4
keyword#77b1eb
keyword.operator#77b1eb
keyword.other.new#77b1eb
markup.boldbold
markup.changed#EBCB8B
markup.deleted#ce606b
markup.inserted#A3BE8C
meta.preprocessor#5E81AC
punctuation#ECEFF4
punctuation.definition.method-parameters, punctuation.definition.function-parameters, punctuation.definition.parameters#ECEFF4
punctuation.definition.tag#77b1eb
punctuation.definition.comment, punctuation.end.definition.comment, punctuation.start.definition.comment#616E88
punctuation.section#ECEFF4
punctuation.section.embedded.begin, punctuation.section.embedded.end#77b1eb
punctuation.terminator#77b1eb
punctuation.definition.variable#77b1eb
storage#77b1eb
string#A3BE8C
string.regexp#EBCB8B
support.class#a7aae0
support.constant#77b1eb
support.function#61c5e6
support.function.construct#77b1eb
support.type#a7aae0
support.type.exception#a7aae0
token.debug-token#b48ead
token.error-token#ce606b
token.info-token#61c5e6
token.warn-token#ebcb8b
variable.other#f2f4f4
variable.language#77b1eb
variable.parameter#f2f4f4
punctuation.separator.pointer-access.c#77b1eb
source.c meta.preprocessor.include, source.c string.quoted.other.lt-gt.include#a7aae0
source.cpp keyword.control.directive.conditional, source.cpp punctuation.definition.directive, source.c keyword.control.directive.conditional, source.c punctuation.definition.directive#5E81ACbold
source.css constant.other.color.rgb-value#B48EAD
source.css meta.property-value#61c5e6
source.css keyword.control.at-rule.media, source.css keyword.control.at-rule.media punctuation.definition.keyword#D08770
source.css punctuation.definition.keyword#77b1eb
source.css support.type.property-name#f2f4f4
source.diff meta.diff.range.context#a7aae0
source.diff meta.diff.header.from-file#a7aae0
source.diff punctuation.definition.from-file#a7aae0
source.diff punctuation.definition.range#a7aae0
source.diff punctuation.definition.separator#77b1eb
entity.name.type.module.elixir#a7aae0
variable.other.readwrite.module.elixir#f2f4f4bold
constant.other.symbol.elixir#f2f4f4bold
variable.other.constant.elixir#a7aae0
source.go constant.other.placeholder.go#EBCB8B
source.java comment.block.documentation.javadoc punctuation.definition.entity.html#77b1eb
source.java constant.other#f2f4f4
source.java keyword.other.documentation#a7aae0
source.java keyword.other.documentation.author.javadoc#a7aae0
source.java keyword.other.documentation.directive, source.java keyword.other.documentation.custom#a7aae0
source.java keyword.other.documentation.see.javadoc#a7aae0
source.java meta.method-call meta.method#61c5e6
source.java meta.tag.template.link.javadoc, source.java string.other.link.title.javadoc#a7aae0
source.java meta.tag.template.value.javadoc#61c5e6
source.java punctuation.definition.keyword.javadoc#a7aae0
source.java punctuation.definition.tag.begin.javadoc, source.java punctuation.definition.tag.end.javadoc#616E88
source.java storage.modifier.import#a7aae0
source.java storage.modifier.package#a7aae0
source.java storage.type#a7aae0
source.java storage.type.annotation#D08770
source.java storage.type.generic#a7aae0
source.java storage.type.primitive#77b1eb
source.js punctuation.decorator, source.js meta.decorator variable.other.readwrite, source.js meta.decorator entity.name.function#D08770
source.js meta.object-literal.key#61c5e6
source.js storage.type.class.jsdoc#a7aae0
source.js string.quoted.template punctuation.quasi.element.begin, source.js string.quoted.template punctuation.quasi.element.end, source.js string.template punctuation.definition.template-expression#77b1eb
source.js string.quoted.template meta.method-call.with-arguments#ECEFF4
source.js string.template meta.template.expression support.variable.property, source.js string.template meta.template.expression variable.other.object#f2f4f4
source.js support.type.primitive#77b1eb
source.js variable.other.object#f2f4f4
source.js variable.other.readwrite.alias#a7aae0
source.js meta.embedded.line meta.brace.square, source.js meta.embedded.line meta.brace.round, source.js string.quoted.template meta.brace.square, source.js string.quoted.template meta.brace.round#ECEFF4
text.html.basic constant.character.entity.html#EBCB8B
text.html.basic constant.other.inline-data#D08770italic
text.html.basic meta.tag.sgml.doctype#5E81AC
text.html.basic punctuation.definition.entity#77b1eb
source.properties entity.name.section.group-title.ini#61c5e6
source.properties punctuation.separator.key-value.ini#77b1eb
text.html.markdown markup.fenced_code.block, text.html.markdown markup.fenced_code.block punctuation.definition#a7aae0
markup.heading#61c5e6
text.html.markdown markup.inline.raw, text.html.markdown markup.inline.raw punctuation.definition.raw#a7aae0
text.html.markdown markup.italicitalic
text.html.markdown markup.underline.linkunderline
text.html.markdown beginning.punctuation.definition.list#77b1eb
text.html.markdown beginning.punctuation.definition.quote#a7aae0
text.html.markdown markup.quote#616E88
text.html.markdown constant.character.math.tex#77b1eb
text.html.markdown punctuation.definition.math.begin, text.html.markdown punctuation.definition.math.end#5E81AC
text.html.markdown punctuation.definition.function.math.tex#61c5e6
text.html.markdown punctuation.math.operator.latex#77b1eb
text.html.markdown punctuation.definition.heading#77b1eb
text.html.markdown punctuation.definition.constant, text.html.markdown punctuation.definition.string#77b1eb
text.html.markdown constant.other.reference.link, text.html.markdown string.other.link.description, text.html.markdown string.other.link.title#61c5e6
source.perl punctuation.definition.variable#f2f4f4
source.php meta.function-call, source.php meta.function-call.object#61c5e6
source.python entity.name.function.decorator, source.python meta.function.decorator support.type#D08770
source.python meta.function-call.generic#61c5e6
source.python support.type#61c5e6
source.python variable.parameter.function.language#f2f4f4
source.python meta.function.parameters variable.parameter.function.language.special.self#77b1eb
source.rust entity.name.type#a7aae0
source.rust meta.macro entity.name.function#61c5e6bold
source.rust meta.attribute, source.rust meta.attribute punctuation, source.rust meta.attribute keyword.operator#5E81AC
source.rust entity.name.type.traitbold
source.rust punctuation.definition.interpolation#EBCB8B
source.css.scss punctuation.definition.interpolation.begin.bracket.curly, source.css.scss punctuation.definition.interpolation.end.bracket.curly#77b1eb
source.css.scss variable.interpolation#f2f4f4italic
source.ts punctuation.decorator, source.ts meta.decorator variable.other.readwrite, source.ts meta.decorator entity.name.function, source.tsx punctuation.decorator, source.tsx meta.decorator variable.other.readwrite, source.tsx meta.decorator entity.name.function#D08770
source.ts meta.object-literal.key, source.tsx meta.object-literal.key#f2f4f4
source.ts meta.object-literal.key entity.name.function, source.tsx meta.object-literal.key entity.name.function#61c5e6
source.ts support.class, source.ts support.type, source.ts entity.name.type, source.ts entity.name.class, source.tsx support.class, source.tsx support.type, source.tsx entity.name.type, source.tsx entity.name.class#a7aae0
source.ts support.constant.math, source.ts support.constant.dom, source.ts support.constant.json, source.tsx support.constant.math, source.tsx support.constant.dom, source.tsx support.constant.json#a7aae0
source.ts support.variable, source.tsx support.variable#f2f4f4
source.ts meta.embedded.line meta.brace.square, source.ts meta.embedded.line meta.brace.round, source.tsx meta.embedded.line meta.brace.square, source.tsx meta.embedded.line meta.brace.round#ECEFF4
text.xml entity.name.tag.namespace#a7aae0
text.xml keyword.other.doctype#5E81AC
text.xml meta.tag.preprocessor entity.name.tag#5E81AC
text.xml string.unquoted.cdata, text.xml string.unquoted.cdata punctuation.definition.string#D08770italic
source.yaml entity.name.tag#a7aae0
Recats Theme by senelway - VS Code Theme