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#4d9999
  • activityBar.background#0f0f0f
  • activityBar.border#141414
  • activityBar.foreground#ccd6dbee
  • activityBar.inactiveForeground#d5dbde50
  • activityBarBadge.background#aab8bf
  • activityBarBadge.foreground#0f0f0f
  • badge.background#d5dbde90
  • badge.foreground#0f0f0f
  • breadcrumb.activeSelectionForeground#eeeeee24
  • breadcrumb.background#161616
  • breadcrumb.focusForeground#ccd6dbee
  • breadcrumb.foreground#737373
  • breadcrumbPicker.background#0f0f0f
  • button.background#4d9999
  • button.foreground#0f0f0f
  • button.hoverBackground#4d9999
  • checkbox.background#161616
  • checkbox.border#171717
  • debugToolBar.background#0f0f0f
  • descriptionForeground#d5dbde90
  • diffEditor.insertedTextBackground#4d937550
  • diffEditor.removedTextBackground#ab595950
  • dropdown.background#0f0f0f
  • dropdown.border#141414
  • dropdown.foreground#ccd6dbee
  • dropdown.listBackground#161616
  • editor.background#0f0f0f
  • editor.findMatchBackground#e6cc7722
  • editor.findMatchHighlightBackground#e6cc7744
  • editor.focusedStackFrameHighlightBackground#b808
  • editor.foldBackground#eeeeee10
  • editor.foreground#ccd6dbee
  • editor.inactiveSelectionBackground#eeeeee16
  • editor.lineHighlightBackground#161616
  • editor.selectionBackground#eeeeee24
  • editor.selectionHighlightBackground#eeeeee16
  • editor.stackFrameHighlightBackground#a707
  • editor.wordHighlightBackground#1c6b4805
  • editor.wordHighlightStrongBackground#1c6b4810
  • editorBracketHighlight.foreground1#999999
  • editorBracketHighlight.foreground2#999999
  • editorBracketHighlight.foreground3#999999
  • editorBracketHighlight.foreground4#999999
  • editorBracketHighlight.foreground5#999999
  • editorBracketHighlight.foreground6#999999
  • editorBracketMatch.background#4d937520
  • editorError.foreground#bf6073
  • editorGroup.border#141414
  • editorGroupHeader.tabsBackground#0f0f0f
  • editorGroupHeader.tabsBorder#141414
  • editorGutter.addedBackground#4d9974
  • editorGutter.commentRangeForeground#d5dbde50
  • editorGutter.deletedBackground#bf6073
  • editorGutter.foldingControlForeground#d5dbde90
  • editorGutter.modifiedBackground#5996b3
  • editorHint.foreground#4d9974
  • editorInfo.foreground#5996b3
  • editorInlayHint.background#161616
  • editorInlayHint.foreground#999999
  • editorLineNumber.activeForeground#aab8bf
  • editorLineNumber.foreground#d5dbde50
  • editorOverviewRuler.border#000
  • editorStickyScroll.background#161616
  • editorStickyScrollHover.background#161616
  • editorWarning.foreground#bf8660
  • editorWhitespace.foreground#ffffff15
  • editorWidget.background#0f0f0f
  • errorForeground#bf6073
  • focusBorder#00000000
  • foreground#ccd6dbee
  • gitDecoration.addedResourceForeground#4d9974
  • gitDecoration.conflictingResourceForeground#bf8660
  • gitDecoration.deletedResourceForeground#bf6073
  • gitDecoration.ignoredResourceForeground#d5dbde50
  • gitDecoration.modifiedResourceForeground#5996b3
  • gitDecoration.submoduleResourceForeground#d5dbde90
  • gitDecoration.untrackedResourceForeground#4d9999
  • input.background#161616
  • input.border#141414
  • input.foreground#ccd6dbee
  • input.placeholderForeground#d5dbde90
  • inputOption.activeBackground#d5dbde50
  • list.activeSelectionBackground#161616
  • list.activeSelectionForeground#ccd6dbee
  • list.focusBackground#161616
  • list.highlightForeground#4d9999
  • list.hoverBackground#161616
  • list.hoverForeground#ccd6dbee
  • list.inactiveFocusBackground#0f0f0f
  • list.inactiveSelectionBackground#161616
  • list.inactiveSelectionForeground#ccd6dbee
  • menu.separatorBackground#141414
  • notificationCenterHeader.background#0f0f0f
  • notificationCenterHeader.foreground#737373
  • notifications.background#0f0f0f
  • notifications.border#141414
  • notifications.foreground#ccd6dbee
  • notificationsErrorIcon.foreground#bf6073
  • notificationsInfoIcon.foreground#5996b3
  • notificationsWarningIcon.foreground#bf8660
  • panel.background#0f0f0f
  • panel.border#141414
  • panelInput.border#171717
  • panelTitle.activeBorder#4d9999
  • panelTitle.activeForeground#ccd6dbee
  • panelTitle.inactiveForeground#737373
  • peekViewEditor.background#0f0f0f
  • peekViewEditor.matchHighlightBackground#ffd33d33
  • peekViewResult.background#0f0f0f
  • peekViewResult.matchHighlightBackground#ffd33d33
  • pickerGroup.border#141414
  • pickerGroup.foreground#ccd6dbee
  • problemsErrorIcon.foreground#bf6073
  • problemsInfoIcon.foreground#5996b3
  • problemsWarningIcon.foreground#bf8660
  • progressBar.background#4d9999
  • quickInput.background#0f0f0f
  • quickInput.foreground#ccd6dbee
  • quickInputList.focusBackground#161616
  • scrollbar.shadow#0000
  • scrollbarSlider.activeBackground#d5dbde50
  • scrollbarSlider.background#d5dbde10
  • scrollbarSlider.hoverBackground#d5dbde50
  • settings.headerForeground#ccd6dbee
  • settings.modifiedItemIndicator#4d9999
  • sideBar.background#0f0f0f
  • sideBar.border#141414
  • sideBar.foreground#aab8bf
  • sideBarSectionHeader.background#0f0f0f
  • sideBarSectionHeader.border#141414
  • sideBarSectionHeader.foreground#ccd6dbee
  • sideBarTitle.foreground#ccd6dbee
  • statusBar.background#0f0f0f
  • statusBar.border#141414
  • statusBar.debuggingBackground#161616
  • statusBar.debuggingForeground#aab8bf
  • statusBar.foreground#aab8bf
  • statusBar.noFolderBackground#0f0f0f
  • statusBarItem.prominentBackground#161616
  • tab.activeBackground#0f0f0f
  • tab.activeBorder#141414
  • tab.activeBorderTop#d5dbde90
  • tab.activeForeground#ccd6dbee
  • tab.border#141414
  • tab.hoverBackground#161616
  • tab.inactiveBackground#0f0f0f
  • tab.inactiveForeground#737373
  • tab.unfocusedActiveBorder#141414
  • tab.unfocusedActiveBorderTop#141414
  • tab.unfocusedHoverBackground#0f0f0f
  • terminal.ansiBlack#35393b
  • terminal.ansiBlue#5996b3
  • terminal.ansiBrightBlack#777777
  • terminal.ansiBrightBlue#5996b3
  • terminal.ansiBrightCyan#4d9999
  • terminal.ansiBrightGreen#4d9974
  • terminal.ansiBrightMagenta#bf73ac
  • terminal.ansiBrightRed#bf6073
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#bfac60
  • terminal.ansiCyan#4d9999
  • terminal.ansiGreen#4d9974
  • terminal.ansiMagenta#bf73ac
  • terminal.ansiRed#bf6073
  • terminal.ansiWhite#dbd7ca
  • terminal.ansiYellow#bfac60
  • terminal.foreground#ccd6dbee
  • terminal.selectionBackground#eeeeee24
  • textBlockQuote.background#0f0f0f
  • textBlockQuote.border#141414
  • textCodeBlock.background#0f0f0f
  • textLink.activeForeground#4d9999
  • textLink.foreground#4d9999
  • textPreformat.foreground#a3a3a3
  • textSeparator.foreground#404040
  • titleBar.activeBackground#0f0f0f
  • titleBar.activeForeground#aab8bf
  • titleBar.border#161616
  • titleBar.inactiveBackground#0f0f0f
  • titleBar.inactiveForeground#737373
  • tree.indentGuidesStroke#171717

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, string.comment#666666
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#999999
constant, entity.name.constant, variable.language, meta.definition.variable#bfac60
entity, entity.name#5996b3
variable.parameter.function#ccd6dbee
entity.name.tag, tag.html#4d9999
entity.name.function#5996b3
keyword, storage.type.class.jsdoc, punctuation.definition.template-expression#4d9999
storage, storage.type, support.type.builtin, constant.language.undefined, constant.language.null, constant.language.import-export-all.ts#bf6073
text.html.derivative, storage.modifier.package, storage.modifier.import, storage.type.java#ccd6dbee
string, string punctuation.section.embedded source, attribute.value#bf8660
punctuation.definition.string#bf866077
punctuation.support.type.property-name#4d999977
support#4d9999
property, meta.property-name, meta.object-literal.key, entity.name.tag.yaml, attribute.name#4d9999
entity.other.attribute-name, invalid.deprecated.entity.other.attribute-name.html#bfac60
variable, identifier#bfac60
support.type.primitive, entity.name.type#4d9974
namespace#4d9974
keyword.operator, keyword.operator.assignment.compound, meta.var.expr.ts#bf6073
invalid.broken#fca5a5italic
invalid.deprecated#fca5a5italic
invalid.illegal#fca5a5italic
invalid.unimplemented#fca5a5italic
carriage-return#0a0a0aitalic underline
message.error#fca5a5
string variable#bf8660
source.regexp, string.regexp#bf6073
string.regexp.character-class, string.regexp constant.character.escape, string.regexp source.ruby.embedded, string.regexp string.regexp.arbitrary-repetition#bf8660
string.regexp constant.character.escape#bfac60
support.constant#bfac60
keyword.operator.quantifier.regexp, constant.numeric, number#bf73ac
keyword.other.unit#bf6073
constant.language.boolean, constant.language#bf73ac
meta.module-reference#4d9999
punctuation.definition.list.begin.markdown#bf8660
markup.heading, markup.heading entity.name#4d9999bold
markup.quote#4d9974
markup.italic#ccd6dbeeitalic
markup.bold#ccd6dbeebold
markup.raw#4d9999
markup.deleted, meta.diff.header.from-file, punctuation.definition.deleted#fca5a5
markup.inserted, meta.diff.header.to-file, punctuation.definition.inserted#4ade80
markup.changed, punctuation.definition.changed#fb923c
markup.ignored, markup.untracked#171717
meta.diff.range#c084fcbold
meta.diff.header#60a5fa
meta.separator#60a5fabold
meta.output#60a5fa
brackethighlighter.tag, brackethighlighter.curly, brackethighlighter.round, brackethighlighter.square, brackethighlighter.angle, brackethighlighter.quote#a3a3a3
brackethighlighter.unmatched#fca5a5
constant.other.reference.link, string.other.link, punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown#bf8660
markup.underline.link.markdown, markup.underline.link.image.markdown#d5dbde90underline
type.identifier, constant.other.character-class.regexp#4d9974
entity.other.attribute-name.html.vue#5996b3
invalid.illegal.unrecognized-tag.html