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#F3F1ED
  • activityBar.foreground#1D242E
  • activityBarBadge.background#006FFF
  • badge.background#006FFF
  • badge.foreground#FAF9F6
  • button.background#006FFF
  • button.foreground#FAF9F6
  • button.hoverBackground#006FFF
  • descriptionForeground#1D242E
  • diffEditor.insertedTextBackground#2BA05033
  • diffEditor.removedTextBackground#3C787E33
  • dropdown.background#F3F1ED
  • dropdown.border#E0E0E0
  • dropdown.foreground#1D242E
  • editor.background#FAF9F6
  • editor.findMatchBackground#1EA6C8
  • editor.findMatchHighlightBackground#E0E0E080
  • editor.findRangeHighlightBackground#E0E0E080
  • editor.foreground#1D242E
  • editor.hoverHighlightBackground#E0E0E080
  • editor.inactiveSelectionBackground#E0E0E080
  • editor.lineHighlightBackground#F3F1ED
  • editor.lineHighlightBorder#F3F1ED
  • editor.rangeHighlightBackground#E0E0E080
  • editor.selectionBackground#E0E0E0
  • editor.selectionHighlightBackground#E0E0E080
  • editor.wordHighlightBackground#E0E0E080
  • editor.wordHighlightStrongBackground#E0E0E080
  • editorBracketHighlight.foreground1#9B3FED80
  • editorBracketHighlight.foreground2#00BFD880
  • editorBracketHighlight.foreground3#1EA6C880
  • editorBracketHighlight.foreground4#006FFF80
  • editorBracketHighlight.foreground5#3C787E80
  • editorBracketHighlight.foreground6#C8409D80
  • editorBracketHighlight.unexpectedBracket.foreground#3C787E
  • editorBracketMatch.background#E0E0E0
  • editorBracketMatch.border#9AA0A6
  • editorBracketPairGuide.activeBackground1#9B3FED
  • editorBracketPairGuide.activeBackground2#00BFD8
  • editorBracketPairGuide.activeBackground3#1EA6C8
  • editorBracketPairGuide.activeBackground4#006FFF
  • editorBracketPairGuide.activeBackground5#3C787E
  • editorBracketPairGuide.activeBackground6#C8409D
  • editorBracketPairGuide.background1#9B3FED80
  • editorBracketPairGuide.background2#00BFD880
  • editorBracketPairGuide.background3#1EA6C880
  • editorBracketPairGuide.background4#006FFF80
  • editorBracketPairGuide.background5#3C787E80
  • editorBracketPairGuide.background6#C8409D80
  • editorCodeLens.foreground#9AA0A6
  • editorCursor.foreground#1D242E
  • editorError.foreground#3C787E
  • editorGroup.border#E0E0E0
  • editorGroup.dropBackground#E0E0E0
  • editorGroupHeader.tabsBackground#F3F1ED
  • editorGutter.addedBackground#2BA050
  • editorGutter.background#FAF9F6
  • editorGutter.deletedBackground#3C787E
  • editorGutter.modifiedBackground#006FFF
  • editorHint.foreground#00BFD8
  • editorIndentGuide.activeBackground1#9AA0A6
  • editorIndentGuide.background1#E0E0E0
  • editorInfo.foreground#006FFF
  • editorLineNumber.activeForeground#555B61
  • editorLineNumber.foreground#9AA0A6
  • editorLink.activeForeground#006FFF
  • editorOverviewRuler.addedForeground#2BA050
  • editorOverviewRuler.border#E0E0E0
  • editorOverviewRuler.bracketMatchForeground#9AA0A6
  • editorOverviewRuler.errorForeground#3C787E
  • editorOverviewRuler.findMatchForeground#1EA6C880
  • editorOverviewRuler.infoForeground#006FFF
  • editorOverviewRuler.modifiedForeground#006FFF
  • editorOverviewRuler.warningForeground#006D72
  • editorRuler.foreground#E0E0E0
  • editorSuggestWidget.background#F3F1ED
  • editorSuggestWidget.border#E0E0E0
  • editorWarning.foreground#006D72
  • editorWhitespace.foreground#9AA0A6
  • editorWidget.background#F3F1ED
  • editorWidget.border#E0E0E0
  • errorForeground#3C787E
  • extensionButton.prominentBackground#006FFF
  • extensionButton.prominentForeground#FAF9F6
  • extensionButton.prominentHoverBackground#006FFF
  • focusBorder#006FFF
  • foreground#1D242E
  • gitDecoration.conflictingResourceForeground#006D72
  • gitDecoration.deletedResourceForeground#3C787E
  • gitDecoration.ignoredResourceForeground#9AA0A6
  • gitDecoration.modifiedResourceForeground#006FFF
  • gitDecoration.untrackedResourceForeground#2BA050
  • input.background#F3F1ED
  • input.border#E0E0E0
  • input.foreground#1D242E
  • input.placeholderForeground#9AA0A6
  • inputOption.activeBorder#006FFF
  • inputValidation.errorBackground#3C787E
  • inputValidation.errorBorder#3C787E
  • inputValidation.infoBackground#006FFF
  • inputValidation.infoBorder#006FFF
  • inputValidation.warningBackground#006D72
  • inputValidation.warningBorder#006D72
  • list.activeSelectionBackground#E0E0E0
  • list.activeSelectionForeground#1D242E
  • list.dropBackground#E0E0E0
  • list.focusBackground#E0E0E0
  • list.highlightForeground#006FFF
  • list.hoverForeground#1D242E
  • list.inactiveSelectionForeground#1D242E
  • menu.background#F3F1ED
  • menu.foreground#1D242E
  • menu.selectionBackground#E0E0E0
  • menu.selectionForeground#1D242E
  • menubar.selectionBackground#E0E0E0
  • menubar.selectionForeground#1D242E
  • merge.border#E0E0E0
  • merge.currentContentBackground#006FFF33
  • merge.currentHeaderBackground#006FFF80
  • merge.incomingContentBackground#2BA05033
  • merge.incomingHeaderBackground#2BA05080
  • notificationCenter.border#E0E0E0
  • notificationLink.foreground#006FFF
  • notifications.background#F3F1ED
  • notifications.border#E0E0E0
  • notifications.foreground#1D242E
  • notificationToast.border#E0E0E0
  • panel.background#F3F1ED
  • panel.border#E0E0E0
  • panelTitle.activeBorder#006FFF
  • panelTitle.activeForeground#1D242E
  • panelTitle.inactiveForeground#9AA0A6
  • peekView.border#006FFF
  • peekViewEditor.background#F3F1ED
  • peekViewEditor.matchHighlightBackground#1EA6C8
  • peekViewResult.background#F3F1ED
  • peekViewResult.fileForeground#1D242E
  • peekViewResult.lineForeground#1D242E
  • peekViewResult.matchHighlightBackground#1EA6C8
  • peekViewResult.selectionBackground#E0E0E0
  • peekViewResult.selectionForeground#1D242E
  • peekViewTitle.background#F3F1ED
  • peekViewTitleDescription.foreground#9AA0A6
  • peekViewTitleLabel.foreground#1D242E
  • pickerGroup.border#E0E0E0
  • pickerGroup.foreground#006FFF
  • progressBar.background#006FFF
  • scrollbarSlider.background#9AA0A6
  • scrollbarSlider.hoverBackground#9AA0A6
  • selection.background#E0E0E0
  • sideBar.background#F3F1ED
  • sideBar.border#E0E0E0
  • sideBar.foreground#1D242E
  • sideBarSectionHeader.background#F3F1ED
  • sideBarSectionHeader.foreground#1D242E
  • sideBarTitle.foreground#1D242E
  • statusBar.background#F3F1ED
  • statusBar.border#E0E0E0
  • statusBar.debuggingBackground#3C787E
  • statusBar.foreground#555B61
  • statusBar.noFolderBackground#F3F1ED
  • statusBar.noFolderForeground#555B61
  • statusBarItem.activeBackground#E0E0E0
  • statusBarItem.hoverBackground#E0E0E0
  • statusBarItem.prominentBackground#E0E0E0
  • statusBarItem.prominentHoverBackground#9AA0A6
  • tab.activeBorder#006FFF
  • tab.activeForeground#1D242E
  • tab.border#E0E0E0
  • tab.inactiveBackground#F3F1ED
  • tab.inactiveForeground#9AA0A6
  • terminal.ansiBlue#006FFF
  • terminal.ansiBrightBlack#9AA0A6
  • terminal.ansiBrightBlue#006FFF
  • terminal.ansiBrightCyan#00BFD8
  • terminal.ansiBrightGreen#2BA050
  • terminal.ansiBrightMagenta#9B3FED
  • terminal.ansiBrightRed#3C787E
  • terminal.ansiBrightWhite#000000
  • terminal.ansiBrightYellow#006D72
  • terminal.ansiCyan#00BFD8
  • terminal.ansiGreen#2BA050
  • terminal.ansiMagenta#9B3FED
  • terminal.ansiRed#3C787E
  • terminal.ansiWhite#1D242E
  • terminal.ansiYellow#006D72
  • terminal.background#FAF9F6
  • terminal.foreground#1D242E
  • textLink.activeForeground#006FFF
  • textLink.foreground#006FFF
  • textPreformat.foreground#1D242E
  • titleBar.activeBackground#F3F1ED
  • titleBar.activeForeground#1D242E
  • titleBar.border#E0E0E0
  • titleBar.inactiveBackground#F3F1ED
  • titleBar.inactiveForeground#9AA0A6
  • widget.shadow#FAF9F6

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#9AA0A6italic
constant, entity.name.constant, variable.other.constant, variable.language#006D72
entity, entity.name#1EA6C8
variable.parameter.function#1D242E
variable#3C787E
variable.other#3C787E
entity.name.tag#3C787E
keyword#9B3FED
storage, storage.type#9B3FED
storage.modifier.package, storage.modifier.import, storage.type.java#1D242E
string, punctuation.definition.string, string punctuation.section.embedded source#2BA050
string source#1D242E
string variable#00BFD8
source.regexp, string.regexp#00BFD8
string.regexp.character-class, string.regexp constant.character.escape, string.regexp source.ruby.embedded, string.regexp string.regexp.arbitrary-repitition#00BFD8
string.regexp constant.character.escape#2BA050bold
support#00BFD8
support.constant#006D72
support.variable#006D72
meta.property-name#00BFD8
meta.module-reference#00BFD8
invalid.broken#3C787Eitalic
invalid.deprecated#C8409Ditalic
invalid.illegal#3C787Eitalic
invalid.unimplemented#3C787Eitalic
carriage-return#1D242Eitalic underline
message.error#3C787E
punctuation.definition.list.begin.markdown#006D72
markup.heading, markup.heading entity.name#006FFFbold
markup.quote#2BA050
markup.italic#1D242Eitalic
markup.bold#1D242Ebold
markup.raw#2BA050
markup.deleted, meta.diff.header.from-file, punctuation.definition.deleted#3C787E
markup.inserted, meta.diff.header.to-file, punctuation.definition.inserted#2BA050
markup.changed, punctuation.definition.changed#006D72
markup.ignored, markup.untracked#F3F1ED
meta.diff.range#9B3FEDbold
meta.diff.header#006FFF
meta.separator#006FFFbold
meta.output#006FFF
constant.other.reference.link, string.other.link#00BFD8underline
entity.name.function#006FFF
meta.function-call#006FFF
punctuation.definition.parameters, punctuation.definition.arguments#1D242E
punctuation.separator.parameter, punctuation.separator.arguments#1D242E
punctuation.terminator.expression, punctuation.separator.comma#1D242E
constant.numeric, constant.language, constant.character, constant.escape, keyword.operator#006D72
entity.name.class#1EA6C8
entity.name.type.class#1EA6C8
entity.other.inherited-class#2BA050
punctuation.section.block.begin, punctuation.section.block.end#C8409D
punctuation.section.group.begin, punctuation.section.group.end#C8409D
punctuation.section.parens.begin, punctuation.section.parens.end#C8409D
punctuation.section.brackets.begin, punctuation.section.brackets.end#C8409D
punctuation.definition.generic.begin, punctuation.definition.generic.end#C8409D
meta.brace, punctuation.brace, punctuation.bracket#C8409D
punctuation.definition.array, punctuation.section.array#C8409D
punctuation.definition.list, punctuation.definition.list.begin, punctuation.definition.list.end#C8409D
Verdant Theme by Desert Thunder - VS Code Theme