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#fafafa
  • activityBar.border#959da61a
  • activityBar.foreground#959da6cc
  • activityBarBadge.background#399ee6
  • activityBarBadge.foreground#fafafa
  • badge.background#399ee6
  • badge.foreground#fafafa
  • button.background#399ee6
  • button.foreground#fafafa
  • button.hoverBackground#3199e1
  • debugExceptionWidget.background#ffffff
  • debugExceptionWidget.border#959da61a
  • debugToolBar.background#ffffff
  • diffEditor.insertedTextBackground#86b30026
  • diffEditor.removedTextBackground#ed936626
  • dropdown.background#ffffff
  • dropdown.border#dcdee1
  • dropdown.foreground#959da6
  • editor.background#ffffff
  • editor.findMatchBackground#399ee60d
  • editor.findMatchBorder#399ee6
  • editor.findMatchHighlightBackground#399ee60d
  • editor.findMatchHighlightBorder#399ee659
  • editor.findRangeHighlightBackground#eff3f6
  • editor.findRangeHighlightBorder#fafafa00
  • editor.foreground#6c7680
  • editor.inactiveSelectionBackground#eff3f6
  • editor.lineHighlightBackground#959da61a
  • editor.rangeHighlightBackground#959da61a
  • editor.selectionBackground#e8eef4
  • editor.selectionHighlightBackground#eff3f6
  • editor.selectionHighlightBorder#dee8f1
  • editor.wordHighlightBackground#eff3f6
  • editor.wordHighlightStrongBackground#399ee633
  • editorBracketMatch.background#959da64d
  • editorBracketMatch.border#959da699
  • editorCodeLens.foreground#abb0b6
  • editorCursor.foreground#399ee6
  • editorError.foreground#f51818
  • editorGroup.background#ffffff
  • editorGroup.border#959da61a
  • editorGroupHeader.noTabsBackground#fafafa
  • editorGroupHeader.tabsBackground#fafafa
  • editorGroupHeader.tabsBorder#959da61a
  • editorGutter.addedBackground#99bf4d99
  • editorGutter.deletedBackground#f2798399
  • editorGutter.modifiedBackground#709ecc99
  • editorHoverWidget.background#ffffff
  • editorHoverWidget.border#f0f0f0
  • editorIndentGuide.activeBackground#959da6b3
  • editorIndentGuide.background#959da64d
  • editorLineNumber.activeForeground#959da6cc
  • editorLineNumber.foreground#959da666
  • editorLink.activeForeground#399ee6
  • editorMarkerNavigation.background#ffffff
  • editorOverviewRuler.addedForeground#99bf4d99
  • editorOverviewRuler.border#959da61a
  • editorOverviewRuler.deletedForeground#f2798399
  • editorOverviewRuler.errorForeground#f51818
  • editorOverviewRuler.modifiedForeground#709ecc99
  • editorOverviewRuler.warningForeground#ff9940
  • editorRuler.foreground#959da64d
  • editorSuggestWidget.background#ffffff
  • editorSuggestWidget.border#f0f0f0
  • editorSuggestWidget.highlightForeground#399ee6
  • editorSuggestWidget.selectedBackground#959da61a
  • editorWarning.foreground#ff9940
  • editorWhitespace.foreground#959da666
  • editorWidget.background#ffffff
  • extensionButton.prominentBackground#399ee6
  • extensionButton.prominentForeground#fafafa
  • extensionButton.prominentHoverBackground#3199e1
  • focusBorder#bdc2c8
  • foreground#959da6
  • gitDecoration.conflictingResourceForeground
  • gitDecoration.deletedResourceForeground#f27983b3
  • gitDecoration.ignoredResourceForeground#c8ccd0
  • gitDecoration.modifiedResourceForeground#709eccb3
  • gitDecoration.submoduleResourceForeground#a37accb3
  • gitDecoration.untrackedResourceForeground#99bf4db3
  • input.background#ffffff
  • input.border#dcdee1
  • input.foreground#6c7680
  • input.placeholderForeground#b3b9bf
  • inputOption.activeBorder#399ee6
  • inputValidation.errorBackground#fafafa
  • inputValidation.errorBorder#f51818
  • inputValidation.infoBackground#fafafa
  • inputValidation.infoBorder#55b4d4
  • inputValidation.warningBackground#fafafa
  • inputValidation.warningBorder#f2ae49
  • list.activeSelectionBackground#959da61a
  • list.activeSelectionForeground#959da6
  • list.focusBackground#959da61a
  • list.focusForeground#959da6
  • list.highlightForeground#399ee6
  • list.hoverBackground#959da61a
  • list.hoverForeground#959da6
  • list.inactiveSelectionBackground#959da61a
  • list.inactiveSelectionForeground#959da6
  • list.invalidItemForeground#b3b9bf
  • panel.background#fafafa
  • panel.border#959da61a
  • panelTitle.activeBorder#399ee6
  • panelTitle.activeForeground#6c7680
  • panelTitle.inactiveForeground#959da6
  • peekView.border#959da61a
  • peekViewEditor.background#ffffff
  • peekViewEditor.matchHighlightBackground#399ee633
  • peekViewResult.background#ffffff
  • peekViewResult.fileForeground#959da6
  • peekViewResult.matchHighlightBackground#399ee633
  • peekViewTitle.background#ffffff
  • peekViewTitleDescription.foreground#959da6
  • peekViewTitleLabel.foreground#959da6
  • pickerGroup.border#959da61a
  • pickerGroup.foreground#c8ccd0
  • progressBar.background#399ee6
  • scrollbar.shadow#959da61a
  • scrollbarSlider.activeBackground#959da6b3
  • scrollbarSlider.background#959da666
  • scrollbarSlider.hoverBackground#959da699
  • selection.background#e8eef4fd
  • settings.headerForeground#6c7680
  • settings.modifiedItemIndicator#709ecc
  • sideBar.background#fafafa
  • sideBar.border#959da61a
  • sideBarSectionHeader.background#fafafa
  • sideBarSectionHeader.foreground#959da6
  • sideBarTitle.foreground#959da6
  • statusBar.background#fafafa
  • statusBar.border#959da61a
  • statusBar.debuggingBackground#399ee6
  • statusBar.debuggingForeground#fafafa
  • statusBar.foreground#959da6
  • statusBar.noFolderBackground#ffffff
  • statusBarItem.activeBackground#00000050
  • statusBarItem.hoverBackground#00000030
  • statusBarItem.prominentBackground#959da61a
  • statusBarItem.prominentHoverBackground#00000030
  • tab.activeBackground#ffffff
  • tab.activeBorderTop#399ee6
  • tab.activeForeground#6c7680
  • tab.border#959da61a
  • tab.inactiveBackground#fafafa
  • tab.inactiveForeground#959da6
  • tab.unfocusedActiveBorderTop#959da6
  • tab.unfocusedActiveForeground#959da6
  • tab.unfocusedInactiveForeground#959da6
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#3199e1
  • terminal.ansiBrightBlack#686868
  • terminal.ansiBrightBlue#399ee6
  • terminal.ansiBrightCyan#4cbf99
  • terminal.ansiBrightGreen#86b300
  • terminal.ansiBrightMagenta#a37acc
  • terminal.ansiBrightRed#f07171
  • terminal.ansiBrightWhite#d1d1d1
  • terminal.ansiBrightYellow#f2ae49
  • terminal.ansiCyan#46ba94
  • terminal.ansiGreen#99bf4d
  • terminal.ansiMagenta#9e75c7
  • terminal.ansiRed#ea6c6d
  • terminal.ansiWhite#c7c7c7
  • terminal.ansiYellow#eca944
  • terminal.background#fafafa
  • terminal.foreground#6c7680
  • textBlockQuote.background#ffffff
  • textLink.activeForeground#399ee6
  • textLink.foreground#399ee6
  • textPreformat.foreground#6c7680
  • titleBar.activeBackground#fafafa
  • titleBar.activeForeground#6c7680
  • titleBar.border#959da61a
  • titleBar.inactiveBackground#fafafa
  • titleBar.inactiveForeground#959da6
  • walkThrough.embeddedEditorBackground#ffffff
  • widget.shadow#56606940

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#6c7680
comment#abb0b6italic
string, constant.other.symbol#86b300
string.regexp, constant.character, constant.other#4cbf99
constant.numeric#ff9940
constant.language#ff9940
variable#6c7680
variable.member#f07171
variable.language#55b4d4italic
storage#fa8d3e
keyword#fa8d3e
keyword.operator#ed9366
punctuation.separator, punctuation.terminator#6c7680b3
punctuation.section#6c7680
punctuation.accessor#ed9366
source.java storage.type, source.haskell storage.type, source.c storage.type#399ee6
entity.other.inherited-class#55b4d4
storage.type.function#fa8d3e
source.java storage.type.primitive#55b4d4
entity.name.function#f2ae49
variable.parameter, meta.parameter#a37acc
variable.function, variable.annotation, meta.function-call.generic, support.function.go#f2ae49
support.function, support.macro#f07171
entity.name.import, entity.name.package#86b300
entity.name#399ee6
entity.name.tag, meta.tag.sgml#55b4d4
punctuation.definition.tag.end, punctuation.definition.tag.begin, punctuation.definition.tag#55b4d480
entity.other.attribute-name#f2ae49
support.constant#ed9366italic
support.type, support.class, source.go storage.type#55b4d4
meta.decorator variable.other, meta.decorator punctuation.decorator, storage.type.annotation#e6ba7e
invalid#f51818
meta.diff, meta.diff.header#c594c5
source.ruby variable.other.readwrite#f2ae49
source.css entity.name.tag, source.sass entity.name.tag, source.scss entity.name.tag, source.less entity.name.tag, source.stylus entity.name.tag#399ee6
source.css support.type, source.sass support.type, source.scss support.type, source.less support.type, source.stylus support.type#abb0b6
support.type.property-name#55b4d4normal
constant.numeric.line-number.find-in-files - match#abb0b6
constant.numeric.line-number.match#fa8d3e
entity.name.filename.find-in-files#86b300
message.error#f51818
markup.heading, markup.heading entity.name#86b300bold
markup.underline.link, string.other.link#55b4d4
markup.italic#f07171italic
markup.bold#f07171bold
markup.italic markup.bold, markup.bold markup.italicbold italic
markup.raw
markup.raw.inline
meta.separator#abb0b6bold
markup.quote#4cbf99italic
markup.list punctuation.definition.list.begin#f2ae49
markup.inserted#99bf4d
markup.changed#709ecc
markup.deleted#f27983
markup.strike#e6ba7e
markup.table#55b4d4
text.html.markdown markup.inline.raw#ed9366
text.html.markdown meta.dummy.line-break#abb0b6
punctuation.definition.markdown#abb0b6

Shiki preview

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

Loading...

Monekoluv Ayu by monekoluv - VS Code Theme