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#80C19A
  • activityBar.background#151515
  • activityBar.border#d1d5db16
  • activityBar.foreground#d1d5db
  • activityBar.inactiveForeground#d1d5db80
  • activityBarBadge.background#80C19A
  • activityBarBadge.foreground#202020
  • activityBarTop.activeBorder#80C19A
  • badge.background#80C19A
  • badge.foreground#202020
  • breadcrumb.activeSelectionForeground#d1d5db
  • breadcrumb.background#1a1a1a
  • breadcrumb.focusForeground#d1d5db
  • breadcrumb.foreground#d1d5db80
  • button.background#80C19A
  • button.foreground#202020
  • button.hoverBackground#80C19ABB
  • button.secondaryBackground#262626
  • button.secondaryForeground#d1d5db
  • button.secondaryHoverBackground#262626
  • debugToolBar.background#1a1a1a
  • debugToolBar.border#474747
  • descriptionForeground#777
  • diffEditor.border#00000000
  • diffEditor.insertedTextBackground#80C19A50
  • diffEditor.removedTextBackground#D8838550
  • dropdown.background#262626
  • dropdown.border#d1d5db16
  • dropdown.listBackground#262626
  • editor.background#1a1a1a
  • editor.findMatchBackground#d1d5db30
  • editor.findMatchBorder#00000000
  • editor.findMatchHighlightBackground#d1d5db20
  • editor.findMatchHighlightBorder#00000000
  • editor.findRangeHighlightBackground#d1d5db20
  • editor.findRangeHighlightBorder#00000000
  • editor.foldBackground#d1d5db20
  • editor.foreground#d1d5db
  • editor.hoverHighlightBackground#d1d5db20
  • editor.inactiveSelectionBackground#d1d5db20
  • editor.lineHighlightBackground#d1d5db12
  • editor.lineHighlightBorder#00000000
  • editor.rangeHighlightBackground#d1d5db12
  • editor.selectionBackground#d1d5db20
  • editor.selectionHighlightBackground#d1d5db20
  • editor.selectionHighlightBorder#00000000
  • editor.wordHighlightBackground#d1d5db20
  • editor.wordHighlightStrongBackground#d1d5db20
  • editorBracketMatch.background#d1d5db30
  • editorBracketMatch.border#80C19A
  • editorCodeLens.foreground#d1d5db55
  • editorCursor.foreground#d1d5db
  • editorError.background#D8838533
  • editorError.border#00000000
  • editorError.foreground#D88385
  • editorGhostText.foreground#d1d5db88
  • editorGroupHeader.tabsBackground#151515
  • editorGutter.addedBackground#80C19A
  • editorGutter.background#1a1a1a
  • editorGutter.commentRangeForeground#d1d5db
  • editorGutter.deletedBackground#D88385
  • editorGutter.foldingControlForeground#d1d5db
  • editorGutter.modifiedBackground#C69B8A
  • editorIndentGuide.activeBackground1#d1d5db30
  • editorIndentGuide.background1#d1d5db20
  • editorInfo.background#8BB6C233
  • editorInfo.border#00000000
  • editorInfo.foreground#8BB6C2
  • editorLineNumber.activeForeground#d1d5db
  • editorLineNumber.foreground#d1d5db55
  • editorOverviewRuler.border#d1d5db16
  • editorRuler.foreground#d1d5db30
  • editorStickyScroll.background#262626
  • editorStickyScroll.shadow#d1d5db10
  • editorStickyScrollHover.background#262626
  • editorWarning.background#C69B8A33
  • editorWarning.border#00000000
  • editorWarning.foreground#C69B8A
  • editorWhitespace.foreground#d1d5db20
  • editorWidget.background#1a1a1a
  • editorWidget.foreground#d1d5db80
  • editorWidget.resizeBorder#5F5F5F
  • focusBorder#ffffff00
  • foreground#d1d5db
  • git.blame.editorDecorationForeground#d1d5db50
  • gitDecoration.addedResourceForeground#80C19A
  • gitDecoration.conflictingResourceForeground#8190ca
  • gitDecoration.deletedResourceForeground#D88385
  • gitDecoration.ignoredResourceForeground#8c8c8c
  • gitDecoration.modifiedResourceForeground#C69B8A
  • gitDecoration.stageDeletedResourceForeground#D88385
  • gitDecoration.stageModifiedResourceForeground#C69B8A
  • gitDecoration.submoduleResourceForeground#8BB6C2
  • gitDecoration.untrackedResourceForeground#80C19A
  • input.background#262626
  • input.border#d1d5db16
  • input.foreground#d1d5db
  • input.placeholderForeground#d1d5db80
  • inputOption.activeBackground#d1d5db30
  • inputOption.activeBorder#00000000
  • inputOption.activeForeground#d1d5db
  • list.activeSelectionBackground#d1d5db12
  • list.activeSelectionForeground#80C19A
  • list.focusBackground#d1d5db12
  • list.focusForeground#d1d5db
  • list.focusOutline#80C19A
  • list.highlightForeground#80C19A
  • list.hoverBackground#d1d5db12
  • list.inactiveSelectionBackground#d1d5db12
  • list.inactiveSelectionForeground#d1d5db
  • listFilterWidget.background#653723
  • listFilterWidget.noMatchesOutline#be10
  • listFilterWidget.outline#00000000
  • notificationCenter.border#474747
  • notificationCenterHeader.background#1a1a1a
  • notificationCenterHeader.foreground#d1d5db
  • notifications.background#1a1a1a
  • notifications.border#d1d5db16
  • notifications.foreground#d1d5db
  • notificationsErrorIcon.foreground#D88385
  • notificationsInfoIcon.foreground#8BB6C2
  • notificationsWarningIcon.foreground#C69B8A
  • notificationToast.border#474747
  • panel.background#151515
  • panel.border#d1d5db16
  • panelSection.border#d1d5db16
  • panelTitle.activeBorder#80C19A
  • panelTitle.activeForeground#d1d5db
  • panelTitle.inactiveForeground#d1d5db80
  • peekView.border#80C19A
  • peekViewEditor.background#1a1a1a
  • peekViewEditor.matchHighlightBackground#d1d5db20
  • peekViewResult.background#1a1a1a
  • peekViewResult.matchHighlightBackground#d1d5db20
  • peekViewResult.selectionBackground#d1d5db20
  • peekViewTitle.background#1a1a1a
  • pickerGroup.border#d1d5db16
  • pickerGroup.foreground#80C19A
  • progressBar.background#8BB6C2
  • quickInput.background#1a1a1a
  • quickInput.foreground#d1d5db
  • quickInputList.focusBackground#d1d5db12
  • quickInputList.focusForeground#80C19A
  • quickInputList.focusIconForeground#80C19A
  • quickInputTitle.background#1a1a1a
  • sash.hoverBorder#80C19A
  • scrollbar.shadow#d1d5db10
  • scrollbarSlider.activeBackground#fff4
  • scrollbarSlider.background#fff4
  • scrollbarSlider.hoverBackground#fff4
  • selection.background#d1d5db20
  • settings.focusedRowBackground#12121200
  • settings.headerForeground#d1d5db
  • settings.modifiedItemIndicator#80C19A
  • settings.rowHoverBackground#12121200
  • sideBar.background#151515
  • sideBar.border#d1d5db16
  • sideBar.foreground#d1d5dbbb
  • sideBarSectionHeader.background#00000000
  • sideBarSectionHeader.border#d1d5db16
  • sideBarSectionHeader.foreground#d1d5db
  • statusBar.background#1a1a1a
  • statusBar.debuggingBackground#cc6633
  • statusBar.debuggingForeground#d1d5db
  • statusBar.foreground#d1d5db
  • statusBar.noFolderBackground#68217a
  • statusBar.noFolderForeground#d1d5db
  • statusBarItem.activeBackground#FFFFFF25
  • statusBarItem.hoverBackground#d1d5db20
  • statusBarItem.prominentBackground#5552
  • statusBarItem.remoteBackground#80C19A
  • statusBarItem.remoteForeground#202020
  • tab.activeBackground#1a1a1a
  • tab.activeBorderTop#80C19A
  • tab.activeForeground#d1d5db
  • tab.inactiveBackground#151515
  • tab.inactiveForeground#d1d5db80
  • terminal.ansiBlack#333
  • terminal.ansiBlue#8BB6C2
  • terminal.ansiBrightBlack#666666
  • terminal.ansiBrightBlue#8BB6C2
  • terminal.ansiBrightCyan#54B6B5
  • terminal.ansiBrightGreen#80C19A
  • terminal.ansiBrightMagenta#8190ca
  • terminal.ansiBrightRed#D88385
  • terminal.ansiBrightWhite#e5e5e5
  • terminal.ansiBrightYellow#c8b37a
  • terminal.ansiCyan#54B6B5
  • terminal.ansiGreen#80C19A
  • terminal.ansiMagenta#8190ca
  • terminal.ansiRed#D88385
  • terminal.ansiWhite#e5e5e5
  • terminal.ansiYellow#c8b37a
  • terminal.border#80808059
  • terminal.foreground#d1d5db
  • terminal.selectionBackground#d1d5db20
  • terminalCursor.background#80C19A
  • terminalCursor.foreground#d1d5db
  • textLink.activeForeground#80C19ABB
  • textLink.foreground#80C19A
  • titleBar.activeBackground#1a1a1a
  • titleBar.activeForeground#d1d5db
  • walkThrough.embeddedEditorBackground#00000050
  • widget.shadow#d1d5db10

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
support#c8b37a
variable.other.property#c8b37a
comment, punctuation.definition.comment, string.comment#d1d5db55
constant, entity.name.constant, variable.other.constant, variable.other.member, variable.other.enummember, variable.language, support.type.object.module#C69B8A
entity, entity.name#8BB6C2
entity.name.type, support.class.component, support.class.component.tsx#54B6B5
variable.parameter.function, meta.object.member#C69B8A
entity.name.tag, entity.name.tag.tsx#80C19A
keyword#80C19Anormal
keyword.operator#d1d5db88
keyword.operator.word, support.type.property-name.json, punctuation.definition.template-expression, constant.language.boolean, constant.language.null, constant.language.undefined, constant.language.NaN, constant.language.Infinity, constant.language.eval, constant.language.arguments, constant.language.this, constant.language.super#80C19A
storage, storage.type#80C19Anormal
constant.numeric#D88385
storage.modifier.package, storage.modifier.import, storage.type.java#C69B8A
string, punctuation.definition.string, string punctuation.section.embedded source#D88385
meta.property-name#d1d5db
variable#C69B8A
variable.other#C69B8A
invalid.broken#D88385italic
invalid.deprecated#D88385italic
invalid.illegal#D88385italic
invalid.unimplemented#D88385italic
carriage-returnitalic underline
message.error#D88385
string variable#d1d5db
source.regexp, string.regexp#8BB6C2
string.regexp.character-class, string.regexp constant.character.escape, string.regexp source.ruby.embedded, string.regexp string.regexp.arbitrary-repitition#8BB6C2
string.regexp constant.character.escape#80C19Abold
support.constant#d1d5db
support.variable#d1d5db
meta.module-reference#d1d5db
punctuation.definition.list.begin.markdown#C69B8A
markup.heading, markup.heading entity.name#d1d5dbbold
markup.quote#80C19A
markup.italic#C69B8Aitalic
markup.bold#C69B8Abold
markup.underlineunderline
markup.strikethroughstrikethrough
markup.inline.raw#d1d5db
markup.deleted, meta.diff.header.from-file, punctuation.definition.deleted#D88385
markup.inserted, meta.diff.header.to-file, punctuation.definition.inserted#80C19A
markup.changed, punctuation.definition.changed#C69B8A
markup.ignored, markup.untracked
meta.diff.range#8BB6C2bold
meta.diff.header#d1d5db
meta.separator#d1d5dbbold
meta.output#d1d5db
brackethighlighter.tag, brackethighlighter.curly, brackethighlighter.round, brackethighlighter.square, brackethighlighter.angle, brackethighlighter.quote#81879D
brackethighlighter.unmatched#D88385
constant.other.reference.link, string.other.link#8BB6C2underline
punctuation, meta.brace#d1d5db88
text.html#d1d5db
Neutral Theme by xiaoluabei - VS Code Theme