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#20242c
  • activityBar.activeBorder#61c5e6
  • activityBar.background#20242c
  • activityBar.dropBackground#20242c
  • activityBar.foreground#dadcdd
  • activityBarBadge.background#61c5e6
  • activityBarBadge.foreground#20242c
  • badge.background#61c5e6
  • badge.foreground#20242c
  • button.background#61c5e6ee
  • button.foreground#20242c
  • button.hoverBackground#61c5e6
  • button.secondaryBackground#434c5e
  • button.secondaryForeground#dadcdd
  • button.secondaryHoverBackground#4c566a
  • charts.blue#81a1c1
  • charts.foreground#dadcdd
  • charts.green#a3be8c
  • charts.lines#61c5e6
  • charts.orange#d08770
  • charts.purple#b48ead
  • charts.red#ce606b
  • charts.yellow#ebcb8b
  • checkbox.border#ffffff15
  • debugConsole.errorForeground#ce606b
  • debugConsole.infoForeground#61c5e6
  • debugConsole.sourceForeground#616e88
  • debugConsole.warningForeground#ebcb8b
  • debugConsoleInputIcon.foreground#81a1c1
  • debugExceptionWidget.background#4c566a
  • debugExceptionWidget.border#20242c
  • debugToolBar.background#20242c
  • descriptionForeground#dadcdde6
  • diffEditor.insertedTextBackground#81a1c133
  • diffEditor.removedTextBackground#ce606b4d
  • dropdown.background#20242c
  • dropdown.border#ffffff15
  • dropdown.foreground#dadcdd
  • editor.background#20242c
  • editor.findMatchBackground#0052f5b2
  • editor.findMatchHighlightBackground#0052f5b2
  • editor.findRangeHighlightBackground#61c5e633
  • editor.focusedStackFrameHighlightBackground#5e81ac
  • editor.foreground#dadcdd
  • editor.hoverHighlightBackground#20242c
  • 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.stackFrameHighlightBackground#5e81ac
  • editor.wordHighlightBackground#00030273
  • editor.wordHighlightStrongBackground#0044ff4d
  • editorActiveLineNumber.foreground#dadcddcc
  • editorBracketHighlight.foreground1#8588b7
  • editorBracketHighlight.foreground2#61c5e6
  • editorBracketHighlight.foreground3#81a1c1
  • editorBracketHighlight.foreground4#5e81ac
  • editorBracketHighlight.foreground5#8588b7
  • editorBracketHighlight.foreground6#61c5e6
  • editorBracketHighlight.unexpectedBracket.foreground#ce606b
  • editorBracketMatch.background#20242c00
  • editorBracketMatch.border#61c5e6
  • editorCodeLens.foreground#4c566a
  • editorCursor.background#000000
  • editorCursor.foreground#00fff7
  • editorError.border#ce606b00
  • editorError.foreground#ce606b
  • editorGroup.background#20242c
  • editorGroup.border#ffffff15
  • editorGroup.dropBackground#1a1e24a5
  • editorGroupHeader.border#ffffff15
  • editorGroupHeader.noTabsBackground#20242c
  • editorGroupHeader.tabsBackground#20242c
  • editorGroupHeader.tabsBorder#20242c00
  • editorGutter.addedBackground#a3be8c
  • editorGutter.background#20242c
  • editorGutter.deletedBackground#ce606b
  • editorGutter.modifiedBackground#ebcb8b
  • editorHint.border#ebcb8b00
  • editorHint.foreground#ebcb8b
  • editorHoverWidget.background#0a161a
  • editorHoverWidget.border#20242c
  • editorIndentGuide.activeBackground#4c566a
  • editorIndentGuide.background#434c5eb3
  • editorInlayHint.background#434c5e
  • editorInlayHint.foreground#dadcdd
  • editorLineNumber.activeForeground#dadcdd
  • editorLineNumber.foreground#4c566a
  • editorLink.activeForeground#61c5e6
  • editorMarkerNavigation.background#5e81acc0
  • editorMarkerNavigationError.background#ce606bc0
  • editorMarkerNavigationWarning.background#ebcb8bc0
  • editorOverviewRuler.addedForeground#a3be8c
  • editorOverviewRuler.border#20242c
  • editorOverviewRuler.currentContentForeground#20242c
  • editorOverviewRuler.deletedForeground#ce606b
  • editorOverviewRuler.errorForeground#ce606b
  • editorOverviewRuler.findMatchForeground#61c5e666
  • editorOverviewRuler.incomingContentForeground#20242c
  • editorOverviewRuler.infoForeground#81a1c1
  • editorOverviewRuler.modifiedForeground#ebcb8b
  • editorOverviewRuler.rangeHighlightForeground#61c5e666
  • editorOverviewRuler.selectionHighlightForeground#61c5e666
  • editorOverviewRuler.warningForeground#ebcb8b
  • editorOverviewRuler.wordHighlightForeground#61c5e666
  • editorOverviewRuler.wordHighlightStrongForeground#61c5e666
  • editorRuler.foreground#434c5e
  • editorSuggestWidget.background#20242c
  • editorSuggestWidget.border#20242c
  • editorSuggestWidget.focusHighlightForeground#61c5e6
  • editorSuggestWidget.foreground#dadcdd
  • editorSuggestWidget.highlightForeground#61c5e6
  • editorSuggestWidget.selectedBackground#434c5e
  • editorSuggestWidget.selectedForeground#dadcdd
  • editorWarning.border#ebcb8b00
  • editorWarning.foreground#ebcb8b
  • editorWhitespace.foreground#4c566ab3
  • editorWidget.background#20242c
  • editorWidget.border#20242c
  • errorForeground#ce606b
  • extensionButton.prominentBackground#434c5e
  • extensionButton.prominentForeground#dadcdd
  • extensionButton.prominentHoverBackground#4c566a
  • focusBorder#20242c
  • foreground#dadcdd
  • gitDecoration.conflictingResourceForeground#5e81ac
  • gitDecoration.deletedResourceForeground#ce606b
  • gitDecoration.ignoredResourceForeground#dadcdd66
  • gitDecoration.modifiedResourceForeground#ebcb8b
  • gitDecoration.stageDeletedResourceForeground#ce606b
  • gitDecoration.stageModifiedResourceForeground#ebcb8b
  • gitDecoration.submoduleResourceForeground#8588b7
  • gitDecoration.untrackedResourceForeground#a3be8c
  • input.background#20242c
  • input.border#ffffff15
  • input.foreground#dadcdd
  • input.placeholderForeground#dadcdd99
  • inputOption.activeBackground#5e81ac
  • inputOption.activeBorder#5e81ac
  • inputOption.activeForeground#eceff4
  • inputValidation.errorBackground#ce606b
  • inputValidation.errorBorder#ce606b
  • inputValidation.infoBackground#81a1c1
  • inputValidation.infoBorder#81a1c1
  • inputValidation.warningBackground#d08770
  • inputValidation.warningBorder#d08770
  • keybindingLabel.background#4c566a
  • keybindingLabel.border#4c566a
  • keybindingLabel.bottomBorder#4c566a
  • keybindingLabel.foreground#dadcdd
  • list.activeSelectionBackground#61c5e6
  • list.activeSelectionForeground#20242c
  • list.dropBackground#61c5e699
  • list.errorForeground#ce606b
  • list.focusBackground#61c5e699
  • list.focusForeground#dadcdd
  • list.focusHighlightForeground#eceff4
  • list.highlightForeground#61c5e6
  • list.hoverBackground#20242c
  • list.hoverForeground#eceff4
  • list.inactiveFocusBackground#434c5ecc
  • list.inactiveSelectionBackground#434c5e
  • list.inactiveSelectionForeground#dadcdd
  • list.warningForeground#ebcb8b
  • merge.border#20242c00
  • merge.currentContentBackground#81a1c14d
  • merge.currentHeaderBackground#81a1c166
  • merge.incomingContentBackground#8588b74d
  • merge.incomingHeaderBackground#8588b766
  • minimap.background#20242c
  • 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#20242c
  • notification.buttonBackground#434c5e
  • notification.buttonForeground#dadcdd
  • notification.buttonHoverBackground#4c566a
  • notification.errorBackground#ce606b
  • notification.errorForeground#20242c
  • notification.foreground#dadcdd
  • notification.infoBackground#61c5e6
  • notification.infoForeground#20242c
  • notification.warningBackground#ebcb8b
  • notification.warningForeground#20242c
  • notificationCenter.border#20242c00
  • notificationCenterHeader.background#20242c
  • notificationCenterHeader.foreground#61c5e6
  • notificationLink.foreground#61c5e6
  • notifications.background#20242c
  • notifications.border#20242c
  • notifications.foreground#dadcdd
  • notificationToast.border#20242c00
  • panel.background#20242c
  • panel.border#ffffff15
  • panelTitle.activeBorder#61c5e600
  • panelTitle.activeForeground#61c5e6
  • panelTitle.inactiveForeground#dadcdd
  • peekView.border#ffffff15
  • peekViewEditor.background#20242c
  • peekViewEditor.matchHighlightBackground#61c5e64d
  • peekViewEditorGutter.background#20242c
  • peekViewResult.background#20242c
  • peekViewResult.fileForeground#61c5e6
  • peekViewResult.lineForeground#dadcdd66
  • peekViewResult.matchHighlightBackground#61c5e6cc
  • peekViewResult.selectionBackground#434c5e
  • peekViewResult.selectionForeground#dadcdd
  • peekViewTitle.background#20242c
  • peekViewTitleDescription.foreground#dadcdd
  • peekViewTitleLabel.foreground#61c5e6
  • pickerGroup.border#20242c
  • pickerGroup.foreground#61c5e6
  • progressBar.background#61c5e6
  • quickInputList.focusBackground#61c5e6
  • quickInputList.focusForeground#20242c
  • sash.hoverBorder#61c5e6
  • scrollbar.shadow#00000066
  • scrollbarSlider.activeBackground#434c5eaa
  • scrollbarSlider.background#434c5e99
  • scrollbarSlider.hoverBackground#434c5eaa
  • selection.background#61c5e699
  • sideBar.background#20242c
  • sideBar.border#ffffff15
  • sideBar.foreground#dadcdd
  • sideBarSectionHeader.background#20242c
  • sideBarSectionHeader.foreground#dadcdd
  • sideBarTitle.foreground#dadcdd
  • statusBar.background#20242c
  • statusBar.border#ffffff15
  • statusBar.debuggingBackground#5e81ac
  • statusBar.debuggingForeground#dadcdd
  • statusBar.foreground#dadcdd
  • statusBar.noFolderBackground#20242c
  • statusBar.noFolderForeground#dadcdd
  • statusBarItem.activeBackground#4c566a
  • statusBarItem.errorBackground#20242c
  • statusBarItem.errorForeground#ce606b
  • statusBarItem.hoverBackground#434c5e
  • statusBarItem.prominentBackground#20242c
  • statusBarItem.prominentHoverBackground#434c5e
  • statusBarItem.warningBackground#ebcb8b
  • statusBarItem.warningForeground#20242c
  • tab.activeBackground#20242c
  • tab.activeBorder#61c5e6
  • tab.activeBorderTop#61c5e600
  • tab.activeForeground#61c5e6
  • tab.border#20242c00
  • tab.hoverBackground#20242ccc
  • tab.hoverBorder#fff
  • tab.inactiveBackground#20242c
  • tab.inactiveForeground#dadcdd66
  • tab.lastPinnedBorder#4c566a
  • tab.unfocusedActiveBorder#61c5e600
  • tab.unfocusedActiveBorderTop#61c5e600
  • tab.unfocusedActiveForeground#dadcdd99
  • tab.unfocusedHoverBackground#20242cb3
  • tab.unfocusedHoverBorder#61c5e600
  • tab.unfocusedInactiveForeground#dadcdd66
  • terminal.ansiBlack#20242c
  • terminal.ansiBlue#81a1c1
  • terminal.ansiBrightBlack#4c566a
  • terminal.ansiBrightBlue#81a1c1
  • terminal.ansiBrightCyan#8588b7
  • 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#20242c
  • terminal.foreground#dadcdd
  • terminal.tab.activeBorder#61c5e6
  • textBlockQuote.background#20242c
  • textBlockQuote.border#81a1c1
  • textCodeBlock.background#4c566a
  • textLink.activeForeground#61c5e6
  • textLink.foreground#61c5e6
  • textPreformat.foreground#8588b7
  • textSeparator.foreground#eceff4
  • titleBar.activeBackground#20242c
  • titleBar.activeForeground#dadcdd
  • titleBar.border#20242c00
  • titleBar.inactiveBackground#20242c
  • titleBar.inactiveForeground#dadcdd66
  • tree.indentGuidesStroke#616e88
  • walkThrough.embeddedEditorBackground#20242c
  • welcomePage.buttonBackground#434c5e
  • welcomePage.buttonHoverBackground#4c566a
  • widget.border#61c5e6
  • widget.shadow#20242c

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#dadcddff
emphasisitalic
strongbold
comment#616E88
constant.character#EBCB8B
constant.character.escape#EBCB8B
constant.language#81A1C1
constant.numeric#B48EAD
constant.regexp#EBCB8B
entity.name.class, entity.name.type.class#8588b7
entity.name.function#61c5e6
entity.name.tag#81A1C1
entity.other.attribute-name#8588b7
entity.other.inherited-class#8588b7bold
invalid.deprecated#dadcdd
invalid.illegal#dadcdd
keyword#81A1C1
keyword.operator#81A1C1
keyword.other.new#81A1C1
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#81A1C1
punctuation.definition.comment, punctuation.end.definition.comment, punctuation.start.definition.comment#616E88
punctuation.section#ECEFF4
punctuation.section.embedded.begin, punctuation.section.embedded.end#81A1C1
punctuation.terminator#81A1C1
punctuation.definition.variable#81A1C1
storage#81A1C1
string#A3BE8C
string.regexp#EBCB8B
support.class#8588b7
support.constant#81A1C1
support.function#61c5e6
support.function.construct#81A1C1
support.type#8588b7
support.type.exception#8588b7
token.debug-token#b48ead
token.error-token#ce606b
token.info-token#61c5e6
token.warn-token#ebcb8b
variable.other#dadcdd
variable.language#81A1C1
variable.parameter#dadcdd
punctuation.separator.pointer-access.c#81A1C1
source.c meta.preprocessor.include, source.c string.quoted.other.lt-gt.include#8588b7
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#81A1C1
source.css support.type.property-name#dadcdd
source.diff meta.diff.range.context#8588b7
source.diff meta.diff.header.from-file#8588b7
source.diff punctuation.definition.from-file#8588b7
source.diff punctuation.definition.range#8588b7
source.diff punctuation.definition.separator#81A1C1
entity.name.type.module.elixir#8588b7
variable.other.readwrite.module.elixir#dadcddbold
constant.other.symbol.elixir#dadcddbold
variable.other.constant.elixir#8588b7
source.go constant.other.placeholder.go#EBCB8B
source.java comment.block.documentation.javadoc punctuation.definition.entity.html#81A1C1
source.java constant.other#dadcdd
source.java keyword.other.documentation#8588b7
source.java keyword.other.documentation.author.javadoc#8588b7
source.java keyword.other.documentation.directive, source.java keyword.other.documentation.custom#8588b7
source.java keyword.other.documentation.see.javadoc#8588b7
source.java meta.method-call meta.method#61c5e6
source.java meta.tag.template.link.javadoc, source.java string.other.link.title.javadoc#8588b7
source.java meta.tag.template.value.javadoc#61c5e6
source.java punctuation.definition.keyword.javadoc#8588b7
source.java punctuation.definition.tag.begin.javadoc, source.java punctuation.definition.tag.end.javadoc#616E88
source.java storage.modifier.import#8588b7
source.java storage.modifier.package#8588b7
source.java storage.type#8588b7
source.java storage.type.annotation#D08770
source.java storage.type.generic#8588b7
source.java storage.type.primitive#81A1C1
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#8588b7
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#81A1C1
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#dadcdd
source.js support.type.primitive#81A1C1
source.js variable.other.object#dadcdd
source.js variable.other.readwrite.alias#8588b7
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#81A1C1
source.properties entity.name.section.group-title.ini#61c5e6
source.properties punctuation.separator.key-value.ini#81A1C1
text.html.markdown markup.fenced_code.block, text.html.markdown markup.fenced_code.block punctuation.definition#8588b7
markup.heading#61c5e6
text.html.markdown markup.inline.raw, text.html.markdown markup.inline.raw punctuation.definition.raw#8588b7
text.html.markdown markup.italicitalic
text.html.markdown markup.underline.linkunderline
text.html.markdown beginning.punctuation.definition.list#81A1C1
text.html.markdown beginning.punctuation.definition.quote#8588b7
text.html.markdown markup.quote#616E88
text.html.markdown constant.character.math.tex#81A1C1
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#81A1C1
text.html.markdown punctuation.definition.heading#81A1C1
text.html.markdown punctuation.definition.constant, text.html.markdown punctuation.definition.string#81A1C1
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#dadcdd
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#dadcdd
source.python meta.function.parameters variable.parameter.function.language.special.self#81A1C1
source.rust entity.name.type#8588b7
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#81A1C1
source.css.scss variable.interpolation#dadcdditalic
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#dadcdd
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#8588b7
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#8588b7
source.ts support.variable, source.tsx support.variable#dadcdd
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#8588b7
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#8588b7
Recats Theme by senelway - VS Code Theme