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

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, string.comment#666666—
entity.other.attribute-name#7c00c7—
constant, entity.name.constant, variable.other.constant, variable.language, entity#0068d6—
entity.name, meta.export.default, meta.definition.variable#0068d6—
variable.parameter.function, meta.jsx.children, meta.block, meta.tag.attributes, entity.name.constant, meta.object.member, meta.embedded.expression, meta.template.expression, string.other.begin.yaml, string.other.end.yaml#171717—
entity.name.function, support.type.primitive#7c00c7—
support.class.component#0068d6—
keyword#bd2864—
keyword.operator, storage.type.function.arrow, punctuation.separator.key-value.css, entity.name.tag.yaml, punctuation.separator.key-value.mapping.yaml#bd2864—
storage, storage.type#bd2864—
storage.modifier.package, storage.modifier.import, storage.type.java#171717—
string, punctuation.definition.string, string punctuation.section.embedded source, entity.name.tag#297a3a—
support#bd2864—
support.type.object.module, variable.other.object, support.type.property-name.css#0068d6—
meta.property-name#0068d6—
variable#171717—
variable.other#171717—
invalid.broken#bd2864—
invalid.deprecated#bd2864—
invalid.illegal#bd2864—
invalid.unimplemented#bd2864—
carriage-return#111111—
message.error#bd2864—
string source#171717—
string variable#0068d6—
source.regexp, string.regexp#0068d6—
string.regexp.character-class, string.regexp constant.character.escape, string.regexp source.ruby.embedded, string.regexp string.regexp.arbitrary-repitition#0068d6—
string.regexp constant.character.escape#0068d6bold
support.constant#0068d6—
support.variable#0068d6—
meta.module-reference#0068d6—
punctuation.definition.list.begin.markdown#A35200—
markup.heading, markup.heading entity.name#0068d6bold
markup.quote#0068d6—
markup.italic#171717italic
markup.bold#171717bold
markup.raw#0068d6—
markup.deleted, meta.diff.header.from-file, punctuation.definition.deleted#bd2864—
markup.inserted, meta.diff.header.to-file, punctuation.definition.inserted#0068d6—
markup.changed, punctuation.definition.changed#A35200—
markup.ignored, markup.untracked#777777—
meta.diff.range#7c00c7bold
meta.diff.header#0068d6—
meta.separator#0068d6bold
meta.output#0068d6—
meta.export.default#171717—
brackethighlighter.tag, brackethighlighter.curly, brackethighlighter.round, brackethighlighter.square, brackethighlighter.angle, brackethighlighter.quote#171717—
brackethighlighter.unmatched#bd2864—
constant.other.reference.link, string.other.link#0068d6underline
token.info-token#6796E6—
token.warn-token#A35200—
token.error-token#bd2864—
token.debug-token#7c00c7—
ThemeDatabase All Themes by enes ozturk - VS Code Theme