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#EEEFF1
  • activityBar.activeBorder#459BA0
  • activityBar.background#FFFFFF
  • activityBar.foreground#303036
  • activityBarBadge.background#459BA0
  • activityBarBadge.foreground#FFFFFF
  • badge.background#459BA0
  • badge.foreground#FFFFFF
  • button.background#F4F4F5
  • button.foreground#303036
  • button.hoverBackground#E4E4E7
  • debugExceptionWidget.background#E4E4E7
  • debugExceptionWidget.border#FFFFFF
  • debugToolBar.background#EEEFF1
  • descriptionForeground#303036e6
  • diffEditor.insertedTextBackground#4397C433
  • diffEditor.removedTextBackground#AF55504d
  • dropdown.background#EEEFF1
  • dropdown.border#EEEFF1
  • dropdown.foreground#303036
  • editor.background#FFFFFF
  • editor.findMatchBackground#459BA066
  • editor.findMatchHighlightBackground#459BA033
  • editor.findRangeHighlightBackground#459BA033
  • editor.foreground#303036
  • editor.hoverHighlightBackground#EEEFF1
  • editor.inactiveSelectionBackground#F4F4F5cc
  • editor.lineHighlightBackground#EEEFF1
  • editor.lineHighlightBorder#EEEFF1
  • editor.rangeHighlightBackground#F4F4F552
  • editor.selectionBackground#F4F4F5cc
  • editor.selectionHighlightBackground#F4F4F5cc
  • editor.wordHighlightBackground#4397C466
  • editor.wordHighlightStrongBackground#4397C499
  • editorBracketMatch.background#F4F4F500
  • editorBracketMatch.border#459BA0
  • editorCodeLens.foreground#E4E4E7
  • editorCursor.foreground#303036
  • editorError.border#AF555000
  • editorError.foreground#AF5550
  • editorGroup.background#FFFFFF
  • editorGroup.border#EEEFF101
  • editorGroup.dropBackground#EEEFF199
  • editorGroup.emptyBackground#FFFFFF
  • editorGroupHeader.noTabsBackground#FFFFFF
  • editorGroupHeader.tabsBackground#FFFFFF
  • editorGroupHeader.tabsBorder#EEEFF100
  • editorGutter.addedBackground#79B488
  • editorGutter.background#FFFFFF
  • editorGutter.deletedBackground#AF5550
  • editorGutter.modifiedBackground#EBB861
  • editorHint.border#EBB86100
  • editorHint.foreground#EBB861
  • editorHoverWidget.background#EEEFF1
  • editorHoverWidget.border#EEEFF1
  • editorIndentGuide.activeBackground#E4E4E7
  • editorIndentGuide.background#F4F4F5B3
  • editorLineNumber.activeForeground#303036
  • editorLineNumber.foreground#E4E4E7
  • editorLink.activeForeground#459BA0
  • editorMarkerNavigation.background#8896BBc0
  • editorMarkerNavigationError.background#AF5550c0
  • editorMarkerNavigationWarning.background#EBB861c0
  • editorOverviewRuler.addedForeground#79B488
  • editorOverviewRuler.border#EEEFF1
  • editorOverviewRuler.currentContentForeground#EEEFF1
  • editorOverviewRuler.deletedForeground#AF5550
  • editorOverviewRuler.errorForeground#AF5550
  • editorOverviewRuler.findMatchForeground#459BA066
  • editorOverviewRuler.incomingContentForeground#EEEFF1
  • editorOverviewRuler.infoForeground#4397C4
  • editorOverviewRuler.modifiedForeground#EBB861
  • editorOverviewRuler.rangeHighlightForeground#459BA066
  • editorOverviewRuler.selectionHighlightForeground#459BA066
  • editorOverviewRuler.warningForeground#EBB861
  • editorOverviewRuler.wordHighlightForeground#459BA066
  • editorOverviewRuler.wordHighlightStrongForeground#459BA066
  • editorRuler.foreground#F4F4F5
  • editorSuggestWidget.background#FFFFFF
  • editorSuggestWidget.border#EEEFF1
  • editorSuggestWidget.foreground#303036
  • editorSuggestWidget.highlightForeground#459BA0
  • editorSuggestWidget.selectedBackground#F4F4F5
  • editorWarning.border#EBB86100
  • editorWarning.foreground#EBB861
  • editorWhitespace.foreground#E4E4E7b3
  • editorWidget.background#FFFFFF
  • editorWidget.border#EEEFF1
  • errorForeground#AF5550
  • extensionButton.prominentBackground#F4F4F5
  • extensionButton.prominentForeground#303036
  • extensionButton.prominentHoverBackground#E4E4E7
  • focusBorder#EEEFF1
  • foreground#303036
  • gitDecoration.conflictingResourceForeground#8896BB
  • gitDecoration.deletedResourceForeground#AF5550
  • gitDecoration.ignoredResourceForeground#30303666
  • gitDecoration.modifiedResourceForeground#EBB861
  • gitDecoration.submoduleResourceForeground#459BA0
  • gitDecoration.untrackedResourceForeground#79B488
  • input.background#EEEFF1
  • input.border#EEEFF1
  • input.foreground#303036
  • input.placeholderForeground#30303699
  • inputOption.activeBackground#8896BB
  • inputOption.activeBorder#8896BB
  • inputValidation.errorBackground#AF5550
  • inputValidation.errorBorder#AF5550
  • inputValidation.infoBackground#4397C4
  • inputValidation.infoBorder#4397C4
  • inputValidation.warningBackground#AF5550
  • inputValidation.warningBorder#AF5550
  • list.activeSelectionBackground#459BA0
  • list.activeSelectionForeground#FFFFFF
  • list.dropBackground#459BA099
  • list.errorForeground#AF5550
  • list.focusBackground#459BA099
  • list.focusForeground#303036
  • list.highlightForeground#459BA0
  • list.hoverBackground#EEEFF1
  • list.hoverForeground#474850
  • list.inactiveFocusBackground#F4F4F5cc
  • list.inactiveSelectionBackground#F4F4F5
  • list.inactiveSelectionForeground#303036
  • list.warningForeground#EBB861
  • merge.border#EEEFF100
  • merge.currentContentBackground#4397C44d
  • merge.currentHeaderBackground#4397C466
  • merge.incomingContentBackground#459BA04d
  • merge.incomingHeaderBackground#459BA066
  • minimap.findMatchHighlight#459BA0
  • notificationCenter.border#EEEFF100
  • notificationCenterHeader.background#FFFFFF
  • notificationCenterHeader.foreground#459BA0
  • notificationLink.foreground#459BA0
  • notifications.background#EEEFF1
  • notifications.border#FFFFFF
  • notifications.foreground#303036
  • notificationToast.border#EEEFF100
  • panel.background#FFFFFF
  • panel.border#EEEFF1
  • panelTitle.activeBorder#459BA000
  • panelTitle.activeForeground#459BA0
  • panelTitle.inactiveForeground#303036
  • peekView.border#E4E4E7
  • peekViewEditor.background#FFFFFF
  • peekViewEditor.matchHighlightBackground#459BA04d
  • peekViewEditorGutter.background#FFFFFF
  • peekViewResult.background#FFFFFF
  • peekViewResult.fileForeground#459BA0
  • peekViewResult.lineForeground#30303666
  • peekViewResult.matchHighlightBackground#459BA0cc
  • peekViewResult.selectionBackground#F4F4F5
  • peekViewResult.selectionForeground#303036
  • peekViewTitle.background#EEEFF1
  • peekViewTitleDescription.foreground#303036
  • peekViewTitleLabel.foreground#459BA0
  • pickerGroup.border#EEEFF1
  • pickerGroup.foreground#459BA0
  • progressBar.background#459BA0
  • scrollbar.shadow#00000066
  • scrollbarSlider.activeBackground#F4F4F5aa
  • scrollbarSlider.background#F4F4F599
  • scrollbarSlider.hoverBackground#F4F4F5aa
  • selection.background#459BA099
  • sideBar.background#FFFFFF
  • sideBar.border#EEEFF1
  • sideBar.foreground#303036
  • sideBarSectionHeader.background#EEEFF1
  • sideBarSectionHeader.foreground#303036
  • sideBarTitle.foreground#303036
  • statusBar.background#EEEFF1
  • statusBar.border#EEEFF100
  • statusBar.debuggingBackground#8896BB
  • statusBar.debuggingForeground#303036
  • statusBar.foreground#303036
  • statusBar.noFolderBackground#EEEFF1
  • statusBar.noFolderForeground#303036
  • statusBarItem.activeBackground#E4E4E7
  • statusBarItem.hoverBackground#F4F4F5
  • statusBarItem.prominentBackground#EEEFF1
  • statusBarItem.prominentHoverBackground#F4F4F5
  • tab.activeBackground#EEEFF1
  • tab.activeBorder#459BA000
  • tab.activeBorderTop#459BA000
  • tab.activeForeground#303036
  • tab.border#EEEFF100
  • tab.hoverBackground#EEEFF1cc
  • tab.hoverBorder#459BA000
  • tab.inactiveBackground#FFFFFF
  • tab.inactiveForeground#30303666
  • tab.unfocusedActiveBorder#459BA000
  • tab.unfocusedActiveBorderTop#459BA000
  • tab.unfocusedActiveForeground#30303699
  • tab.unfocusedHoverBackground#EEEFF1b3
  • tab.unfocusedHoverBorder#459BA000
  • tab.unfocusedInactiveForeground#30303666
  • terminal.ansiBlack#EEEFF1
  • terminal.ansiBlue#4397C4
  • terminal.ansiBrightBlack#E4E4E7
  • terminal.ansiBrightBlue#4397C4
  • terminal.ansiBrightCyan#459BA0
  • terminal.ansiBrightGreen#79B488
  • terminal.ansiBrightMagenta#A796BC
  • terminal.ansiBrightRed#AF5550
  • terminal.ansiBrightWhite#E4E4E7
  • terminal.ansiBrightYellow#EBB861
  • terminal.ansiCyan#459BA0
  • terminal.ansiGreen#79B488
  • terminal.ansiMagenta#A796BC
  • terminal.ansiRed#AF5550
  • terminal.ansiWhite#F4F4F5
  • terminal.ansiYellow#EBB861
  • terminal.background#FFFFFF
  • terminal.foreground#303036
  • textBlockQuote.background#EEEFF1
  • textBlockQuote.border#4397C4
  • textCodeBlock.background#E4E4E7
  • textLink.activeForeground#459BA0
  • textLink.foreground#459BA0
  • textPreformat.foreground#459BA0
  • textSeparator.foreground#474850
  • titleBar.activeBackground#FFFFFF
  • titleBar.activeForeground#303036
  • titleBar.border#2e344000
  • titleBar.inactiveBackground#FFFFFF
  • titleBar.inactiveForeground#30303666
  • tree.indentGuidesStroke#ACB9D0
  • walkThrough.embeddedEditorBackground#FFFFFF
  • welcomePage.buttonBackground#F4F4F5
  • welcomePage.buttonHoverBackground#E4E4E7
  • widget.shadow#00000066

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#303036ff
emphasisitalic
strongbold
comment#ACB9D0
constant.character#EBB861
constant.character.escape#EBB861
constant.language#4397C4
constant.numeric#A796BC
constant.regexp#EBB861
entity.name.class, entity.name.type.class#459BA0
entity.name.function#459BA0
entity.name.tag#4397C4
entity.other.attribute-name#459BA0
entity.other.inherited-class#459BA0bold
invalid.deprecated#303036
invalid.illegal#303036
keyword#4397C4
keyword.operator#4397C4
keyword.other.new#4397C4
markup.boldbold
markup.changed#EBB861
markup.deleted#AF5550
markup.inserted#79B488
meta.preprocessor#8896BB
punctuation#474850
punctuation.definition.method-parameters, punctuation.definition.function-parameters, punctuation.definition.parameters#474850
punctuation.definition.tag#4397C4
punctuation.definition.comment, punctuation.end.definition.comment, punctuation.start.definition.comment#ACB9D0
punctuation.section#474850
punctuation.section.embedded.begin, punctuation.section.embedded.end#4397C4
punctuation.terminator#4397C4
punctuation.definition.variable#4397C4
storage#4397C4
string#79B488
string.regexp#EBB861
support.class#459BA0
support.constant#4397C4
support.function#459BA0
support.function.construct#4397C4
support.type#459BA0
support.type.exception#459BA0
token.debug-token#A796BC
token.error-token#AF5550
token.info-token#459BA0
token.warn-token#EBB861
variable.other#303036
variable.language#4397C4
variable.parameter#303036
punctuation.separator.pointer-access.c#4397C4
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#459BA0
source.css keyword.control.at-rule.media, source.css keyword.control.at-rule.media punctuation.definition.keyword#AF5550
source.css punctuation.definition.keyword#4397C4
source.css support.type.property-name#303036
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#4397C4
entity.name.type.module.elixir#459BA0
variable.other.readwrite.module.elixir#303036bold
constant.other.symbol.elixir#303036bold
variable.other.constant.elixir#459BA0
source.go constant.other.placeholder.go#EBB861
source.java comment.block.documentation.javadoc punctuation.definition.entity.html#4397C4
source.java constant.other#303036
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#459BA0
source.java meta.tag.template.link.javadoc, source.java string.other.link.title.javadoc#459BA0
source.java meta.tag.template.value.javadoc#459BA0
source.java punctuation.definition.keyword.javadoc#459BA0
source.java punctuation.definition.tag.begin.javadoc, source.java punctuation.definition.tag.end.javadoc#ACB9D0
source.java storage.modifier.import#459BA0
source.java storage.modifier.package#459BA0
source.java storage.type#459BA0
source.java storage.type.annotation#AF5550
source.java storage.type.generic#459BA0
source.java storage.type.primitive#4397C4
source.js punctuation.decorator, source.js meta.decorator variable.other.readwrite, source.js meta.decorator entity.name.function#AF5550
source.js meta.object-literal.key#459BA0
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#4397C4
source.js string.quoted.template meta.method-call.with-arguments#474850
source.js string.template meta.template.expression support.variable.property, source.js string.template meta.template.expression variable.other.object#303036
source.js support.type.primitive#4397C4
source.js variable.other.object#303036
source.js variable.other.readwrite.alias#459BA0
text.html.basic constant.character.entity.html#EBB861
text.html.basic constant.other.inline-data#AF5550italic
text.html.basic meta.tag.sgml.doctype#8896BB
text.html.basic punctuation.definition.entity#4397C4
source.properties entity.name.section.group-title.ini#459BA0
source.properties punctuation.separator.key-value.ini#4397C4
text.html.markdown markup.fenced_code.block, text.html.markdown markup.fenced_code.block punctuation.definition#459BA0
markup.heading#459BA0
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#4397C4
text.html.markdown beginning.punctuation.definition.quote#459BA0
text.html.markdown markup.quote#ACB9D0
text.html.markdown punctuation.definition.heading#4397C4
text.html.markdown punctuation.definition.constant, text.html.markdown punctuation.definition.string#4397C4
text.html.markdown constant.other.reference.link, text.html.markdown string.other.link.description, text.html.markdown string.other.link.title#459BA0
source.perl punctuation.definition.variable#303036
source.php meta.function-call, source.php meta.function-call.object#459BA0
source.python entity.name.function.decorator, source.python meta.function.decorator support.type#AF5550
source.python meta.function-call.generic#459BA0
source.python support.type#459BA0
source.python variable.parameter.function.language#303036
source.python meta.function.parameters variable.parameter.function.language.special.self#4397C4
source.css.scss punctuation.definition.interpolation.begin.bracket.curly, source.css.scss punctuation.definition.interpolation.end.bracket.curly#4397C4
source.css.scss variable.interpolation#303036italic
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#AF5550
source.ts meta.object-literal.key, source.tsx meta.object-literal.key#303036
source.ts meta.object-literal.key entity.name.function, source.tsx meta.object-literal.key entity.name.function#459BA0
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#303036
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#AF5550italic
source.yaml entity.name.tag#459BA0