Skip to main content
Coding Theme

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#dd6f5b
  • activityBar.background#1b212a
  • activityBar.border#24292f
  • activityBar.foreground#dee6ef
  • activityBar.inactiveForeground#58616b
  • activityBarBadge.background#0f69d0
  • activityBarBadge.foreground#dcdeea
  • badge.background#0e3c71
  • badge.foreground#bcd3ef
  • breadcrumb.activeSelectionForeground#dce3ec
  • breadcrumb.focusForeground#dee6ef
  • breadcrumb.foreground#88919a
  • breadcrumbPicker.background#2b3036
  • button.background#135d25
  • button.foreground#cef2d6
  • button.hoverBackground#135d25
  • button.secondaryBackground#32383f
  • button.secondaryForeground#dcdeea
  • button.secondaryHoverBackground#3a4148
  • checkbox.background#32383f
  • checkbox.border#24292f
  • debugToolBar.background#2b3036
  • descriptionForeground#88919a
  • diffEditor.insertedTextBackground#28a74530
  • diffEditor.removedTextBackground#d73a4930
  • dropdown.background#20252b
  • dropdown.border#24292f
  • dropdown.foreground#dee6ef
  • dropdown.listBackground#1b212a
  • editor.background#1b212a
  • editor.findMatchBackground#ddb63644
  • editor.findMatchHighlightBackground#ddb63622
  • editor.focusedStackFrameHighlightBackground#2b6a3033
  • editor.foldBackground#2a303615
  • editor.foreground#dee6ef
  • editor.inactiveSelectionBackground#1763b922
  • editor.lineHighlightBackground#2b3036
  • editor.linkedEditingBackground#1763b922
  • editor.selectionBackground#1763b944
  • editor.selectionHighlightBackground#17E5E633
  • editor.selectionHighlightBorder#17E5E600
  • editor.stackFrameHighlightBackground#C6902625
  • editor.wordHighlightBackground#17E5E600
  • editor.wordHighlightBorder#17E5E699
  • editor.wordHighlightStrongBackground#17E5E600
  • editor.wordHighlightStrongBorder#17E5E666
  • editorBracketHighlight.foreground1#619ee3
  • editorBracketHighlight.foreground2#d4864e
  • editorBracketHighlight.foreground3#bba0ec
  • editorBracketHighlight.foreground4#619ee3
  • editorBracketHighlight.foreground5#d4864e
  • editorBracketHighlight.foreground6#bba0ec
  • editorBracketMatch.background#17E5E650
  • editorBracketMatch.border#17E5E600
  • editorCursor.foreground#bcd3ef
  • editorError.foreground#e67070
  • editorGroup.border#24292f
  • editorGroupHeader.tabsBackground#181d21
  • editorGroupHeader.tabsBorder#24292f
  • editorGutter.addedBackground#28a745
  • editorGutter.deletedBackground#852932
  • editorGutter.modifiedBackground#2188ff
  • editorIndentGuide.activeBackground#32383f
  • editorIndentGuide.background#20252b
  • editorLineNumber.activeForeground#dee6ef
  • editorLineNumber.foreground#32383f
  • editorOverviewRuler.border#24292f
  • editorUnnecessaryCode.border#eb6e7a
  • editorUnnecessaryCode.opacity#00000030
  • editorWarning.foreground#b5a348
  • editorWhitespace.foreground#32383f
  • editorWidget.background#181d21
  • errorForeground#eb6e7a
  • focusBorder#768799
  • foreground#dce3ec
  • gitDecoration.addedResourceForeground#34d058
  • gitDecoration.conflictingResourceForeground#d4864e
  • gitDecoration.deletedResourceForeground#852932
  • gitDecoration.ignoredResourceForeground#58616b
  • gitDecoration.modifiedResourceForeground#619ee3
  • gitDecoration.submoduleResourceForeground#58616b
  • gitDecoration.untrackedResourceForeground#34d058
  • input.background#20252b
  • input.border#24292f
  • input.foreground#dee6ef
  • input.placeholderForeground#88919a
  • list.activeSelectionBackground#2c353e
  • list.activeSelectionForeground#dee6ef
  • list.focusBackground#0e3c71
  • list.hoverBackground#262f37
  • list.hoverForeground#dee6ef
  • list.inactiveFocusBackground#13202d
  • list.inactiveSelectionBackground#262f37
  • list.inactiveSelectionForeground#dee6ef
  • notificationCenterHeader.background#1b212a
  • notificationCenterHeader.foreground#88919a
  • notifications.background#20252b
  • notifications.border#24292f
  • notifications.foreground#dee6ef
  • notificationsErrorIcon.foreground#852932
  • notificationsInfoIcon.foreground#619ee3
  • notificationsWarningIcon.foreground#d4864e
  • panel.background#181d21
  • panel.border#24292f
  • panelInput.border#20252b
  • panelTitle.activeBorder#dd6f5b
  • panelTitle.activeForeground#dee6ef
  • panelTitle.inactiveForeground#88919a
  • peekViewEditor.background#181d2188
  • peekViewEditor.matchHighlightBackground#ddb63633
  • peekViewResult.background#181d21
  • peekViewResult.matchHighlightBackground#ddb63633
  • pickerGroup.border#32383f
  • pickerGroup.foreground#dee6ef
  • progressBar.background#044895
  • quickInput.background#1b212a
  • quickInput.foreground#dee6ef
  • scrollbar.shadow#0008
  • scrollbarSlider.activeBackground#58616b88
  • scrollbarSlider.background#58616b33
  • scrollbarSlider.hoverBackground#58616b44
  • settings.headerForeground#dee6ef
  • settings.modifiedItemIndicator#0f69d0
  • sideBar.background#181d21
  • sideBar.border#24292f
  • sideBar.foreground#dce3ec
  • sideBarSectionHeader.background#181d21
  • sideBarSectionHeader.border#24292f
  • sideBarSectionHeader.foreground#dee6ef
  • sideBarTitle.foreground#dee6ef
  • statusBar.background#1b212a
  • statusBar.border#24292f
  • statusBar.debuggingBackground#560f03
  • statusBar.debuggingForeground#dcdeea
  • statusBar.foreground#dce3ec
  • statusBar.noFolderBackground#1b212a
  • statusBarItem.prominentBackground#262f37
  • statusBarItem.remoteBackground#1b212a
  • statusBarItem.remoteForeground#dce3ec
  • tab.activeBackground#1b212a
  • tab.activeBorder#1b212a
  • tab.activeBorderTop#dd6f5b
  • tab.activeForeground#dee6ef
  • tab.border#24292f
  • tab.hoverBackground#1b212a
  • tab.inactiveBackground#181d21
  • tab.inactiveForeground#88919a
  • tab.unfocusedActiveBorder#1b212a
  • tab.unfocusedActiveBorderTop#24292f
  • tab.unfocusedHoverBackground#1b212a
  • terminal.ansiBlack#0d1117
  • terminal.ansiBlue#77bdfb
  • terminal.ansiBrightBlack#665C54
  • terminal.ansiBrightBlue#77bdfb
  • terminal.ansiBrightCyan#a2d2fb
  • terminal.ansiBrightGreen#7ce38b
  • terminal.ansiBrightMagenta#cea5fb
  • terminal.ansiBrightRed#fa7970
  • terminal.ansiBrightWhite#FDF4C1
  • terminal.ansiBrightYellow#faa356
  • terminal.ansiCyan#a2d2fb
  • terminal.ansiGreen#7ce38b
  • terminal.ansiMagenta#cea5fb
  • terminal.ansiRed#fa7970
  • terminal.ansiWhite#c6cdd5
  • terminal.ansiYellow#faa356
  • terminal.background#0d1117
  • terminal.foreground#c6cdd5
  • terminalCursor.background#c6cdd5
  • terminalCursor.foreground#c6cdd5
  • textBlockQuote.background#1b212a
  • textBlockQuote.border#32383f
  • textCodeBlock.background#20252b
  • textLink.activeForeground#bcd3ef
  • textLink.foreground#619ee3
  • textPreformat.foreground#dce3ec
  • textSeparator.foreground#3a4148
  • titleBar.activeBackground#1b212a
  • titleBar.activeForeground#dee6ef
  • titleBar.border#24292f
  • titleBar.inactiveBackground#181d21
  • titleBar.inactiveForeground#88919a
  • tree.indentGuidesStroke#20252b

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, string.comment#58616b
constant, entity.name.constant, variable.other.constant, variable.other.enummember, variable.language#e67070
variable.other.constant#dce3ec
meta.brace.round, meta.objectliteral, meta.array.literal, meta.objectliteral, meta.block, meta.section.editorconfig#dce3ec
meta.object.member#e67070
entity, meta.function-call#bba0ec
entity.name.function#bba0ec
entity, entity.name.function.member#bba0ec
entity.name.function.member#bba0ec
variable.parameter.function#dce3ec
constant.numeric.decimal#619ee3
entity.name.tag#49B965
keyword#e67070
storage, storage.type#e67070
storage.modifier.package, storage.modifier.import, storage.type.java#dee6ef
string, punctuation.definition.string, string punctuation.section.embedded source#96bdea
support.class.component.html#E67070
punctuation.definition.typeparameters.begin, punctuation.definition.typeparameters.end#E67070
support.type.primitive, support.type.builtin#E67070
support.type.property-name.json#619ee3
string.quoted.double.json, punctuation.definition.string.begin.json.comments, punctuation.definition.string.end.json.comments, punctuation.definition.string.begin.json, punctuation.definition.string.end.json, support.function.go, support.function.builtin.go#d4864e
meta.property-name#619ee3
variable#d4864e
variable.other#dee6ef
variable.other.readwrite.alias#bba0ec
variable.parameter, variable.other.object, keyword.map.go#d4864e
invalid.broken#fdaeb7italic
invalid.deprecated#fdaeb7italic
invalid.illegal#fdaeb7italic
invalid.unimplemented#fdaeb7italic
carriage-return#1b212aitalic underline
message.error#fdaeb7
string variable#619ee3
source.regexp, string.regexp#dbedff
string.regexp.character-class, string.regexp constant.character.escape, string.regexp source.ruby.embedded, string.regexp string.regexp.arbitrary-repitition#dbedff
string.regexp constant.character.escape#85e89dbold
support.constant#619ee3
support.variable#619ee3
meta.module-reference#619ee3
punctuation.definition.list.begin.markdown#d4864e
markup.heading, markup.heading entity.name#619ee3bold
markup.quote#85e89d
markup.italic#dee6efitalic
markup.bold#dee6efbold
markup.underlineunderline
markup.strikethroughstrikethrough
markup.inline.raw#619ee3
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#d4864e
markup.ignored, markup.untracked#20252b
meta.diff.range#bba0ecbold
meta.diff.header#619ee3
meta.separator#619ee3bold
meta.output#619ee3
brackethighlighter.tag, brackethighlighter.curly, brackethighlighter.round, brackethighlighter.square, brackethighlighter.angle, brackethighlighter.quote#dce3ec
brackethighlighter.unmatched#fdaeb7
constant.other.reference.link, string.other.link#dbedffunderline
Bzt Dark by Bzt Dark - VS Code Theme