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#474850
  • activityBar.activeBorder#4397C4
  • activityBar.background#303036
  • activityBar.dropBackground#474850
  • activityBar.foreground#FFFFFF
  • activityBarBadge.background#4397C4
  • activityBarBadge.foreground#303036
  • badge.background#4397C4
  • badge.foreground#303036
  • button.background#54545E
  • button.foreground#FFFFFF
  • button.hoverBackground#5F606C
  • debugExceptionWidget.background#5F606C
  • debugExceptionWidget.border#303036
  • debugToolBar.background#474850
  • descriptionForeground#FFFFFFe6
  • diffEditor.insertedTextBackground#8896BB33
  • diffEditor.removedTextBackground#AF55504d
  • dropdown.background#474850
  • dropdown.border#474850
  • dropdown.foreground#FFFFFF
  • editor.background#303036
  • editor.findMatchBackground#4397C466
  • editor.findMatchHighlightBackground#4397C433
  • editor.findRangeHighlightBackground#4397C433
  • editor.foreground#FFFFFF
  • editor.hoverHighlightBackground#474850
  • editor.inactiveSelectionBackground#54545Ecc
  • editor.lineHighlightBackground#474850
  • editor.lineHighlightBorder#474850
  • editor.rangeHighlightBackground#54545E52
  • editor.selectionBackground#54545Ecc
  • editor.selectionHighlightBackground#54545Ecc
  • editor.wordHighlightBackground#8896BB66
  • editor.wordHighlightStrongBackground#8896BB99
  • editorActiveLineNumber.foreground#FFFFFFcc
  • editorBracketMatch.background#30303600
  • editorBracketMatch.border#4397C4
  • editorCodeLens.foreground#5F606C
  • editorCursor.foreground#FFFFFF
  • editorError.border#AF555000
  • editorError.foreground#AF5550
  • editorGroup.background#303036
  • editorGroup.border#47485001
  • editorGroup.dropBackground#47485099
  • editorGroupHeader.border#47485000
  • editorGroupHeader.noTabsBackground#303036
  • editorGroupHeader.tabsBackground#303036
  • editorGroupHeader.tabsBorder#47485000
  • editorGutter.addedBackground#79B488
  • editorGutter.background#303036
  • editorGutter.deletedBackground#AF5550
  • editorGutter.modifiedBackground#EBB861
  • editorHint.border#EBB86100
  • editorHint.foreground#EBB861
  • editorHoverWidget.background#474850
  • editorHoverWidget.border#474850
  • editorIndentGuide.activeBackground#5F606C
  • editorIndentGuide.background#54545Eb3
  • editorLineNumber.activeForeground#FFFFFF
  • editorLineNumber.foreground#5F606C
  • editorLink.activeForeground#4397C4
  • editorMarkerNavigation.background#8896BBc0
  • editorMarkerNavigationError.background#AF5550c0
  • editorMarkerNavigationWarning.background#EBB861c0
  • editorOverviewRuler.addedForeground#79B488
  • editorOverviewRuler.border#474850
  • editorOverviewRuler.currentContentForeground#474850
  • editorOverviewRuler.deletedForeground#AF5550
  • editorOverviewRuler.errorForeground#AF5550
  • editorOverviewRuler.findMatchForeground#4397C466
  • editorOverviewRuler.incomingContentForeground#474850
  • editorOverviewRuler.infoForeground#8896BB
  • editorOverviewRuler.modifiedForeground#EBB861
  • editorOverviewRuler.rangeHighlightForeground#4397C466
  • editorOverviewRuler.selectionHighlightForeground#4397C466
  • editorOverviewRuler.warningForeground#EBB861
  • editorOverviewRuler.wordHighlightForeground#4397C466
  • editorOverviewRuler.wordHighlightStrongForeground#4397C466
  • editorRuler.foreground#54545E
  • editorSuggestWidget.background#303036
  • editorSuggestWidget.border#474850
  • editorSuggestWidget.foreground#FFFFFF
  • editorSuggestWidget.highlightForeground#4397C4
  • editorSuggestWidget.selectedBackground#54545E
  • editorWarning.border#EBB86100
  • editorWarning.foreground#EBB861
  • editorWhitespace.foreground#5F606Cb3
  • editorWidget.background#303036
  • editorWidget.border#474850
  • errorForeground#AF5550
  • extensionButton.prominentBackground#54545E
  • extensionButton.prominentForeground#FFFFFF
  • extensionButton.prominentHoverBackground#5F606C
  • focusBorder#474850
  • foreground#FFFFFF
  • gitDecoration.conflictingResourceForeground#8896BB
  • gitDecoration.deletedResourceForeground#AF5550
  • gitDecoration.ignoredResourceForeground#FFFFFF66
  • gitDecoration.modifiedResourceForeground#EBB861
  • gitDecoration.submoduleResourceForeground#459BA0
  • gitDecoration.untrackedResourceForeground#79B488
  • input.background#474850
  • input.border#474850
  • input.foreground#FFFFFF
  • input.placeholderForeground#FFFFFF99
  • inputOption.activeBackground#8896BB
  • inputOption.activeBorder#8896BB
  • inputValidation.errorBackground#AF5550
  • inputValidation.errorBorder#AF5550
  • inputValidation.infoBackground#8896BB
  • inputValidation.infoBorder#8896BB
  • inputValidation.warningBackground#d08770
  • inputValidation.warningBorder#d08770
  • list.activeSelectionBackground#4397C4
  • list.activeSelectionForeground#303036
  • list.dropBackground#4397C499
  • list.errorForeground#AF5550
  • list.focusBackground#4397C499
  • list.focusForeground#FFFFFF
  • list.highlightForeground#4397C4
  • list.hoverBackground#474850
  • list.hoverForeground#FAFAFA
  • list.inactiveFocusBackground#54545Ecc
  • list.inactiveSelectionBackground#54545E
  • list.inactiveSelectionForeground#FFFFFF
  • list.warningForeground#EBB861
  • merge.border#47485000
  • merge.currentContentBackground#8896BB4d
  • merge.currentHeaderBackground#8896BB66
  • merge.incomingContentBackground#459BA04d
  • merge.incomingHeaderBackground#459BA066
  • minimap.background#303036
  • minimap.errorHighlight#AF5550cc
  • minimap.findMatchHighlight#4397C4
  • minimap.selectionHighlight#4397C4cc
  • minimap.warningHighlight#EBB861cc
  • minimapGutter.addedBackground#79B488
  • minimapGutter.deletedBackground#AF5550
  • minimapGutter.modifiedBackground#EBB861
  • minimapSlider.activeBackground#54545Eaa
  • minimapSlider.background#54545E99
  • minimapSlider.hoverBackground#54545Eaa
  • notification.background#474850
  • notification.buttonBackground#54545E
  • notification.buttonForeground#FFFFFF
  • notification.buttonHoverBackground#5F606C
  • notification.errorBackground#AF5550
  • notification.errorForeground#303036
  • notification.foreground#FFFFFF
  • notification.infoBackground#4397C4
  • notification.infoForeground#303036
  • notification.warningBackground#EBB861
  • notification.warningForeground#303036
  • notificationCenter.border#47485000
  • notificationCenterHeader.background#303036
  • notificationCenterHeader.foreground#4397C4
  • notificationLink.foreground#4397C4
  • notifications.background#474850
  • notifications.border#303036
  • notifications.foreground#FFFFFF
  • notificationToast.border#47485000
  • panel.background#303036
  • panel.border#474850
  • panelTitle.activeBorder#4397C400
  • panelTitle.activeForeground#4397C4
  • panelTitle.inactiveForeground#FFFFFF
  • peekView.border#5F606C
  • peekViewEditor.background#303036
  • peekViewEditor.matchHighlightBackground#4397C44d
  • peekViewEditorGutter.background#303036
  • peekViewResult.background#303036
  • peekViewResult.fileForeground#4397C4
  • peekViewResult.lineForeground#FFFFFF66
  • peekViewResult.matchHighlightBackground#4397C4cc
  • peekViewResult.selectionBackground#54545E
  • peekViewResult.selectionForeground#FFFFFF
  • peekViewTitle.background#474850
  • peekViewTitleDescription.foreground#FFFFFF
  • peekViewTitleLabel.foreground#4397C4
  • pickerGroup.border#474850
  • pickerGroup.foreground#4397C4
  • progressBar.background#4397C4
  • scrollbar.shadow#00000066
  • scrollbarSlider.activeBackground#54545Eaa
  • scrollbarSlider.background#54545E99
  • scrollbarSlider.hoverBackground#54545Eaa
  • selection.background#4397C499
  • sideBar.background#303036
  • sideBar.border#474850
  • sideBar.foreground#FFFFFF
  • sideBarSectionHeader.background#474850
  • sideBarSectionHeader.foreground#FFFFFF
  • sideBarTitle.foreground#FFFFFF
  • statusBar.background#474850
  • statusBar.border#47485000
  • statusBar.debuggingBackground#8896BB
  • statusBar.debuggingForeground#FFFFFF
  • statusBar.foreground#FFFFFF
  • statusBar.noFolderBackground#474850
  • statusBar.noFolderForeground#FFFFFF
  • statusBarItem.activeBackground#5F606C
  • statusBarItem.hoverBackground#54545E
  • statusBarItem.prominentBackground#474850
  • statusBarItem.prominentHoverBackground#54545E
  • tab.activeBackground#474850
  • tab.activeBorder#4397C400
  • tab.activeBorderTop#4397C400
  • tab.activeForeground#FFFFFF
  • tab.border#47485000
  • tab.hoverBackground#474850cc
  • tab.hoverBorder#4397C400
  • tab.inactiveBackground#303036
  • tab.inactiveForeground#FFFFFF66
  • tab.unfocusedActiveBorder#4397C400
  • tab.unfocusedActiveBorderTop#4397C400
  • tab.unfocusedActiveForeground#FFFFFF99
  • tab.unfocusedHoverBackground#474850b3
  • tab.unfocusedHoverBorder#4397C400
  • tab.unfocusedInactiveForeground#FFFFFF66
  • terminal.ansiBlack#474850
  • terminal.ansiBlue#8896BB
  • terminal.ansiBrightBlack#5F606C
  • terminal.ansiBrightBlue#8896BB
  • terminal.ansiBrightCyan#459BA0
  • terminal.ansiBrightGreen#79B488
  • terminal.ansiBrightMagenta#A796BC
  • terminal.ansiBrightRed#AF5550
  • terminal.ansiBrightWhite#FAFAFA
  • terminal.ansiBrightYellow#EBB861
  • terminal.ansiCyan#4397C4
  • terminal.ansiGreen#79B488
  • terminal.ansiMagenta#A796BC
  • terminal.ansiRed#AF5550
  • terminal.ansiWhite#e5e9f0
  • terminal.ansiYellow#EBB861
  • terminal.background#303036
  • terminal.foreground#FFFFFF
  • textBlockQuote.background#474850
  • textBlockQuote.border#8896BB
  • textCodeBlock.background#5F606C
  • textLink.activeForeground#4397C4
  • textLink.foreground#4397C4
  • textPreformat.foreground#459BA0
  • textSeparator.foreground#FAFAFA
  • titleBar.activeBackground#303036
  • titleBar.activeForeground#FFFFFF
  • titleBar.border#30303600
  • titleBar.inactiveBackground#303036
  • titleBar.inactiveForeground#FFFFFF66
  • tree.indentGuidesStroke#5F606C
  • walkThrough.embeddedEditorBackground#303036
  • welcomePage.buttonBackground#54545E
  • welcomePage.buttonHoverBackground#5F606C
  • widget.shadow#00000066

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#FFFFFFff
emphasisitalic
strongbold
comment#5F606C
constant.character#EBB861
constant.character.escape#EBB861
constant.language#8896BB
constant.numeric#A796BC
constant.regexp#EBB861
entity.name.class, entity.name.type.class#459BA0
entity.name.function#4397C4
entity.name.tag#8896BB
entity.other.attribute-name#459BA0
entity.other.inherited-class#459BA0bold
invalid.deprecated#FFFFFF
invalid.illegal#FFFFFF
keyword#8896BB
keyword.operator#8896BB
keyword.other.new#8896BB
markup.boldbold
markup.changed#EBB861
markup.deleted#AF5550
markup.inserted#79B488
meta.preprocessor#8896BB
punctuation#FAFAFA
punctuation.definition.method-parameters, punctuation.definition.function-parameters, punctuation.definition.parameters#FAFAFA
punctuation.definition.tag#8896BB
punctuation.definition.comment, punctuation.end.definition.comment, punctuation.start.definition.comment#5F606C
punctuation.section#FAFAFA
punctuation.section.embedded.begin, punctuation.section.embedded.end#8896BB
punctuation.terminator#8896BB
punctuation.definition.variable#8896BB
storage#8896BB
string#79B488
string.regexp#EBB861
support.class#459BA0
support.constant#8896BB
support.function#4397C4
support.function.construct#8896BB
support.type#459BA0
support.type.exception#459BA0
token.debug-token#A796BC
token.error-token#AF5550
token.info-token#4397C4
token.warn-token#EBB861
variable.other#FFFFFF
variable.language#8896BB
variable.parameter#FFFFFF
punctuation.separator.pointer-access.c#8896BB
source.c meta.preprocessor.include, source.c string.quoted.other.lt-gt.include#459BA0
source.cpp keyword.control.directive.conditional, source.cpp punctuation.definition.directive, source.c keyword.control.directive.conditional, source.c punctuation.definition.directive#8896BBbold
source.css constant.other.color.rgb-value#A796BC
source.css meta.property-value#4397C4
source.css keyword.control.at-rule.media, source.css keyword.control.at-rule.media punctuation.definition.keyword#D08770
source.css punctuation.definition.keyword#8896BB
source.css support.type.property-name#FFFFFF
source.diff meta.diff.range.context#459BA0
source.diff meta.diff.header.from-file#459BA0
source.diff punctuation.definition.from-file#459BA0
source.diff punctuation.definition.range#459BA0
source.diff punctuation.definition.separator#8896BB
entity.name.type.module.elixir#459BA0
variable.other.readwrite.module.elixir#FFFFFFbold
constant.other.symbol.elixir#FFFFFFbold
variable.other.constant.elixir#459BA0
source.go constant.other.placeholder.go#EBB861
source.java comment.block.documentation.javadoc punctuation.definition.entity.html#8896BB
source.java constant.other#FFFFFF
source.java keyword.other.documentation#459BA0
source.java keyword.other.documentation.author.javadoc#459BA0
source.java keyword.other.documentation.directive, source.java keyword.other.documentation.custom#459BA0
source.java keyword.other.documentation.see.javadoc#459BA0
source.java meta.method-call meta.method#4397C4
source.java meta.tag.template.link.javadoc, source.java string.other.link.title.javadoc#459BA0
source.java meta.tag.template.value.javadoc#4397C4
source.java punctuation.definition.keyword.javadoc#459BA0
source.java punctuation.definition.tag.begin.javadoc, source.java punctuation.definition.tag.end.javadoc#5F606C
source.java storage.modifier.import#459BA0
source.java storage.modifier.package#459BA0
source.java storage.type#459BA0
source.java storage.type.annotation#D08770
source.java storage.type.generic#459BA0
source.java storage.type.primitive#8896BB
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#4397C4
source.js storage.type.class.jsdoc#459BA0
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#8896BB
source.js string.quoted.template meta.method-call.with-arguments#FAFAFA
source.js string.template meta.template.expression support.variable.property, source.js string.template meta.template.expression variable.other.object#FFFFFF
source.js support.type.primitive#8896BB
source.js variable.other.object#FFFFFF
source.js variable.other.readwrite.alias#459BA0
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#FAFAFA
text.html.basic constant.character.entity.html#EBB861
text.html.basic constant.other.inline-data#D08770italic
text.html.basic meta.tag.sgml.doctype#8896BB
text.html.basic punctuation.definition.entity#8896BB
source.properties entity.name.section.group-title.ini#4397C4
source.properties punctuation.separator.key-value.ini#8896BB
text.html.markdown markup.fenced_code.block, text.html.markdown markup.fenced_code.block punctuation.definition#459BA0
markup.heading#4397C4
text.html.markdown markup.inline.raw, text.html.markdown markup.inline.raw punctuation.definition.raw#459BA0
text.html.markdown markup.italicitalic
text.html.markdown markup.underline.linkunderline
text.html.markdown beginning.punctuation.definition.list#8896BB
text.html.markdown beginning.punctuation.definition.quote#459BA0
text.html.markdown markup.quote#5F606C
text.html.markdown punctuation.definition.heading#8896BB
text.html.markdown punctuation.definition.constant, text.html.markdown punctuation.definition.string#8896BB
text.html.markdown constant.other.reference.link, text.html.markdown string.other.link.description, text.html.markdown string.other.link.title#4397C4
source.perl punctuation.definition.variable#FFFFFF
source.php meta.function-call, source.php meta.function-call.object#4397C4
source.python entity.name.function.decorator, source.python meta.function.decorator support.type#D08770
source.python meta.function-call.generic#4397C4
source.python support.type#4397C4
source.python variable.parameter.function.language#FFFFFF
source.python meta.function.parameters variable.parameter.function.language.special.self#8896BB
source.css.scss punctuation.definition.interpolation.begin.bracket.curly, source.css.scss punctuation.definition.interpolation.end.bracket.curly#8896BB
source.css.scss variable.interpolation#FFFFFFitalic
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#FFFFFF
source.ts meta.object-literal.key entity.name.function, source.tsx meta.object-literal.key entity.name.function#4397C4
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#459BA0
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#459BA0
source.ts support.variable, source.tsx support.variable#FFFFFF
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#FAFAFA
text.xml entity.name.tag.namespace#459BA0
text.xml keyword.other.doctype#8896BB
text.xml meta.tag.preprocessor entity.name.tag#8896BB
text.xml string.unquoted.cdata, text.xml string.unquoted.cdata punctuation.definition.string#D08770italic
source.yaml entity.name.tag#459BA0