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#ff6b35
  • activityBar.background#120806
  • activityBar.border#2a1008
  • activityBar.foreground#ff6b35
  • activityBar.inactiveForeground#3a1a10
  • activityBarBadge.background#ef476f
  • activityBarBadge.foreground#ffffff
  • badge.background#ef476f
  • badge.foreground#ffffff
  • breadcrumb.activeSelectionForeground#ff6b35
  • breadcrumb.background#1a0e0a
  • breadcrumb.focusForeground#ef476f
  • breadcrumb.foreground#5a3020
  • breadcrumbPicker.background#150a06
  • button.background#ff6b35
  • button.foreground#ffffff
  • button.hoverBackground#ff8055
  • button.secondaryBackground#2a1008
  • button.secondaryForeground#f0d5c8
  • descriptionForeground#c8a898
  • diffEditor.insertedLineBackground#06d6a012
  • diffEditor.insertedTextBackground#06d6a020
  • diffEditor.removedLineBackground#ff4d6d12
  • diffEditor.removedTextBackground#ff4d6d20
  • disabledForeground#5a3020
  • dropdown.background#1f1008
  • dropdown.border#2a1008
  • dropdown.foreground#f0d5c8
  • editor.background#1a0e0a
  • editor.findMatchBackground#ffd16640
  • editor.findMatchBorder#ffd166
  • editor.findMatchHighlightBackground#ffd16622
  • editor.foldBackground#1f100855
  • editor.foreground#f0d5c8
  • editor.inactiveSelectionBackground#ff6b3518
  • editor.lineHighlightBackground#1f1008
  • editor.selectionBackground#ff6b3535
  • editor.wordHighlightBackground#ff6b3528
  • editorBracketHighlight.foreground1#ff6b35
  • editorBracketHighlight.foreground2#ef476f
  • editorBracketHighlight.foreground3#06d6a0
  • editorBracketHighlight.foreground4#ff8c42
  • editorBracketHighlight.foreground5#f9c5b0
  • editorBracketHighlight.foreground6#ffd166
  • editorBracketMatch.background#ff6b3528
  • editorBracketMatch.border#ff6b35
  • editorCodeLens.foreground#5a3020
  • editorCursor.foreground#ff6b35
  • editorError.foreground#ff4d6d
  • editorGhostText.foreground#5a3020
  • editorGroup.border#2a1008
  • editorGroupHeader.tabsBackground#120806
  • editorGroupHeader.tabsBorder#2a1008
  • editorGutter.addedBackground#06d6a0
  • editorGutter.background#1a0e0a
  • editorGutter.deletedBackground#ff4d6d
  • editorGutter.modifiedBackground#ffd166
  • editorHoverWidget.background#150a06
  • editorHoverWidget.border#2a1008
  • editorIndentGuide.activeBackground1#3a1a10
  • editorIndentGuide.background1#2a1008
  • editorInfo.foreground#ff6b35
  • editorInlayHint.background#1f1208
  • editorInlayHint.foreground#3a1a10
  • editorLineNumber.activeForeground#ff6b35
  • editorLineNumber.foreground#3a1a10
  • editorRuler.foreground#2a1008
  • editorStickyScroll.background#150a06
  • editorSuggestWidget.background#150a06
  • editorSuggestWidget.highlightForeground#ef476f
  • editorSuggestWidget.selectedBackground#2a1008
  • editorSuggestWidget.selectedForeground#ff6b35
  • editorWarning.foreground#ffd166
  • editorWhitespace.foreground#2a1008
  • editorWidget.background#150a06
  • editorWidget.border#2a1008
  • editorWidget.foreground#f0d5c8
  • errorForeground#ff4d6d
  • focusBorder#ff6b35
  • foreground#f0d5c8
  • gitDecoration.addedResourceForeground#06d6a0
  • gitDecoration.conflictingResourceForeground#ef476f
  • gitDecoration.deletedResourceForeground#ff4d6d
  • gitDecoration.ignoredResourceForeground#3a1a10
  • gitDecoration.modifiedResourceForeground#ffd166
  • gitDecoration.untrackedResourceForeground#ff8c42
  • icon.foreground#ef476f
  • input.background#1f1008
  • input.border#2a1008
  • input.foreground#f0d5c8
  • input.placeholderForeground#5a3020
  • inputValidation.errorBorder#ff4d6d
  • inputValidation.infoBorder#ff6b35
  • inputValidation.warningBorder#ffd166
  • list.activeSelectionBackground#2a1008
  • list.activeSelectionForeground#f0d5c8
  • list.activeSelectionIconForeground#ff6b35
  • list.errorForeground#ff4d6d
  • list.focusBackground#2a1008
  • list.highlightForeground#ff6b35
  • list.hoverBackground#1f1008
  • list.inactiveSelectionBackground#200e08
  • list.warningForeground#ffd166
  • minimap.background#150a06
  • minimap.errorHighlight#ff4d6d
  • minimap.selectionHighlight#ff6b3560
  • minimap.warningHighlight#ffd166
  • minimapSlider.activeBackground#ff6b3540
  • minimapSlider.background#ff6b3515
  • minimapSlider.hoverBackground#ff6b3525
  • panel.background#150a06
  • panel.border#2a1008
  • panelTitle.activeBorder#ff6b35
  • panelTitle.activeForeground#ff6b35
  • panelTitle.inactiveForeground#5a3020
  • peekView.border#ff6b35
  • peekViewEditor.background#150a0680
  • peekViewResult.background#150a06
  • peekViewTitle.background#100806
  • peekViewTitleLabel.foreground#ff6b35
  • progressBar.background#ff6b35
  • scrollbarSlider.activeBackground#ff6b3560
  • scrollbarSlider.background#ff6b3520
  • scrollbarSlider.hoverBackground#ff6b3540
  • selection.background#ff6b3540
  • sideBar.background#150a06
  • sideBar.border#2a1008
  • sideBar.foreground#c8a898
  • sideBarSectionHeader.background#1a0e08
  • sideBarSectionHeader.border#2a1008
  • sideBarSectionHeader.foreground#ff8c42
  • sideBarTitle.foreground#ff6b35
  • statusBar.background#7a2010
  • statusBar.border#2a1008
  • statusBar.debuggingBackground#ff4d6d
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#f0d5c8
  • statusBar.noFolderBackground#100806
  • statusBarItem.errorBackground#ff4d6d
  • statusBarItem.errorForeground#ffffff
  • statusBarItem.hoverBackground#ffffff15
  • statusBarItem.remoteBackground#ff6b35
  • statusBarItem.remoteForeground#ffffff
  • statusBarItem.warningBackground#ffd166
  • statusBarItem.warningForeground#000000
  • tab.activeBackground#1a0e0a
  • tab.activeBorderTop#ff6b35
  • tab.activeForeground#f0d5c8
  • tab.activeModifiedBorder#ffd166
  • tab.border#2a1008
  • tab.hoverBackground#1f1008
  • tab.hoverForeground#ef476f
  • tab.inactiveBackground#120806
  • tab.inactiveForeground#5a3020
  • terminal.ansiBlack#2a1008
  • terminal.ansiBlue#ff8c42
  • terminal.ansiBrightBlack#5a3020
  • terminal.ansiBrightBlue#ffa870
  • terminal.ansiBrightCyan#55ddee
  • terminal.ansiBrightGreen#44e8b8
  • terminal.ansiBrightMagenta#ff7090
  • terminal.ansiBrightRed#ff7088
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#ffdd88
  • terminal.ansiCyan#26c6da
  • terminal.ansiGreen#06d6a0
  • terminal.ansiMagenta#ef476f
  • terminal.ansiRed#ff4d6d
  • terminal.ansiWhite#f0d5c8
  • terminal.ansiYellow#ffd166
  • terminal.background#150a06
  • terminal.border#2a1008
  • terminal.foreground#f0d5c8
  • terminalCursor.foreground#ff6b35
  • textLink.activeForeground#ff6b35
  • textLink.foreground#ff8c42
  • titleBar.activeBackground#100806
  • titleBar.activeForeground#c8a898
  • titleBar.inactiveBackground#120806
  • titleBar.inactiveForeground#5a3020
  • widget.border#2a1008
  • widget.shadow#00000066

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.block#5a3020italic
string, string.quoted, string.template#ffd166
constant.character.escape#ef476f
string.regexp#ff8c42
keyword, keyword.control, storage.type#ff6b35
storage.modifier#ff8c42italic
keyword.operator#ffaa80
entity.name.function, support.function#ef476f
support.function.builtin, support.function.magic#ff4d6d
variable, variable.other#f9c5b0
variable.parameter#f0d5c8italic
variable.language#ff4d6ditalic
entity.name.type, entity.name.class, support.class, support.type#ff8c42
entity.name.type.interface#06d6a0italic
constant.numeric#06d6a0
constant.language#06d6a0italic
constant, constant.other#ffb347
entity.name.function.decorator, meta.decorator, storage.type.annotation#ff4d6ditalic
entity.name.tag#ff6b35
entity.other.attribute-name#ff8c42
support.type.property-name.css#ef476f
support.type.property-name.json#ff8c42
markup.heading#ff6b35bold
markup.underline.link#ff8c42underline
invalid#ff4d6dstrikethrough