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.activeBorder#15c2cb
  • activityBar.background#ffffff
  • activityBar.border#e1e4e8
  • activityBar.foreground#0e131f
  • activityBar.inactiveForeground#656d76
  • activityBarBadge.background#138E97
  • activityBarBadge.foreground#ffffff
  • badge.background#138E97
  • badge.foreground#ffffff
  • breadcrumb.activeSelectionForeground#656d76
  • breadcrumb.focusForeground#0e131f
  • breadcrumb.foreground#656d76
  • breadcrumbPicker.background#ffffff
  • button.background#15c2cb
  • button.foreground#fff
  • button.hoverBackground#138E97
  • button.secondaryBackground#ebecf0
  • button.secondaryForeground#24292f
  • button.secondaryHoverBackground#f3f4f6
  • checkbox.background#f6f8fa
  • checkbox.border#d0d7de
  • debugConsole.errorForeground#E94444
  • debugConsole.infoForeground#57606a
  • debugConsole.sourceForeground#9a6700
  • debugConsole.warningForeground#7d4e00
  • debugConsoleInputIcon.foreground#6639ba
  • debugIcon.breakpointForeground#E94444
  • debugTokenExpression.boolean#116329
  • debugTokenExpression.error#a40e26
  • debugTokenExpression.name#1281E2
  • debugTokenExpression.number#116329
  • debugTokenExpression.string#0a3069
  • debugTokenExpression.value#0a3069
  • debugToolBar.background#fff
  • descriptionForeground#6a737d
  • diffEditor.insertedLineBackground#aceebb4d
  • diffEditor.insertedTextBackground#6fdd8b80
  • diffEditor.removedLineBackground#ffcecb4d
  • diffEditor.removedTextBackground#fe4a4966
  • dropdown.background#ffffff
  • dropdown.border#d0d7de
  • dropdown.foreground#0e131f
  • dropdown.listBackground#ffffff
  • editor.background#ffffff
  • editor.findMatchBackground#FFE45E
  • editor.findMatchHighlightBackground#FFE45E66
  • editor.focusedStackFrameHighlightBackground#2CEAA366
  • editor.foldBackground#6e77811a
  • editor.foreground#0e131f
  • editor.lineHighlightBackground#eaeef280
  • editor.linkedEditingBackground#0969da12
  • editor.selectionHighlightBackground#2CEAA340
  • editor.stackFrameHighlightBackground#d4a72c66
  • editor.wordHighlightBackground#eaeef280
  • editor.wordHighlightBorder#afb8c199
  • editor.wordHighlightStrongBackground#afb8c14d
  • editor.wordHighlightStrongBorder#afb8c199
  • editorBracketHighlight.foreground1#138E97
  • editorBracketHighlight.foreground2#F46715
  • editorBracketHighlight.foreground3#F141A8
  • editorBracketHighlight.foreground4#1281E2
  • editorBracketHighlight.foreground5#00B88D
  • editorBracketHighlight.foreground6#5EADF2
  • editorBracketHighlight.unexpectedBracket.foreground#656d76
  • editorBracketMatch.background#2CEAA340
  • editorBracketMatch.border#2CEAA399
  • editorCursor.foreground#138E97
  • editorError.foreground#E94444
  • editorGroup.border#d0d7de
  • editorGroupHeader.tabsBackground#f6f8fa
  • editorGroupHeader.tabsBorder#d0d7de
  • editorGutter.addedBackground#2CEAA366
  • editorGutter.deletedBackground#fe4a4966
  • editorGutter.modifiedBackground#d4a72c66
  • editorIndentGuide.activeBackground1#0e131f3d
  • editorIndentGuide.background1#0e131f1f
  • editorInlayHint.background#afb8c133
  • editorInlayHint.foreground#656d76
  • editorInlayHint.typeBackground#afb8c133
  • editorInlayHint.typeForeground#656d76
  • editorOverviewRuler.border#fff
  • editorWarning.foreground#f9c513
  • editorWhitespace.foreground#afb8c1
  • editorWidget.background#ffffff
  • errorForeground#E94444
  • focusBorder#138E97
  • foreground#444d56
  • gitDecoration.addedResourceForeground#1a7f37
  • gitDecoration.conflictingResourceForeground#F46715
  • gitDecoration.deletedResourceForeground#E94444
  • gitDecoration.ignoredResourceForeground#6e7781
  • gitDecoration.modifiedResourceForeground#9a6700
  • gitDecoration.submoduleResourceForeground#656d76
  • gitDecoration.untrackedResourceForeground#1a7f37
  • input.background#ffffff
  • input.border#d0d7de
  • input.foreground#0e131f
  • input.placeholderForeground#6e7781
  • list.activeSelectionBackground#e2e5e9
  • list.activeSelectionForeground#0e131f
  • list.focusBackground#cce5ff
  • list.hoverBackground#ebf0f4
  • list.hoverForeground#0e131f
  • list.inactiveFocusBackground#dbedff
  • list.inactiveSelectionBackground#e8eaed
  • list.inactiveSelectionForeground#0e131f
  • notificationCenterHeader.background#f6f8fa
  • notificationCenterHeader.foreground#656d76
  • notifications.background#ffffff
  • notifications.border#d0d7de
  • notifications.foreground#0e131f
  • notificationsErrorIcon.foreground#fe4a49
  • notificationsInfoIcon.foreground#138E97
  • notificationsWarningIcon.foreground#F46715
  • panel.background#f6f8fa
  • panel.border#d0d7de
  • panelInput.border#d0d7de
  • panelTitle.activeBorder#F141A8
  • panelTitle.activeForeground#0e131f
  • panelTitle.inactiveForeground#656d76
  • pickerGroup.border#d0d7de
  • pickerGroup.foreground#656d76
  • progressBar.background#15c2cb
  • quickInput.background#ffffff
  • quickInput.foreground#0e131f
  • scrollbar.shadow#6e778133
  • scrollbarSlider.activeBackground#8c959f47
  • scrollbarSlider.background#8c959f33
  • scrollbarSlider.hoverBackground#8c959f3d
  • settings.headerForeground#0e131f
  • settings.modifiedItemIndicator#138E97
  • sideBar.background#f6f8fa
  • sideBar.border#e1e4e8
  • sideBar.foreground#586069
  • sideBarSectionHeader.background#f6f8fa
  • sideBarSectionHeader.border#e1e4e8
  • sideBarSectionHeader.foreground#0e131f
  • sideBarTitle.foreground#0e131f
  • statusBar.background#ffffff
  • statusBar.border#d0d7de
  • statusBar.debuggingBackground#F79256
  • statusBar.debuggingForeground#ffffff
  • statusBar.focusBorder#1281E280
  • statusBar.foreground#656d76
  • statusBar.noFolderBackground#ffffff
  • statusBarItem.activeBackground#0e131f1f
  • statusBarItem.errorBackground#E94444
  • statusBarItem.errorForeground#ffffff
  • statusBarItem.errorHoverBackground#E94444
  • statusBarItem.errorHoverForeground#ffffff
  • statusBarItem.focusBorder#1281E2
  • statusBarItem.hoverBackground#0e131f14
  • statusBarItem.prominentBackground#afb8c133
  • statusBarItem.remoteBackground#eaeef2
  • statusBarItem.remoteForeground#0e131f
  • statusBarItem.warningBackground#f9c513
  • statusBarItem.warningForeground#0e131f
  • statusBarItem.warningHoverBackground#EFB806
  • statusBarItem.warningHoverForeground#0e131f
  • symbolIcon.arrayForeground#1281e2
  • symbolIcon.booleanForeground#1281E2
  • symbolIcon.classForeground#1281e2
  • symbolIcon.colorForeground#0a3069
  • symbolIcon.constantForeground#116329
  • symbolIcon.constructorForeground#3e1f79
  • symbolIcon.enumeratorForeground#1281e2
  • symbolIcon.enumeratorMemberForeground#1281E2
  • symbolIcon.eventForeground#57606a
  • symbolIcon.fieldForeground#1281e2
  • symbolIcon.fileForeground#7d4e00
  • symbolIcon.folderForeground#7d4e00
  • symbolIcon.functionForeground#6639ba
  • symbolIcon.interfaceForeground#1281e2
  • symbolIcon.keyForeground#1281E2
  • symbolIcon.keywordForeground#a40e26
  • symbolIcon.methodForeground#6639ba
  • symbolIcon.moduleForeground#a40e26
  • symbolIcon.namespaceForeground#a40e26
  • symbolIcon.nullForeground#1281E2
  • symbolIcon.numberForeground#116329
  • symbolIcon.objectForeground#1281e2
  • symbolIcon.operatorForeground#0a3069
  • symbolIcon.packageForeground#1281e2
  • symbolIcon.propertyForeground#1281e2
  • symbolIcon.referenceForeground#1281E2
  • symbolIcon.snippetForeground#1281E2
  • symbolIcon.stringForeground#0a3069
  • symbolIcon.structForeground#1281e2
  • symbolIcon.textForeground#0a3069
  • symbolIcon.typeParameterForeground#0a3069
  • symbolIcon.unitForeground#1281E2
  • symbolIcon.variableForeground#1281e2
  • tab.activeBackground#ffffff
  • tab.activeBorder#ffffff
  • tab.activeBorderTop#F141A8
  • tab.activeForeground#0e131f
  • tab.border#d0d7de
  • tab.hoverBackground#ffffff
  • tab.inactiveBackground#f6f8fa
  • tab.inactiveForeground#656d76
  • tab.unfocusedActiveBorder#ffffff
  • tab.unfocusedActiveBorderTop#d0d7de
  • tab.unfocusedHoverBackground#eaeef280
  • terminal.ansiBlack#141c2d
  • terminal.ansiBlue#46a1f0
  • terminal.ansiBrightBlack#676965
  • terminal.ansiBrightBlue#5eadf2
  • terminal.ansiBrightCyan#15c2cb
  • terminal.ansiBrightGreen#44ffd2
  • terminal.ansiBrightMagenta#f141a8
  • terminal.ansiBrightRed#fe6362
  • terminal.ansiBrightWhite#d1d5da
  • terminal.ansiBrightYellow#ffe45e
  • terminal.ansiCyan#0accd6
  • terminal.ansiGreen#11ffc6
  • terminal.ansiMagenta#ed1292
  • terminal.ansiRed#fe4a49
  • terminal.ansiWhite#6a737d
  • terminal.ansiYellow#f5cc00
  • terminal.foreground#586069
  • terminal.tab.activeBorder#F141A8
  • terminalCursor.background#d1d5da
  • terminalCursor.foreground#138E97
  • textBlockQuote.background#f6f8fa
  • textBlockQuote.border#d0d7de
  • textCodeBlock.background#afb8c133
  • textLink.activeForeground#16ABB6
  • textLink.foreground#138E97
  • textPreformat.foreground#656d76
  • textSeparator.foreground#d8dee4
  • titleBar.activeBackground#ffffff
  • titleBar.activeForeground#656d76
  • titleBar.border#d0d7de
  • titleBar.inactiveBackground#f6f8fa
  • titleBar.inactiveForeground#656d76
  • tree.indentGuidesStroke#e1e4e8

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, string.comment#6a737d
constant, entity.name.constant, variable.other.constant, variable.other.enummember, variable.language#1281E2
entity, entity.name#8E25BB
variable.parameter.function#0e131f
entity.name.tag#337357
keyword#E94444
storage, storage.type#E94444
storage.modifier.package, storage.modifier.import, storage.type.java#0e131f
string, punctuation.definition.string, string punctuation.section.embedded source#0E61AA
support#1281E2
meta.property-name#1281E2
variable#F46715
variable.other#0e131f
invalid.broken#b31d28italic
invalid.deprecated#b31d28italic
invalid.illegal#b31d28italic
invalid.unimplemented#b31d28italic
carriage-return#fafbfcitalic underline
message.error#b31d28
string variable#1281E2
source.regexp, string.regexp#0E61AA
string.regexp.character-class, string.regexp constant.character.escape, string.regexp source.ruby.embedded, string.regexp string.regexp.arbitrary-repitition#0E61AA
string.regexp constant.character.escape#337357bold
support.constant#1281E2
support.variable#1281E2
meta.module-reference#1281E2
punctuation.definition.list.begin.markdown#F46715
markup.heading, markup.heading entity.name#1281E2bold
markup.quote#337357
markup.italic#0e131fitalic
markup.bold#0e131fbold
markup.underlineunderline
markup.strikethroughstrikethrough
markup.inline.raw#1281E2
markup.deleted, meta.diff.header.from-file, punctuation.definition.deleted#b31d28
markup.inserted, meta.diff.header.to-file, punctuation.definition.inserted#337357
markup.changed, punctuation.definition.changed#F46715
markup.ignored, markup.untracked#f6f8fa
meta.diff.range#8E25BBbold
meta.diff.header#1281E2
meta.separator#1281E2bold
meta.output#1281E2
brackethighlighter.tag, brackethighlighter.curly, brackethighlighter.round, brackethighlighter.square, brackethighlighter.angle, brackethighlighter.quote#586069
brackethighlighter.unmatched#b31d28
constant.other.reference.link, string.other.link#0E61AAunderline