Skip to main content
CodingTheme

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#171c28
  • activityBar.border#171c28
  • activityBar.dropBorder#2f3b54
  • activityBar.foreground#8695b7
  • activityBar.inactiveForeground#8695b799
  • activityBarBadge.background#6CBDF0
  • activityBarBadge.foreground#171c28
  • badge.background#6CBDF0
  • badge.foreground#1d2433
  • breadcrumb.activeSelectionForeground#d7dce2
  • breadcrumb.background#1d2433
  • breadcrumb.focusForeground#d7dce2
  • breadcrumb.foreground#8695b7
  • breadcrumbPicker.background#171c28
  • button.background#6CBDF0
  • button.foreground#171c28
  • button.hoverBackground#6CBDF099
  • debugExceptionWidget.background#2f3b54
  • debugExceptionWidget.border#2f3b54
  • debugToolBar.background#2f3b54
  • debugToolBar.border#2f3b54
  • descriptionForeground#d7dce2
  • diffEditor.border#2f3b54
  • diffEditor.insertedTextBackground#bae67e22
  • diffEditor.insertedTextBorder#bae67e44
  • diffEditor.removedTextBackground#FF586222
  • diffEditor.removedTextBorder#FF586244
  • dropdown.background#2f3b54
  • dropdown.border#2f3b54
  • dropdown.foreground#d7dce2
  • dropdown.listBackground#171c28
  • editor.background#1d2433
  • editor.findMatchBackground#8695b777
  • editor.findMatchBorder#6CBDF0
  • editor.findMatchHighlightBackground#8695b755
  • editor.findMatchHighlightBorder#6CBDF077
  • editor.findRangeHighlightBackground#8695b755
  • editor.findRangeHighlightBorder#6CBDF077
  • editor.foreground#a2aabc
  • editor.hoverHighlightBackground#8695b799
  • editor.inactiveSelectionBackground#8695b755
  • editor.lineHighlightBackground#2f3b54
  • editor.lineHighlightBorder#2f3b54
  • editor.rangeHighlightBackground#2f3b54
  • editor.rangeHighlightBorder#8695b755
  • editor.selectionBackground#2f3b54
  • editor.selectionForeground#a2aabc
  • editor.selectionHighlightBackground#2f3b5499
  • editor.selectionHighlightBorder#8695b755
  • editor.wordHighlightBackground#8695b755
  • editor.wordHighlightBorder#8695b7
  • editor.wordHighlightStrongBackground#8695b755
  • editor.wordHighlightStrongBorder#6CBDF0
  • editorBracketMatch.background#8695b755
  • editorBracketMatch.border#6CBDF0
  • editorCodeLens.foreground#d7dce2
  • editorCursor.background#1d2433
  • editorCursor.foreground#6CBDF0
  • editorError.foreground#FF5885
  • editorGroup.border#2f3b54
  • editorGroup.dropBackground#2f3b54
  • editorGroup.emptyBackground#1d2433
  • editorGroup.focusedEmptyBorder#1d2433
  • editorGroupHeader.noTabsBackground#1d2433
  • editorGroupHeader.tabsBackground#171c28
  • editorGroupHeader.tabsBorder#171c28
  • editorGutter.addedBackground#69DD71
  • editorGutter.background#1d2433
  • editorGutter.deletedBackground#FF5862
  • editorGutter.modifiedBackground#27ABFF
  • editorHint.foreground#6CBDF0
  • editorHoverWidget.background#2f3b54
  • editorHoverWidget.border#2f3b54
  • editorIndentGuide.activeBackground1#8695b755
  • editorIndentGuide.background1#8695b733
  • editorInfo.foreground#58FFE5
  • editorLineNumber.activeForeground#8695b7
  • editorLineNumber.foreground#8695b755
  • editorLink.activeForeground#6CBDF0
  • editorMarkerNavigation.background#2f3b54
  • editorMarkerNavigationError.background#FF5862
  • editorMarkerNavigationInfo.background#58FFE5
  • editorMarkerNavigationWarning.background#FFDF58
  • editorOverviewRuler.addedForeground#69DD71
  • editorOverviewRuler.border#2f3b54
  • editorOverviewRuler.bracketMatchForeground#FFDF58
  • editorOverviewRuler.commonContentForeground#2f3b54
  • editorOverviewRuler.currentContentForeground#FF5862
  • editorOverviewRuler.deletedForeground#FF5885
  • editorOverviewRuler.errorForeground#FF5885
  • editorOverviewRuler.findMatchForeground#6CBDF0
  • editorOverviewRuler.incomingContentForeground#69DD71
  • editorOverviewRuler.infoForeground#F563DF
  • editorOverviewRuler.modifiedForeground#27ABFF
  • editorOverviewRuler.rangeHighlightForeground#8695b7
  • editorOverviewRuler.selectionHighlightForeground#8695b7
  • editorOverviewRuler.warningForeground#FFDF58
  • editorOverviewRuler.wordHighlightForeground#8695b7
  • editorOverviewRuler.wordHighlightStrongForeground#8695b7
  • editorPane.background#1d2433
  • editorRuler.foreground#2f3b54
  • editorSuggestWidget.background#2f3b54
  • editorSuggestWidget.border#2f3b54
  • editorSuggestWidget.foreground#d7dce2
  • editorSuggestWidget.highlightForeground#6CBDF0
  • editorSuggestWidget.selectedBackground#1d2433
  • editorWarning.foreground#FFDF58
  • editorWhitespace.foreground#8695b777
  • editorWidget.background#171c28
  • editorWidget.border#171c28
  • errorForeground#FF5862
  • extensionButton.prominentBackground#6CBDF0
  • extensionButton.prominentForeground#1d2433
  • extensionButton.prominentHoverBackground#6CBDF099
  • focusBorder#8695b777
  • foreground#8695b7
  • gitDecoration.conflictingResourceForeground#FFA748
  • gitDecoration.deletedResourceForeground#FF5862
  • gitDecoration.ignoredResourceForeground#8695b777
  • gitDecoration.modifiedResourceForeground#6CBDF0
  • gitDecoration.untrackedResourceForeground#6CF080
  • input.background#1d2433
  • input.border#2f3b54
  • input.foreground#d7dce2
  • input.placeholderForeground#8695b777
  • inputOption.activeBorder#2f3b54
  • inputValidation.errorBackground#1d2433
  • inputValidation.errorBorder#FF5885
  • inputValidation.errorForeground#FF5885
  • inputValidation.infoBackground#1d2433
  • inputValidation.infoBorder#58FFE5
  • inputValidation.infoForeground#58FFE5
  • inputValidation.warningBackground#1d2433
  • inputValidation.warningBorder#FFDF58
  • inputValidation.warningForeground#FFDF58
  • list.activeSelectionBackground#2f3b54
  • list.activeSelectionForeground#d7dce2
  • list.dropBackground#2f3b54
  • list.errorForeground#FF5885
  • list.focusBackground#2f3b54
  • list.focusForeground#d7dce2
  • list.highlightForeground#6CBDF0
  • list.hoverBackground#2f3b54
  • list.hoverForeground#d7dce2
  • list.inactiveFocusBackground#2f3b54
  • list.inactiveSelectionBackground#2f3b54
  • list.inactiveSelectionForeground#d7dce2
  • list.invalidItemForeground#FF5885
  • list.warningForeground#90D4FF
  • listFilterWidget.background#2f3b54
  • listFilterWidget.noMatchesOutline#FF5885
  • listFilterWidget.outline#2f3b54
  • menu.background#171c28
  • menu.foreground#8695b7
  • menu.selectionBackground#2f3b54
  • menu.selectionForeground#d7dce2
  • menubar.selectionBackground#2f3b54
  • menubar.selectionForeground#d7dce2
  • merge.border#8695b7
  • merge.commonContentBackground#2f3b5455
  • merge.commonHeaderBackground#2f3b5477
  • merge.currentContentBackground#F563DF22
  • merge.currentHeaderBackground#F563DF77
  • merge.incomingContentBackground#bae67e22
  • merge.incomingHeaderBackground#bae67e77
  • notificationCenter.border#171c28
  • notificationCenterHeader.background#171c28
  • notificationCenterHeader.foreground#d7dce2
  • notificationLink.foreground#d7dce2
  • notifications.background#171c28
  • notifications.border#171c28
  • notifications.foreground#d7dce2
  • notificationToast.border#171c28
  • panel.background#171c28
  • panel.border#1d2433
  • panel.dropBorder#2f3b54
  • panelInput.border#8695b7
  • panelSection.border#2f3b54
  • panelSection.dropBackground#2f3b54
  • panelSectionHeader.background#1d2433
  • panelSectionHeader.foreground#6CBDF0
  • panelTitle.activeBorder#6CBDF0
  • panelTitle.activeForeground#d7dce2
  • panelTitle.inactiveForeground#8695b7
  • peekView.border#6CBDF0
  • peekViewEditor.background#2f3b54
  • peekViewEditor.matchHighlightBackground#8695b7
  • peekViewEditor.matchHighlightBorder#6CBDF0
  • peekViewEditorGutter.background#1d2433
  • peekViewResult.background#2f3b54
  • peekViewResult.fileForeground#8695b7
  • peekViewResult.lineForeground#d7dce2
  • peekViewResult.matchHighlightBackground#6CBDF033
  • peekViewResult.selectionBackground#2f3b54
  • peekViewResult.selectionForeground#d7dce2
  • peekViewTitle.background#2f3b54
  • peekViewTitleDescription.foreground#8695b7
  • peekViewTitleLabel.foreground#8695b7
  • pickerGroup.border#2f3b54
  • pickerGroup.foreground#6CBDF0
  • progressBar.background#6CBDF0
  • scrollbar.shadow#00030F
  • scrollbarSlider.activeBackground#8695b777
  • scrollbarSlider.background#8695b755
  • scrollbarSlider.hoverBackground#8695b799
  • selection.background#8695b777
  • settings.checkboxBackground#2f3b54
  • settings.checkboxBorder#2f3b54
  • settings.checkboxForeground#d7dce2
  • settings.dropdownBackground#2f3b54
  • settings.dropdownBorder#2f3b54
  • settings.dropdownForeground#d7dce2
  • settings.dropdownListBorder#2f3b54
  • settings.headerForeground#d7dce2
  • settings.modifiedItemIndicator#E2E67E
  • settings.numberInputBackground#2f3b54
  • settings.numberInputBorder#2f3b54
  • settings.numberInputForeground#d7dce2
  • settings.textInputBackground#2f3b54
  • settings.textInputBorder#2f3b54
  • settings.textInputForeground#d7dce2
  • sideBar.background#171c28
  • sideBar.foreground#8695b7
  • sideBarSectionHeader.background#1d2433
  • sideBarSectionHeader.border#171c28
  • sideBarSectionHeader.foreground#6CBDF0
  • sideBarTitle.foreground#6CBDF0
  • statusBar.background#171c28
  • statusBar.border#171c28
  • statusBar.debuggingBackground#171c28
  • statusBar.debuggingForeground#8695b7
  • statusBar.foreground#8695b7
  • statusBar.noFolderBackground#171c28
  • statusBar.noFolderForeground#8695b7
  • statusBarItem.activeBackground#2f3b54
  • statusBarItem.hoverBackground#1d2433
  • statusBarItem.remoteBackground#171c28
  • statusBarItem.remoteForeground#8695b7
  • tab.activeBackground#1d2433
  • tab.activeBorder#6CBDF0
  • tab.activeBorderTop#171c28
  • tab.activeForeground#d7dce2
  • tab.border#171c28
  • tab.hoverBackground#2f3b54
  • tab.hoverBorder#6CBDF0
  • tab.inactiveBackground#171c28
  • tab.inactiveForeground#d7dce277
  • tab.unfocusedActiveBackground#1d2433
  • tab.unfocusedActiveBorder#6CBDF077
  • tab.unfocusedActiveBorderTop#1d2433
  • tab.unfocusedActiveForeground#d7dce2
  • tab.unfocusedHoverBackground#1d2433
  • tab.unfocusedHoverBorder#6CBDF077
  • tab.unfocusedInactiveForeground#d7dce277
  • terminal.ansiBlack#2f3b54
  • terminal.ansiBlue#27ABFF
  • terminal.ansiBrightBlack#444a5e
  • terminal.ansiBrightBlue#1C6BFF
  • terminal.ansiBrightCyan#58FFE5
  • terminal.ansiBrightGreen#26FF36
  • terminal.ansiBrightMagenta#fd25d2
  • terminal.ansiBrightRed#FF5862
  • terminal.ansiBrightWhite#e1e1e1
  • terminal.ansiBrightYellow#6CBDF0
  • terminal.ansiCyan#2afede
  • terminal.ansiGreen#69DD71
  • terminal.ansiMagenta#fc61dd
  • terminal.ansiRed#FF5862
  • terminal.ansiWhite#a2aabc
  • terminal.ansiYellow#FFDF58
  • terminal.background#171c28
  • terminal.border#171c28
  • terminal.foreground#a2aabc
  • terminal.selectionBackground#8695b733
  • terminalCursor.background#6CBDF0
  • terminalCursor.foreground#6CBDF0
  • textBlockQuote.background#2f3b54
  • textBlockQuote.border#2f3b54
  • textCodeBlock.background#171c28
  • textLink.activeForeground#6CBDF0
  • textLink.foreground#6CBDF0
  • textPreformat.foreground#d7dce2
  • textSeparator.foreground#d7dce2
  • titleBar.activeBackground#171c28
  • titleBar.activeForeground#d7dce2
  • titleBar.border#171c28
  • titleBar.inactiveBackground#171c28
  • titleBar.inactiveForeground#8695b7
  • tree.indentGuidesStroke#2f3b54
  • walkThrough.embeddedEditorBackground#171c28
  • widget.shadow#00030F

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#a2aabc
comment, punctuation.definition.comment#8695b799italic
variable, string constant.other.placeholder, source#a2aabc
constant.other.color, punctuation.definition.entity, constant.character.entity, punctuation.definition.template-expression, punctuation.section.tag.twig#FFA748
invalid, invalid.illegal#FF5862
keyword, storage.type, storage.modifier, constant.numeric, constant.language, support.constant, constant.character, constant.escape#FFA748
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#a2aabc
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#F563DF
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#6CF080
entity.name.function, variable.function, support.function, keyword.other.special-method, meta.function-call, keyword.control.filter#90D4FF
meta.block variable.other#6CBDF0
variable.parameter, text.html, punctuation.section.property-list, meta.property-value.scss punctuation, meta.property-list, keyword.operator.type.annotation, variable.other.object.property#a2aabc
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#E2E67E
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#90D4FF
support.type, support.class, keyword.other.debugger, entity.other.inherited-class, meta.property-name, punctuation.definition.raw.markdown, variable.graphql, variable.other.readwrite#58FFE5
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#F563DF
entity.name.module.js, variable.import.parameter.js#FF5862
variable.language#F563DFitalic
entity.name.method.js#F563DFitalic
meta.class-method.js entity.name.function.js, variable.function.constructor#F563DF
entity.other.attribute-name#669BFF
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#669BFF
entity.other.attribute-name.class, punctuation.definition.entity.css#669BFF
source.sass keyword.control#F563DF
markup.inserted#E2E67E
markup.deleted#FF5862
markup.changed#FFA748
string.regexp#E2E67E
constant.character.escape#E2E67E
*url*, *link*, *uri*underline
meta.decorator, tag.decorator.js entity.name.tag, tag.decorator.js punctuation.definition.tag#F563DF
source.js constant.other.object.key.js string.unquoted.label.js#FF5862italic
source.json meta.structure.dictionary.json support.type.property-name.json#6CF080
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#669BFF
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#F563DF
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#F563DF
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#FFA748
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#58FFE5
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#669BFF
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#F563DF
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#669BFF
markup.italic#6CF080italic
markup.bold#FF5862bold
markup.underline#FFA748underline
markup.strike#6CBDF0italic
markup.quote#F563DFitalic
markup.raw.block#669BFF
markup.table#F563DF
text.html.markdown, punctuation.definition.list_item.markdown#a2aabc
text.html.markdown markup.raw.inline, text.html.markdown markup.inline.raw.string.markdown#F563DF
text.html.markdown meta.dummy.line-break#a2aabc
markdown.heading, markup.heading, markup.heading entity.name, markup.heading.markdown, punctuation.definition.heading.markdown#E2E67E
markup.quote, punctuation.definition.blockquote.markdown#F563DFitalic
string.other.link.title.markdown#6CBDF0underline
markup.raw.block.fenced.markdown#d7dce2
punctuation.definition.fenced.markdown, variable.language.fenced.markdown#a2aabc
variable.language.fenced.markdown#a2aabc
meta.separator#a2aabc
token.info-token#F563DF
token.warn-token#6CBDF0
token.error-token#FF5862
token.debug-token#FFA748
storage.type.error.go#F563DF
punctuation.other.period.go#669BFF

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

Loading...

Irul Theme by shelcia - VS Code Theme