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#4d94b2
  • 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#4d94b2
  • button.foreground#0f0f0f
  • button.hoverBackground#4d94b2
  • 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#abb0b2
  • editorBracketHighlight.foreground2#abb0b2
  • editorBracketHighlight.foreground3#abb0b2
  • editorBracketHighlight.foreground4#abb0b2
  • editorBracketHighlight.foreground5#abb0b2
  • editorBracketHighlight.foreground6#abb0b2
  • editorBracketMatch.background#4d937520
  • editorError.foreground#c46a6a
  • editorGroup.border#141414
  • editorGroupHeader.tabsBackground#0f0f0f
  • editorGroupHeader.tabsBorder#141414
  • editorGutter.addedBackground#48a96b
  • editorGutter.commentRangeForeground#d5dbde50
  • editorGutter.deletedBackground#c46a6a
  • editorGutter.foldingControlForeground#d5dbde90
  • editorGutter.modifiedBackground#4099bf
  • editorHint.foreground#48a96b
  • editorInfo.foreground#4099bf
  • editorInlayHint.background#161616
  • editorInlayHint.foreground#abb0b2
  • editorLineNumber.activeForeground#aab8bf
  • editorLineNumber.foreground#d5dbde50
  • editorOverviewRuler.border#000
  • editorStickyScroll.background#161616
  • editorStickyScrollHover.background#161616
  • editorWarning.foreground#c17b42
  • editorWhitespace.foreground#ffffff15
  • editorWidget.background#0f0f0f
  • errorForeground#c46a6a
  • focusBorder#00000000
  • foreground#ccd6dbee
  • gitDecoration.addedResourceForeground#48a96b
  • gitDecoration.conflictingResourceForeground#c17b42
  • gitDecoration.deletedResourceForeground#c46a6a
  • gitDecoration.ignoredResourceForeground#d5dbde50
  • gitDecoration.modifiedResourceForeground#4099bf
  • gitDecoration.submoduleResourceForeground#d5dbde90
  • gitDecoration.untrackedResourceForeground#2ca2b3
  • 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#4d94b2
  • 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#c46a6a
  • notificationsInfoIcon.foreground#4099bf
  • notificationsWarningIcon.foreground#c17b42
  • panel.background#0f0f0f
  • panel.border#141414
  • panelInput.border#171717
  • panelTitle.activeBorder#4d94b2
  • 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#c46a6a
  • problemsInfoIcon.foreground#4099bf
  • problemsWarningIcon.foreground#c17b42
  • progressBar.background#4d94b2
  • 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#4d94b2
  • 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#4099bf
  • terminal.ansiBrightBlack#777777
  • terminal.ansiBrightBlue#4099bf
  • terminal.ansiBrightCyan#2ca2b3
  • terminal.ansiBrightfuchsia#bb71c6
  • terminal.ansiBrightGreen#48a96b
  • terminal.ansiBrightRed#c46a6a
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#be9f24
  • terminal.ansiCyan#2ca2b3
  • terminal.ansifuchsia#bb71c6
  • terminal.ansiGreen#48a96b
  • terminal.ansiRed#c46a6a
  • terminal.ansiWhite#dbd7ca
  • terminal.ansiYellow#be9f24
  • terminal.foreground#ccd6dbee
  • terminal.selectionBackground#eeeeee24
  • textBlockQuote.background#0f0f0f
  • textBlockQuote.border#141414
  • textCodeBlock.background#0f0f0f
  • textLink.activeForeground#4d94b2
  • textLink.foreground#4d94b2
  • 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#768085dd
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#abb0b2
constant, entity.name.constant, variable.language, meta.definition.variable#c16b98
entity, entity.name#329d8f
variable.parameter.function#ccd6dbee
entity.name.tag, tag.html#4d94b2
entity.name.function#329d8f
keyword, storage.type.class.jsdoc, punctuation.definition.template-expression#4d94b2
storage, storage.type, support.type.builtin, constant.language.undefined, constant.language.null, constant.language.import-export-all.ts#a178ca
text.html.derivative, storage.modifier.package, storage.modifier.import, storage.type.java#ccd6dbee
string, string punctuation.section.embedded source, attribute.value#bd976a
punctuation.definition.string#bd976a77
punctuation.support.type.property-name#4d94b277
support#4d94b2
property, meta.property-name, meta.object-literal.key, entity.name.tag.yaml, attribute.name#4d94b2
entity.other.attribute-name, invalid.deprecated.entity.other.attribute-name.html#c16b98
variable, identifier#c16b98
support.type.primitive, entity.name.type#529f6e
namespace#529f6e
keyword.operator, keyword.operator.assignment.compound, meta.var.expr.ts#a178ca
invalid.broken#fca5a5italic
invalid.deprecated#fca5a5italic
invalid.illegal#fca5a5italic
invalid.unimplemented#fca5a5italic
carriage-return#0a0a0aitalic underline
message.error#fca5a5
string variable#bd976a
source.regexp, string.regexp#bb7373
string.regexp.character-class, string.regexp constant.character.escape, string.regexp source.ruby.embedded, string.regexp string.regexp.arbitrary-repetition#bd976a
string.regexp constant.character.escape#be9f24
support.constant#c16b98
keyword.operator.quantifier.regexp, constant.numeric, number#668cba
keyword.other.unit#a178ca
constant.language.boolean, constant.language#668cba
meta.module-reference#4d94b2
punctuation.definition.list.begin.markdown#c17b42
markup.heading, markup.heading entity.name#4d94b2bold
markup.quote#529f6e
markup.italic#ccd6dbeeitalic
markup.bold#ccd6dbeebold
markup.raw#4d94b2
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#bd976a
markup.underline.link.markdown, markup.underline.link.image.markdown#d5dbde90underline
type.identifier, constant.other.character-class.regexp#529f6e
entity.other.attribute-name.html.vue#329d8f
invalid.illegal.unrecognized-tag.html
Waver Theme by luojiahai - VS Code Theme