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.background#0A0505
  • activityBar.border#00000000
  • activityBar.foreground#9AAAB8
  • activityBar.inactiveForeground#3A1818
  • activityBarBadge.background#C42040
  • activityBarBadge.foreground#F0F4F8
  • badge.background#C42040
  • badge.foreground#F0F4F8
  • breadcrumb.activeSelectionForeground#C8D4DC
  • breadcrumb.focusForeground#8A9AA8
  • breadcrumb.foreground#3A1818
  • breadcrumbPicker.background#0A0505
  • button.background#8A1828
  • button.foreground#F0F4F8
  • button.hoverBackground#C42040
  • dropdown.background#0F0707
  • dropdown.border#2A1010
  • dropdown.foreground#C8D4DC
  • editor.background#130A0A
  • editor.foreground#C8D4DC
  • editor.inactiveSelectionBackground#250D0D
  • editor.lineHighlightBackground#1A0D0D
  • editor.lineHighlightBorder#00000000
  • editor.selectionBackground#351212
  • editorBracketMatch.background#35121280
  • editorBracketMatch.border#C42040
  • editorCursor.background#130A0A
  • editorCursor.foreground#20C0CC
  • editorError.foreground#E03050
  • editorGroupHeader.tabsBackground#0A0505
  • editorGroupHeader.tabsBorder#2A1010
  • editorGutter.addedBackground#20C0CC80
  • editorGutter.background#130A0A
  • editorGutter.deletedBackground#A01020C0
  • editorGutter.modifiedBackground#C4204080
  • editorHoverWidget.background#0A0606
  • editorHoverWidget.border#2A1010
  • editorIndentGuide.activeBackground1#6A2828
  • editorIndentGuide.background1#2A1010
  • editorInfo.foreground#20C0CC
  • editorLineNumber.activeForeground#7A3030
  • editorLineNumber.foreground#3A1818
  • editorOverviewRuler.border#00000000
  • editorOverviewRuler.errorForeground#E03050
  • editorOverviewRuler.selectionHighlightForeground#C42040
  • editorOverviewRuler.warningForeground#A07840
  • editorSuggestWidget.background#0A0606
  • editorSuggestWidget.border#2A1010
  • editorSuggestWidget.foreground#C8D4DC
  • editorSuggestWidget.highlightForeground#20C0CC
  • editorSuggestWidget.selectedBackground#351212
  • editorWarning.foreground#A07840
  • editorWhitespace.foreground#200D0D
  • editorWidget.background#0A0606
  • editorWidget.border#2A1010
  • focusBorder#C42040
  • gitDecoration.addedResourceForeground#20C0CC
  • gitDecoration.conflictingResourceForeground#A07840
  • gitDecoration.deletedResourceForeground#C42040
  • gitDecoration.ignoredResourceForeground#3A1818
  • gitDecoration.modifiedResourceForeground#7A9AB0
  • gitDecoration.untrackedResourceForeground#9AAAB8
  • input.background#0F0707
  • input.border#2A1010
  • input.foreground#C8D4DC
  • input.placeholderForeground#3A1818
  • inputOption.activeBorder#20C0CC
  • list.activeSelectionBackground#351212
  • list.activeSelectionForeground#E0E8F0
  • list.focusBackground#351212
  • list.focusForeground#E0E8F0
  • list.highlightForeground#20C0CC
  • list.hoverBackground#250D0D
  • list.hoverForeground#C8D4DC
  • list.inactiveSelectionBackground#250D0D
  • list.inactiveSelectionForeground#8A9AA8
  • merge.currentContentBackground#20C0CC15
  • merge.currentHeaderBackground#20C0CC40
  • merge.incomingContentBackground#C4204015
  • merge.incomingHeaderBackground#C4204040
  • notificationCenterHeader.background#0A0505
  • notifications.background#0A0505
  • notifications.border#2A1010
  • notifications.foreground#C8D4DC
  • notificationsErrorIcon.foreground#E03050
  • notificationsInfoIcon.foreground#20C0CC
  • notificationsWarningIcon.foreground#A07840
  • panel.background#0A0505
  • panel.border#2A1010
  • panelTitle.activeBorder#C42040
  • panelTitle.activeForeground#9AAAB8
  • panelTitle.inactiveForeground#3A1818
  • peekView.border#C42040
  • peekViewEditor.background#0A0505
  • peekViewEditor.matchHighlightBackground#35121280
  • peekViewResult.background#0F0707
  • peekViewResult.fileForeground#9AAAB8
  • peekViewResult.lineForeground#8A9AA8
  • peekViewResult.matchHighlightBackground#351212
  • peekViewResult.selectionBackground#351212
  • peekViewResult.selectionForeground#E0E8F0
  • peekViewTitle.background#0A0505
  • peekViewTitleDescription.foreground#8A9AA8
  • peekViewTitleLabel.foreground#C8D4DC
  • progressBar.background#C42040
  • scrollbarSlider.activeBackground#C4204080
  • scrollbarSlider.background#2A101080
  • scrollbarSlider.hoverBackground#6A282880
  • selection.background#351212
  • settings.headerForeground#9AAAB8
  • settings.modifiedItemIndicator#C42040
  • sideBar.background#0F0707
  • sideBar.border#2A1010
  • sideBar.foreground#8A9AA8
  • sideBarSectionHeader.background#0A0505
  • sideBarSectionHeader.border#2A1010
  • sideBarSectionHeader.foreground#9AAAB8
  • sideBarTitle.foreground#9AAAB8
  • statusBar.background#0A0505
  • statusBar.border#00000000
  • statusBar.debuggingBackground#C42040
  • statusBar.debuggingForeground#F0F4F8
  • statusBar.foreground#8A9AA8
  • statusBar.noFolderBackground#0A0505
  • statusBarItem.hoverBackground#351212
  • statusBarItem.remoteBackground#3A1010
  • statusBarItem.remoteForeground#C8D4DC
  • tab.activeBackground#130A0A
  • tab.activeBorder#00000000
  • tab.activeBorderTop#C42040
  • tab.activeForeground#E0E8F0
  • tab.border#2A1010
  • tab.inactiveBackground#0A0505
  • tab.inactiveForeground#3A1818
  • tab.unfocusedActiveBackground#130A0A
  • tab.unfocusedActiveForeground#8A9AA8
  • terminal.ansiBlack#0A0505
  • terminal.ansiBlue#4A7A9A
  • terminal.ansiBrightBlack#4A2828
  • terminal.ansiBrightBlue#6A9AB8
  • terminal.ansiBrightCyan#35D0D8
  • terminal.ansiBrightGreen#35D0D8
  • terminal.ansiBrightMagenta#A04878
  • terminal.ansiBrightRed#E03050
  • terminal.ansiBrightWhite#E8F0F8
  • terminal.ansiBrightYellow#C09850
  • terminal.ansiCyan#20C0CC
  • terminal.ansiGreen#20C0CC
  • terminal.ansiMagenta#803060
  • terminal.ansiRed#C42040
  • terminal.ansiWhite#C8D4DC
  • terminal.ansiYellow#A07840
  • terminal.background#0A0505
  • terminal.foreground#C8D4DC
  • terminalCursor.foreground#20C0CC
  • titleBar.activeBackground#0A0505
  • titleBar.activeForeground#8A9AA8
  • titleBar.border#00000000
  • titleBar.inactiveBackground#0A0505
  • titleBar.inactiveForeground#3A1818
  • widget.shadow#00000080

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#5A2828italic
string, string.quoted, string.template#A09278—
constant.character.escape, string.regexp#C0A888—
constant.numeric#35D0D8—
constant.language.boolean, constant.language.null, constant.language.undefined#35D0D8—
keyword, keyword.control, keyword.operator.new, keyword.operator.expression, storage, storage.type, storage.modifier#C42040—
entity.name.function, meta.function-call, support.function, variable.function#20C0CC—
entity.name.type, entity.name.class, support.class, support.type#35D0D8—
variable, variable.other, variable.other.readwrite#C8D4DC—
variable.parameter#B0BCC8—
variable.other.constant, constant.other#A09278bold
variable.other.property, support.variable.property, meta.object-literal.key#B8C8D4—
keyword.operator, punctuation.separator, punctuation.accessor#6A8090—
punctuation, meta.brace, meta.delimiter#4A5A68—
entity.name.tag.decorator, meta.decorator, punctuation.decorator#803060italic
entity.name.module, string.quoted.import#A09278—
entity.name.tag, meta.tag.sgml#C42040—
entity.other.attribute-name#20C0CC—
support.type.property-name.css#20C0CC—
support.constant.property-value.css#A09278—
entity.name.tag.css, entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#35D0D8—
markup.heading, entity.name.section.markdown, punctuation.definition.heading.markdown#C42040bold
markup.bold#E0E8F0bold
markup.italic#B0BCC8italic
string.other.link.title.markdown, meta.link.inline.markdown#B8C8D4—
markup.underline.link, meta.link.reference.markdown, string.other.link.description.markdown, punctuation.definition.link.markdown, markup.underline.link.markdown#6A8090—
punctuation.definition.list.begin.markdown, beginning.punctuation.definition.list.markdown#C42040—
markup.inline.raw, markup.fenced_code.block, fenced_code.block.language#35D0D8—
support.type.property-name.json#20C0CC—
invalid, invalid.deprecated#E03050underline
Hashi-Kazu テーマ by Hashi-Kazu - VS Code Theme