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#3e7cf7
  • activityBar.background#2b2d30
  • activityBar.border#1e1f22
  • activityBar.foreground#ffffff
  • activityBar.inactiveForeground#dedcd550
  • activityBarBadge.background#ffffff
  • activityBarBadge.foreground#2b2d30
  • badge.background#3e7cf7
  • badge.foreground#ffffff
  • breadcrumb.activeSelectionForeground#eeeeee18
  • breadcrumb.background#181818
  • breadcrumb.focusForeground#ffffff
  • breadcrumb.foreground#959da5
  • breadcrumbPicker.background#2b2d30
  • button.background#3e7cf7
  • button.foreground#ffffff
  • button.hoverBackground#3e7cf7dd
  • checkbox.background#181818
  • checkbox.border#2f363d
  • debugToolBar.background#2b2d30
  • descriptionForeground#ffffff
  • diffEditor.insertedTextBackground#4d937550
  • diffEditor.removedTextBackground#ab595950
  • dropdown.background#2b2d30
  • dropdown.border#1e1f22
  • dropdown.foreground#ffffff
  • dropdown.listBackground#2b2d30
  • editor.background#1e1f22
  • editor.findMatchBackground#e6cc7722
  • editor.findMatchHighlightBackground#e6cc7744
  • editor.focusedStackFrameHighlightBackground#b808
  • editor.foldBackground#eeeeee10
  • editor.foreground#ffffff
  • editor.inactiveSelectionBackground#eeeeee10
  • editor.lineHighlightBackground#26282d
  • editor.selectionBackground#eeeeee18
  • editor.selectionHighlightBackground#eeeeee10
  • editor.stackFrameHighlightBackground#a707
  • editor.wordHighlightBackground#1c6b4805
  • editor.wordHighlightStrongBackground#1c6b4810
  • editorBracketHighlight.foreground1#5eaab5
  • editorBracketHighlight.foreground2#4d9375
  • editorBracketHighlight.foreground3#d4976c
  • editorBracketHighlight.foreground4#d9739f
  • editorBracketHighlight.foreground5#e6cc77
  • editorBracketHighlight.foreground6#6394bf
  • editorBracketMatch.background#4d937520
  • editorError.foreground#cb7676
  • editorGroup.border#1e1f22
  • editorGroupHeader.tabsBackground#2b2d30
  • editorGroupHeader.tabsBorder#1e1f22
  • editorGutter.addedBackground#4d9375
  • editorGutter.commentRangeForeground#dedcd550
  • editorGutter.deletedBackground#cb7676
  • editorGutter.foldingControlForeground#ffffff
  • editorGutter.modifiedBackground#6394bf
  • editorHint.foreground#4d9375
  • editorIndentGuide.activeBackground#ffffff30
  • editorIndentGuide.background#ffffff15
  • editorInfo.foreground#6394bf
  • editorInlayHint.background#181818
  • editorInlayHint.foreground#666666
  • editorLineNumber.activeForeground#ffffff
  • editorLineNumber.foreground#dedcd550
  • editorOverviewRuler.border#111
  • editorStickyScroll.background#1a1b1e
  • editorStickyScrollHover.background#181818
  • editorWarning.foreground#d4976c
  • editorWhitespace.foreground#ffffff15
  • editorWidget.background#2b2d30
  • errorForeground#cb7676
  • focusBorder#00000000
  • foreground#ffffff
  • gitDecoration.addedResourceForeground#4d9375
  • gitDecoration.conflictingResourceForeground#d4976c
  • gitDecoration.deletedResourceForeground#cb7676
  • gitDecoration.ignoredResourceForeground#dedcd550
  • gitDecoration.modifiedResourceForeground#6394bf
  • gitDecoration.submoduleResourceForeground#ffffff
  • gitDecoration.untrackedResourceForeground#5eaab5
  • input.background#181818
  • input.border#1e1f22
  • input.foreground#ffffff
  • input.placeholderForeground#ffffff
  • inputOption.activeBackground#dedcd550
  • list.activeSelectionBackground#181818a0
  • list.activeSelectionForeground#ffffff
  • list.focusBackground#181818a0
  • list.highlightForeground#3e7cf7
  • list.hoverBackground#181818a0
  • list.hoverForeground#ffffff
  • list.inactiveFocusBackground#2b2d30
  • list.inactiveSelectionBackground#181818a0
  • list.inactiveSelectionForeground#ffffff
  • menu.separatorBackground#1e1f22
  • notificationCenterHeader.background#2b2d30
  • notificationCenterHeader.foreground#959da5
  • notifications.background#2b2d30
  • notifications.border#1e1f22
  • notifications.foreground#ffffff
  • notificationsErrorIcon.foreground#cb7676
  • notificationsInfoIcon.foreground#6394bf
  • notificationsWarningIcon.foreground#d4976c
  • panel.background#1e1f22
  • panel.border#2b2d30
  • panelInput.border#2f363d
  • panelTitle.activeBorder#3e7cf7
  • panelTitle.activeForeground#ffffff
  • panelTitle.inactiveForeground#959da5
  • peekViewEditor.background#2b2d30
  • peekViewEditor.matchHighlightBackground#ffd33d33
  • peekViewResult.background#2b2d30
  • peekViewResult.matchHighlightBackground#ffd33d33
  • pickerGroup.border#1e1f22
  • pickerGroup.foreground#ffffff
  • problemsErrorIcon.foreground#cb7676
  • problemsInfoIcon.foreground#6394bf
  • problemsWarningIcon.foreground#d4976c
  • progressBar.background#3e7cf7
  • quickInput.background#2b2d30
  • quickInput.foreground#ffffff
  • quickInputList.focusBackground#181818
  • scrollbar.shadow#0000
  • scrollbarSlider.activeBackground#dedcd550
  • scrollbarSlider.background#dedcd510
  • scrollbarSlider.hoverBackground#dedcd550
  • settings.headerForeground#ffffff
  • settings.modifiedItemIndicator#3e7cf7
  • sideBar.background#2b2d30
  • sideBar.border#1e1f22
  • sideBar.foreground#ffffff
  • sideBarSectionHeader.background#2b2d30
  • sideBarSectionHeader.border#1e1f22
  • sideBarSectionHeader.foreground#ffffff
  • sideBarTitle.foreground#ffffff
  • statusBar.background#2b2d30
  • statusBar.border#1e1f22
  • statusBar.debuggingBackground#181818
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#ffffff
  • statusBar.noFolderBackground#2b2d30
  • statusBarItem.prominentBackground#181818
  • tab.activeBackground#1e1f22
  • tab.activeBorder#1e1f22
  • tab.activeBorderTop#ffffff
  • tab.activeForeground#ffffff
  • tab.border#1e1f22
  • tab.hoverBackground#181818
  • tab.inactiveBackground#2b2d30
  • tab.inactiveForeground#959da5
  • tab.unfocusedActiveBorder#1e1f22
  • tab.unfocusedActiveBorderTop#1e1f22
  • tab.unfocusedHoverBackground#2b2d30
  • terminal.ansiBlack#393a34
  • terminal.ansiBlue#6394bf
  • terminal.ansiBrightBlack#777777
  • terminal.ansiBrightBlue#6394bf
  • terminal.ansiBrightCyan#5eaab5
  • terminal.ansiBrightGreen#4d9375
  • terminal.ansiBrightMagenta#d9739f
  • terminal.ansiBrightRed#cb7676
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#e6cc77
  • terminal.ansiCyan#5eaab5
  • terminal.ansiGreen#4d9375
  • terminal.ansiMagenta#d9739f
  • terminal.ansiRed#cb7676
  • terminal.ansiWhite#dbd7ca
  • terminal.ansiYellow#e6cc77
  • terminal.foreground#ffffff
  • terminal.selectionBackground#eeeeee18
  • textBlockQuote.background#2b2d30
  • textBlockQuote.border#1e1f22
  • textCodeBlock.background#2b2d30
  • textLink.activeForeground#3e7cf7
  • textLink.foreground#3e7cf7
  • textPreformat.foreground#d1d5da
  • textSeparator.foreground#586069
  • titleBar.activeBackground#2b2d30
  • titleBar.activeForeground#ffffff
  • titleBar.border#181818
  • titleBar.inactiveBackground#2b2d30
  • titleBar.inactiveForeground#959da5
  • tree.indentGuidesStroke#2f363d
  • welcomePage.buttonBackground#2f363d
  • welcomePage.buttonHoverBackground#444d56

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, string.comment#8a9b8d
delimiter.bracket, delimiter, invalid.illegal.character-not-allowed-here.html, keyword.operator.rest, keyword.operator.spread, keyword.operator.type.annotation, keyword.operator.relational, keyword.operator.assignment, keyword.operator.type, meta.brace, meta.tag.block.any.html, meta.tag.inline.any.html, meta.tag.structure.input.void.html, meta.type.annotation, meta.embedded.block.github-actions-expression, storage.type.function.arrow, meta.objectliteral.ts, punctuation, punctuation.definition.string.begin.html.vue, punctuation.definition.string.end.html.vue#7f7f7f
constant, entity.name.constant, variable.language, meta.definition.variable#e0a88e
entity, entity.name#99bf7d
variable.parameter.function#ffffff
entity.name.tag, tag.html#5fb08d
entity.name.function#99bf7d
keyword, storage.type.class.jsdoc, punctuation.definition.template-expression#5fb08d
storage, storage.type, support.type.builtin, constant.language.undefined, constant.language.null, constant.language.import-export-all.ts#e38e8e
text.html.derivative, storage.modifier.package, storage.modifier.import, storage.type.java#ffffff
string, string punctuation.section.embedded source, attribute.value#e1a195
punctuation.definition.string#e1a19577
punctuation.support.type.property-name#d1c17d77
support#d1c17d
property, meta.property-name, meta.object-literal.key, entity.name.tag.yaml, attribute.name#d1c17d
entity.other.attribute-name, invalid.deprecated.entity.other.attribute-name.html#d4b083
variable, identifier#d4b083
support.type.primitive, entity.name.type#76c1ac
namespace#f4a1b2
keyword.operator, keyword.operator.assignment.compound, meta.var.expr.ts#e38e8e
invalid.broken#fdaeb7italic
invalid.deprecated#fdaeb7italic
invalid.illegal#fdaeb7italic
invalid.unimplemented#fdaeb7italic
carriage-return#24292eitalic underline
message.error#fdaeb7
string variable#e1a195
source.regexp, string.regexp#dc8867
string.regexp.character-class, string.regexp constant.character.escape, string.regexp source.ruby.embedded, string.regexp string.regexp.arbitrary-repitition#e1a195
string.regexp constant.character.escape#ffdf8f
support.constant#e0a88e
keyword.operator.quantifier.regexp, constant.numeric, number#5fb0a9
keyword.other.unit#e38e8e
constant.language.boolean, constant.language#5fb08d
meta.module-reference#3474f0
punctuation.definition.list.begin.markdown#edaf84
markup.heading, markup.heading entity.name#3474f0bold
markup.quote#76b1c1
markup.italic#ffffffitalic
markup.bold#ffffffbold
markup.raw#3474f0
markup.deleted, meta.diff.header.from-file, punctuation.definition.deleted#fdaeb7
markup.inserted, meta.diff.header.to-file, punctuation.definition.inserted#85e89d
markup.changed, punctuation.definition.changed#ffab70
markup.ignored, markup.untracked#2f363d
meta.diff.range#b392f0bold
meta.diff.header#79b8ff
meta.separator#79b8ffbold
meta.output#79b8ff
brackethighlighter.tag, brackethighlighter.curly, brackethighlighter.round, brackethighlighter.square, brackethighlighter.angle, brackethighlighter.quote#d1d5da
brackethighlighter.unmatched#fdaeb7
constant.other.reference.link, string.other.link, punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown#e1a195
markup.underline.link.markdown, markup.underline.link.image.markdown#ffffffunderline
type.identifier, constant.other.character-class.regexp#8189c3
entity.other.attribute-name.html.vue#99bf7d
invalid.illegal.unrecognized-tag.htmlnormal
ThemeDatabase All Themes by enes ozturk - VS Code Theme