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#ff967d
  • activityBar.background#1c1305
  • activityBar.border#9b8b72
  • activityBar.foreground#ffffee
  • activityBar.inactiveForeground#ffffee
  • activityBarBadge.background#409eff
  • activityBarBadge.foreground#1c1305
  • badge.background#409eff
  • badge.foreground#1c1305
  • breadcrumb.activeSelectionForeground#ffffee
  • breadcrumb.focusForeground#ffffee
  • breadcrumb.foreground#ffffee
  • breadcrumbPicker.background#3f331f
  • button.background#09b43a
  • button.foreground#0a0c10
  • button.hoverBackground#26cd4d
  • button.secondaryBackground#695b44
  • button.secondaryForeground#ffffee
  • button.secondaryHoverBackground#70624a
  • checkbox.background#3f331f
  • checkbox.border#9b8b72
  • debugConsole.errorForeground#ffb1af
  • debugConsole.infoForeground#dcceb8
  • debugConsole.sourceForeground#f7c843
  • debugConsole.warningForeground#f0b72f
  • debugConsoleInputIcon.foreground#cb9eff
  • debugIcon.breakpointForeground#ff6a69
  • debugTokenExpression.boolean#4ae168
  • debugTokenExpression.error#ffb1af
  • debugTokenExpression.name#91cbff
  • debugTokenExpression.number#4ae168
  • debugTokenExpression.string#addcff
  • debugTokenExpression.value#addcff
  • debugToolBar.background#3f331f
  • descriptionForeground#ffffee
  • diffEditor.insertedLineBackground#09b43a26
  • diffEditor.insertedTextBackground#26cd4d4d
  • diffEditor.removedLineBackground#ff6a6926
  • diffEditor.removedTextBackground#ff94924d
  • disabledForeground#e0d8cb80
  • dropdown.background#3f331f
  • dropdown.border#9b8b72
  • dropdown.foreground#ffffee
  • dropdown.listBackground#3f331f
  • editor.background#1c1305
  • editor.findMatchBackground#e09b13
  • editor.findMatchHighlightBackground#fbd66980
  • editor.focusedStackFrameHighlightBackground#09b43a
  • editor.foldBackground#c0b0961a
  • editor.foreground#ffffee
  • editor.inactiveSelectionBackground#c0b096
  • editor.lineHighlightBackground#c0b0961a
  • editor.lineHighlightBorder#71b7ff
  • editor.linkedEditingBackground#71b7ff12
  • editor.selectionBackground#fffffe
  • editor.selectionForeground#1c1305
  • editor.selectionHighlightBackground#26cd4d40
  • editor.stackFrameHighlightBackground#e09b13
  • editor.wordHighlightBackground#c0b09680
  • editor.wordHighlightBorder#c0b09699
  • editor.wordHighlightStrongBackground#c0b0964d
  • editor.wordHighlightStrongBorder#c0b09699
  • editorBracketHighlight.foreground1#91cbff
  • editorBracketHighlight.foreground2#4ae168
  • editorBracketHighlight.foreground3#f7c843
  • editorBracketHighlight.foreground4#ffb1af
  • editorBracketHighlight.foreground5#ffadd4
  • editorBracketHighlight.foreground6#dbb7ff
  • editorBracketHighlight.unexpectedBracket.foreground#ffffee
  • editorBracketMatch.background#26cd4d40
  • editorBracketMatch.border#26cd4d99
  • editorCursor.foreground#71b7ff
  • editorGroup.border#9b8b72
  • editorGroupHeader.tabsBackground#120700
  • editorGroupHeader.tabsBorder#9b8b72
  • editorGutter.addedBackground#09b43a
  • editorGutter.deletedBackground#ff6a69
  • editorGutter.modifiedBackground#e09b13
  • editorHoverWidget.border#564f44
  • editorIndentGuide.activeBackground#ffffee3d
  • editorIndentGuide.background#ffffee1f
  • editorInlayHint.background#dcceb833
  • editorInlayHint.foreground#ffffee
  • editorInlayHint.paramBackground#dcceb833
  • editorInlayHint.paramForeground#ffffee
  • editorInlayHint.typeBackground#dcceb833
  • editorInlayHint.typeForeground#ffffee
  • editorLineNumber.activeForeground#ffffee
  • editorLineNumber.foreground#c0b096
  • editorOverviewRuler.border#010409
  • editorWhitespace.foreground#9b8b72
  • editorWidget.background#3f331f
  • errorForeground#ff6a69
  • focusBorder#409eff
  • foreground#ffffee
  • gitDecoration.addedResourceForeground#26cd4d
  • gitDecoration.conflictingResourceForeground#e7811d
  • gitDecoration.deletedResourceForeground#ff6a69
  • gitDecoration.ignoredResourceForeground#c0b096
  • gitDecoration.modifiedResourceForeground#f0b72f
  • gitDecoration.submoduleResourceForeground#ffffee
  • gitDecoration.untrackedResourceForeground#26cd4d
  • icon.foreground#ffffee
  • input.background#1c1305
  • input.border#9b8b72
  • input.foreground#ffffee
  • input.placeholderForeground#c0b096
  • keybindingLabel.foreground#ffffee
  • list.activeSelectionBackground#c0b09666
  • list.activeSelectionForeground#ffffee
  • list.focusBackground#409eff26
  • list.focusForeground#ffffee
  • list.highlightForeground#71b7ff
  • list.hoverBackground#c0b0961a
  • list.hoverForeground#ffffee
  • list.inactiveFocusBackground#409eff26
  • list.inactiveSelectionBackground#c0b09666
  • list.inactiveSelectionForeground#ffffee
  • minimapSlider.activeBackground#dcceb847
  • minimapSlider.background#dcceb833
  • minimapSlider.hoverBackground#dcceb83d
  • notificationCenterHeader.background#3f331f
  • notificationCenterHeader.foreground#ffffee
  • notifications.background#3f331f
  • notifications.border#9b8b72
  • notifications.foreground#ffffee
  • notificationsErrorIcon.foreground#ff6a69
  • notificationsInfoIcon.foreground#71b7ff
  • notificationsWarningIcon.foreground#f0b72f
  • panel.background#120700
  • panel.border#9b8b72
  • panelInput.border#9b8b72
  • panelTitle.activeBorder#ff967d
  • panelTitle.activeForeground#ffffee
  • panelTitle.inactiveForeground#ffffee
  • peekViewEditor.background#c0b0961a
  • peekViewEditor.matchHighlightBackground#e09b13
  • peekViewResult.background#1c1305
  • peekViewResult.matchHighlightBackground#e09b13
  • pickerGroup.border#9b8b72
  • pickerGroup.foreground#ffffee
  • progressBar.background#409eff
  • quickInput.background#3f331f
  • quickInput.foreground#ffffee
  • scrollbar.shadow#9b8b7233
  • scrollbarSlider.activeBackground#dcceb847
  • scrollbarSlider.background#dcceb833
  • scrollbarSlider.hoverBackground#dcceb83d
  • settings.headerForeground#ffffee
  • settings.modifiedItemIndicator#e09b13
  • sideBar.background#120700
  • sideBar.border#9b8b72
  • sideBar.foreground#ffffee
  • sideBarSectionHeader.background#120700
  • sideBarSectionHeader.border#9b8b72
  • sideBarSectionHeader.foreground#ffffee
  • sideBarTitle.foreground#ffffee
  • statusBar.background#1c1305
  • statusBar.border#9b8b72
  • statusBar.debuggingBackground#ff6a69
  • statusBar.debuggingForeground#1c1305
  • statusBar.focusBorder#409eff80
  • statusBar.foreground#ffffee
  • statusBar.noFolderBackground#1c1305
  • statusBarItem.activeBackground#ffffee1f
  • statusBarItem.focusBorder#409eff
  • statusBarItem.hoverBackground#ffffee14
  • statusBarItem.prominentBackground#c0b09666
  • statusBarItem.remoteBackground#70624a
  • statusBarItem.remoteForeground#ffffee
  • symbolIcon.arrayForeground#fe9a2d
  • symbolIcon.booleanForeground#71b7ff
  • symbolIcon.classForeground#fe9a2d
  • symbolIcon.colorForeground#91cbff
  • symbolIcon.constantForeground#acf7b6#72f088#4ae168#26cd4d#09b43a#09b43a#02a232#008c2c#007728#006222
  • symbolIcon.constructorForeground#dbb7ff
  • symbolIcon.enumeratorForeground#fe9a2d
  • symbolIcon.enumeratorMemberForeground#71b7ff
  • symbolIcon.eventForeground#c0b096
  • symbolIcon.fieldForeground#fe9a2d
  • symbolIcon.fileForeground#f0b72f
  • symbolIcon.folderForeground#f0b72f
  • symbolIcon.functionForeground#cb9eff
  • symbolIcon.interfaceForeground#fe9a2d
  • symbolIcon.keyForeground#71b7ff
  • symbolIcon.keywordForeground#ff9492
  • symbolIcon.methodForeground#cb9eff
  • symbolIcon.moduleForeground#ff9492
  • symbolIcon.namespaceForeground#ff9492
  • symbolIcon.nullForeground#71b7ff
  • symbolIcon.numberForeground#26cd4d
  • symbolIcon.objectForeground#fe9a2d
  • symbolIcon.operatorForeground#91cbff
  • symbolIcon.packageForeground#fe9a2d
  • symbolIcon.propertyForeground#fe9a2d
  • symbolIcon.referenceForeground#71b7ff
  • symbolIcon.snippetForeground#71b7ff
  • symbolIcon.stringForeground#91cbff
  • symbolIcon.structForeground#fe9a2d
  • symbolIcon.textForeground#91cbff
  • symbolIcon.typeParameterForeground#91cbff
  • symbolIcon.unitForeground#71b7ff
  • symbolIcon.variableForeground#fe9a2d
  • tab.activeBackground#1c1305
  • tab.activeBorder#1c1305
  • tab.activeBorderTop#ff967d
  • tab.activeForeground#ffffee
  • tab.border#9b8b72
  • tab.hoverBackground#1c1305
  • tab.inactiveBackground#120700
  • tab.inactiveForeground#ffffee
  • tab.unfocusedActiveBorder#1c1305
  • tab.unfocusedActiveBorderTop#9b8b72
  • tab.unfocusedHoverBackground#c0b0961a
  • terminal.ansiBlack#9b8b72
  • terminal.ansiBlue#71b7ff
  • terminal.ansiBrightBlack#c0b096
  • terminal.ansiBrightBlue#91cbff
  • terminal.ansiBrightCyan#56d4dd
  • terminal.ansiBrightGreen#4ae168
  • terminal.ansiBrightMagenta#dbb7ff
  • terminal.ansiBrightRed#ffb1af
  • terminal.ansiBrightWhite#fffffe
  • terminal.ansiBrightYellow#f7c843
  • terminal.ansiCyan#39c5cf
  • terminal.ansiGreen#26cd4d
  • terminal.ansiMagenta#cb9eff
  • terminal.ansiRed#ff9492
  • terminal.ansiWhite#f5e9d6
  • terminal.ansiYellow#f0b72f
  • terminal.foreground#ffffee
  • textBlockQuote.background#120700
  • textBlockQuote.border#9b8b72
  • textCodeBlock.background#c0b09666
  • textLink.activeForeground#71b7ff
  • textLink.foreground#71b7ff
  • textPreformat.background#c0b09666
  • textPreformat.foreground#ffffee
  • textSeparator.foreground#9b8b72
  • titleBar.activeBackground#1c1305
  • titleBar.activeForeground#ffffee
  • titleBar.border#9b8b72
  • titleBar.inactiveBackground#120700
  • titleBar.inactiveForeground#ffffee
  • tree.indentGuidesStroke#9b8b72
  • welcomePage.buttonBackground#3f331f
  • welcomePage.buttonHoverBackground#70624a

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, string.comment#dcceb8
constant.other.placeholder, constant.character#ff9492
constant, entity.name.constant, variable.other.constant, variable.other.enummember, variable.language, entity#91cbff
entity.name, meta.export.default, meta.definition.variable#ffb757
variable.parameter.function, meta.jsx.children, meta.block, meta.tag.attributes, entity.name.constant, meta.object.member, meta.embedded.expression#ffffee
entity.name.function#dbb7ff
entity.name.tag, support.class.component#72f088
keyword#ff9492
storage, storage.type#ff9492
storage.modifier.package, storage.modifier.import, storage.type.java#ffffee
string, string punctuation.section.embedded source#addcff
support#91cbff
meta.property-name#91cbff
variable#ffb757
variable.other#ffffee
invalid.broken#ffb1afitalic
invalid.deprecated#ffb1afitalic
invalid.illegal#ffb1afitalic
invalid.unimplemented#ffb1afitalic
carriage-return#fffffeitalic underline
message.error#ffb1af
string variable#91cbff
source.regexp, string.regexp#addcff
string.regexp.character-class, string.regexp constant.character.escape, string.regexp source.ruby.embedded, string.regexp string.regexp.arbitrary-repitition#addcff
string.regexp constant.character.escape#72f088bold
support.constant#91cbff
support.variable#91cbff
support.type.property-name.json#72f088
meta.module-reference#91cbff
punctuation.definition.list.begin.markdown#ffb757
markup.heading, markup.heading entity.name#91cbffbold
markup.quote#72f088
markup.italic#ffffeeitalic
markup.bold#ffffeebold
markup.underlineunderline
markup.strikethroughstrikethrough
markup.inline.raw#91cbff
markup.deleted, meta.diff.header.from-file, punctuation.definition.deleted#ffb1af
punctuation.section.embedded#ff9492
markup.inserted, meta.diff.header.to-file, punctuation.definition.inserted#72f088
markup.changed, punctuation.definition.changed#ffb757
markup.ignored, markup.untracked#3f331f
meta.diff.range#dbb7ffbold
meta.diff.header#91cbff
meta.separator#91cbffbold
meta.output#91cbff
brackethighlighter.tag, brackethighlighter.curly, brackethighlighter.round, brackethighlighter.square, brackethighlighter.angle, brackethighlighter.quote#dcceb8
brackethighlighter.unmatched#ffb1af
constant.other.reference.link, string.other.link#addcff