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.background#081b21
  • activityBar.dropBackground#102c33
  • activityBar.foreground#e7e0d7
  • activityBarBadge.background#67b3b0
  • activityBarBadge.foreground#081b21
  • badge.background#67b3b0
  • badge.foreground#081b21
  • button.background#434c5e
  • button.foreground#e7e0d7
  • button.hoverBackground#2b5e70
  • debugExceptionWidget.background#2b5e70
  • debugExceptionWidget.border#081b21
  • debugToolBar.background#102c33
  • diffEditor.insertedTextBackground#8cbca14d
  • diffEditor.insertedTextBorder#8cbca14d
  • diffEditor.removedTextBackground#b34f524d
  • diffEditor.removedTextBorder#b34f524d
  • dropdown.background#102c33
  • dropdown.border#102c33
  • dropdown.foreground#e7e0d7
  • editor.background#081b21
  • editor.findMatchBackground#67b3b066
  • editor.findMatchHighlightBackground#67b3b033
  • editor.findRangeHighlightBackground#67b3b033
  • editor.foreground#e7e0d7
  • editor.hoverHighlightBackground#102c33
  • editor.inactiveSelectionBackground#434c5ecc
  • editor.lineHighlightBackground#434c5e52
  • editor.lineHighlightBorder#434c5e52
  • editor.rangeHighlightBackground#434c5e52
  • editor.selectionBackground#434c5ecc
  • editor.selectionHighlightBackground#434c5ecc
  • editor.wordHighlightBackground#65778b66
  • editor.wordHighlightStrongBackground#65778b99
  • editorBracketMatch.background#081b2100
  • editorBracketMatch.border#67b3b0
  • editorCodeLens.foreground#2b5e70
  • editorCursor.foreground#e7e0d7
  • editorError.border#b34f5200
  • editorError.foreground#b34f52
  • editorGroup.border#102c3301
  • editorGroup.dropBackground#102c3399
  • editorGroup.emptyBackground#081b21
  • editorGroupHeader.noTabsBackground#081b21
  • editorGroupHeader.tabsBackground#081b21
  • editorGroupHeader.tabsBorder#102c3300
  • editorGutter.addedBackground#8cbca1
  • editorGutter.background#081b21
  • editorGutter.deletedBackground#b34f52
  • editorGutter.modifiedBackground#887a67
  • editorHint.border#887a6700
  • editorHint.foreground#887a67
  • editorHoverWidget.background#102c33
  • editorHoverWidget.border#102c33
  • editorIndentGuide.activeBackground#2b5e70
  • editorIndentGuide.background#434c5eb3
  • editorLineNumber.activeForeground#e7e0d7cc
  • editorLineNumber.foreground#e7e0d766
  • editorLink.activeForeground#67b3b0
  • editorMarkerNavigation.background#5e81acc0
  • editorMarkerNavigationError.background#b34f52c0
  • editorMarkerNavigationWarning.background#887a67c0
  • editorOverviewRuler.addedForeground#8cbca1
  • editorOverviewRuler.border#102c33
  • editorOverviewRuler.currentContentForeground#102c33
  • editorOverviewRuler.deletedForeground#b34f52
  • editorOverviewRuler.errorForeground#b34f52
  • editorOverviewRuler.findMatchForeground#67b3b066
  • editorOverviewRuler.incomingContentForeground#102c33
  • editorOverviewRuler.infoForeground#65778b
  • editorOverviewRuler.modifiedForeground#887a67
  • editorOverviewRuler.rangeHighlightForeground#67b3b066
  • editorOverviewRuler.selectionHighlightForeground#67b3b066
  • editorOverviewRuler.warningForeground#887a67
  • editorOverviewRuler.wordHighlightForeground#67b3b066
  • editorOverviewRuler.wordHighlightStrongForeground#67b3b066
  • editorRuler.foreground#434c5e
  • editorSuggestWidget.background#081b21
  • editorSuggestWidget.border#102c33
  • editorSuggestWidget.foreground#e7e0d7
  • editorSuggestWidget.highlightForeground#67b3b0
  • editorSuggestWidget.selectedBackground#434c5e
  • editorWarning.border#887a6700
  • editorWarning.foreground#887a67
  • editorWhitespace.foreground#2b5e70b3
  • editorWidget.background#081b21
  • errorForeground#b34f52
  • extensionButton.prominentBackground#434c5e
  • extensionButton.prominentForeground#e7e0d7
  • extensionButton.prominentHoverBackground#2b5e70
  • focusBorder#102c33
  • foreground#e7e0d7
  • gitDecoration.conflictingResourceForeground#5e81ac
  • gitDecoration.deletedResourceForeground#b34f52
  • gitDecoration.ignoredResourceForeground#e7e0d766
  • gitDecoration.modifiedResourceForeground#bcb096
  • gitDecoration.submoduleResourceForeground#abd7d6
  • gitDecoration.untrackedResourceForeground#8cbca1
  • input.background#102c33
  • input.border#102c33
  • input.foreground#e7e0d7
  • input.placeholderForeground#e7e0d799
  • inputOption.activeBorder#67b3b0
  • inputValidation.errorBackground#b34f52
  • inputValidation.errorBorder#b34f52
  • inputValidation.infoBackground#65778b
  • inputValidation.infoBorder#65778b
  • inputValidation.warningBackground#d08770
  • inputValidation.warningBorder#d08770
  • list.activeSelectionBackground#67b3b044
  • list.activeSelectionForeground#e7e0d7
  • list.dropBackground#67b3b099
  • list.errorForeground#b34f52
  • list.focusBackground#67b3b099
  • list.focusForeground#e7e0d7
  • list.highlightForeground#67b3b0
  • list.hoverBackground#102c33
  • list.hoverForeground#f6f4cf
  • list.inactiveFocusBackground#434c5ecc
  • list.inactiveSelectionBackground#434c5e77
  • list.inactiveSelectionForeground#e7e0d7
  • list.warningForeground#887a67
  • merge.border#102c3300
  • merge.currentContentBackground#65778b4d
  • merge.currentHeaderBackground#65778b66
  • merge.incomingContentBackground#abd7d64d
  • merge.incomingHeaderBackground#abd7d666
  • notificationCenter.border#102c3300
  • notificationCenterHeader.background#081b21
  • notificationCenterHeader.foreground#67b3b0
  • notificationLink.foreground#67b3b0
  • notifications.background#102c33
  • notifications.border#081b21
  • notifications.foreground#e7e0d7
  • notificationToast.border#102c3300
  • panel.background#081b21
  • panel.border#102c33
  • panelTitle.activeBorder#67b3b000
  • panelTitle.activeForeground#67b3b0
  • panelTitle.inactiveForeground#e7e0d7
  • peekView.border#2b5e70
  • peekViewEditor.background#081b21
  • peekViewEditor.matchHighlightBackground#67b3b044
  • peekViewEditorGutter.background#081b21
  • peekViewResult.background#081b21
  • peekViewResult.fileForeground#67b3b0
  • peekViewResult.lineForeground#e7e0d766
  • peekViewResult.matchHighlightBackground#67b3b044
  • peekViewResult.selectionBackground#434c5e
  • peekViewResult.selectionForeground#e7e0d7
  • peekViewTitle.background#102c33
  • peekViewTitleDescription.foreground#e7e0d7
  • peekViewTitleLabel.foreground#67b3b0
  • pickerGroup.border#102c33
  • pickerGroup.foreground#67b3b0
  • progressBar.background#67b3b0
  • scrollbar.shadow#00000066
  • scrollbarSlider.activeBackground#434c5eaa
  • scrollbarSlider.background#434c5e99
  • scrollbarSlider.hoverBackground#434c5eaa
  • selection.background#67b3b099
  • sideBar.background#081b21
  • sideBar.border#102c33
  • sideBar.foreground#e7e0d7
  • sideBarSectionHeader.background#102c33
  • sideBarSectionHeader.foreground#e7e0d7
  • sideBarTitle.foreground#e7e0d7
  • statusBar.background#102c33
  • statusBar.border#102c3300
  • statusBar.debuggingBackground#5e81ac
  • statusBar.debuggingForeground#e7e0d7
  • statusBar.foreground#e7e0d7
  • statusBar.noFolderBackground#102c33
  • statusBar.noFolderForeground#e7e0d7
  • statusBarItem.activeBackground#2b5e70
  • statusBarItem.hoverBackground#434c5e
  • statusBarItem.prominentBackground#102c33
  • statusBarItem.prominentHoverBackground#434c5e
  • tab.activeBackground#102c33
  • tab.activeBorder#67b3b000
  • tab.activeBorderTop#67b3b000
  • tab.activeForeground#e7e0d7
  • tab.border#102c3300
  • tab.hoverBackground#102c33cc
  • tab.hoverBorder#67b3b000
  • tab.inactiveBackground#081b21
  • tab.inactiveForeground#e7e0d766
  • tab.unfocusedActiveBorder#67b3b000
  • tab.unfocusedActiveBorderTop#67b3b000
  • tab.unfocusedActiveForeground#e7e0d799
  • tab.unfocusedHoverBackground#102c33b3
  • tab.unfocusedHoverBorder#67b3b000
  • tab.unfocusedInactiveForeground#e7e0d766
  • terminal.ansiBlack#102c33
  • terminal.ansiBlue#65778b
  • terminal.ansiBrightBlack#2b5e70
  • terminal.ansiBrightBlue#9bb7d6
  • terminal.ansiBrightCyan#abd7d6
  • terminal.ansiBrightGreen#aed6b5
  • terminal.ansiBrightMagenta#ee9fa4
  • terminal.ansiBrightRed#dc6253
  • terminal.ansiBrightWhite#f6f4cf
  • terminal.ansiBrightYellow#bcb096
  • terminal.ansiCyan#67b3b0
  • terminal.ansiGreen#8cbca1
  • terminal.ansiMagenta#e7657d
  • terminal.ansiRed#b34f52
  • terminal.ansiWhite#f2f0c2
  • terminal.ansiYellow#887a67
  • terminal.background#081b21
  • terminal.foreground#e7e0d7
  • titleBar.activeBackground#081b21
  • titleBar.activeForeground#e7e0d7
  • titleBar.border#081b2100
  • titleBar.inactiveBackground#081b21
  • titleBar.inactiveForeground#e7e0d766
  • walkThrough.embeddedEditorBackground#081b21
  • welcomePage.buttonBackground#434c5e
  • welcomePage.buttonHoverBackground#2b5e70
  • widget.shadow#00000066

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#e7e0d7ff
emphasisitalic
strongbold
comment#616E88
constant.character#887a67
constant.character.escape#887a67
constant.language#65778b
constant.numeric#e7657d
constant.regexp#887a67
entity.name.class, entity.name.type.class#abd7d6
entity.name.function#67b3b0
entity.name.tag#65778b
entity.other.attribute-name#abd7d6
entity.other.inherited-class#abd7d6bold
invalid.deprecated#e7e0d7
invalid.illegal#e7e0d7
keyword#65778b
keyword.operator#65778b
keyword.other.new#65778b
markup.boldbold
markup.changed#887a67
markup.deleted#b34f52
markup.inserted#8cbca1
meta.preprocessor#5E81AC
punctuation#f6f4cf
punctuation.definition.method-parameters, punctuation.definition.function-parameters, punctuation.definition.parameters#f6f4cf
punctuation.definition.tag#65778b
punctuation.definition.comment, punctuation.end.definition.comment, punctuation.start.definition.comment#616E88
punctuation.section#f6f4cf
punctuation.section.embedded.begin, punctuation.section.embedded.end#65778b
punctuation.terminator#65778b
punctuation.definition.variable#65778b
storage#65778b
string#8cbca1
string.regexp#887a67
support.class#abd7d6
support.constant#65778b
support.function#67b3b0
support.function.construct#65778b
support.type#abd7d6
support.type.exception#abd7d6
token.debug-token#e7657d
token.error-token#b34f52
token.info-token#67b3b0
token.warn-token#887a67
variable.other#e7e0d7
variable.language#65778b
variable.parameter#e7e0d7
punctuation.separator.pointer-access.c#65778b
source.c meta.preprocessor.include, source.c string.quoted.other.lt-gt.include#abd7d6
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#e7657d
source.css meta.property-value#67b3b0
source.css keyword.control.at-rule.media, source.css keyword.control.at-rule.media punctuation.definition.keyword#D08770
source.css punctuation.definition.keyword#65778b
source.css support.type.property-name#e7e0d7
source.diff meta.diff.range.context#abd7d6
source.diff meta.diff.header.from-file#abd7d6
source.diff punctuation.definition.from-file#abd7d6
source.diff punctuation.definition.range#abd7d6
source.diff punctuation.definition.separator#65778b
source.go constant.other.placeholder.go#887a67
source.java comment.block.documentation.javadoc punctuation.definition.entity.html#65778b
source.java constant.other#e7e0d7
source.java keyword.other.documentation#abd7d6
source.java keyword.other.documentation.author.javadoc#abd7d6
source.java keyword.other.documentation.directive, source.java keyword.other.documentation.custom#abd7d6
source.java keyword.other.documentation.see.javadoc#abd7d6
source.java meta.method-call meta.method#67b3b0
source.java meta.tag.template.link.javadoc, source.java string.other.link.title.javadoc#abd7d6
source.java meta.tag.template.value.javadoc#67b3b0
source.java punctuation.definition.keyword.javadoc#abd7d6
source.java punctuation.definition.tag.begin.javadoc, source.java punctuation.definition.tag.end.javadoc#616E88
source.java storage.modifier.import#abd7d6
source.java storage.modifier.package#abd7d6
source.java storage.type#abd7d6
source.java storage.type.annotation#D08770
source.java storage.type.generic#abd7d6
source.java storage.type.primitive#65778b
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#67b3b0
source.js storage.type.class.jsdoc#abd7d6
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#65778b
source.js string.quoted.template meta.method-call.with-arguments#f6f4cf
source.js string.template meta.template.expression support.variable.property, source.js string.template meta.template.expression variable.other.object#e7e0d7
source.js support.type.primitive#65778b
source.js variable.other.object#e7e0d7
source.js variable.other.readwrite.alias#abd7d6
text.html.basic constant.character.entity.html#887a67
text.html.basic constant.other.inline-data#D08770italic
text.html.basic meta.tag.sgml.doctype#5E81AC
text.html.basic punctuation.definition.entity#65778b
source.properties entity.name.section.group-title.ini#67b3b0
source.properties punctuation.separator.key-value.ini#65778b
text.html.markdown markup.fenced_code.block, text.html.markdown markup.fenced_code.block punctuation.definition#abd7d6
markup.heading#67b3b0
text.html.markdown markup.inline.raw, text.html.markdown markup.inline.raw punctuation.definition.raw#abd7d6
text.html.markdown markup.italicitalic
text.html.markdown markup.underline.linkunderline
text.html.markdown beginning.punctuation.definition.list#65778b
text.html.markdown beginning.punctuation.definition.quote#abd7d6
text.html.markdown markup.quote#616E88
text.html.markdown punctuation.definition.heading#65778b
text.html.markdown punctuation.definition.constant, text.html.markdown punctuation.definition.string#65778b
text.html.markdown constant.other.reference.link, text.html.markdown string.other.link.description, text.html.markdown string.other.link.title#67b3b0
source.perl punctuation.definition.variable#e7e0d7
source.php meta.function-call, source.php meta.function-call.object#67b3b0
source.python entity.name.function.decorator, source.python meta.function.decorator support.type#D08770
source.python meta.function-call.generic#67b3b0
source.python support.type#67b3b0
source.python variable.parameter.function.language#e7e0d7
source.python meta.function.parameters variable.parameter.function.language.special.self#65778b
source.css.scss punctuation.definition.interpolation.begin.bracket.curly, source.css.scss punctuation.definition.interpolation.end.bracket.curly#65778b
source.css.scss variable.interpolation#e7e0d7italic
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#e7e0d7
source.ts meta.object-literal.key entity.name.function, source.tsx meta.object-literal.key entity.name.function#67b3b0
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#abd7d6
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#abd7d6
source.ts support.variable, source.tsx support.variable#e7e0d7
text.xml entity.name.tag.namespace#abd7d6
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#abd7d6