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

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
source, support.type.property-name.css#171717
entity.name.type.class#B38F00
entity.name.type.interface, entity.name.type#7D00CC
entity.name.type.struct#B38F00
entity.name.type.enum#B38F00
meta.object-literal.key#171717
entity.name.function.method, meta.function.method#0060F1
entity.name.function, support.function, meta.function-call.generic#7D00CC
variable, meta.variable, variable.other.object.property, variable.other.readwrite.alias#171717
variable.other.object#0060F1
variable.other.global, variable.language.this#1B9E97
variable.other.local#EDEDED
variable.parameter, meta.parameter#171717
variable.other.property, meta.property#171717
string, string.other.link, markup.inline.raw.string.markdown#0F7E32
constant.character.escape, constant.other.placeholder#171717
keyword#C31562
keyword.control.import, keyword.control.from, keyword.import#C31562
storage.modifier, keyword.modifier, storage.type#C31562
comment, punctuation.definition.comment#666666
comment.documentation, comment.line.documentation#666666
constant.numeric#171717
constant.language.boolean, constant.language.json#171717
keyword.operator#C31562
entity.name.function.preprocessor, meta.preprocessor#0060F1
meta.preprocessor#1B9E97
markup.underline.link#0060F1
entity.name.tag#0F7E32
support.class.component#0060F1
entity.other.attribute-name, meta.attribute#7D00CC
support.type#0060F1
variable.other.constant, variable.readonly#0060F1
entity.name.label, punctuation.definition.label#1B9E97
entity.name.namespace, storage.modifier.namespace, markup.bold.markdown#B38F00
entity.name.module, storage.modifier.module#AF3029
variable.type.parameter, variable.parameter.type#B38F00
keyword.control.exception, keyword.control.trycatch#C31562
meta.decorator, punctuation.decorator, entity.name.function.decorator#B38F00
variable.function#171717
punctuation, punctuation.terminator, punctuation.definition.tag, punctuation.separator, punctuation.definition.string, punctuation.section.block#171717
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#B38F00
#1B9E97
markup.italic.markdown, support.type.python, variable.legacy.builtin.python, support.constant.property-value.css, storage.modifier.attribute.swift#1B9E97
constant.language.boolean.json#0060F1
keyword.channel.go, keyword.other.platform.os.swift#7D00CC
punctuation.definition.heading.markdown, support.type.property-name#C31562
#AF3029
#C55D17

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

Loading...