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#1b91b8
  • activityBar.background#FCF9F5
  • activityBar.border#27282416
  • activityBar.foreground#272824
  • activityBar.inactiveForeground#27282480
  • activityBarBadge.background#1b91b8
  • activityBarBadge.foreground#FCF9F5
  • activityBarTop.activeBorder#1b91b8
  • badge.background#1b91b8
  • badge.foreground#FCF9F5
  • breadcrumb.activeSelectionForeground#272824
  • breadcrumb.background#FCF9F5
  • breadcrumb.focusForeground#272824
  • breadcrumb.foreground#27282480
  • button.background#1b91b8
  • button.foreground#FCF9F5
  • button.hoverBackground#1b91b8BB
  • button.secondaryBackground#FCF9F5
  • button.secondaryForeground#272824
  • button.secondaryHoverBackground#FCF9F5
  • debugToolBar.background#FCF9F5
  • debugToolBar.border#474747
  • descriptionForeground#777
  • diffEditor.border#00000000
  • diffEditor.insertedTextBackground#2b981550
  • diffEditor.removedTextBackground#bd3f3f50
  • dropdown.background#FCF9F5
  • dropdown.border#27282416
  • dropdown.listBackground#FCF9F5
  • editor.background#FCF9F5
  • editor.findMatchBackground#27282430
  • editor.findMatchBorder#00000000
  • editor.findMatchHighlightBackground#27282420
  • editor.findMatchHighlightBorder#00000000
  • editor.findRangeHighlightBackground#27282420
  • editor.findRangeHighlightBorder#00000000
  • editor.foldBackground#27282420
  • editor.foreground#272824
  • editor.hoverHighlightBackground#27282420
  • editor.inactiveSelectionBackground#27282420
  • editor.lineHighlightBackground#27282410
  • editor.lineHighlightBorder#00000000
  • editor.rangeHighlightBackground#27282410
  • editor.selectionBackground#27282420
  • editor.selectionHighlightBackground#27282420
  • editor.selectionHighlightBorder#00000000
  • editor.wordHighlightBackground#27282420
  • editor.wordHighlightStrongBackground#27282420
  • editorBracketMatch.background#27282430
  • editorBracketMatch.border#1b91b8
  • editorCodeLens.foreground#27282460
  • editorCursor.foreground#272824
  • editorError.background#bd3f3f33
  • editorError.border#00000000
  • editorError.foreground#bd3f3f
  • editorGhostText.foreground#27282455
  • editorGroupHeader.tabsBackground#FCF9F5
  • editorGutter.addedBackground#2b9815
  • editorGutter.background#FCF9F5
  • editorGutter.commentRangeForeground#272824
  • editorGutter.deletedBackground#bd3f3f
  • editorGutter.foldingControlForeground#272824
  • editorGutter.modifiedBackground#ab6b18
  • editorIndentGuide.activeBackground1#27282430
  • editorIndentGuide.background1#27282420
  • editorInfo.background#188ca933
  • editorInfo.border#00000000
  • editorInfo.foreground#188ca9
  • editorLineNumber.activeForeground#272824
  • editorLineNumber.foreground#27282460
  • editorOverviewRuler.border#27282416
  • editorRuler.foreground#27282430
  • editorStickyScroll.background#FCF9F5
  • editorStickyScroll.shadow#27282416
  • editorStickyScrollHover.background#FCF9F5
  • editorWarning.background#ab6b1833
  • editorWarning.border#00000000
  • editorWarning.foreground#ab6b18
  • editorWhitespace.foreground#27282420
  • editorWidget.background#FCF9F5
  • editorWidget.foreground#27282480
  • editorWidget.resizeBorder#5F5F5F
  • focusBorder#ffffff00
  • foreground#272824
  • git.blame.editorDecorationForeground#27282450
  • gitDecoration.addedResourceForeground#2b9815
  • gitDecoration.conflictingResourceForeground#4655c8
  • gitDecoration.deletedResourceForeground#bd3f3f
  • gitDecoration.ignoredResourceForeground#8c8c8c
  • gitDecoration.modifiedResourceForeground#ab6b18
  • gitDecoration.stageDeletedResourceForeground#bd3f3f
  • gitDecoration.stageModifiedResourceForeground#ab6b18
  • gitDecoration.submoduleResourceForeground#188ca9
  • gitDecoration.untrackedResourceForeground#2b9815
  • input.background#FCF9F5
  • input.border#27282416
  • input.foreground#272824
  • input.placeholderForeground#27282480
  • inputOption.activeBackground#27282430
  • inputOption.activeBorder#00000000
  • inputOption.activeForeground#272824
  • list.activeSelectionBackground#27282410
  • list.activeSelectionForeground#1b91b8
  • list.focusBackground#27282410
  • list.focusForeground#272824
  • list.focusOutline#1b91b8
  • list.highlightForeground#1b91b8
  • list.hoverBackground#27282410
  • list.inactiveSelectionBackground#27282410
  • list.inactiveSelectionForeground#272824
  • listFilterWidget.background#653723
  • listFilterWidget.noMatchesOutline#be10
  • listFilterWidget.outline#00000000
  • notificationCenter.border#474747
  • notificationCenterHeader.background#FCF9F5
  • notificationCenterHeader.foreground#272824
  • notifications.background#FCF9F5
  • notifications.border#27282416
  • notifications.foreground#272824
  • notificationsErrorIcon.foreground#bd3f3f
  • notificationsInfoIcon.foreground#188ca9
  • notificationsWarningIcon.foreground#ab6b18
  • notificationToast.border#474747
  • panel.background#FCF9F5
  • panel.border#27282416
  • panelSection.border#27282416
  • panelTitle.activeBorder#1b91b8
  • panelTitle.activeForeground#272824
  • panelTitle.inactiveForeground#27282480
  • peekView.border#1b91b8
  • peekViewEditor.background#FCF9F5
  • peekViewEditor.matchHighlightBackground#27282420
  • peekViewResult.background#FCF9F5
  • peekViewResult.matchHighlightBackground#27282420
  • peekViewResult.selectionBackground#27282420
  • peekViewTitle.background#FCF9F5
  • pickerGroup.border#27282416
  • pickerGroup.foreground#1b91b8
  • progressBar.background#188ca9
  • quickInput.background#FCF9F5
  • quickInput.foreground#272824
  • quickInputList.focusBackground#27282410
  • quickInputList.focusForeground#1b91b8
  • quickInputList.focusIconForeground#1b91b8
  • quickInputTitle.background#FCF9F5
  • sash.hoverBorder#1b91b8
  • scrollbar.shadow#27282416
  • scrollbarSlider.activeBackground#00000030
  • scrollbarSlider.background#00000030
  • scrollbarSlider.hoverBackground#00000030
  • selection.background#27282420
  • settings.focusedRowBackground#12121200
  • settings.headerForeground#272824
  • settings.modifiedItemIndicator#1b91b8
  • settings.rowHoverBackground#12121200
  • sideBar.background#FCF9F5
  • sideBar.border#27282416
  • sideBar.foreground#272824bb
  • sideBarSectionHeader.background#00000000
  • sideBarSectionHeader.border#27282416
  • sideBarSectionHeader.foreground#272824
  • statusBar.background#FCF9F5
  • statusBar.debuggingBackground#cc6633
  • statusBar.debuggingForeground#272824
  • statusBar.foreground#272824
  • statusBar.noFolderBackground#68217a
  • statusBar.noFolderForeground#272824
  • statusBarItem.activeBackground#FFFFFF25
  • statusBarItem.hoverBackground#27282420
  • statusBarItem.prominentBackground#5552
  • statusBarItem.remoteBackground#1b91b8
  • statusBarItem.remoteForeground#FCF9F5
  • tab.activeBackground#FCF9F5
  • tab.activeBorderTop#1b91b8
  • tab.activeForeground#272824
  • tab.inactiveBackground#FCF9F5
  • tab.inactiveForeground#27282480
  • terminal.ansiBlack#333
  • terminal.ansiBlue#188ca9
  • terminal.ansiBrightBlack#666666
  • terminal.ansiBrightBlue#188ca9
  • terminal.ansiBrightCyan#1b91b8
  • terminal.ansiBrightGreen#2b9815
  • terminal.ansiBrightMagenta#4655c8
  • terminal.ansiBrightRed#bd3f3f
  • terminal.ansiBrightWhite#e5e5e5
  • terminal.ansiBrightYellow#b69c18
  • terminal.ansiCyan#1b91b8
  • terminal.ansiGreen#2b9815
  • terminal.ansiMagenta#4655c8
  • terminal.ansiRed#bd3f3f
  • terminal.ansiWhite#e5e5e5
  • terminal.ansiYellow#b69c18
  • terminal.border#80808059
  • terminal.foreground#272824
  • terminal.selectionBackground#27282420
  • terminalCursor.background#1b91b8
  • terminalCursor.foreground#272824
  • textLink.activeForeground#1b91b8BB
  • textLink.foreground#1b91b8
  • titleBar.activeBackground#FCF9F5
  • titleBar.activeForeground#272824
  • walkThrough.embeddedEditorBackground#00000050
  • widget.shadow#27282416

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
support#b69c18
variable.other.property#b69c18
comment, punctuation.definition.comment, string.comment#27282460
constant, entity.name.constant, variable.other.constant, variable.other.member, variable.other.enummember, variable.language, support.type.object.module#ab6b18
entity, entity.name#188ca9
entity.name.type, support.class.component, support.class.component.tsx#1b91b8
variable.parameter.function, meta.object.member#ab6b18
entity.name.tag, entity.name.tag.tsx#2b9815
keyword#2b9815normal
keyword.operator#27282488
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#2b9815
storage, storage.type#2b9815normal
constant.numeric#bd3f3f
storage.modifier.package, storage.modifier.import, storage.type.java#ab6b18
string, punctuation.definition.string, string punctuation.section.embedded source#bd3f3f
meta.property-name#272824
variable#ab6b18
variable.other#ab6b18
invalid.broken#bd3f3fitalic
invalid.deprecated#bd3f3fitalic
invalid.illegal#bd3f3fitalic
invalid.unimplemented#bd3f3fitalic
carriage-returnitalic underline
message.error#bd3f3f
string variable#272824
source.regexp, string.regexp#188ca9
string.regexp.character-class, string.regexp constant.character.escape, string.regexp source.ruby.embedded, string.regexp string.regexp.arbitrary-repitition#188ca9
string.regexp constant.character.escape#2b9815bold
support.constant#272824
support.variable#272824
meta.module-reference#272824
punctuation.definition.list.begin.markdown#ab6b18
markup.heading, markup.heading entity.name#272824bold
markup.quote#2b9815
markup.italic#ab6b18italic
markup.bold#ab6b18bold
markup.underlineunderline
markup.strikethroughstrikethrough
markup.inline.raw#272824
markup.deleted, meta.diff.header.from-file, punctuation.definition.deleted#bd3f3f
markup.inserted, meta.diff.header.to-file, punctuation.definition.inserted#2b9815
markup.changed, punctuation.definition.changed#ab6b18
markup.ignored, markup.untracked
meta.diff.range#188ca9bold
meta.diff.header#272824
meta.separator#272824bold
meta.output#272824
brackethighlighter.tag, brackethighlighter.curly, brackethighlighter.round, brackethighlighter.square, brackethighlighter.angle, brackethighlighter.quote#81879D
brackethighlighter.unmatched#bd3f3f
constant.other.reference.link, string.other.link#188ca9underline
punctuation, meta.brace#999
text.html#272824