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#102628
  • activityBar.border#102628
  • activityBar.dropBorder#1f5c61
  • activityBar.foreground#6aaeac
  • activityBar.inactiveForeground#6aaeac99
  • activityBarBadge.background#2ec4b6
  • activityBarBadge.foreground#102628
  • badge.background#2ec4b6
  • badge.foreground#132e31
  • breadcrumb.activeSelectionForeground#c7dede
  • breadcrumb.background#132e31
  • breadcrumb.focusForeground#c7dede
  • breadcrumb.foreground#6aaeac
  • breadcrumbPicker.background#102628
  • button.background#2ec4b6
  • button.foreground#102628
  • button.hoverBackground#2ec4b699
  • debugExceptionWidget.background#1f5c61
  • debugExceptionWidget.border#1f5c61
  • debugToolBar.background#1f5c61
  • debugToolBar.border#1f5c61
  • descriptionForeground#c7dede
  • diffEditor.border#1f5c61
  • diffEditor.insertedTextBackground#80ffdb22
  • diffEditor.insertedTextBorder#80ffdb44
  • diffEditor.removedTextBackground#ff2d3b22
  • diffEditor.removedTextBorder#ff2d3b44
  • dropdown.background#1f5c61
  • dropdown.border#1f5c61
  • dropdown.foreground#c7dede
  • dropdown.listBackground#102628
  • editor.background#132e31
  • editor.findMatchBackground#6aaeac77
  • editor.findMatchBorder#c8fff4
  • editor.findMatchHighlightBackground#6aaeac77
  • editor.findRangeHighlightBackground#6aaeac77
  • editor.foreground#a4b5ba
  • editor.hoverHighlightBackground#6aaeac77
  • editor.inactiveSelectionBackground#6aaeac77
  • editor.lineHighlightBackground#1f5c61
  • editor.lineHighlightBorder#1f5c61
  • editor.rangeHighlightBackground#1f5c61
  • editor.selectionBackground#1f5c61
  • editor.selectionForeground#a4b5ba
  • editor.selectionHighlightBackground#c8fff415
  • editor.wordHighlightBackground#6aaeac77
  • editor.wordHighlightStrongBackground#6aaeac77
  • editorBracketMatch.background#c8fff420
  • editorBracketMatch.border#c8fff470
  • editorCodeLens.foreground#c7dede
  • editorCursor.background#132e31
  • editorCursor.foreground#2ec4b6
  • editorError.foreground#ff2d3b
  • editorGroup.border#1f5c61
  • editorGroup.dropBackground#1f5c61
  • editorGroup.emptyBackground#132e31
  • editorGroup.focusedEmptyBorder#132e31
  • editorGroupHeader.noTabsBackground#132e31
  • editorGroupHeader.tabsBackground#102628
  • editorGroupHeader.tabsBorder#102628
  • editorGutter.addedBackground#80ffdb
  • editorGutter.background#132e31
  • editorGutter.deletedBackground#ff2d3b
  • editorGutter.modifiedBackground#00a6fb
  • editorHint.foreground#2ec4b6
  • editorHoverWidget.background#1f5c61
  • editorHoverWidget.border#1f5c61
  • editorIndentGuide.activeBackground#6aaeac77
  • editorIndentGuide.background#6aaeac33
  • editorInfo.foreground#00a6fb
  • editorInlayHint.background#102628
  • editorInlayHint.foreground#6aaeac99
  • editorLineNumber.activeForeground#6aaeac
  • editorLineNumber.foreground#6aaeac55
  • editorLink.activeForeground#2ec4b6
  • editorMarkerNavigation.background#1f5c61
  • editorMarkerNavigationError.background#ff2d3b
  • editorMarkerNavigationInfo.background#00a6fb
  • editorMarkerNavigationWarning.background#2ec4b6
  • editorOverviewRuler.addedForeground#80ffdb
  • editorOverviewRuler.border#1f5c61
  • editorOverviewRuler.bracketMatchForeground#2ec4b6
  • editorOverviewRuler.commonContentForeground#1f5c61
  • editorOverviewRuler.currentContentForeground#00a6fb
  • editorOverviewRuler.deletedForeground#ff2d3b
  • editorOverviewRuler.errorForeground#ff2d3b
  • editorOverviewRuler.findMatchForeground#2ec4b6
  • editorOverviewRuler.incomingContentForeground#80ffdb
  • editorOverviewRuler.infoForeground#00a6fb
  • editorOverviewRuler.modifiedForeground#00a6fb
  • editorOverviewRuler.rangeHighlightForeground#6aaeac
  • editorOverviewRuler.selectionHighlightForeground#6aaeac
  • editorOverviewRuler.warningForeground#ffd166
  • editorOverviewRuler.wordHighlightForeground#6aaeac
  • editorOverviewRuler.wordHighlightStrongForeground#6aaeac
  • editorPane.background#132e31
  • editorRuler.foreground#1f5c61
  • editorSuggestWidget.background#1f5c61
  • editorSuggestWidget.border#1f5c61
  • editorSuggestWidget.foreground#c7dede
  • editorSuggestWidget.highlightForeground#2ec4b6
  • editorSuggestWidget.selectedBackground#132e31
  • editorWarning.foreground#ffd166
  • editorWhitespace.foreground#6aaeac77
  • editorWidget.background#102628
  • editorWidget.border#102628
  • errorForeground#ff2d3b
  • extensionButton.prominentBackground#2ec4b6
  • extensionButton.prominentForeground#132e31
  • extensionButton.prominentHoverBackground#2ec4b699
  • focusBorder#6aaeac77
  • foreground#6aaeac
  • gitDecoration.conflictingResourceForeground#ff2d3b
  • gitDecoration.deletedResourceForeground#ff2d3b
  • gitDecoration.ignoredResourceForeground#6aaeac77
  • gitDecoration.modifiedResourceForeground#00a6fb
  • gitDecoration.untrackedResourceForeground#80ffdb
  • input.background#132e31
  • input.border#1f5c61
  • input.foreground#c7dede
  • input.placeholderForeground#6aaeac77
  • inputOption.activeBorder#1f5c61
  • inputValidation.errorBackground#132e31
  • inputValidation.errorBorder#ff2d3b
  • inputValidation.errorForeground#ff2d3b
  • inputValidation.infoBackground#132e31
  • inputValidation.infoBorder#00a6fb
  • inputValidation.infoForeground#00a6fb
  • inputValidation.warningBackground#132e31
  • inputValidation.warningBorder#ffd166
  • inputValidation.warningForeground#ffd166
  • list.activeSelectionBackground#1f5c61
  • list.activeSelectionForeground#c7dede
  • list.dropBackground#1f5c61
  • list.errorForeground#ff2d3b
  • list.focusBackground#1f5c61
  • list.focusForeground#c7dede
  • list.highlightForeground#2ec4b6
  • list.hoverBackground#1f5c61
  • list.hoverForeground#c7dede
  • list.inactiveFocusBackground#1f5c61
  • list.inactiveSelectionBackground#1f5c61
  • list.inactiveSelectionForeground#c7dede
  • list.invalidItemForeground#ff2d3b
  • list.warningForeground#ffd166
  • listFilterWidget.background#1f5c61
  • listFilterWidget.noMatchesOutline#ff2d3b
  • listFilterWidget.outline#1f5c61
  • menu.background#102628
  • menu.foreground#6aaeac
  • menu.selectionBackground#1f5c61
  • menu.selectionForeground#c7dede
  • menubar.selectionBackground#1f5c61
  • menubar.selectionForeground#c7dede
  • merge.border#6aaeac
  • merge.commonContentBackground#1f5c6155
  • merge.commonHeaderBackground#1f5c6177
  • merge.currentContentBackground#00a6fb22
  • merge.currentHeaderBackground#00a6fb77
  • merge.incomingContentBackground#80ffdb22
  • merge.incomingHeaderBackground#80ffdb77
  • notificationCenter.border#102628
  • notificationCenterHeader.background#102628
  • notificationCenterHeader.foreground#c7dede
  • notificationLink.foreground#c7dede
  • notifications.background#102628
  • notifications.border#102628
  • notifications.foreground#c7dede
  • notificationToast.border#102628
  • panel.background#102628
  • panel.border#132e31
  • panel.dropBorder#1f5c61
  • panelInput.border#6aaeac
  • panelSection.border#1f5c61
  • panelSection.dropBackground#1f5c61
  • panelSectionHeader.background#132e31
  • panelSectionHeader.foreground#2ec4b6
  • panelTitle.activeBorder#2ec4b6
  • panelTitle.activeForeground#c7dede
  • panelTitle.inactiveForeground#6aaeac
  • peekView.border#2ec4b6
  • peekViewEditor.background#1f5c61
  • peekViewEditor.matchHighlightBackground#6aaeac
  • peekViewEditor.matchHighlightBorder#2ec4b6
  • peekViewEditorGutter.background#132e31
  • peekViewResult.background#1f5c61
  • peekViewResult.fileForeground#6aaeac
  • peekViewResult.lineForeground#c7dede
  • peekViewResult.matchHighlightBackground#2ec4b633
  • peekViewResult.selectionBackground#1f5c61
  • peekViewResult.selectionForeground#c7dede
  • peekViewTitle.background#1f5c61
  • peekViewTitleDescription.foreground#6aaeac
  • peekViewTitleLabel.foreground#6aaeac
  • pickerGroup.border#1f5c61
  • pickerGroup.foreground#2ec4b6
  • progressBar.background#2ec4b6
  • scrollbar.shadow#010a0e
  • scrollbarSlider.activeBackground#6aaeac77
  • scrollbarSlider.background#6aaeac55
  • scrollbarSlider.hoverBackground#6aaeac99
  • selection.background#6aaeac77
  • settings.checkboxBackground#1f5c61
  • settings.checkboxBorder#1f5c61
  • settings.checkboxForeground#c7dede
  • settings.dropdownBackground#1f5c61
  • settings.dropdownBorder#1f5c61
  • settings.dropdownForeground#c7dede
  • settings.dropdownListBorder#1f5c61
  • settings.headerForeground#c7dede
  • settings.modifiedItemIndicator#00a6fb
  • settings.numberInputBackground#1f5c61
  • settings.numberInputBorder#1f5c61
  • settings.numberInputForeground#c7dede
  • settings.textInputBackground#1f5c61
  • settings.textInputBorder#1f5c61
  • settings.textInputForeground#c7dede
  • sideBar.background#102628
  • sideBar.foreground#6aaeac
  • sideBarSectionHeader.background#132e31
  • sideBarSectionHeader.border#102628
  • sideBarSectionHeader.foreground#2ec4b6
  • sideBarTitle.foreground#2ec4b6
  • statusBar.background#102628
  • statusBar.border#102628
  • statusBar.debuggingBackground#102628
  • statusBar.debuggingForeground#6aaeac
  • statusBar.foreground#6aaeac
  • statusBar.noFolderBackground#102628
  • statusBar.noFolderForeground#6aaeac
  • statusBarItem.activeBackground#1f5c61
  • statusBarItem.hoverBackground#132e31
  • statusBarItem.remoteBackground#102628
  • statusBarItem.remoteForeground#6aaeac
  • tab.activeBackground#132e31
  • tab.activeBorder#2ec4b6
  • tab.activeBorderTop#102628
  • tab.activeForeground#c7dede
  • tab.border#102628
  • tab.hoverBackground#1f5c61
  • tab.hoverBorder#2ec4b6
  • tab.inactiveBackground#102628
  • tab.inactiveForeground#c7dede77
  • tab.unfocusedActiveBackground#132e31
  • tab.unfocusedActiveBorder#2ec4b677
  • tab.unfocusedActiveBorderTop#132e31
  • tab.unfocusedActiveForeground#c7dede
  • tab.unfocusedHoverBackground#132e31
  • tab.unfocusedHoverBorder#2ec4b677
  • tab.unfocusedInactiveForeground#c7dede77
  • terminal.ansiBlack#1f5c61
  • terminal.ansiBlue#00a6fb
  • terminal.ansiBrightBlack#46555c
  • terminal.ansiBrightBlue#00a6fb
  • terminal.ansiBrightCyan#00a6fb
  • terminal.ansiBrightGreen#80ffdb
  • terminal.ansiBrightMagenta#2ec4b6
  • terminal.ansiBrightRed#ff2d3b
  • terminal.ansiBrightWhite#a4b5ba
  • terminal.ansiBrightYellow#2ec4b6
  • terminal.ansiCyan#00a6fb
  • terminal.ansiGreen#80ffdb
  • terminal.ansiMagenta#2ec4b6
  • terminal.ansiRed#ff2d3b
  • terminal.ansiWhite#a4b5ba
  • terminal.ansiYellow#2ec4b6
  • terminal.background#102628
  • terminal.border#102628
  • terminal.foreground#a4b5ba
  • terminal.selectionBackground#6aaeac33
  • terminalCursor.background#2ec4b6
  • terminalCursor.foreground#2ec4b6
  • textBlockQuote.background#1f5c61
  • textBlockQuote.border#1f5c61
  • textCodeBlock.background#102628
  • textLink.activeForeground#2ec4b6
  • textLink.foreground#2ec4b6
  • textPreformat.foreground#c7dede
  • textSeparator.foreground#c7dede
  • titleBar.activeBackground#102628
  • titleBar.activeForeground#c7dede
  • titleBar.border#102628
  • titleBar.inactiveBackground#102628
  • titleBar.inactiveForeground#6aaeac
  • tree.indentGuidesStroke#1f5c61
  • walkThrough.embeddedEditorBackground#102628
  • welcomePage.buttonBackground#1f5c61
  • welcomePage.buttonHoverBackground#1f5c6199
  • widget.shadow#010a0e

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#a4b5ba
comment, punctuation.definition.comment#6aaeac99italic
variable, string constant.other.placeholder, source#a4b5ba
constant.other.color, punctuation.definition.entity, constant.character.entity, punctuation.definition.template-expression, punctuation.section.tag.twig#2ec4b6
invalid, invalid.illegal#ff2d3b
keyword, storage.type, storage.modifier, constant.numeric, constant.language, support.constant, constant.character, constant.escape#2ec4b6
punctuation, punctuation.definition.tag, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution, meta.brace, meta.block, meta.jsx, meta.embedded.expression, meta.template.expression, meta.tag.block.any.html, string.unquoted.tag-string.nunjucks, text.html.nunjucks#a4b5ba
punctuation.separator.key-value.html, keyword.control, keyword.operator, constant.other.color, punctuation.definition.constant, meta.function.block.start.handlebars, meta.function.inline.other, meta.property-value, support.constant.mathematical-symbols, support.constant.vendored.property-value, punctuation.definition.keyword, punctuation.accessor, punctuation.separator.property, string.unquoted.filter-pipe#ff9f1c
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter, support.variable.dom, meta.import, meta.export, meta.export.default, support.class.builtin, support.class.component, variable.other.object#00a6fb
entity.name.function, variable.function, support.function, keyword.other.special-method, meta.function-call, keyword.control.filter#ffd166
meta.block variable.other#a4b5ba
variable.parameter, text.html, punctuation.section.property-list, meta.property-value.scss punctuation, meta.property-list, keyword.operator.type.annotation, variable.other.object.property#a4b5ba
string, constant.other.symbol, constant.other.key, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js, punctuation.definition.string, entity.name.section.markdown, meta.attribute-selector, entity.name.import.go, storage.type.attr.nunjucks#80ffdb
entity.name, support.type, support.orther.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types, meta.object-literal.key#ffd166
support.type, support.class, keyword.other.debugger, entity.other.inherited-class, meta.property-name, punctuation.definition.raw.markdown, variable.graphql, variable.other.readwrite#00a6fb
source.css support.type.property-name, source.sass support.type.property-name, source.scss support.type.property-name, source.less support.type.property-name, source.stylus support.type.property-name, source.postcss support.type.property-name, support.type.property-name, support.variable.object.node, support.variable.object.process#00a6fb
entity.name.module.js, variable.import.parameter.js#ff2d3b
variable.language#00a6fbitalic
entity.name.method.js#00a6fbitalic
meta.class-method.js entity.name.function.js, variable.function.constructor#00a6fb
entity.other.attribute-name#ff9f1c
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#ff9f1c
entity.other.attribute-name.class, punctuation.definition.entity.css#ff9f1c
source.sass keyword.control#00a6fb
markup.inserted#80ffdb
markup.deleted#ff2d3b
markup.changed#2ec4b6
string.regexp#ff9f1c
constant.character.escape#00a6fb
*url*, *link*, *uri*underline
meta.decorator, tag.decorator.js entity.name.tag, tag.decorator.js punctuation.definition.tag#00a6fb
source.js constant.other.object.key.js string.unquoted.label.js#ff2d3bitalic
source.json meta.structure.dictionary.json support.type.property-name.json#00a6fb
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#00a6fb
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#ff9f1c
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#00a6fb
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#ff9f1c
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#00a6fb
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#ff9f1c
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#00a6fb
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#ff9f1c
markup.italic#ff2d3bitalic
markup.bold#ff2d3bbold
markup.underline#2ec4b6underline
markup.strike#2ec4b6italic
markup.quote#00a6fbitalic
markup.raw.block#ff9f1c
markup.table#00a6fb
text.html.markdown, punctuation.definition.list_item.markdown#a4b5ba
text.html.markdown markup.raw.inline, text.html.markdown markup.inline.raw.string.markdown#00a6fb
text.html.markdown meta.dummy.line-break#a4b5ba
markdown.heading, markup.heading, markup.heading entity.name, markup.heading.markdown, punctuation.definition.heading.markdown#80ffdb
markup.quote, punctuation.definition.blockquote.markdown#00a6fbitalic
string.other.link.title.markdown#2ec4b6underline
markup.raw.block.fenced.markdown#c7dede
punctuation.definition.fenced.markdown, variable.language.fenced.markdown#a4b5ba
variable.language.fenced.markdown#a4b5ba
meta.separator#a4b5ba
token.info-token#00a6fb
token.warn-token#2ec4b6
token.error-token#ff2d3b
token.debug-token#2ec4b6
storage.type.error.go#00a6fb
punctuation.other.period.go#ff9f1c
Color Sea by Danesed - VS Code Theme