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#e5b358
  • activityBar.background#13171D
  • activityBar.border#13171D
  • activityBar.foreground#B3B1ADBF
  • activityBar.inactiveForeground#4d556699
  • activityBarBadge.background#E9B95A
  • activityBarBadge.foreground#13171D
  • badge.background#E9B95A33
  • badge.foreground#E9B95A
  • button.background#E9B95A
  • button.foreground#13171D
  • button.hoverBackground#e1af4b
  • debugExceptionWidget.background#13171D
  • debugExceptionWidget.border#13171D
  • debugIcon.breakpointDisabledForeground#62C6FF
  • debugIcon.breakpointForeground#E9B95A
  • debugToolBar.background#13171D
  • descriptionForeground#4d5566
  • diffEditor.insertedTextBackground#c2d94c26
  • diffEditor.removedTextBackground#f2966826
  • dropdown.background#13171D
  • dropdown.border#2b303a
  • dropdown.foreground#4d5566
  • editor.background#13171D
  • editor.findMatchBackground#13171D
  • editor.findMatchBorder#E9B95A
  • editor.findMatchHighlightBackground#E9B95A0d
  • editor.findMatchHighlightBorder#E9B95ABE
  • editor.findRangeHighlightBackground#1b2733f2
  • editor.findRangeHighlightBorder#13171D00
  • editor.foreground#b3b1ad
  • editor.inactiveSelectionBackground#1b2733f2
  • editor.lineHighlightBackground#0A1018
  • editor.rangeHighlightBackground#13171D
  • editor.selectionBackground#1E2A3A
  • editor.selectionHighlightBackground#1b2733f2
  • editor.selectionHighlightBorder#304357
  • editor.wordHighlightBackground#6994bf12
  • editor.wordHighlightBorder#6994bf80
  • editor.wordHighlightStrongBackground#91b36212
  • editor.wordHighlightStrongBorder#91b36280
  • editorBracketMatch.background#4d55664d
  • editorBracketMatch.border#4d556699
  • editorCodeLens.foreground#626a73
  • editorCursor.foreground#E9B95A
  • editorGroup.border#0A1018
  • editorGroupHeader.noTabsBackground#13171D
  • editorGroupHeader.tabsBackground#13171D
  • editorGroupHeader.tabsBorder#13171D
  • editorGutter.addedBackground#91b36299
  • editorGutter.deletedBackground#d96c7599
  • editorGutter.modifiedBackground#6994bf99
  • editorHoverWidget.background#13171D
  • editorHoverWidget.border#000000
  • editorIndentGuide.activeBackground#4d5566b3
  • editorIndentGuide.background#4d556666
  • editorInfo.foreground#00000000
  • editorInlayHint.foreground#626A73
  • editorLineNumber.activeForeground#B3B1ADCC
  • editorLineNumber.foreground#B3B1AD80
  • editorLink.activeForeground#E9B95A
  • editorMarkerNavigation.background#13171D
  • editorOverviewRuler.addedForeground#91b36299
  • editorOverviewRuler.border#0A1018
  • editorOverviewRuler.deletedForeground#d96c7599
  • editorOverviewRuler.errorForeground#ff3333
  • editorOverviewRuler.modifiedForeground#6994bf99
  • editorOverviewRuler.warningForeground#E9B95A
  • editorRuler.foreground#4d556666
  • editorSuggestWidget.background#13171D
  • editorSuggestWidget.border#13171D
  • editorSuggestWidget.highlightForeground#e5b358
  • editorSuggestWidget.selectedBackground#1c2a42
  • editorWhitespace.foreground#4d556699
  • editorWidget.background#13171D
  • editorWidget.border#13171D
  • editorWidget.resizeBorder#13171D
  • errorForeground#FF9A50
  • extensionButton.prominentBackground#E9B95A
  • extensionButton.prominentForeground#13171D
  • extensionButton.prominentHoverBackground#e1af4b
  • focusBorder#13171D
  • foreground#B3B1AD
  • gitDecoration.addedResourceForeground#c2d94c
  • gitDecoration.conflictingResourceForeground#ff0000
  • gitDecoration.deletedResourceForeground#d96c75b3
  • gitDecoration.ignoredResourceForeground#373d49
  • gitDecoration.modifiedResourceForeground#d4cb68
  • gitDecoration.submoduleResourceForeground#ffee99b3
  • gitDecoration.untrackedResourceForeground#91b362b3
  • icon.foreground#B3B1AD
  • input.background#13171D
  • input.border#13171D
  • input.foreground#B3B1AD
  • input.placeholderForeground#B3B1AD80
  • inputOption.activeBorder#E9B95A
  • inputValidation.errorBackground#13171D
  • inputValidation.errorBorder#FF9A50
  • inputValidation.infoBackground#13171D
  • inputValidation.infoBorder#62C6FF
  • inputValidation.warningBackground#13171D
  • inputValidation.warningBorder#E9B95A
  • list.activeSelectionBackground#13171D
  • list.activeSelectionForeground#E9B95A
  • list.errorForeground#FF9A50
  • list.filterMatchBackground#E9B95A0d
  • list.filterMatchBorder#E9B95A
  • list.focusAndSelectionOutline#13171D
  • list.focusBackground#13171D
  • list.focusForeground#4d5566
  • list.highlightForeground#E9B95A
  • list.hoverBackground#13171D
  • list.hoverForeground#B3B1AD
  • list.inactiveSelectionBackground#13171D
  • list.inactiveSelectionForeground#4d5566
  • list.invalidItemForeground#414856
  • listFilterWidget.background#13171D
  • listFilterWidget.noMatchesOutline#FF9A50
  • listFilterWidget.outline#E9B95A
  • panel.background#13171D
  • panel.border#13171D
  • panelSectionHeader.foreground#B3B1AD
  • panelTitle.activeBorder#E9B95A
  • panelTitle.activeForeground#B3B1AD
  • panelTitle.inactiveForeground#4d5566
  • peekView.border#13171D
  • peekViewEditor.background#13171D
  • peekViewEditor.matchHighlightBackground#E9B95A33
  • peekViewResult.background#13171D
  • peekViewResult.fileForeground#4d5566
  • peekViewResult.matchHighlightBackground#E9B95A33
  • peekViewTitle.background#13171D
  • peekViewTitleDescription.foreground#4d5566
  • peekViewTitleLabel.foreground#4d5566
  • pickerGroup.border#13171D
  • pickerGroup.foreground#373d49
  • progressBar.background#E9B95A
  • quickInput.background#13171D
  • quickInput.foreground#B3B1ADBF
  • quickInputList.focusBackground#13171D
  • quickInputList.focusForeground#e5b358
  • scrollbar.shadow#13171D
  • scrollbarSlider.activeBackground#4d5566b3
  • scrollbarSlider.background#4d556666
  • scrollbarSlider.hoverBackground#4d556699
  • selection.background#1E2A3Afd
  • settings.headerForeground#b3b1ad
  • settings.modifiedItemIndicator#6994bf
  • sideBar.background#13171D
  • sideBar.border#13171D
  • sideBar.foreground#B3B1ADBF
  • sideBarSectionHeader.background#13171D
  • sideBarSectionHeader.border#13171D
  • sideBarSectionHeader.foreground#B3B1ADBF
  • sideBarTitle.foreground#13171D
  • statusBar.background#13171D
  • statusBar.border#13171D
  • statusBar.debuggingBackground#f29668
  • statusBar.debuggingForeground#13171D
  • statusBar.foreground#4d5566
  • statusBar.noFolderBackground#13171D
  • statusBarItem.activeBackground#0A1018
  • statusBarItem.hoverBackground#0A1018
  • statusBarItem.prominentBackground#0A1018
  • statusBarItem.prominentHoverBackground#00000030
  • tab.activeBackground#13171D
  • tab.activeBorder#E9B95A
  • tab.activeForeground#b3b1ad
  • tab.border#13171D
  • tab.inactiveBackground#13171D
  • tab.inactiveForeground#4d5566
  • tab.unfocusedActiveBorder#4d5566
  • tab.unfocusedActiveForeground#4d5566
  • tab.unfocusedInactiveForeground#4d5566
  • terminal.ansiBlack#0A1018
  • terminal.ansiBlue#53bdfa
  • terminal.ansiBrightBlack#686868
  • terminal.ansiBrightBlue#62C6FF
  • terminal.ansiBrightCyan#95e6cb
  • terminal.ansiBrightGreen#c2d94c
  • terminal.ansiBrightMagenta#ffee99
  • terminal.ansiBrightRed#f07178
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#ffb454
  • terminal.ansiCyan#90e1c6
  • terminal.ansiGreen#91b362
  • terminal.ansiMagenta#fae994
  • terminal.ansiRed#ea6c73
  • terminal.ansiWhite#c7c7c7
  • terminal.ansiYellow#f9af4f
  • terminal.background#13171D
  • terminal.foreground#b3b1ad
  • textBlockQuote.background#13171D
  • textLink.activeForeground#E9B95A
  • textLink.foreground#E9B95A
  • textPreformat.foreground#b3b1ad
  • titleBar.activeBackground#13171D
  • titleBar.activeForeground#B3B1AD
  • titleBar.border#13171D
  • titleBar.inactiveBackground#13171D
  • titleBar.inactiveForeground#B3B1AD
  • tree.indentGuidesStroke#4d5566b3
  • walkThrough.embeddedEditorBackground#13171D
  • widget.shadow#13171D

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.block.documentation storage.type.class, comment.block.documentation storage.type, comment.block.documentation storage, comment.block.documentation keyword.other#626A73italic
string, constant.other.symbol, constant.character.escape, string.quoted invalid.illegal.newline, markup.quote meta.paragraph#C2D94C—
constant.numeric, constant.language, support.constant, constant.other.color, string.unquoted.html#E9B95A—
keyword, keyword.operator, storage.modifier, support.macro, storage.type.function, storage.type.class, punctuation.definition.decorator, punctuation.definition.annotation, punctuation.decorator, punctuation.separator.continuation.line, punctuation.separator.annotation.result, constant.character.escape.line-continuation.c, storage.type.struct.c, storage.type.enum.c, storage.type.union.c, meta.method.declaration storage.type, meta.var.expr storage.type, meta.interface storage.type.interface, storage.type.enum.ts, meta.type.declaration storage.type.type, punctuation.definition.attribute, punctuation.brackets.attribute, storage.type.rust, punctuation.separator.other.ruby, storage.type.function-type.lisp, punctuation.definition.storage.type.objc, punctuation.definition.keyword.objc, storage.type.alias.shell, entity.name.section.markdown, punctuation.definition.tag.begin, punctuation.definition.tag.end, source.toml support.type.property-name.table, source.toml support.type.property-name.array, entity.name.section.group-title, support.function.target.PHONY, storage.type.namespace.cs, storage.type.record.cs, storage.type.var.cs, storage.type.accessor.get.cs, storage.type.accessor.set.cs, storage.type.accessor.init.cs, storage.type.delegate.cs, storage.type.enum.cs, storage.type.struct.cs, storage.type.interface.cs, storage.type.event.cs, storage.type.operator.cs#FF9A50—
meta.definition entity.name.function, meta.definition support.function, meta.function.definition entity.name.function, meta.function.python entity.name.function, meta.function.python support.function, meta.function.python support.variable, meta.function.python variable.legacy, meta.macro.rules entity.name.function.macro.rust, meta.function.method entity.name.function, meta.function.php entity.name.function, entity.name.function.go, meta.function.type-declaration entity.name.function, entity.other.keyframe-offset, meta.at-rule entity.name.function, meta.at-rule support.function, meta.function entity.name.function.shell, entity.name.function.lisp, meta.function entity.name.function.objc, meta.function entity.name.function.name-of-parameter.objc, markup.inline.raw.string, entity.other.attribute-name, entity.name.function.target.makefile#FFB454—
meta.class entity.name.type, entity.name.type.struct, entity.name.type.trait, support.class.dart, meta.module entity.name.type.module, meta.declaration storage.type.haskell, meta.type.declaration entity.name.type.alias, meta.interface entity.name.type.interface, entity.name.type.enum.ts, entity.name.type.lisp, meta.interface-or-protocol entity.name.type.objc, entity.name.type.class.cs, entity.name.type.interface.cs, entity.name.type.struct.cs, entity.name.type.alias.cs, entity.name.type.enum.cs, entity.name.tag.css, meta.link.inline string.other.link.title, meta.image.inline string.other.link.description#62C6FF—
storage.modifier.import, storage.modifier.package, entity.name.type.package, entity.name.function.support, entity.name.function.decorator, meta.function.decorator support.type, invalid, keyword.operator.key-value, keyword.operator.access.dot, keyword.operator.namespace, source.cs keyword.type, string.template meta.template, meta.class entity.name.type.module.js, meta.type.annotation entity.name.type, meta.return.type entity.name.type, meta.type.parameters entity.name.type, keyword.operator.type.annotation.ts, source.css support.constant, source.css meta.at-rule support.function, support.type.property-name, entity.name.tag.yaml, string.quoted.double.attribute-value, constant.language.symbol, constant.other.symbol.hashkey, meta.method-call.static keyword.operator, keyword.operator.return-value.php, keyword.operator.class.php, keyword.constant.lisp, source.objc keyword.other.property, source.editorconfig keyword.other.definition, source.ini punctuation.definition.entity, keyword.other.definition.ini, string.unquoted.argument.shell, string.interpolated.dollar.shell, source.shell string.unquoted.argument#B3B1AD—
markup.italic—italic
markup.bold—bold
markup.strikethrough—strikethrough