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#283593
  • activityBar.activeBorder#A5EFDD
  • activityBar.background#080E3F
  • activityBar.dropBackground#283593
  • activityBar.foreground#E7EAEF
  • activityBarBadge.background#A5EFDD
  • activityBarBadge.foreground#080E3F
  • badge.background#A5EFDD
  • badge.foreground#080E3F
  • button.background#A5EFDDee
  • button.foreground#080E3F
  • button.hoverBackground#A5EFDD
  • button.secondaryBackground#080E3F
  • button.secondaryForeground#E7EAEF
  • button.secondaryHoverBackground#595D69
  • charts.blue#97B3FF
  • charts.foreground#E7EAEF
  • charts.green#00BEA6
  • charts.lines#A5EFDD
  • charts.orange#D07A5F
  • charts.purple#BA97FF
  • charts.red#DF375F
  • charts.yellow#F8DE81
  • debugConsole.errorForeground#DF375F
  • debugConsole.infoForeground#A5EFDD
  • debugConsole.sourceForeground#616e88
  • debugConsole.warningForeground#F8DE81
  • debugConsoleInputIcon.foreground#97B3FF
  • debugExceptionWidget.background#595D69
  • debugExceptionWidget.border#080E3F
  • debugToolBar.background#283593
  • descriptionForeground#E7EAEFe6
  • diffEditor.insertedTextBackground#97B3FF33
  • diffEditor.removedTextBackground#DF375F4d
  • dropdown.background#283593
  • dropdown.border#283593
  • dropdown.foreground#E7EAEF
  • editor.background#080E3F
  • editor.findMatchBackground#A5EFDD66
  • editor.findMatchHighlightBackground#A5EFDD33
  • editor.findRangeHighlightBackground#A5EFDD33
  • editor.focusedStackFrameHighlightBackground#5A4CFF
  • editor.foreground#E7EAEF
  • editor.hoverHighlightBackground#283593
  • editor.inactiveSelectionBackground#080E3Fcc
  • editor.inlineValuesBackground#595D69
  • editor.inlineValuesForeground#F1F5FF
  • editor.lineHighlightBackground#283593
  • editor.lineHighlightBorder#283593
  • editor.rangeHighlightBackground#080E3F52
  • editor.selectionBackground#283593cc
  • editor.selectionHighlightBackground#080E3Fcc
  • editor.stackFrameHighlightBackground#5A4CFF
  • editor.wordHighlightBackground#97B3FF66
  • editor.wordHighlightStrongBackground#97B3FF99
  • editorActiveLineNumber.foreground#E7EAEFcc
  • editorBracketHighlight.foreground1#7EDFEC
  • editorBracketHighlight.foreground2#A5EFDD
  • editorBracketHighlight.foreground3#97B3FF
  • editorBracketHighlight.foreground4#5A4CFF
  • editorBracketHighlight.foreground5#7EDFEC
  • editorBracketHighlight.foreground6#A5EFDD
  • editorBracketHighlight.unexpectedBracket.foreground#DF375F
  • editorBracketMatch.background#080E3F00
  • editorBracketMatch.border#A5EFDD
  • editorCodeLens.foreground#595D69
  • editorCursor.foreground#E7EAEF
  • editorError.border#DF375F00
  • editorError.foreground#DF375F
  • editorGroup.background#080E3F
  • editorGroup.border#28359301
  • editorGroup.dropBackground#28359399
  • editorGroupHeader.border#28359300
  • editorGroupHeader.noTabsBackground#080E3F
  • editorGroupHeader.tabsBackground#080E3F
  • editorGroupHeader.tabsBorder#28359300
  • editorGutter.addedBackground#00BEA6
  • editorGutter.background#080E3F
  • editorGutter.deletedBackground#DF375F
  • editorGutter.modifiedBackground#F8DE81
  • editorHint.border#F8DE8100
  • editorHint.foreground#F8DE81
  • editorHoverWidget.background#283593
  • editorHoverWidget.border#283593
  • editorIndentGuide.activeBackground#595D69
  • editorIndentGuide.background#080E3Fb3
  • editorInlayHint.background#080E3F
  • editorInlayHint.foreground#E7EAEF
  • editorLineNumber.activeForeground#E7EAEF
  • editorLineNumber.foreground#595D69
  • editorLink.activeForeground#A5EFDD
  • editorMarkerNavigation.background#5A4CFFc0
  • editorMarkerNavigationError.background#DF375Fc0
  • editorMarkerNavigationWarning.background#F8DE81c0
  • editorOverviewRuler.addedForeground#00BEA6
  • editorOverviewRuler.border#283593
  • editorOverviewRuler.currentContentForeground#283593
  • editorOverviewRuler.deletedForeground#DF375F
  • editorOverviewRuler.errorForeground#DF375F
  • editorOverviewRuler.findMatchForeground#A5EFDD66
  • editorOverviewRuler.incomingContentForeground#283593
  • editorOverviewRuler.infoForeground#97B3FF
  • editorOverviewRuler.modifiedForeground#F8DE81
  • editorOverviewRuler.rangeHighlightForeground#A5EFDD66
  • editorOverviewRuler.selectionHighlightForeground#A5EFDD66
  • editorOverviewRuler.warningForeground#F8DE81
  • editorOverviewRuler.wordHighlightForeground#A5EFDD66
  • editorOverviewRuler.wordHighlightStrongForeground#A5EFDD66
  • editorRuler.foreground#080E3F
  • editorSuggestWidget.background#080E3F
  • editorSuggestWidget.border#283593
  • editorSuggestWidget.focusHighlightForeground#A5EFDD
  • editorSuggestWidget.foreground#E7EAEF
  • editorSuggestWidget.highlightForeground#A5EFDD
  • editorSuggestWidget.selectedBackground#080E3F
  • editorSuggestWidget.selectedForeground#E7EAEF
  • editorWarning.border#F8DE8100
  • editorWarning.foreground#F8DE81
  • editorWhitespace.foreground#595D69b3
  • editorWidget.background#080E3F
  • editorWidget.border#283593
  • errorForeground#DF375F
  • extensionButton.prominentBackground#080E3F
  • extensionButton.prominentForeground#E7EAEF
  • extensionButton.prominentHoverBackground#595D69
  • focusBorder#283593
  • foreground#E7EAEF
  • gitDecoration.conflictingResourceForeground#5A4CFF
  • gitDecoration.deletedResourceForeground#DF375F
  • gitDecoration.ignoredResourceForeground#E7EAEF66
  • gitDecoration.modifiedResourceForeground#F8DE81
  • gitDecoration.stageDeletedResourceForeground#DF375F
  • gitDecoration.stageModifiedResourceForeground#F8DE81
  • gitDecoration.submoduleResourceForeground#7EDFEC
  • gitDecoration.untrackedResourceForeground#00BEA6
  • input.background#283593
  • input.border#283593
  • input.foreground#E7EAEF
  • input.placeholderForeground#E7EAEF99
  • inputOption.activeBackground#5A4CFF
  • inputOption.activeBorder#5A4CFF
  • inputOption.activeForeground#F1F5FF
  • inputValidation.errorBackground#DF375F
  • inputValidation.errorBorder#DF375F
  • inputValidation.infoBackground#97B3FF
  • inputValidation.infoBorder#97B3FF
  • inputValidation.warningBackground#D07A5F
  • inputValidation.warningBorder#D07A5F
  • keybindingLabel.background#595D69
  • keybindingLabel.border#595D69
  • keybindingLabel.bottomBorder#595D69
  • keybindingLabel.foreground#E7EAEF
  • list.activeSelectionBackground#A5EFDD
  • list.activeSelectionForeground#080E3F
  • list.dropBackground#A5EFDD99
  • list.errorForeground#DF375F
  • list.focusBackground#A5EFDD99
  • list.focusForeground#E7EAEF
  • list.focusHighlightForeground#F1F5FF
  • list.highlightForeground#A5EFDD
  • list.hoverBackground#283593
  • list.hoverForeground#F1F5FF
  • list.inactiveFocusBackground#080E3Fcc
  • list.inactiveSelectionBackground#080E3F
  • list.inactiveSelectionForeground#E7EAEF
  • list.warningForeground#F8DE81
  • merge.border#28359300
  • merge.currentContentBackground#97B3FF4d
  • merge.currentHeaderBackground#97B3FF66
  • merge.incomingContentBackground#7EDFEC4d
  • merge.incomingHeaderBackground#7EDFEC66
  • minimap.background#080E3F
  • minimap.errorHighlight#DF375Fcc
  • minimap.findMatchHighlight#A5EFDD
  • minimap.selectionHighlight#A5EFDDcc
  • minimap.warningHighlight#F8DE81cc
  • minimapGutter.addedBackground#00BEA6
  • minimapGutter.deletedBackground#DF375F
  • minimapGutter.modifiedBackground#F8DE81
  • minimapSlider.activeBackground#080E3Faa
  • minimapSlider.background#080E3F99
  • minimapSlider.hoverBackground#080E3Faa
  • notification.background#283593
  • notification.buttonBackground#080E3F
  • notification.buttonForeground#E7EAEF
  • notification.buttonHoverBackground#595D69
  • notification.errorBackground#DF375F
  • notification.errorForeground#080E3F
  • notification.foreground#E7EAEF
  • notification.infoBackground#A5EFDD
  • notification.infoForeground#080E3F
  • notification.warningBackground#F8DE81
  • notification.warningForeground#080E3F
  • notificationCenter.border#28359300
  • notificationCenterHeader.background#080E3F
  • notificationCenterHeader.foreground#A5EFDD
  • notificationLink.foreground#A5EFDD
  • notifications.background#283593
  • notifications.border#080E3F
  • notifications.foreground#E7EAEF
  • notificationToast.border#28359300
  • panel.background#080E3F
  • panel.border#283593
  • panelTitle.activeBorder#A5EFDD00
  • panelTitle.activeForeground#A5EFDD
  • panelTitle.inactiveForeground#E7EAEF
  • peekView.border#595D69
  • peekViewEditor.background#080E3F
  • peekViewEditor.matchHighlightBackground#A5EFDD4d
  • peekViewEditorGutter.background#080E3F
  • peekViewResult.background#080E3F
  • peekViewResult.fileForeground#A5EFDD
  • peekViewResult.lineForeground#E7EAEF66
  • peekViewResult.matchHighlightBackground#A5EFDDcc
  • peekViewResult.selectionBackground#080E3F
  • peekViewResult.selectionForeground#E7EAEF
  • peekViewTitle.background#283593
  • peekViewTitleDescription.foreground#E7EAEF
  • peekViewTitleLabel.foreground#A5EFDD
  • pickerGroup.border#283593
  • pickerGroup.foreground#A5EFDD
  • progressBar.background#A5EFDD
  • quickInputList.focusBackground#A5EFDD
  • quickInputList.focusForeground#080E3F
  • sash.hoverBorder#A5EFDD
  • scrollbar.shadow#00000066
  • scrollbarSlider.activeBackground#0F1862aa
  • scrollbarSlider.background#0F1862FF
  • scrollbarSlider.hoverBackground#0F1862aa
  • selection.background#A5EFDD99
  • sideBar.background#080E3F
  • sideBar.border#283593
  • sideBar.foreground#E7EAEF
  • sideBarSectionHeader.background#283593
  • sideBarSectionHeader.foreground#E7EAEF
  • sideBarTitle.foreground#E7EAEF
  • statusBar.background#283593
  • statusBar.border#28359300
  • statusBar.debuggingBackground#5A4CFF
  • statusBar.debuggingForeground#E7EAEF
  • statusBar.foreground#E7EAEF
  • statusBar.noFolderBackground#283593
  • statusBar.noFolderForeground#E7EAEF
  • statusBarItem.activeBackground#595D69
  • statusBarItem.errorBackground#283593
  • statusBarItem.errorForeground#DF375F
  • statusBarItem.hoverBackground#080E3F
  • statusBarItem.prominentBackground#283593
  • statusBarItem.prominentHoverBackground#080E3F
  • statusBarItem.warningBackground#F8DE81
  • statusBarItem.warningForeground#080E3F
  • tab.activeBackground#283593
  • tab.activeBorder#A5EFDD00
  • tab.activeBorderTop#A5EFDD00
  • tab.activeForeground#E7EAEF
  • tab.border#28359300
  • tab.hoverBackground#283593cc
  • tab.hoverBorder#A5EFDD00
  • tab.inactiveBackground#080E3F
  • tab.inactiveForeground#E7EAEF66
  • tab.lastPinnedBorder#595D69
  • tab.unfocusedActiveBorder#A5EFDD00
  • tab.unfocusedActiveBorderTop#A5EFDD00
  • tab.unfocusedActiveForeground#E7EAEF99
  • tab.unfocusedHoverBackground#283593b3
  • tab.unfocusedHoverBorder#A5EFDD00
  • tab.unfocusedInactiveForeground#E7EAEF66
  • terminal.ansiBlack#283593
  • terminal.ansiBlue#97B3FF
  • terminal.ansiBrightBlack#595D69
  • terminal.ansiBrightBlue#97B3FF
  • terminal.ansiBrightCyan#7EDFEC
  • terminal.ansiBrightGreen#00BEA6
  • terminal.ansiBrightMagenta#BA97FF
  • terminal.ansiBrightRed#DF375F
  • terminal.ansiBrightWhite#F1F5FF
  • terminal.ansiBrightYellow#F8DE81
  • terminal.ansiCyan#A5EFDD
  • terminal.ansiGreen#00BEA6
  • terminal.ansiMagenta#BA97FF
  • terminal.ansiRed#DF375F
  • terminal.ansiWhite#F3F5F7
  • terminal.ansiYellow#F8DE81
  • terminal.background#080E3F
  • terminal.foreground#E7EAEF
  • terminal.tab.activeBorder#A5EFDD
  • textBlockQuote.background#283593
  • textBlockQuote.border#97B3FF
  • textCodeBlock.background#595D69
  • textLink.activeForeground#A5EFDD
  • textLink.foreground#A5EFDD
  • textPreformat.foreground#7EDFEC
  • textSeparator.foreground#F1F5FF
  • titleBar.activeBackground#080E3F
  • titleBar.activeForeground#E7EAEF
  • titleBar.border#080E3F00
  • titleBar.inactiveBackground#080E3F
  • titleBar.inactiveForeground#E7EAEF66
  • tree.indentGuidesStroke#616e88
  • walkThrough.embeddedEditorBackground#080E3F
  • welcomePage.buttonBackground#080E3F
  • welcomePage.buttonHoverBackground#595D69
  • widget.shadow#00000066

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#E7EAEFff
emphasisitalic
strongbold
comment#616E88
constant.character#F8DE81
constant.character.escape#F8DE81
constant.language#97B3FF
constant.numeric#BA97FF
constant.regexp#F8DE81
entity.name.class, entity.name.type.class#7EDFEC
entity.name.function#A5EFDD
entity.name.tag#97B3FF
entity.other.attribute-name#7EDFEC
entity.other.inherited-class#7EDFECbold
invalid.deprecated#E7EAEF
invalid.illegal#E7EAEF
keyword#97B3FF
keyword.operator#97B3FF
keyword.other.new#97B3FF
markup.boldbold
markup.changed#F8DE81
markup.deleted#DF375F
markup.inserted#00BEA6
meta.preprocessor#5A4CFF
punctuation#F1F5FF
punctuation.definition.method-parameters, punctuation.definition.function-parameters, punctuation.definition.parameters#F1F5FF
punctuation.definition.tag#97B3FF
punctuation.definition.comment, punctuation.end.definition.comment, punctuation.start.definition.comment#616E88
punctuation.section#F1F5FF
punctuation.section.embedded.begin, punctuation.section.embedded.end#97B3FF
punctuation.terminator#97B3FF
punctuation.definition.variable#97B3FF
storage#97B3FF
string#00BEA6
string.regexp#F8DE81
support.class#7EDFEC
support.constant#97B3FF
support.function#A5EFDD
support.function.construct#97B3FF
support.type#7EDFEC
support.type.exception#7EDFEC
token.debug-token#BA97FF
token.error-token#DF375F
token.info-token#A5EFDD
token.warn-token#F8DE81
variable.other#E7EAEF
variable.language#97B3FF
variable.parameter#E7EAEF
punctuation.separator.pointer-access.c#97B3FF
source.c meta.preprocessor.include, source.c string.quoted.other.lt-gt.include#7EDFEC
source.cpp keyword.control.directive.conditional, source.cpp punctuation.definition.directive, source.c keyword.control.directive.conditional, source.c punctuation.definition.directive#5A4CFFbold
source.css constant.other.color.rgb-value#BA97FF
source.css meta.property-value#A5EFDD
source.css keyword.control.at-rule.media, source.css keyword.control.at-rule.media punctuation.definition.keyword#D07A5F
source.css punctuation.definition.keyword#97B3FF
source.css support.type.property-name#E7EAEF
source.diff meta.diff.range.context#7EDFEC
source.diff meta.diff.header.from-file#7EDFEC
source.diff punctuation.definition.from-file#7EDFEC
source.diff punctuation.definition.range#7EDFEC
source.diff punctuation.definition.separator#97B3FF
entity.name.type.module.elixir#7EDFEC
variable.other.readwrite.module.elixir#E7EAEFbold
constant.other.symbol.elixir#E7EAEFbold
variable.other.constant.elixir#7EDFEC
source.go constant.other.placeholder.go#F8DE81
source.java comment.block.documentation.javadoc punctuation.definition.entity.html#97B3FF
source.java constant.other#E7EAEF
source.java keyword.other.documentation#7EDFEC
source.java keyword.other.documentation.author.javadoc#7EDFEC
source.java keyword.other.documentation.directive, source.java keyword.other.documentation.custom#7EDFEC
source.java keyword.other.documentation.see.javadoc#7EDFEC
source.java meta.method-call meta.method#A5EFDD
source.java meta.tag.template.link.javadoc, source.java string.other.link.title.javadoc#7EDFEC
source.java meta.tag.template.value.javadoc#A5EFDD
source.java punctuation.definition.keyword.javadoc#7EDFEC
source.java punctuation.definition.tag.begin.javadoc, source.java punctuation.definition.tag.end.javadoc#616E88
source.java storage.modifier.import#7EDFEC
source.java storage.modifier.package#7EDFEC
source.java storage.type#7EDFEC
source.java storage.type.annotation#D07A5F
source.java storage.type.generic#7EDFEC
source.java storage.type.primitive#97B3FF
source.js punctuation.decorator, source.js meta.decorator variable.other.readwrite, source.js meta.decorator entity.name.function#D07A5F
source.js meta.object-literal.key#A5EFDD
source.js storage.type.class.jsdoc#7EDFEC
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#97B3FF
source.js string.quoted.template meta.method-call.with-arguments#F1F5FF
source.js string.template meta.template.expression support.variable.property, source.js string.template meta.template.expression variable.other.object#E7EAEF
source.js support.type.primitive#97B3FF
source.js variable.other.object#E7EAEF
source.js variable.other.readwrite.alias#7EDFEC
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#F1F5FF
text.html.basic constant.character.entity.html#F8DE81
text.html.basic constant.other.inline-data#D07A5Fitalic
text.html.basic meta.tag.sgml.doctype#5A4CFF
text.html.basic punctuation.definition.entity#97B3FF
source.properties entity.name.section.group-title.ini#A5EFDD
source.properties punctuation.separator.key-value.ini#97B3FF
text.html.markdown markup.fenced_code.block, text.html.markdown markup.fenced_code.block punctuation.definition#7EDFEC
markup.heading#A5EFDD
text.html.markdown markup.inline.raw, text.html.markdown markup.inline.raw punctuation.definition.raw#7EDFEC
text.html.markdown markup.italicitalic
text.html.markdown markup.underline.linkunderline
text.html.markdown beginning.punctuation.definition.list#97B3FF
text.html.markdown beginning.punctuation.definition.quote#7EDFEC
text.html.markdown markup.quote#616E88
text.html.markdown constant.character.math.tex#97B3FF
text.html.markdown punctuation.definition.math.begin, text.html.markdown punctuation.definition.math.end#5A4CFF
text.html.markdown punctuation.definition.function.math.tex#A5EFDD
text.html.markdown punctuation.math.operator.latex#97B3FF
text.html.markdown punctuation.definition.heading#97B3FF
text.html.markdown punctuation.definition.constant, text.html.markdown punctuation.definition.string#97B3FF
text.html.markdown constant.other.reference.link, text.html.markdown string.other.link.description, text.html.markdown string.other.link.title#A5EFDD
source.perl punctuation.definition.variable#E7EAEF
source.php meta.function-call, source.php meta.function-call.object#A5EFDD
source.python entity.name.function.decorator, source.python meta.function.decorator support.type#D07A5F
source.python meta.function-call.generic#A5EFDD
source.python support.type#A5EFDD
source.python variable.parameter.function.language#E7EAEF
source.python meta.function.parameters variable.parameter.function.language.special.self#97B3FF
source.rust entity.name.type#7EDFEC
source.rust meta.macro entity.name.function#A5EFDDbold
source.rust meta.attribute, source.rust meta.attribute punctuation, source.rust meta.attribute keyword.operator#5A4CFF
source.rust entity.name.type.traitbold
source.rust punctuation.definition.interpolation#F8DE81
source.css.scss punctuation.definition.interpolation.begin.bracket.curly, source.css.scss punctuation.definition.interpolation.end.bracket.curly#97B3FF
source.css.scss variable.interpolation#E7EAEFitalic
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#D07A5F
source.ts meta.object-literal.key, source.tsx meta.object-literal.key#E7EAEF
source.ts meta.object-literal.key entity.name.function, source.tsx meta.object-literal.key entity.name.function#A5EFDD
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#7EDFEC
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#7EDFEC
source.ts support.variable, source.tsx support.variable#E7EAEF
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#F1F5FF
text.xml entity.name.tag.namespace#7EDFEC
text.xml keyword.other.doctype#5A4CFF
text.xml meta.tag.preprocessor entity.name.tag#5A4CFF
text.xml string.unquoted.cdata, text.xml string.unquoted.cdata punctuation.definition.string#D07A5Fitalic
source.yaml entity.name.tag#7EDFEC
riskified-theme by eliorc - VS Code Theme