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#EDEDED
  • activityBar.background#000000
  • activityBar.border#212121
  • activityBar.foreground#EDEDED
  • activityBar.inactiveForeground#A3A3A3
  • activityBarBadge.background#47A8FF
  • activityBarBadge.foreground#000000
  • badge.background#47A8FF
  • badge.foreground#000000
  • button.background#47A8FF
  • button.foreground#000000
  • diffEditor.insertedTextBackground#0F7E3255
  • diffEditor.removedTextBackground#AF302955
  • dropdown.background#0D0D0D
  • dropdown.border#212121
  • dropdown.foreground#EDEDED
  • dropdown.listBackground#000000
  • editor.background#000000
  • editor.findMatchBackground#B38F00
  • editor.findMatchHighlightBackground#B38F00cc
  • editor.findRangeHighlightBackground#0D0D0D
  • editor.foreground#EDEDED
  • editor.hoverHighlightBackground#212121
  • editor.inactiveSelectionBackground#171717
  • editor.lineHighlightBackground#0D0D0D
  • editor.lineHighlightBorder#171717
  • editor.rangeHighlightBackground#2B2B2B
  • editor.selectionBackground#EDEDED33
  • editor.selectionHighlightBackground#EDEDED33
  • editorBracketMatch.background#171717
  • editorBracketMatch.border#212121
  • editorError.foreground#D14D41
  • editorGroup.border#212121
  • editorGroupHeader.tabsBackground#000000
  • editorGutter.addedBackground#00CA51
  • editorGutter.background#000000
  • editorGutter.deletedBackground#D14D41
  • editorGutter.modifiedBackground#4CC0BA
  • editorHoverWidget.background#171717
  • editorIndentGuide.background1#212121
  • editorInfo.foreground#47A8FF
  • editorInlayHint.background#212121
  • editorInlayHint.foreground#A3A3A3
  • editorInlayHint.typeBackground#212121
  • editorInlayHint.typeForeground#EDEDED
  • editorLineNumber.activeForeground#EDEDED
  • editorLineNumber.foreground#2B2B2B
  • editorSuggestWidget.background#000000
  • editorSuggestWidget.border#212121
  • editorSuggestWidget.foreground#EDEDED
  • editorSuggestWidget.highlightForeground#A3A3A3
  • editorSuggestWidget.selectedBackground#212121
  • editorWarning.foreground#F27F35
  • editorWhitespace.foreground#2B2B2B
  • editorWidget.background#0D0D0D
  • editorWidget.border#212121
  • input.background#0D0D0D
  • input.border#212121
  • input.foreground#EDEDED
  • input.placeholderForeground#A3A3A3
  • inputOption.activeBackground#171717
  • inputOption.activeBorder#212121
  • inputOption.activeForeground#EDEDED
  • inputValidation.errorBackground#D14D41
  • inputValidation.errorBorder#AF3029
  • inputValidation.infoBackground#47A8FF
  • inputValidation.infoBorder#0060F1
  • inputValidation.warningBackground#F27F35
  • inputValidation.warningBorder#C55D17
  • list.activeSelectionBackground#2B2B2B
  • list.activeSelectionForeground#EDEDED
  • list.errorForeground#D14D41
  • list.hoverBackground#212121
  • list.hoverForeground#EDEDED
  • list.inactiveSelectionBackground#212121
  • list.inactiveSelectionForeground#EDEDED
  • list.warningForeground#F27F35
  • menu.background#000000
  • menu.border#212121
  • menu.foreground#EDEDED
  • menu.selectionBackground#212121
  • menu.selectionForeground#EDEDED
  • merge.border#212121
  • merge.commonContentBackground#2B2B2B
  • merge.commonHeaderBackground#212121
  • merge.currentContentBackground#0F7E32
  • merge.currentHeaderBackground#00CA51
  • merge.incomingContentBackground#1B9E97
  • merge.incomingHeaderBackground#4CC0BA
  • notifications.background#171717
  • panel.background#000000
  • panel.border#212121
  • panelTitle.activeBorder#2B2B2B
  • panelTitle.activeForeground#EDEDED
  • panelTitle.inactiveForeground#A3A3A3
  • peekView.border#212121
  • peekViewEditor.background#000000
  • peekViewEditor.matchHighlightBackground#2B2B2B
  • peekViewResult.background#0D0D0D
  • peekViewResult.fileForeground#EDEDED
  • peekViewResult.lineForeground#A3A3A3
  • peekViewResult.matchHighlightBackground#2B2B2B
  • peekViewResult.selectionBackground#171717
  • peekViewResult.selectionForeground#8F8F8F
  • peekViewTitle.background#212121
  • peekViewTitleDescription.foreground#A3A3A3
  • peekViewTitleLabel.foreground#EDEDED
  • sideBar.activeBackground#2B2B2B
  • sideBar.activeForeground#EDEDED
  • sideBar.background#000000
  • sideBar.border#212121
  • sideBar.fileIcon.foreground#47A8FF
  • sideBar.folderIcon.foreground#00CA51
  • sideBar.foreground#EDEDED
  • sideBar.hoverBackground#212121
  • sideBar.hoverForeground#A3A3A3
  • sideBarSectionHeader.background#0D0D0D
  • sideBarSectionHeader.border#212121
  • sideBarSectionHeader.foreground#EDEDED
  • sideBarTitle.foreground#EDEDED
  • statusBar.background#000000
  • statusBar.border#212121
  • statusBar.debuggingBackground#D14D41
  • statusBar.debuggingForeground#EDEDED
  • statusBar.foreground#EDEDED
  • statusBar.noFolderBackground#2B2B2B
  • statusBar.noFolderForeground#8F8F8F
  • tab.activeBackground#000000
  • tab.activeForeground#EDEDED
  • tab.activeModifiedBorder#E5B800
  • tab.border#212121
  • tab.hoverBackground#212121
  • tab.inactiveBackground#0D0D0D
  • tab.inactiveForeground#A3A3A3
  • tab.inactiveModifiedBorder#47A8FF
  • tab.unfocusedActiveModifiedBorder#B38F00
  • tab.unfocusedHoverBackground#212121
  • tab.unfocusedInactiveModifiedBorder#0060F1
  • terminal.ansiBlue#47A8FF
  • terminal.ansiCyan#4CC0BA
  • terminal.ansiGreen#00CA51
  • terminal.ansiMagenta#4CC0BA
  • terminal.ansiRed#D14D41
  • terminal.ansiYellow#E5B800
  • terminal.background#000000
  • terminal.foreground#EDEDED
  • terminalCursor.background#000000
  • terminalCursor.foreground#EDEDED
  • titleBar.activeBackground#000000
  • titleBar.activeForeground#EDEDED
  • titleBar.border#212121
  • titleBar.inactiveBackground#0D0D0D
  • titleBar.inactiveForeground#A3A3A3

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
source, support.type.property-name.css#EDEDED—
entity.name.type.class#E5B800—
entity.name.type.interface, entity.name.type#C372FC—
entity.name.type.struct#E5B800—
entity.name.type.enum#E5B800—
meta.object-literal.key#EDEDED—
entity.name.function.method, meta.function.method#47A8FF—
entity.name.function, support.function, meta.function-call.generic#C372FC—
variable, meta.variable, variable.other.object.property, variable.other.readwrite.alias#EDEDED—
variable.other.object#47A8FF—
variable.other.global, variable.language.this#4CC0BA—
variable.other.local#171717—
variable.parameter, meta.parameter#EDEDED—
variable.other.property, meta.property#EDEDED—
string, string.other.link, markup.inline.raw.string.markdown#00CA51—
constant.character.escape, constant.other.placeholder#EDEDED—
keyword#FF4C8D—
keyword.control.import, keyword.control.from, keyword.import#FF4C8D—
storage.modifier, keyword.modifier, storage.type#FF4C8D—
comment, punctuation.definition.comment#A3A3A3—
comment.documentation, comment.line.documentation#A3A3A3—
constant.numeric#EDEDED—
constant.language.boolean, constant.language.json#EDEDED—
keyword.operator#FF4C8D—
entity.name.function.preprocessor, meta.preprocessor#47A8FF—
meta.preprocessor#4CC0BA—
markup.underline.link#47A8FF—
entity.name.tag#00CA51—
support.class.component#47A8FF—
entity.other.attribute-name, meta.attribute#C372FC—
support.type#47A8FF—
variable.other.constant, variable.readonly#47A8FF—
entity.name.label, punctuation.definition.label#4CC0BA—
entity.name.namespace, storage.modifier.namespace, markup.bold.markdown#E5B800—
entity.name.module, storage.modifier.module#D14D41—
variable.type.parameter, variable.parameter.type#E5B800—
keyword.control.exception, keyword.control.trycatch#FF4C8D—
meta.decorator, punctuation.decorator, entity.name.function.decorator#E5B800—
variable.function#EDEDED—
punctuation, punctuation.terminator, punctuation.definition.tag, punctuation.separator, punctuation.definition.string, punctuation.section.block#EDEDED—
storage.type.numeric.go, storage.type.byte.go, storage.type.boolean.go, storage.type.string.go, storage.type.uintptr.go, storage.type.error.go, storage.type.rune.go, constant.language.go, support.class.dart, keyword.other.documentation, storage.modifier.import.java, punctuation.definition.list.begin.markdown, punctuation.definition.quote.begin.markdown, meta.separator.markdown, entity.name.section.markdown#E5B800—
#4CC0BA—
markup.italic.markdown, support.type.python, variable.legacy.builtin.python, support.constant.property-value.css, storage.modifier.attribute.swift#4CC0BA—
constant.language.boolean.json#47A8FF—
keyword.channel.go, keyword.other.platform.os.swift#C372FC—
punctuation.definition.heading.markdown, support.type.property-name#FF4C8D—
#D14D41—
#F27F35—