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#e8402c
  • activityBar.background#2e3133
  • activityBar.border#4a4d4c
  • activityBar.foreground#e89279
  • activityBar.inactiveForeground#9a9c96
  • activityBarBadge.background#e8402c
  • activityBarBadge.foreground#ffffff
  • badge.background#e8402c
  • badge.foreground#ffffff
  • breadcrumb.activeSelectionForeground#e89279
  • breadcrumb.focusForeground#f2b8a2
  • breadcrumb.foreground#9a9c96
  • breadcrumbPicker.background#232627
  • button.background#e8402c
  • button.foreground#ffffff
  • button.hoverBackground#f25a45
  • button.secondaryBackground#3a3d3e
  • button.secondaryForeground#e89279
  • button.secondaryHoverBackground#4a4d4c
  • checkbox.background#232627
  • checkbox.border#4a4d4c
  • debugConsole.errorForeground#ff6e4a
  • debugConsole.infoForeground#9a9c96
  • debugConsole.sourceForeground#f2cf85
  • debugConsole.warningForeground#f2cf85
  • debugConsoleInputIcon.foreground#a9d3ea
  • debugIcon.breakpointForeground#ff6e4a
  • debugTokenExpression.boolean#f2cf85
  • debugTokenExpression.error#ff6e4a
  • debugTokenExpression.name#7fb3d5
  • debugTokenExpression.number#f2cf85
  • debugTokenExpression.string#ded9cf
  • debugTokenExpression.value#ded9cf
  • debugToolBar.background#232627
  • descriptionForeground#9a9c96
  • diffEditor.insertedLineBackground#6fc3d226
  • diffEditor.insertedTextBackground#6fc3d24d
  • diffEditor.removedLineBackground#ff6e4a26
  • diffEditor.removedTextBackground#ff6e4a4d
  • dropdown.background#232627
  • dropdown.border#4a4d4c
  • dropdown.foreground#e89279
  • dropdown.listBackground#232627
  • editor.background#2e3133
  • editor.findMatchBackground#b7621f
  • editor.findMatchHighlightBackground#f2cf8566
  • editor.focusedStackFrameHighlightBackground#7fb3d540
  • editor.foldBackground#4a4d4c33
  • editor.foreground#e89279
  • editor.lineHighlightBackground#4a4d4c40
  • editor.linkedEditingBackground#e8402c12
  • editor.selectionBackground#e8927940
  • editor.selectionHighlightBackground#e8927933
  • editor.stackFrameHighlightBackground#f2cf8540
  • editor.wordHighlightBackground#4a4d4c80
  • editor.wordHighlightBorder#4a4d4c99
  • editor.wordHighlightStrongBackground#4a4d4c4d
  • editor.wordHighlightStrongBorder#4a4d4c99
  • editorBracketHighlight.foreground1#e89279
  • editorBracketHighlight.foreground2#7fb3d5
  • editorBracketHighlight.foreground3#f2cf85
  • editorBracketHighlight.foreground4#a9d3ea
  • editorBracketHighlight.foreground5#ded9cf
  • editorBracketHighlight.foreground6#ff6e4a
  • editorBracketHighlight.unexpectedBracket.foreground#9a9c96
  • editorBracketMatch.background#e8402c33
  • editorBracketMatch.border#e8402c99
  • editorCursor.foreground#e8402c
  • editorGroup.border#4a4d4c
  • editorGroupHeader.border#0d1117
  • editorGroupHeader.noTabsBackground#0d1117
  • editorGroupHeader.tabsBackground#0d1117
  • editorGroupHeader.tabsBorder#0d1117
  • editorGutter.addedBackground#6fc3d266
  • editorGutter.deletedBackground#ff6e4a66
  • editorGutter.modifiedBackground#f2cf8566
  • editorIndentGuide.activeBackground#e892793d
  • editorIndentGuide.background#e892791f
  • editorInlayHint.background#4a4d4c33
  • editorInlayHint.foreground#9a9c96
  • editorInlayHint.paramBackground#4a4d4c33
  • editorInlayHint.paramForeground#9a9c96
  • editorInlayHint.typeBackground#4a4d4c33
  • editorInlayHint.typeForeground#9a9c96
  • editorLineNumber.activeForeground#e89279
  • editorLineNumber.foreground#7d8078
  • editorOverviewRuler.border#1a1c1d
  • editorWhitespace.foreground#5a5d5c
  • editorWidget.background#232627
  • errorForeground#ff6e4a
  • focusBorder#e8402c
  • foreground#e89279
  • gitDecoration.addedResourceForeground#6fc3d2
  • gitDecoration.conflictingResourceForeground#ff6e4a
  • gitDecoration.deletedResourceForeground#ff6e4a
  • gitDecoration.ignoredResourceForeground#8b938d
  • gitDecoration.modifiedResourceForeground#f2cf85
  • gitDecoration.submoduleResourceForeground#9a9c96
  • gitDecoration.untrackedResourceForeground#6fc3d2
  • icon.foreground#9a9c96
  • input.background#1f2223
  • input.border#4a4d4c
  • input.foreground#e89279
  • input.placeholderForeground#7d8078
  • keybindingLabel.foreground#e89279
  • list.activeSelectionBackground#4a4d4c99
  • list.activeSelectionForeground#f2b8a2
  • list.focusBackground#e8402c26
  • list.focusForeground#f2b8a2
  • list.highlightForeground#e8402c
  • list.hoverBackground#4a4d4c33
  • list.hoverForeground#f2b8a2
  • list.inactiveFocusBackground#e8402c1a
  • list.inactiveSelectionBackground#4a4d4c66
  • list.inactiveSelectionForeground#e89279
  • minimapSlider.activeBackground#9a9c9647
  • minimapSlider.background#9a9c9633
  • minimapSlider.hoverBackground#9a9c963d
  • notificationCenterHeader.background#232627
  • notificationCenterHeader.foreground#9a9c96
  • notifications.background#232627
  • notifications.border#4a4d4c
  • notifications.foreground#e89279
  • notificationsErrorIcon.foreground#ff6e4a
  • notificationsInfoIcon.foreground#7fb3d5
  • notificationsWarningIcon.foreground#f2cf85
  • panel.background#2e3133
  • panel.border#4a4d4c
  • panelInput.border#4a4d4c
  • panelTitle.activeBorder#e8402c
  • panelTitle.activeForeground#f2b8a2
  • panelTitle.inactiveForeground#9a9c96
  • peekViewEditor.background#4a4d4c1a
  • peekViewEditor.matchHighlightBackground#f2cf8566
  • peekViewResult.background#1f2223
  • peekViewResult.matchHighlightBackground#f2cf8566
  • pickerGroup.border#4a4d4c
  • pickerGroup.foreground#9a9c96
  • progressBar.background#e8402c
  • quickInput.background#232627
  • quickInput.foreground#e89279
  • scrollbar.shadow#1a1c1d33
  • scrollbarSlider.activeBackground#9a9c9647
  • scrollbarSlider.background#9a9c9633
  • scrollbarSlider.hoverBackground#9a9c963d
  • settings.headerForeground#f2b8a2
  • settings.modifiedItemIndicator#e8402c99
  • sideBar.background#2e3133
  • sideBar.border#4a4d4c
  • sideBar.foreground#e89279
  • sideBarSectionHeader.background#272a2b
  • sideBarSectionHeader.border#4a4d4c
  • sideBarSectionHeader.foreground#e89279
  • sideBarTitle.background#000000
  • sideBarTitle.foreground#c9d1d9
  • statusBar.background#232627
  • statusBar.border#4a4d4c
  • statusBar.debuggingBackground#b7351f
  • statusBar.debuggingForeground#ffffff
  • statusBar.focusBorder#e8402c80
  • statusBar.foreground#9a9c96
  • statusBar.noFolderBackground#232627
  • statusBarItem.activeBackground#e8927933
  • statusBarItem.focusBorder#e8402c
  • statusBarItem.hoverBackground#e892791f
  • statusBarItem.prominentBackground#4a4d4c99
  • statusBarItem.remoteBackground#4a4d4c
  • statusBarItem.remoteForeground#ffffff
  • symbolIcon.arrayForeground#e89279
  • symbolIcon.booleanForeground#f2cf85
  • symbolIcon.classForeground#7fb3d5
  • symbolIcon.colorForeground#7fb3d5
  • symbolIcon.constantForeground#f2cf85
  • symbolIcon.constructorForeground#a9d3ea
  • symbolIcon.enumeratorForeground#7fb3d5
  • symbolIcon.enumeratorMemberForeground#f2cf85
  • symbolIcon.eventForeground#8b938d
  • symbolIcon.fieldForeground#e89279
  • symbolIcon.fileForeground#f2cf85
  • symbolIcon.folderForeground#f2cf85
  • symbolIcon.functionForeground#a9d3ea
  • symbolIcon.interfaceForeground#7fb3d5
  • symbolIcon.keyForeground#7fb3d5
  • symbolIcon.keywordForeground#ff6e4a
  • symbolIcon.methodForeground#a9d3ea
  • symbolIcon.moduleForeground#7fb3d5
  • symbolIcon.namespaceForeground#7fb3d5
  • symbolIcon.nullForeground#f2cf85
  • symbolIcon.numberForeground#f2cf85
  • symbolIcon.objectForeground#7fb3d5
  • symbolIcon.operatorForeground#ff6e4a
  • symbolIcon.packageForeground#7fb3d5
  • symbolIcon.propertyForeground#e89279
  • symbolIcon.referenceForeground#7fb3d5
  • symbolIcon.snippetForeground#7fb3d5
  • symbolIcon.stringForeground#ded9cf
  • symbolIcon.structForeground#7fb3d5
  • symbolIcon.textForeground#ded9cf
  • symbolIcon.typeParameterForeground#7fb3d5
  • symbolIcon.unitForeground#f2cf85
  • symbolIcon.variableForeground#e89279
  • tab.activeBackground#0d1117
  • tab.activeBorder#0d1117
  • tab.activeBorderTop#e8402c
  • tab.activeForeground#c9d1d9
  • tab.activeModifiedBorder#e8402c
  • tab.border#777777
  • tab.hoverBackground#0d1117
  • tab.hoverForeground#c9d1d9
  • tab.inactiveBackground#010409
  • tab.inactiveForeground#8b949e
  • tab.unfocusedActiveBorder#0d1117
  • tab.unfocusedActiveBorderTop#30363d
  • tab.unfocusedActiveForeground#8b949e
  • tab.unfocusedHoverBackground#6e76811a
  • terminal.ansiBlack#3a3d3e
  • terminal.ansiBlue#7fb3d5
  • terminal.ansiBrightBlack#8b938d
  • terminal.ansiBrightBlue#a9d3ea
  • terminal.ansiBrightCyan#7fc9d6
  • terminal.ansiBrightGreen#c7f2ee
  • terminal.ansiBrightMagenta#ddbcf0
  • terminal.ansiBrightRed#ff9482
  • terminal.ansiBrightWhite#f5f1e9
  • terminal.ansiBrightYellow#fae3ac
  • terminal.ansiCyan#4fa8b8
  • terminal.ansiGreen#9fe8e0
  • terminal.ansiMagenta#c99ae0
  • terminal.ansiRed#ff6e4a
  • terminal.ansiWhite#ded9cf
  • terminal.ansiYellow#f2cf85
  • terminal.foreground#e89279
  • textBlockQuote.background#1a1c1d
  • textBlockQuote.border#4a4d4c
  • textCodeBlock.background#4a4d4c66
  • textLink.activeForeground#a9d3ea
  • textLink.foreground#7fb3d5
  • textPreformat.background#4a4d4c66
  • textPreformat.foreground#f2b8a2
  • textSeparator.foreground#4a4d4c
  • titleBar.activeBackground#e8402c
  • titleBar.activeForeground#ffffff
  • titleBar.border#4a4d4c
  • titleBar.inactiveBackground#1a1c1d
  • titleBar.inactiveForeground#9a9c96
  • tree.indentGuidesStroke#4a4d4c
  • welcomePage.buttonBackground#3a3d3e
  • welcomePage.buttonHoverBackground#4a4d4c

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, string.comment#929a94
constant.other.placeholder, constant.character#f2cf85
constant, entity.name.constant, variable.other.constant, variable.other.enummember, variable.language, entity#f2cf85
entity.name, meta.export.default, meta.definition.variable#7fb3d5
variable.parameter.function, meta.jsx.children, meta.block, meta.tag.attributes, entity.name.constant, meta.object.member, meta.embedded.expression#e89279
entity.name.function#a9d3ea
entity.name.tag, support.class.component#ff6e4a
keyword#ff6e4a
storage, storage.type#ff6e4a
storage.modifier.package, storage.modifier.import, storage.type.java#e89279
string, string punctuation.section.embedded source#ded9cf
support#7fb3d5
meta.property-name#7fb3d5
variable#e89279
variable.other#e89279
invalid.broken#ff6e4a
invalid.deprecated#ff6e4a
invalid.illegal#ff6e4a
invalid.unimplemented#ff6e4a
carriage-return#f5f1e9underline
message.error#ff6e4a
string variable#7fb3d5
source.regexp, string.regexp#6fb3b0
string.regexp.character-class, string.regexp constant.character.escape, string.regexp source.ruby.embedded, string.regexp string.regexp.arbitrary-repitition#6fb3b0
string.regexp constant.character.escape#6fb3b0
support.constant#f2cf85
support.variable#7fb3d5
support.type.property-name.json#a9d3ea
meta.module-reference#7fb3d5
punctuation.definition.list.begin.markdown#ff6e4a
markup.heading, markup.heading entity.name#a9d3ea
markup.quote#ded9cf
markup.italic#e89279
markup.bold#e89279
markup.underlineunderline
markup.strikethroughstrikethrough
markup.inline.raw#7fb3d5
markup.deleted, meta.diff.header.from-file, punctuation.definition.deleted#ff6e4a
punctuation.section.embedded#ff6e4a
markup.inserted, meta.diff.header.to-file, punctuation.definition.inserted#a9d3ea
markup.changed, punctuation.definition.changed#f2cf85
markup.ignored, markup.untracked#2e3133
meta.diff.range#a9d3ea
meta.diff.header#7fb3d5
meta.separator#7fb3d5
meta.output#7fb3d5
brackethighlighter.tag, brackethighlighter.curly, brackethighlighter.round, brackethighlighter.square, brackethighlighter.angle, brackethighlighter.quote#9a9c96
brackethighlighter.unmatched#ff6e4a
constant.other.reference.link, string.other.link#7fb3d5
Berlin Postal Themes by Heiko Panjas - VS Code Theme