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. A key in the color catalog links to its detail page.

keyHEXRGBRGBA
activityBar.activeBorder
activityBar.background
activityBar.border
activityBar.foreground
activityBar.inactiveForeground
activityBarBadge.background
activityBarBadge.foreground
badge.background
badge.foreground
breadcrumb.activeSelectionForeground
breadcrumb.focusForeground
breadcrumb.foreground
breadcrumbPicker.background
button.background
button.foreground
button.hoverBackground
button.secondaryBackground
button.secondaryForeground
button.secondaryHoverBackground
checkbox.background
checkbox.border
debugConsole.errorForeground
debugConsole.infoForeground
debugConsole.sourceForeground
debugConsole.warningForeground
debugConsoleInputIcon.foreground
debugIcon.breakpointForeground
debugTokenExpression.boolean
debugTokenExpression.error
debugTokenExpression.name
debugTokenExpression.number
debugTokenExpression.string
debugTokenExpression.value
debugToolBar.background
descriptionForeground
diffEditor.insertedLineBackground
diffEditor.insertedTextBackground
diffEditor.removedLineBackground
diffEditor.removedTextBackground
dropdown.background
dropdown.border
dropdown.foreground
dropdown.listBackground
editor.background
editor.findMatchBackground
editor.findMatchHighlightBackground
editor.focusedStackFrameHighlightBackground
editor.foldBackground
editor.foreground
editor.lineHighlightBackground
editor.linkedEditingBackground
editor.selectionHighlightBackground
editor.stackFrameHighlightBackground
editor.wordHighlightBackground
editor.wordHighlightBorder
editor.wordHighlightStrongBackground
editor.wordHighlightStrongBorder
editorBracketHighlight.foreground1
editorBracketHighlight.foreground2
editorBracketHighlight.foreground3
editorBracketHighlight.foreground4
editorBracketHighlight.foreground5
editorBracketHighlight.foreground6
editorBracketHighlight.unexpectedBracket.foreground
editorBracketMatch.background
editorBracketMatch.border
editorCursor.foreground
editorError.foreground
editorGroup.border
editorGroupHeader.tabsBackground
editorGroupHeader.tabsBorder
editorGutter.addedBackground
editorGutter.deletedBackground
editorGutter.modifiedBackground
editorIndentGuide.activeBackground1
editorIndentGuide.background1
editorInlayHint.background
editorInlayHint.foreground
editorInlayHint.typeBackground
editorInlayHint.typeForeground
editorOverviewRuler.border
editorWarning.foreground
editorWhitespace.foreground
editorWidget.background
errorForeground
focusBorder
foreground
gitDecoration.addedResourceForeground
gitDecoration.conflictingResourceForeground
gitDecoration.deletedResourceForeground
gitDecoration.ignoredResourceForeground
gitDecoration.modifiedResourceForeground
gitDecoration.submoduleResourceForeground
gitDecoration.untrackedResourceForeground
input.background
input.border
input.foreground
input.placeholderForeground
list.activeSelectionBackground
list.activeSelectionForeground
list.focusBackground
list.hoverBackground
list.hoverForeground
list.inactiveFocusBackground
list.inactiveSelectionBackground
list.inactiveSelectionForeground
notificationCenterHeader.background
notificationCenterHeader.foreground
notifications.background
notifications.border
notifications.foreground
notificationsErrorIcon.foreground
notificationsInfoIcon.foreground
notificationsWarningIcon.foreground
panel.background
panel.border
panelInput.border
panelTitle.activeBorder
panelTitle.activeForeground
panelTitle.inactiveForeground
pickerGroup.border
pickerGroup.foreground
progressBar.background
quickInput.background
quickInput.foreground
scrollbar.shadow
scrollbarSlider.activeBackground
scrollbarSlider.background
scrollbarSlider.hoverBackground
settings.headerForeground
settings.modifiedItemIndicator
sideBar.background
sideBar.border
sideBar.foreground
sideBarSectionHeader.background
sideBarSectionHeader.border
sideBarSectionHeader.foreground
sideBarTitle.foreground
statusBar.background
statusBar.border
statusBar.debuggingBackground
statusBar.debuggingForeground
statusBar.focusBorder
statusBar.foreground
statusBar.noFolderBackground
statusBarItem.activeBackground
statusBarItem.errorBackground
statusBarItem.errorForeground
statusBarItem.errorHoverBackground
statusBarItem.errorHoverForeground
statusBarItem.focusBorder
statusBarItem.hoverBackground
statusBarItem.prominentBackground
statusBarItem.remoteBackground
statusBarItem.remoteForeground
statusBarItem.warningBackground
statusBarItem.warningForeground
statusBarItem.warningHoverBackground
statusBarItem.warningHoverForeground
symbolIcon.arrayForeground
symbolIcon.booleanForeground
symbolIcon.classForeground
symbolIcon.colorForeground
symbolIcon.constantForeground
symbolIcon.constructorForeground
symbolIcon.enumeratorForeground
symbolIcon.enumeratorMemberForeground
symbolIcon.eventForeground
symbolIcon.fieldForeground
symbolIcon.fileForeground
symbolIcon.folderForeground
symbolIcon.functionForeground
symbolIcon.interfaceForeground
symbolIcon.keyForeground
symbolIcon.keywordForeground
symbolIcon.methodForeground
symbolIcon.moduleForeground
symbolIcon.namespaceForeground
symbolIcon.nullForeground
symbolIcon.numberForeground
symbolIcon.objectForeground
symbolIcon.operatorForeground
symbolIcon.packageForeground
symbolIcon.propertyForeground
symbolIcon.referenceForeground
symbolIcon.snippetForeground
symbolIcon.stringForeground
symbolIcon.structForeground
symbolIcon.textForeground
symbolIcon.typeParameterForeground
symbolIcon.unitForeground
symbolIcon.variableForeground
tab.activeBackground
tab.activeBorder
tab.activeBorderTop
tab.activeForeground
tab.border
tab.hoverBackground
tab.inactiveBackground
tab.inactiveForeground
tab.unfocusedActiveBorder
tab.unfocusedActiveBorderTop
tab.unfocusedHoverBackground
terminal.ansiBlack
terminal.ansiBlue
terminal.ansiBrightBlack
terminal.ansiBrightBlue
terminal.ansiBrightCyan
terminal.ansiBrightGreen
terminal.ansiBrightMagenta
terminal.ansiBrightRed
terminal.ansiBrightWhite
terminal.ansiBrightYellow
terminal.ansiCyan
terminal.ansiGreen
terminal.ansiMagenta
terminal.ansiRed
terminal.ansiWhite
terminal.ansiYellow
terminal.foreground
terminal.tab.activeBorder
terminalCursor.background
terminalCursor.foreground
textBlockQuote.background
textBlockQuote.border
textCodeBlock.background
textLink.activeForeground
textLink.foreground
textPreformat.foreground
textSeparator.foreground
titleBar.activeBackground
titleBar.activeForeground
titleBar.border
titleBar.inactiveBackground
titleBar.inactiveForeground
tree.indentGuidesStroke

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.underline—underline
markup.strikethrough—strikethrough
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

Related themes

ThemeDatabase All Themes by enes ozturk - VS Code Theme