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#000000
  • activityBar.background#eeeeee
  • activityBar.border#cccccc00
  • activityBar.foreground#000000
  • activityBar.inactiveForeground#666666
  • activityBarBadge.background#000000
  • activityBarBadge.foreground#eeeeee
  • badge.background#000000
  • badge.foreground#eeeeee
  • breadcrumb.activeSelectionForeground#000000
  • breadcrumb.focusForeground#000000
  • breadcrumb.foreground#444444
  • breadcrumbPicker.background#eeeeee
  • button.background#000000
  • button.foreground#eeeeee
  • button.hoverBackground#000000
  • button.secondaryBackground#dddddd
  • button.secondaryForeground#444444
  • button.secondaryHoverBackground#cccccc
  • checkbox.background#eeeeee
  • checkbox.border#cccccc
  • commandCenter.activeBackground#cccccc
  • commandCenter.background#dddddd
  • debugToolBar.background#eeeeee
  • descriptionForeground#000000
  • diffEditor.insertedTextBackground#77996633
  • diffEditor.removedTextBackground#88444433
  • dropdown.background#eeeeee
  • dropdown.border#cccccc
  • dropdown.foreground#444444
  • dropdown.listBackground#eeeeee
  • editor.background#eeeeee
  • editor.findMatchBackground#AA884444
  • editor.findMatchHighlightBackground#AA884422
  • editor.focusedStackFrameHighlightBackground#cccccc
  • editor.foldBackground#dddddd
  • editor.foreground#000000
  • editor.inactiveSelectionBackground#dddddd
  • editor.lineHighlightBackground#dddddd
  • editor.linkedEditingBackground#dddddd
  • editor.selectionBackground#dddddd
  • editor.selectionHighlightBackground#dddddd
  • editor.selectionHighlightBorder#dddddd
  • editor.stackFrameHighlightBackground#aa884425
  • editor.wordHighlightBackground#dddddd
  • editor.wordHighlightBorder#eeeeee00
  • editor.wordHighlightStrongBackground#eeeeee00
  • editor.wordHighlightStrongBorder#eeeeee00
  • editorBracketMatch.background#dddddd
  • editorBracketMatch.border#eeeeee00
  • editorCursor.foreground#000000
  • editorGroup.border#cccccc00
  • editorGroupHeader.tabsBackground#eeeeee
  • editorGroupHeader.tabsBorder#cccccc00
  • editorGutter.addedBackground#779966
  • editorGutter.deletedBackground#884444
  • editorGutter.modifiedBackground#AA8844
  • editorHoverWidget.background#eeeeee
  • editorHoverWidget.foreground#444444
  • editorIndentGuide.activeBackground#bbbbbb
  • editorIndentGuide.background#cccccc
  • editorInlayHint.background#dddddd
  • editorInlayHint.foreground#444444
  • editorLineNumber.activeForeground#444444
  • editorLineNumber.foreground#666666
  • editorOverviewRuler.border#eeeeee
  • editorOverviewRuler.errorForeground#884444
  • editorRuler.foreground#cccccc
  • editorWhitespace.foreground#666666
  • editorWidget.background#eeeeee
  • editorWidget.border#cccccc
  • errorForeground#884444
  • errorLens.errorBackground#88444433
  • errorLens.errorBackgroundLight#88444433
  • errorLens.errorForeground#884444
  • errorLens.errorForegroundLight#884444
  • errorLens.hintBackground#44779933
  • errorLens.hintBackgroundLight#44779933
  • errorLens.hintForeground#447799
  • errorLens.hintForegroundLight#447799
  • errorLens.infoBackground#44779933
  • errorLens.infoBackgroundLight#44779933
  • errorLens.infoForeground#447799
  • errorLens.infoForegroundLight#447799
  • errorLens.warningBackground#AA884433
  • errorLens.warningBackgroundLight#AA884433
  • errorLens.warningForeground#AA884433
  • errorLens.warningForegroundLight#AA8844
  • focusBorder#eeeeee00
  • foreground#444444
  • gitDecoration.addedResourceForeground#779966
  • gitDecoration.conflictingResourceForeground#AA8844
  • gitDecoration.deletedResourceForeground#884444
  • gitDecoration.ignoredResourceForeground#666666
  • gitDecoration.modifiedResourceForeground#AA8844
  • gitDecoration.submoduleResourceForeground#000000
  • gitDecoration.untrackedResourceForeground#779966
  • icon.foreground#444444
  • input.background#eeeeee
  • input.border#cccccc
  • input.foreground#444444
  • input.placeholderForeground#444444
  • list.activeSelectionBackground#dddddd
  • list.activeSelectionForeground#000000
  • list.errorForeground#884444
  • list.focusBackground#dddddd
  • list.focusForeground#000000
  • list.highlightForeground#000000
  • list.hoverBackground#dddddd
  • list.hoverForeground#000000
  • list.inactiveFocusBackground#dddddd
  • list.inactiveSelectionBackground#dddddd
  • list.inactiveSelectionForeground#444444
  • list.warningForeground#AA8844
  • minimap.selectionHighlight#dddddd
  • notificationCenterHeader.background#eeeeee
  • notificationCenterHeader.foreground#444444
  • notifications.background#eeeeee
  • notifications.border#cccccc
  • notifications.foreground#000000
  • notificationsErrorIcon.foreground#884444
  • notificationsInfoIcon.foreground#447799
  • notificationsWarningIcon.foreground#AA8844
  • panel.background#eeeeee
  • panel.border#cccccc00
  • panelInput.border#cccccc
  • panelTitle.activeBorder#000000
  • panelTitle.activeForeground#000000
  • panelTitle.inactiveForeground#444444
  • peekView.border#cccccc
  • peekViewEditor.background#eeeeee
  • peekViewEditor.matchHighlightBackground#AA884433
  • peekViewResult.background#eeeeee
  • peekViewResult.matchHighlightBackground#AA884433
  • peekViewTitle.background#eeeeee
  • pickerGroup.border#cccccc
  • pickerGroup.foreground#000000
  • progressBar.background#000000
  • quickInput.background#eeeeee
  • quickInput.foreground#444444
  • scrollbar.shadow#eeeeee00
  • scrollbarSlider.activeBackground#cccccc
  • scrollbarSlider.background#cccccc
  • scrollbarSlider.hoverBackground#cccccc
  • selection.background#cccccc
  • settings.headerForeground#000000
  • settings.modifiedItemIndicator#000000
  • sideBar.background#eeeeee
  • sideBar.border#cccccc00
  • sideBar.foreground#444444
  • sideBarSectionHeader.background#eeeeee
  • sideBarSectionHeader.border#cccccc00
  • sideBarSectionHeader.foreground#444444
  • sideBarTitle.foreground#444444
  • statusBar.background#eeeeee
  • statusBar.border#cccccc00
  • statusBar.debuggingBackground#000000
  • statusBar.debuggingForeground#eeeeee
  • statusBar.foreground#444444
  • statusBar.noFolderBackground#eeeeee
  • statusBarItem.prominentBackground#eeeeee
  • tab.activeBackground#eeeeee
  • tab.activeBorder#000000
  • tab.activeBorderTop#eeeeee
  • tab.activeForeground#000000
  • tab.border#cccccc00
  • tab.hoverBackground#eeeeee
  • tab.inactiveBackground#eeeeee
  • tab.inactiveForeground#444444
  • tab.unfocusedActiveBorder#eeeeee
  • tab.unfocusedActiveBorderTop#eeeeee
  • tab.unfocusedHoverBackground#eeeeee
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#447799
  • terminal.ansiBrightBlack#444444
  • terminal.ansiBrightBlue#447799
  • terminal.ansiBrightCyan#449999
  • terminal.ansiBrightGreen#779966
  • terminal.ansiBrightMagenta#666699
  • terminal.ansiBrightRed#884444
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#AA8844
  • terminal.ansiCyan#449999
  • terminal.ansiGreen#779966
  • terminal.ansiMagenta#666699
  • terminal.ansiRed#884444
  • terminal.ansiWhite#cccccc
  • terminal.ansiYellow#AA8844
  • terminal.foreground#000000
  • terminal.selectionBackground#cccccc
  • textBlockQuote.background#eeeeee
  • textBlockQuote.border#000000
  • textCodeBlock.background#eeeeee
  • textLink.activeForeground#000000
  • textLink.foreground#000000
  • textPreformat.foreground#000000
  • textSeparator.foreground#444444
  • titleBar.activeBackground#eeeeee
  • titleBar.activeForeground#444444
  • titleBar.border#cccccc00
  • titleBar.inactiveBackground#eeeeee
  • titleBar.inactiveForeground#444444
  • tree.indentGuidesStroke#cccccc

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, string.comment#666666
entity.other.attribute-name#666699
constant, entity.name.constant, variable.other.constant, variable.language, entity#666699
entity.name, meta.export.default, meta.definition.variable#447799
variable.parameter.function, meta.jsx.children, meta.block, meta.tag.attributes, entity.name.constant, meta.object.member, meta.embedded.expression#000000
entity.name.function#666699
entity.name.tag, support.class.component#447799
keyword#884444
keyword.operator, storage.type.function.arrow#884444
storage, storage.type#884444
storage.modifier.package, storage.modifier.import, storage.type.java#000000
string, punctuation.definition.string, string punctuation.section.embedded source#447799
support#447799
meta.property-name#447799
variable#000000
variable.other#000000
invalid.broken#884444
invalid.deprecated#884444
invalid.illegal#884444
invalid.unimplemented#884444
carriage-return#111111
message.error#884444
string source#000000
string variable#447799
source.regexp, string.regexp#447799
string.regexp.character-class, string.regexp constant.character.escape, string.regexp source.ruby.embedded, string.regexp string.regexp.arbitrary-repitition#447799
string.regexp constant.character.escape#447799bold
support.constant#447799
support.variable#447799
meta.module-reference#447799
punctuation.definition.list.begin.markdown#AA8844
markup.heading, markup.heading entity.name#447799bold
markup.quote#447799
markup.italic#000000italic
markup.bold#000000bold
markup.raw#447799
markup.deleted, meta.diff.header.from-file, punctuation.definition.deleted#884444
markup.inserted, meta.diff.header.to-file, punctuation.definition.inserted#447799
markup.changed, punctuation.definition.changed#AA8844
markup.ignored, markup.untracked#777777
meta.diff.range#666699bold
meta.diff.header#447799
meta.separator#447799bold
meta.output#447799
meta.export.default#000000
brackethighlighter.tag, brackethighlighter.curly, brackethighlighter.round, brackethighlighter.square, brackethighlighter.angle, brackethighlighter.quote#000000
brackethighlighter.unmatched#884444
constant.other.reference.link, string.other.link#447799underline
token.info-token#6796E6
token.warn-token#AA8844
token.error-token#884444
token.debug-token#666699
Gabriel's Theme by Gabriel Moreno - VS Code Theme