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#a75e50
  • activityBar.background#1F1F1F
  • activityBar.border#282929
  • activityBar.foreground#9fabb1
  • activityBar.inactiveForeground#58656c
  • activityBarBadge.background#57b084
  • activityBarBadge.foreground#3B4043
  • badge.background#57b084
  • badge.foreground#3B4043
  • breadcrumb.activeSelectionForeground#d6dfe4
  • breadcrumb.background#232424
  • breadcrumb.focusForeground#9fabb1
  • breadcrumb.foreground#58656c
  • breadcrumbPicker.background#1F1F1F
  • button.background#a75e50
  • button.foreground#d6dfe4
  • button.hoverBackground#ba6d5e
  • button.secondaryBackground#333637
  • button.secondaryHoverBackground#3B4043
  • checkbox.background#a75e50
  • checkbox.border#00000000
  • debugToolBar.background#1F1F1F
  • descriptionForeground#9fabb1
  • diffEditor.insertedTextBackground#46a47530
  • diffEditor.removedTextBackground#c1656530
  • dropdown.background#232424
  • dropdown.border#333637
  • dropdown.foreground#9fabb1
  • dropdown.listBackground#232424
  • editor.background#1F1F1F
  • editor.findMatchBackground#3B4043
  • editor.findMatchHighlightBackground#a75e5050
  • editor.focusedStackFrameHighlightBackground#d4af6f
  • editor.foldBackground#232424
  • editor.foreground#9fabb1
  • editor.inactiveSelectionBackground#181818
  • editor.lineHighlightBackground#232424
  • editor.lineHighlightBorder#00000000
  • editor.linkedEditingBackground#181818
  • editor.selectionBackground#333637
  • editor.selectionHighlightBackground#333637
  • editor.stackFrameHighlightBackground#d4af6f
  • editor.wordHighlightBackground#00000000
  • editor.wordHighlightBorder#3B4043
  • editor.wordHighlightStrongBackground#00000000
  • editor.wordHighlightStrongBorder#4c5358
  • editorBracketHighlight.foreground1#8092d2
  • editorBracketHighlight.foreground2#d06678
  • editorBracketHighlight.foreground3#3d9b93
  • editorBracketHighlight.unexpectedBracket.foreground#9fabb1
  • editorBracketMatch.background#333637
  • editorBracketMatch.border#3B4043
  • editorCursor.foreground#9fabb1
  • editorError.foreground#c16565
  • editorGroup.border#282929
  • editorGroupHeader.tabsBackground#1F1F1F
  • editorGroupHeader.tabsBorder#282929
  • editorGutter.addedBackground#46a475
  • editorGutter.deletedBackground#c16565
  • editorGutter.modifiedBackground#5696c4
  • editorHint.foreground#46a475
  • editorIndentGuide.activeBackground#3B4043
  • editorIndentGuide.background#282929
  • editorInfo.foreground#5696c4
  • editorInlayHint.background#5696c430
  • editorInlayHint.foreground#9fabb1
  • editorLineNumber.activeForeground#9fabb1
  • editorLineNumber.foreground#3B4043
  • editorOverviewRuler.border#282929
  • editorWarning.foreground#d4af6f
  • editorWhitespace.foreground#3B4043
  • editorWidget.background#1F1F1F
  • errorForeground#c16565
  • focusBorder#00000000
  • foreground#9fabb1
  • gitDecoration.addedResourceForeground#46a475
  • gitDecoration.conflictingResourceForeground#d78b7b
  • gitDecoration.deletedResourceForeground#c16565
  • gitDecoration.ignoredResourceForeground#58656c
  • gitDecoration.modifiedResourceForeground#5696c4
  • gitDecoration.renamedResourceForeground#8bc7a9
  • gitDecoration.stageDeletedResourceForeground#c7a18f
  • gitDecoration.submoduleResourceForeground#ff0000
  • gitDecoration.untrackedResourceForeground#46a475
  • icon.foreground#9fabb1
  • input.background#232424
  • input.border#333637
  • input.foreground#9fabb1
  • input.placeholderForeground#58656c
  • keybindingLabel.background#333637
  • keybindingLabel.border#3B4043
  • keybindingLabel.bottomBorder#333637
  • keybindingLabel.foreground#9fabb1
  • list.activeSelectionBackground#333637
  • list.activeSelectionForeground#d6dfe4
  • list.focusBackground#181818
  • list.focusForeground#9fabb1
  • list.highlightForeground#83dbaf
  • list.hoverBackground#232424
  • list.hoverForeground#d6dfe4
  • list.inactiveFocusBackground#1F1F1F
  • list.inactiveSelectionBackground#232424
  • list.inactiveSelectionForeground#9fabb1
  • minimapSlider.activeBackground#3B404390
  • minimapSlider.background#3B404350
  • minimapSlider.hoverBackground#3B404370
  • notificationCenterHeader.background#1F1F1F
  • notificationCenterHeader.foreground#9fabb1
  • notifications.background#1F1F1F
  • notifications.border#282929
  • notifications.foreground#9fabb1
  • notificationsErrorIcon.foreground#c16565
  • notificationsInfoIcon.foreground#5696c4
  • notificationsWarningIcon.foreground#d78b7b
  • panel.background#1F1F1F
  • panel.border#282929
  • panelInput.border#333637
  • panelTitle.activeBorder#a75e50
  • panelTitle.activeForeground#d6dfe4
  • panelTitle.inactiveForeground#9fabb1
  • peekView.border#3B4043
  • peekViewEditor.background#1F1F1F
  • peekViewEditor.matchHighlightBackground#333637
  • peekViewResult.background#1F1F1F
  • peekViewResult.fileForeground#9fabb1
  • peekViewResult.matchHighlightBackground#3B4043
  • peekViewResult.selectionBackground#232424
  • pickerGroup.border#282929
  • pickerGroup.foreground#d6dfe4
  • progressBar.background#333637
  • quickInput.background#1F1F1F
  • quickInput.foreground#9fabb1
  • scrollbar.shadow#00000000
  • scrollbarSlider.activeBackground#3B404390
  • scrollbarSlider.background#3B404350
  • scrollbarSlider.hoverBackground#3B404370
  • settings.headerForeground#9fabb1
  • settings.modifiedItemIndicator#d78b7b
  • sideBar.background#1F1F1F
  • sideBar.border#282929
  • sideBar.foreground#9fabb1
  • sideBarSectionHeader.background#1F1F1F
  • sideBarSectionHeader.border#282929
  • sideBarSectionHeader.foreground#9fabb1
  • sideBarTitle.foreground#9fabb1
  • statusBar.background#1F1F1F
  • statusBar.border#282929
  • statusBar.debuggingBackground#1F1F1F
  • statusBar.debuggingForeground#9fabb1
  • statusBar.focusBorder#00000000
  • statusBar.foreground#9fabb1
  • statusBar.noFolderBackground#1F1F1F
  • statusBarItem.activeBackground#333637
  • statusBarItem.focusBorder#333637
  • statusBarItem.hoverBackground#232424
  • statusBarItem.prominentBackground#1F1F1F
  • statusBarItem.remoteBackground#1F1F1F
  • statusBarItem.remoteForeground#9fabb1
  • tab.activeBackground#232424
  • tab.activeBorder#282929
  • tab.activeBorderTop#a75e50
  • tab.activeForeground#9fabb1
  • tab.border#282929
  • tab.hoverBackground#232424
  • tab.inactiveBackground#1F1F1F
  • tab.inactiveForeground#9fabb1
  • tab.unfocusedActiveBorder#333637
  • tab.unfocusedActiveBorderTop#ba6d5e
  • tab.unfocusedHoverBackground#232424
  • terminal.ansiBlack#181818
  • terminal.ansiBlue#2e6e9c
  • terminal.ansiBrightBlack#232424
  • terminal.ansiBrightBlue#5696c4
  • terminal.ansiBrightCyan#53b8b0
  • terminal.ansiBrightGreen#46a475
  • terminal.ansiBrightMagenta#9a88d2
  • terminal.ansiBrightRed#c16565
  • terminal.ansiBrightWhite#d6dfe4
  • terminal.ansiBrightYellow#d4af6f
  • terminal.ansiCyan#2b9088
  • terminal.ansiGreen#1e7c4d
  • terminal.ansiMagenta#7260aa
  • terminal.ansiRed#993d3d
  • terminal.ansiWhite#d6dfe4
  • terminal.ansiYellow#ac8747
  • terminal.foreground#9fabb1
  • textBlockQuote.background#1F1F1F
  • textBlockQuote.border#282929
  • textCodeBlock.background#333637
  • textLink.activeForeground#83dbaf
  • textLink.foreground#57b084
  • textPreformat.foreground#d6dfe4
  • textSeparator.foreground#9fabb1
  • titleBar.activeBackground#1F1F1F
  • titleBar.activeForeground#9fabb1
  • titleBar.border#282929
  • titleBar.inactiveBackground#1F1F1F
  • titleBar.inactiveForeground#58656c
  • tree.indentGuidesStroke#282929
  • welcomePage.buttonBackground#a75e50
  • welcomePage.buttonHoverBackground#ba6d5e

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, string.comment#67747c
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, 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, keyword.operator.type, meta.objectliteral.ts, punctuation#67747c
constant, entity.name.constant, variable.language, meta.definition.variable, variable.other.constant, support.constant, entity.name.type.svelte, entity.other.attribute-name.html.vue#3d9b93
entity, entity.name, entity.name.function, meta.style, entity.name.type.class, support.class.component, meta.property-value#d28677
variable.parameter.function, text.html.derivative, storage.modifier.package, storage.modifier.import, storage.type.java#9fabb1
entity.name.tag, tag.html, keyword, storage.type.class.jsdoc#bb6473
storage, storage.type, support.type.builtin, constant.language.undefined, constant.language.null, keyword.other.unit, entity.other.attribute-name.class.css#d06678
string, string punctuation.section.embedded source, attribute.value, punctuation.definition.string, string variable, string.regexp.character-class, string.regexp constant.character.escape, string.regexp source.ruby.embedded, string.regexp string.regexp.arbitrary-repitition, constant.other.reference.link, string.other.link, punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown#ce8694
invalid.deprecated.entity.other.attribute-name.html, variable, identifier#67b397
punctuation.support.type.property-name, support.type.property-name, property, meta.property-name, meta.object-literal.key, entity.name.tag.yaml, attribute.name, variable.other.property, entity.other.attribute-name#c7a18f
parameter, variable.parameter, support.constant.property-value.css#cb979a
support.type.primitive, entity.name.type, support.function.misc#8092d2
namespace, entity.name.namespace#9a88d2
keyword.operator.assignment.compound, meta.var.expr.ts#bfbfbf
invalid.brokenitalic
invalid.deprecateditalic
invalid.illegalitalic
invalid.unimplementeditalic
carriage-returnitalic underline
message.error
source.regexp, string.regexp#bfbfbf
string.regexp constant.character.escape
constant.numeric, number#85be8f
constant.language.boolean, constant.language#66abc7
meta.module-reference
punctuation.definition.list.begin.markdown
markup.heading, markup.heading entity.namebold
markup.quote#9a88d2
markup.italic#9fabb1italic
markup.bold#9fabb1bold
markup.raw
markup.deleted, meta.diff.header.from-file, punctuation.definition.deleted
markup.inserted, meta.diff.header.to-file, punctuation.definition.inserted
markup.changed, punctuation.definition.changed
markup.ignored, markup.untracked
meta.diff.rangebold
meta.diff.header
meta.separatorbold
meta.output
brackethighlighter.tag, brackethighlighter.curly, brackethighlighter.round, brackethighlighter.square, brackethighlighter.angle, brackethighlighter.quote
brackethighlighter.unmatched
markup.underline.link.markdownunderline
type.identifier#bb6473
invalid.illegal.unrecognized-tag.htmlnormal