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#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