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#1D242E
  • activityBar.foreground#f2f4f8
  • activityBarBadge.background#55b4ff
  • badge.background#55b4ff
  • badge.foreground#1D242E
  • button.background#55b4ff
  • button.foreground#1D242E
  • button.hoverBackground#55b4ff
  • descriptionForeground#f2f4f8
  • diffEditor.insertedTextBackground#8CBEA733
  • diffEditor.removedTextBackground#B5FFE933
  • dropdown.background#1D242E
  • dropdown.border#393939
  • dropdown.foreground#f2f4f8
  • editor.background#1D242E
  • editor.findMatchBackground#209fb5
  • editor.findMatchHighlightBackground#39393980
  • editor.findRangeHighlightBackground#39393980
  • editor.foreground#f2f4f8
  • editor.hoverHighlightBackground#39393980
  • editor.inactiveSelectionBackground#39393980
  • editor.lineHighlightBackground#1D242E
  • editor.lineHighlightBorder#1D242E
  • editor.rangeHighlightBackground#39393980
  • editor.selectionBackground#393939
  • editor.selectionHighlightBackground#39393980
  • editor.wordHighlightBackground#39393980
  • editor.wordHighlightStrongBackground#39393980
  • editorBracketHighlight.foreground1#1AD17880
  • editorBracketHighlight.foreground2#25CDD880
  • editorBracketHighlight.foreground3#209fb580
  • editorBracketHighlight.foreground4#55b4ff80
  • editorBracketHighlight.foreground5#B5FFE980
  • editorBracketHighlight.foreground6#1AD17880
  • editorBracketHighlight.unexpectedBracket.foreground#B5FFE9
  • editorBracketMatch.background#393939
  • editorBracketMatch.border#797593
  • editorBracketPairGuide.activeBackground1#1AD178
  • editorBracketPairGuide.activeBackground2#25CDD8
  • editorBracketPairGuide.activeBackground3#209fb5
  • editorBracketPairGuide.activeBackground4#55b4ff
  • editorBracketPairGuide.activeBackground5#B5FFE9
  • editorBracketPairGuide.activeBackground6#1AD178
  • editorBracketPairGuide.background1#1AD17880
  • editorBracketPairGuide.background2#25CDD880
  • editorBracketPairGuide.background3#209fb580
  • editorBracketPairGuide.background4#55b4ff80
  • editorBracketPairGuide.background5#B5FFE980
  • editorBracketPairGuide.background6#1AD17880
  • editorCodeLens.foreground#797593
  • editorCursor.foreground#f2f4f8
  • editorError.foreground#B5FFE9
  • editorGroup.border#393939
  • editorGroup.dropBackground#393939
  • editorGroupHeader.tabsBackground#1D242E
  • editorGutter.addedBackground#8CBEA7
  • editorGutter.background#1D242E
  • editorGutter.deletedBackground#B5FFE9
  • editorGutter.modifiedBackground#55b4ff
  • editorHint.foreground#25CDD8
  • editorIndentGuide.activeBackground1#797593
  • editorIndentGuide.background1#393939
  • editorInfo.foreground#55b4ff
  • editorLineNumber.activeForeground#dde1e6
  • editorLineNumber.foreground#797593
  • editorLink.activeForeground#55b4ff
  • editorOverviewRuler.addedForeground#8CBEA7
  • editorOverviewRuler.border#393939
  • editorOverviewRuler.bracketMatchForeground#797593
  • editorOverviewRuler.errorForeground#B5FFE9
  • editorOverviewRuler.findMatchForeground#209fb580
  • editorOverviewRuler.infoForeground#55b4ff
  • editorOverviewRuler.modifiedForeground#55b4ff
  • editorOverviewRuler.warningForeground#007981
  • editorRuler.foreground#393939
  • editorSuggestWidget.background#1D242E
  • editorSuggestWidget.border#393939
  • editorWarning.foreground#007981
  • editorWhitespace.foreground#797593
  • editorWidget.background#1D242E
  • editorWidget.border#393939
  • errorForeground#B5FFE9
  • extensionButton.prominentBackground#55b4ff
  • extensionButton.prominentForeground#1D242E
  • extensionButton.prominentHoverBackground#55b4ff
  • focusBorder#55b4ff
  • foreground#f2f4f8
  • gitDecoration.conflictingResourceForeground#007981
  • gitDecoration.deletedResourceForeground#B5FFE9
  • gitDecoration.ignoredResourceForeground#797593
  • gitDecoration.modifiedResourceForeground#55b4ff
  • gitDecoration.untrackedResourceForeground#8CBEA7
  • input.background#1D242E
  • input.border#393939
  • input.foreground#f2f4f8
  • input.placeholderForeground#797593
  • inputOption.activeBorder#55b4ff
  • inputValidation.errorBackground#B5FFE9
  • inputValidation.errorBorder#B5FFE9
  • inputValidation.infoBackground#55b4ff
  • inputValidation.infoBorder#55b4ff
  • inputValidation.warningBackground#007981
  • inputValidation.warningBorder#007981
  • list.activeSelectionBackground#393939
  • list.activeSelectionForeground#f2f4f8
  • list.dropBackground#393939
  • list.focusBackground#393939
  • list.highlightForeground#55b4ff
  • list.hoverForeground#f2f4f8
  • list.inactiveSelectionForeground#f2f4f8
  • menu.background#1D242E
  • menu.foreground#f2f4f8
  • menu.selectionBackground#393939
  • menu.selectionForeground#f2f4f8
  • menubar.selectionBackground#393939
  • menubar.selectionForeground#f2f4f8
  • merge.border#393939
  • merge.currentContentBackground#55b4ff33
  • merge.currentHeaderBackground#55b4ff80
  • merge.incomingContentBackground#8CBEA733
  • merge.incomingHeaderBackground#8CBEA780
  • notificationCenter.border#393939
  • notificationLink.foreground#55b4ff
  • notifications.background#1D242E
  • notifications.border#393939
  • notifications.foreground#f2f4f8
  • notificationToast.border#393939
  • panel.background#1D242E
  • panel.border#393939
  • panelTitle.activeBorder#55b4ff
  • panelTitle.activeForeground#f2f4f8
  • panelTitle.inactiveForeground#797593
  • peekView.border#55b4ff
  • peekViewEditor.background#1D242E
  • peekViewEditor.matchHighlightBackground#209fb5
  • peekViewResult.background#1D242E
  • peekViewResult.fileForeground#f2f4f8
  • peekViewResult.lineForeground#f2f4f8
  • peekViewResult.matchHighlightBackground#209fb5
  • peekViewResult.selectionBackground#393939
  • peekViewResult.selectionForeground#f2f4f8
  • peekViewTitle.background#1D242E
  • peekViewTitleDescription.foreground#797593
  • peekViewTitleLabel.foreground#f2f4f8
  • pickerGroup.border#393939
  • pickerGroup.foreground#55b4ff
  • progressBar.background#55b4ff
  • scrollbarSlider.background#797593
  • scrollbarSlider.hoverBackground#797593
  • selection.background#393939
  • sideBar.background#1D242E
  • sideBar.border#393939
  • sideBar.foreground#f2f4f8
  • sideBarSectionHeader.background#1D242E
  • sideBarSectionHeader.foreground#f2f4f8
  • sideBarTitle.foreground#f2f4f8
  • statusBar.background#1D242E
  • statusBar.border#393939
  • statusBar.debuggingBackground#B5FFE9
  • statusBar.foreground#dde1e6
  • statusBar.noFolderBackground#1D242E
  • statusBar.noFolderForeground#dde1e6
  • statusBarItem.activeBackground#393939
  • statusBarItem.hoverBackground#393939
  • statusBarItem.prominentBackground#393939
  • statusBarItem.prominentHoverBackground#797593
  • tab.activeBorder#55b4ff
  • tab.activeForeground#f2f4f8
  • tab.border#393939
  • tab.inactiveBackground#1D242E
  • tab.inactiveForeground#797593
  • terminal.ansiBlue#55b4ff
  • terminal.ansiBrightBlack#797593
  • terminal.ansiBrightBlue#55b4ff
  • terminal.ansiBrightCyan#25CDD8
  • terminal.ansiBrightGreen#8CBEA7
  • terminal.ansiBrightMagenta#1AD178
  • terminal.ansiBrightRed#B5FFE9
  • terminal.ansiBrightWhite#E0E0E0
  • terminal.ansiBrightYellow#007981
  • terminal.ansiCyan#25CDD8
  • terminal.ansiGreen#8CBEA7
  • terminal.ansiMagenta#1AD178
  • terminal.ansiRed#B5FFE9
  • terminal.ansiWhite#f2f4f8
  • terminal.ansiYellow#007981
  • terminal.background#1D242E
  • terminal.foreground#f2f4f8
  • textLink.activeForeground#55b4ff
  • textLink.foreground#55b4ff
  • textPreformat.foreground#f2f4f8
  • titleBar.activeBackground#1D242E
  • titleBar.activeForeground#f2f4f8
  • titleBar.border#393939
  • titleBar.inactiveBackground#1D242E
  • titleBar.inactiveForeground#797593
  • widget.shadow#1D242E

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#797593italic
constant, entity.name.constant, variable.other.constant, variable.language#007981
entity, entity.name#209fb5
variable.parameter.function#f2f4f8
variable#B5FFE9
variable.other#B5FFE9
entity.name.tag#B5FFE9
keyword#1AD178
storage, storage.type#1AD178
storage.modifier.package, storage.modifier.import, storage.type.java#f2f4f8
string, punctuation.definition.string, string punctuation.section.embedded source#8CBEA7
string source#f2f4f8
string variable#25CDD8
source.regexp, string.regexp#25CDD8
string.regexp.character-class, string.regexp constant.character.escape, string.regexp source.ruby.embedded, string.regexp string.regexp.arbitrary-repitition#25CDD8
string.regexp constant.character.escape#8CBEA7bold
support#25CDD8
support.constant#007981
support.variable#007981
meta.property-name#25CDD8
meta.module-reference#25CDD8
invalid.broken#B5FFE9italic
invalid.deprecated#1AD178italic
invalid.illegal#B5FFE9italic
invalid.unimplemented#B5FFE9italic
carriage-return#f2f4f8italic underline
message.error#B5FFE9
punctuation.definition.list.begin.markdown#007981
markup.heading, markup.heading entity.name#55b4ffbold
markup.quote#8CBEA7
markup.italic#f2f4f8italic
markup.bold#f2f4f8bold
markup.raw#8CBEA7
markup.deleted, meta.diff.header.from-file, punctuation.definition.deleted#B5FFE9
markup.inserted, meta.diff.header.to-file, punctuation.definition.inserted#8CBEA7
markup.changed, punctuation.definition.changed#007981
markup.ignored, markup.untracked#1D242E
meta.diff.range#1AD178bold
meta.diff.header#55b4ff
meta.separator#55b4ffbold
meta.output#55b4ff
constant.other.reference.link, string.other.link#25CDD8underline
entity.name.function#55b4ff
meta.function-call#55b4ff
punctuation.definition.parameters, punctuation.definition.arguments#f2f4f8
punctuation.separator.parameter, punctuation.separator.arguments#f2f4f8
punctuation.terminator.expression, punctuation.separator.comma#f2f4f8
constant.numeric, constant.language, constant.character, constant.escape, keyword.operator#007981
entity.name.class#209fb5
entity.name.type.class#209fb5
entity.other.inherited-class#8CBEA7
punctuation.section.block.begin, punctuation.section.block.end#1AD178
punctuation.section.group.begin, punctuation.section.group.end#1AD178
punctuation.section.parens.begin, punctuation.section.parens.end#1AD178
punctuation.section.brackets.begin, punctuation.section.brackets.end#1AD178
punctuation.definition.generic.begin, punctuation.definition.generic.end#1AD178
meta.brace, punctuation.brace, punctuation.bracket#1AD178
punctuation.definition.array, punctuation.section.array#1AD178
punctuation.definition.list, punctuation.definition.list.begin, punctuation.definition.list.end#1AD178