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#7E98AA
  • activityBar.background#151B1F
  • activityBar.border#2C383F
  • activityBar.foreground#A2B4BB
  • activityBar.inactiveForeground#687780
  • activityBarBadge.background#889CAA
  • activityBarBadge.foreground#182125
  • badge.background#889CAA
  • badge.foreground#182125
  • breadcrumb.activeSelectionForeground#BAC4C8
  • breadcrumb.background#181E22
  • breadcrumb.focusForeground#A4B4BF
  • breadcrumb.foreground#8B9BA3
  • breadcrumbPicker.background#1E272D
  • button.background#889CAA
  • button.foreground#182125
  • button.hoverBackground#9AADBB
  • checkbox.background#232C32
  • checkbox.border#526C74
  • debugToolBar.background#151B1F
  • descriptionForeground#98A6AD
  • diffEditor.diagonalFill#3C4D56
  • diffEditor.insertedTextBackground#95AD9D26
  • diffEditor.removedTextBackground#B18F9626
  • dropdown.background#232C32
  • dropdown.border#3C4D56
  • dropdown.foreground#AFB9BD
  • dropdown.listBackground#1E272D
  • editor.background#181E22
  • editor.findMatchBackground#576C7B80
  • editor.findMatchHighlightBackground#405B6466
  • editor.focusedStackFrameHighlightBackground#889CAA22
  • editor.foldBackground#232E3480
  • editor.foreground#AFB9BD
  • editor.lineHighlightBackground#1E262B
  • editor.selectionBackground#344952
  • editor.stackFrameHighlightBackground#91ABBE22
  • editor.wordHighlightBackground#405B6455
  • editor.wordHighlightStrongBackground#52647166
  • editorBracketHighlight.foreground1#4A5C64
  • editorBracketHighlight.foreground2#4A5C64
  • editorBracketHighlight.foreground3#4A5C64
  • editorBracketHighlight.foreground4#4A5C64
  • editorBracketHighlight.foreground5#4A5C64
  • editorBracketHighlight.foreground6#4A5C64
  • editorBracketHighlight.unexpectedBracket.foreground#B18F96
  • editorBracketMatch.background#70889933
  • editorBracketMatch.border#647887
  • editorCursor.foreground#A4B4BF
  • editorError.foreground#B18F96
  • editorGhostText.foreground#74858D
  • editorGroup.border#2C383F
  • editorGroupHeader.tabsBackground#171D21
  • editorGroupHeader.tabsBorder#2C383F
  • editorGutter.addedBackground#95AD9D
  • editorGutter.commentRangeForeground#526C74
  • editorGutter.deletedBackground#B18F96
  • editorGutter.foldingControlForeground#8B9BA3
  • editorGutter.modifiedBackground#91ABBE
  • editorHint.foreground#8FA2AF
  • editorHoverWidget.background#1E272D
  • editorHoverWidget.border#2C383F
  • editorHoverWidget.foreground#AFB9BD
  • editorHoverWidget.highlightForeground#A4B7C5
  • editorHoverWidget.statusBarBackground#1C2328
  • editorIndentGuide.activeBackground1#42535C
  • editorIndentGuide.background1#29343A
  • editorInfo.foreground#91ABBE
  • editorInlayHint.background#20292F
  • editorInlayHint.foreground#81939C
  • editorLineNumber.activeForeground#96A6AD
  • editorLineNumber.foreground#56636B
  • editorMultiCursor.primary.foreground#A4B4BF
  • editorMultiCursor.secondary.foreground#819DA4
  • editorOverviewRuler.border#2C383F
  • editorOverviewRuler.findMatchForeground#889CAA99
  • editorOverviewRuler.rangeHighlightForeground#526C7499
  • editorOverviewRuler.selectionHighlightForeground#819DA499
  • editorOverviewRuler.wordHighlightForeground#526C7499
  • editorOverviewRuler.wordHighlightStrongForeground#64788799
  • editorStickyScroll.background#181E22
  • editorStickyScrollHover.background#232E34
  • editorSuggestWidget.background#1E272D
  • editorSuggestWidget.border#2C383F
  • editorSuggestWidget.focusHighlightForeground#A4B7C5
  • editorSuggestWidget.foreground#AFB9BD
  • editorSuggestWidget.highlightForeground#99B9C9
  • editorSuggestWidget.selectedBackground#344952
  • editorSuggestWidget.selectedForeground#C0CCCF
  • editorSuggestWidgetStatus.foreground#98A6AD
  • editorWarning.foreground#B1AD91
  • editorWhitespace.foreground#29343A
  • editorWidget.background#1E272D
  • editorWidget.border#2C383F
  • editorWidget.foreground#AFB9BD
  • editorWidget.resizeBorder#526C74
  • errorForeground#B18F96
  • focusBorder#647887
  • foreground#AFB9BD
  • gitDecoration.addedResourceForeground#95AD9D
  • gitDecoration.conflictingResourceForeground#B1AD91
  • gitDecoration.deletedResourceForeground#B18F96
  • gitDecoration.ignoredResourceForeground#5C6B73
  • gitDecoration.modifiedResourceForeground#91ABBE
  • gitDecoration.submoduleResourceForeground#8B9BA3
  • gitDecoration.untrackedResourceForeground#8FA2AF
  • input.background#232C32
  • input.border#3C4D56
  • input.foreground#AFB9BD
  • input.placeholderForeground#819098
  • inputOption.activeBackground#344952
  • list.activeSelectionBackground#344952
  • list.activeSelectionForeground#C0CCCF
  • list.focusBackground#344952
  • list.focusForeground#C0CCCF
  • list.focusHighlightForeground#A4B7C5
  • list.highlightForeground#99B9C9
  • list.hoverBackground#232E34
  • list.hoverForeground#BAC4C8
  • list.inactiveFocusBackground#171D21
  • list.inactiveSelectionBackground#28353C
  • list.inactiveSelectionForeground#AFB9BD
  • menu.background#1E272D
  • menu.border#2C383F
  • menu.foreground#AFB9BD
  • menu.selectionBackground#344952
  • menu.separatorBackground#2C383F
  • minimap.background#171D21
  • minimapSlider.activeBackground#819DA470
  • minimapSlider.background#52636D50
  • minimapSlider.hoverBackground#6A828C66
  • notificationCenterHeader.background#1C2328
  • notificationCenterHeader.foreground#98A6AD
  • notifications.background#1E272D
  • notifications.border#2C383F
  • notifications.foreground#AFB9BD
  • notificationsErrorIcon.foreground#B18F96
  • notificationsInfoIcon.foreground#91ABBE
  • notificationsWarningIcon.foreground#B1AD91
  • panel.background#171D21
  • panel.border#2C383F
  • panelInput.border#2C383F
  • panelTitle.activeBorder#7E98AA
  • panelTitle.activeForeground#AFB9BD
  • panelTitle.inactiveForeground#7D8B93
  • peekView.border#526C74
  • peekViewEditor.background#1C2328
  • peekViewEditor.matchHighlightBackground#576C7B66
  • peekViewResult.background#1E272D
  • peekViewResult.matchHighlightBackground#576C7B66
  • peekViewResult.selectionBackground#344952
  • peekViewResult.selectionForeground#C0CCCF
  • pickerGroup.border#2C383F
  • pickerGroup.foreground#ADBEC8
  • problemsErrorIcon.foreground#B18F96
  • problemsInfoIcon.foreground#91ABBE
  • problemsWarningIcon.foreground#B1AD91
  • progressBar.background#889CAA
  • quickInput.background#1E272D
  • quickInput.foreground#AFB9BD
  • quickInputList.focusBackground#344952
  • quickInputList.focusForeground#C0CCCF
  • scrollbar.shadow#101619
  • scrollbarSlider.activeBackground#819DA470
  • scrollbarSlider.background#52636D50
  • scrollbarSlider.hoverBackground#6A828C66
  • settings.headerForeground#AFB9BD
  • settings.modifiedItemIndicator#91ABBE
  • sideBar.background#171D21
  • sideBar.border#2C383F
  • sideBar.foreground#98A6AD
  • sideBarSectionHeader.background#1C2328
  • sideBarSectionHeader.border#2C383F
  • sideBarSectionHeader.foreground#98A6AD
  • sideBarTitle.foreground#AFB9BD
  • statusBar.background#151B1F
  • statusBar.border#2C383F
  • statusBar.debuggingBackground#809EAF
  • statusBar.debuggingForeground#182125
  • statusBar.foreground#94A3AA
  • statusBar.noFolderBackground#151B1F
  • statusBarItem.prominentBackground#889CAA
  • statusBarItem.prominentForeground#182125
  • tab.activeBackground#181E22
  • tab.activeBorderTop#7E98AA
  • tab.activeForeground#BAC4C8
  • tab.border#2C383F
  • tab.hoverBackground#232E34
  • tab.inactiveBackground#171D21
  • tab.inactiveForeground#7D8B93
  • tab.unfocusedActiveBorder#526C74
  • tab.unfocusedActiveBorderTop#526C74
  • tab.unfocusedHoverBackground#232E34
  • terminal.ansiBlack#29343A
  • terminal.ansiBlue#91ABBE
  • terminal.ansiBrightBlack#77878F
  • terminal.ansiBrightBlue#A3BDCF
  • terminal.ansiBrightCyan#A1B4C1
  • terminal.ansiBrightGreen#A7BDAE
  • terminal.ansiBrightMagenta#B3B0C6
  • terminal.ansiBrightRed#C0A0A6
  • terminal.ansiBrightWhite#CBD3D6
  • terminal.ansiBrightYellow#C0BDA3
  • terminal.ansiCyan#8FA2AF
  • terminal.ansiGreen#95AD9D
  • terminal.ansiMagenta#A29FB5
  • terminal.ansiRed#B18F96
  • terminal.ansiWhite#B8C2C6
  • terminal.ansiYellow#B1AD91
  • terminal.background#171D21
  • terminal.foreground#AFB9BD
  • terminal.selectionBackground#405B6480
  • textBlockQuote.background#1E262B
  • textBlockQuote.border#526C74
  • textCodeBlock.background#1E262B
  • textLink.activeForeground#A3BDCF
  • textLink.foreground#91ABBE
  • textPreformat.foreground#A2B8AA
  • textSeparator.foreground#2C383F
  • titleBar.activeBackground#151B1F
  • titleBar.activeForeground#94A3AA
  • titleBar.border#2C383F
  • titleBar.inactiveBackground#151B1F
  • titleBar.inactiveForeground#74838B
  • tree.indentGuidesStroke#29343A

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#7D8E96italic
keyword, storage.type, storage.modifier#97AFC0
storage.modifier, keyword.operator.expression, storage.type.function.async#97AFC0italic
keyword.control#A1B8C7italic
punctuation, punctuation.separator, punctuation.terminator, punctuation.accessor, keyword.operator.type.annotation#4A5C64
punctuation.definition.bracket, punctuation.definition.parameters, punctuation.section.braces, punctuation.section.brackets, punctuation.section.parens#4A5C64
keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.relational, keyword.operator.bitwise, keyword.operator.increment, keyword.operator.decrement, keyword.operator.ternary#93A3AC
punctuation.definition.tag, punctuation.definition.tag.begin, punctuation.definition.tag.end, punctuation.section.embedded#4A5C64
string, string.regexp, constant.other.symbol, constant.other.key, entity.other.inherited-class#A2B8AA
constant.numeric, constant.language, constant.character, constant.escape, constant.character.escape, support.constant, keyword.other.unit#A5B4BE
entity.name.function, support.function, variable.function, keyword.other.special-method, entity.name.method.js, meta.class-method.js entity.name.function.js#ADBEC8
meta.function, meta.function-call, entity.name.class, entity.name.type, support.type, support.class, entity.name.module.js, support.type.sys-types#ADBEC8
string constant.other.placeholder#B6C2C6
variable.language, variable.import.parameter.js#ABBBC1italic
variable.parameter, entity.other.inherited-class#ABBBC1italic
meta.function-call.arguments#AFB9BD
variable.other.instance, variable.other.member, variable.other.object, variable.other.class, variable.other.constant, variable.other.readwrite, variable.other.go, variable.object, support.variable, entity.name.variable.instance, entity.name.variable.parameter#AFB9BD
variable.object.property, variable.other.object.property, variable.other.member.property, support.variable.property, entity.name.variable.property, support.type.property-name.css#A3B3B9
entity.other.attribute-name#9DA9B2
entity.name.tag, meta.tag.sgml#97AFC0
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#92A1ABitalic
invalid, invalid.illegal#B18F96
markup.inserted, markup.inserted.git_gutter#95AD9D
markup.deleted, markup.deleted.git_gutter#B18F96
markup.changed, markup.changed.git_gutter#91ABBE
url, link, uri#99B9C9underline
source.json meta.structure.dictionary.json support.type.property-name.json#97AFC0italic
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#ADBEC8
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#ADBEC8
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#91A5B0
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#9DAEA6
markup.heading, markup.heading.markdown punctuation.definition.heading.markdown#ADBEC8italic
markup.italic#B6C2C6italic
markup.underline#ADBEC8underline
markup.quote, markup.quote punctuation.definition.blockquote.markdown#8B9EAAitalic
string.other.link.title.markdown#99B9C9
string.other.link.description.title.markdown#A3B3B9
constant.other.reference.link.markdown#A5B4BE
text.html.markdown markup.inline.raw.markdown#A2B8AA
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown, variable.language.fenced.markdown#4A5C64
meta.separator#4A5C64
text.html.markdown, markup.table#AFB9BD
busan-night-mono by k010 - VS Code Theme