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#a01818
  • activityBar.background#ffffff
  • activityBar.border#e5e5e5
  • activityBar.foreground#1a1a1a
  • activityBar.inactiveForeground#1a1a1a60
  • activityBarBadge.background#1a1a1a
  • activityBarBadge.foreground#ffffff
  • badge.background#1a1a1a90
  • badge.foreground#ffffff
  • breadcrumb.activeSelectionForeground#1a1a1a90
  • breadcrumb.focusForeground#1a1a1a
  • breadcrumb.foreground#1a1a1a90
  • breadcrumbPicker.background#ffffff
  • button.background#a01818
  • button.foreground#ffffff
  • button.hoverBackground#a01818
  • checkbox.background#5a3b9420
  • checkbox.border#e5e5e5
  • debugToolBar.background#ffffff
  • descriptionForeground#1a1a1a90
  • diffEditor.insertedTextBackground#3c9a3c30
  • diffEditor.removedTextBackground#a0181830
  • dropdown.background#ffffff
  • dropdown.border#e5e5e5
  • dropdown.foreground#1a1a1a
  • dropdown.listBackground#ffffff
  • editor.background#ffffff
  • editor.findMatchBackground#a0181840
  • editor.findMatchHighlightBackground#5a3b9425
  • editor.focusedStackFrameHighlightBackground#a01818
  • editor.foldBackground#ffffff
  • editor.foreground#1a1a1a
  • editor.inactiveSelectionBackground#5a3b9420
  • editor.lineHighlightBackground#5a3b9420
  • editor.selectionBackground#5a3b9440
  • editor.selectionHighlightBackground#5a3b9420
  • editor.stackFrameHighlightBackground#a01818
  • editor.wordHighlightBackground#5a3b9440
  • editor.wordHighlightStrongBackground#a0181835
  • editorBracketHighlight.foreground1#1a1a1a80
  • editorBracketHighlight.foreground2#1a1a1a80
  • editorBracketHighlight.foreground3#1a1a1a80
  • editorBracketHighlight.foreground4#1a1a1a80
  • editorBracketHighlight.foreground5#1a1a1a80
  • editorBracketHighlight.foreground6#1a1a1a80
  • editorBracketHighlight.unexpectedBracket.foreground#ffffff
  • editorBracketMatch.background#5a3b9420
  • editorCursor.foreground#1a1a1a
  • editorError.foreground#a01818
  • editorGroup.border#e5e5e5
  • editorGroupHeader.tabsBackground#ffffff
  • editorGroupHeader.tabsBorder#e5e5e5
  • editorGutter.addedBackground#3c9a3c
  • editorGutter.commentRangeForeground#1a1a1a60
  • editorGutter.deletedBackground#a01818
  • editorGutter.foldingControlForeground#1a1a1a90
  • editorGutter.modifiedBackground#5a3b94
  • editorHint.foreground#5a3b94
  • editorIndentGuide.activeBackground#e5e5e560
  • editorIndentGuide.background#e5e5e540
  • editorInfo.foreground#5a3b94
  • editorLineNumber.activeForeground#5a3b94
  • editorLineNumber.foreground#5a3b9450
  • editorOverviewRuler.border#5a3b9400
  • editorWarning.foreground#a01818
  • editorWhitespace.foreground#e5e5e540
  • editorWidget.background#ffffff
  • errorForeground#a01818
  • focusBorder#00000000
  • foreground#1a1a1a
  • gitDecoration.addedResourceForeground#3c9a3c
  • gitDecoration.conflictingResourceForeground#b38600
  • gitDecoration.deletedResourceForeground#a01818
  • gitDecoration.ignoredResourceForeground#1a1a1a60
  • gitDecoration.modifiedResourceForeground#5a3b94
  • gitDecoration.submoduleResourceForeground#1a1a1a90
  • gitDecoration.untrackedResourceForeground#5a3b94
  • input.background#5a3b9420
  • input.border#e5e5e5
  • input.foreground#1a1a1a
  • input.placeholderForeground#1a1a1a90
  • list.activeSelectionBackground#5a3b9460
  • list.activeSelectionForeground#1a1a1a
  • list.focusBackground#5a3b9420
  • list.hoverBackground#5a3b9420
  • list.hoverForeground#1a1a1a
  • list.inactiveFocusBackground#ffffff
  • list.inactiveSelectionBackground#5a3b9420
  • list.inactiveSelectionForeground#1a1a1a
  • notificationCenterHeader.background#ffffff
  • notificationCenterHeader.foreground#1a1a1a
  • notifications.background#ffffff
  • notifications.border#e5e5e5
  • notifications.foreground#1a1a1a
  • notificationsErrorIcon.foreground#a01818
  • notificationsInfoIcon.foreground#5a3b94
  • notificationsWarningIcon.foreground#a01818
  • panel.background#ffffff
  • panel.border#e5e5e5
  • panelInput.border#1a1a1a90
  • panelTitle.activeBorder#a01818
  • panelTitle.activeForeground#1a1a1a
  • panelTitle.inactiveForeground#1a1a1a60
  • peekViewEditor.background#ffffff
  • peekViewEditor.matchHighlightBackground#a01818
  • peekViewResult.background#ffffff
  • peekViewResult.matchHighlightBackground#a01818
  • pickerGroup.border#1a1a1a90
  • pickerGroup.foreground#1a1a1a
  • problemsErrorIcon.foreground#a01818
  • problemsInfoIcon.foreground#5a3b94
  • problemsWarningIcon.foreground#a01818
  • progressBar.background#a01818
  • quickInput.background#ffffff
  • quickInput.foreground#1a1a1a
  • scrollbar.shadow#1a1a1a90
  • scrollbarSlider.activeBackground#5a3b9435
  • scrollbarSlider.background#5a3b9418
  • scrollbarSlider.hoverBackground#5a3b9425
  • settings.headerForeground#1a1a1a
  • settings.modifiedItemIndicator#a01818
  • sideBar.background#ffffff
  • sideBar.border#e5e5e5
  • sideBar.foreground#1a1a1a
  • sideBarSectionHeader.background#ffffff
  • sideBarSectionHeader.border#e5e5e5
  • sideBarSectionHeader.foreground#5a3b94
  • sideBarTitle.foreground#1a1a1a
  • statusBar.background#ffffff
  • statusBar.border#e5e5e5
  • statusBar.debuggingBackground#5a3b9420
  • statusBar.debuggingForeground#1a1a1a
  • statusBar.foreground#1a1a1a
  • statusBar.noFolderBackground#ffffff
  • statusBarItem.prominentBackground#5a3b9420
  • tab.activeBackground#ffffff
  • tab.activeBorder#e5e5e5
  • tab.activeBorderTop#a01818
  • tab.activeForeground#1a1a1a
  • tab.border#e5e5e5
  • tab.hoverBackground#5a3b9425
  • tab.inactiveBackground#5a3b9420
  • tab.inactiveForeground#1a1a1a90
  • tab.unfocusedActiveBorder#e5e5e5
  • tab.unfocusedActiveBorderTop#e5e5e5
  • tab.unfocusedHoverBackground#ffffff
  • terminal.ansiBlack#1a1a1a
  • terminal.ansiBlue#5a3b94
  • terminal.ansiBrightBlack#1a1a1a
  • terminal.ansiBrightBlue#5a3b94
  • terminal.ansiBrightCyan#ffffff
  • terminal.ansiBrightGreen#5a3b94
  • terminal.ansiBrightMagenta#5a3b94
  • terminal.ansiBrightRed#a01818
  • terminal.ansiBrightWhite#1a1a1a
  • terminal.ansiBrightYellow#a01818
  • terminal.ansiCyan#ffffff
  • terminal.ansiGreen#5a3b94
  • terminal.ansiMagenta#5a3b94
  • terminal.ansiRed#a01818
  • terminal.ansiWhite#1a1a1a
  • terminal.ansiYellow#a01818
  • terminal.foreground#1a1a1a
  • textBlockQuote.background#ffffff
  • textBlockQuote.border#e5e5e5
  • textCodeBlock.background#ffffff
  • textLink.activeForeground#a01818
  • textLink.foreground#a01818
  • textPreformat.foreground#1a1a1a90
  • textSeparator.foreground#1a1a1a90
  • titleBar.activeBackground#ffffff
  • titleBar.activeForeground#1a1a1a
  • titleBar.border#5a3b9420
  • titleBar.inactiveBackground#ffffff
  • titleBar.inactiveForeground#1a1a1a60
  • tree.indentGuidesStroke#e5e5e540
  • welcomePage.buttonBackground#5a3b9425
  • welcomePage.buttonHoverBackground#5a3b9420

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, string.comment#1a1a1a80—
punctuation, meta.tag.inline.any.html, meta.tag.block.any.html, meta.brace#1a1a1a80—
constant, entity.name.constant, variable.other.constant, variable.language, meta.definition.variable#1a1a1a—
entity, entity.name#5a3b94—
variable.parameter.function#1a1a1a—
entity.name.tag#a01818—
entity.name.function#5a3b94—
keyword#5a3b94—
storage, storage.type#a01818—
storage.modifier.package, storage.modifier.import, storage.type.java#1a1a1a—
string, punctuation.definition.string, string punctuation.section.embedded source#a01818—
support#5a3b94—
meta.property-name, entity.other.attribute-name, meta.object-literal.key#5a3b94—
variable#1a1a1a—
namespace#1a1a1a—
keyword.operator#a01818—
invalid.broken#a01818italic
invalid.deprecated#a01818italic
invalid.illegal#a01818italic
invalid.unimplemented#a01818italic
carriage-return#ffffffitalic underline
message.error#a01818—
string source#1a1a1a—
string variable#a01818—
source.regexp, string.regexp#a01818—
string.regexp.character-class, string.regexp constant.character.escape, string.regexp source.ruby.embedded, string.regexp string.regexp.arbitrary-repitition#a01818—
string.regexp constant.character.escape#5a3b94bold
support.constant#1a1a1a—
support.variable#a01818—
constant.numeric#1a1a1a—
keyword.other.unit#a01818—
constant.language.boolean#a01818—
meta.module-reference#a01818—
punctuation.definition.list.begin.markdown#a01818—
markup.heading, markup.heading entity.name#a01818bold
markup.quote#a01818—
markup.italic#1a1a1aitalic
markup.bold#1a1a1abold
markup.raw#a01818—
markup.deleted, meta.diff.header.from-file, punctuation.definition.deleted#ffffff—
markup.inserted, meta.diff.header.to-file, punctuation.definition.inserted#ffffff—
markup.changed, punctuation.definition.changed#ffffff—
markup.ignored, markup.untracked#1a1a1a90—
meta.diff.range#5a3b94bold
meta.diff.header#5a3b94—
meta.separator#5a3b94bold
meta.output#5a3b94—
brackethighlighter.tag, brackethighlighter.curly, brackethighlighter.round, brackethighlighter.square, brackethighlighter.angle, brackethighlighter.quote#ffffff—
brackethighlighter.unmatched#a01818—
constant.other.reference.link, string.other.link, punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown#a01818—
markup.underline.link.markdown#1a1a1a90underline
ThemeDatabase All Themes by enes ozturk - VS Code Theme