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#f0f0f0
  • activityBar.border#d0d0d0
  • activityBar.foreground#2e3440
  • activityBarBadge.background#88c0d0
  • activityBarBadge.foreground#000000
  • badge.background#88c0d0
  • badge.foreground#000000
  • button.background#d0d0d0
  • debugToolBar.background#f0f0f0
  • diffEditor.insertedTextBackground#a3be8c30
  • diffEditor.removedTextBackground#bf616a30
  • dropdown.background#f0f0f0
  • dropdown.border#d0d0d0
  • editor.background#ffffff
  • editor.foreground#2e3440
  • editor.lineHighlightBackground#d0d0d0
  • editor.selectionBackground#88c0d050
  • editor.selectionHighlightBackground#88c0d020
  • editorBracketMatch.background#8fbcbb
  • editorBracketMatch.border#d0d0d0
  • editorCursor.foreground#2e3440
  • editorError.foreground#bf616a
  • editorGroup.border#d0d0d0
  • editorGroupHeader.tabsBackground#f0f0f0
  • editorGutter.addedBackground#a3be8c
  • editorGutter.deletedBackground#bf616a
  • editorGutter.modifiedBackground#ebcb8b
  • editorHoverWidget.background#f0f0f0
  • editorHoverWidget.border#d0d0d0
  • editorIndentGuide.background#d0d0d0
  • editorLineNumber.foreground#4c566a
  • editorLink.activeForeground#2e3440
  • editorMarkerNavigation.background#d0d0d0
  • editorOverviewRuler.border#d0d0d0
  • editorRuler.foreground#d0d0d0
  • editorSuggestWidget.background#f0f0f0
  • editorSuggestWidget.border#d0d0d0
  • editorSuggestWidget.foreground#2e3440
  • editorSuggestWidget.highlightForeground#8fbcbb
  • editorSuggestWidget.selectedBackground#d0d0d0
  • editorWarning.foreground#ebcb8b
  • editorWhitespace.foreground#d0d0d0
  • editorWidget.background#f0f0f0
  • extensionButton.prominentBackground#a3be8c
  • extensionButton.prominentHoverBackground#c3e88d
  • focusBorder#d0d0d0
  • input.background#ffffff
  • input.border#d0d0d0
  • input.foreground#2e3440
  • input.placeholderForeground#4c566a
  • inputValidation.errorBorder#bf616a
  • inputValidation.infoBorder#81a1c1
  • inputValidation.warningBorder#ebcb8b
  • list.activeSelectionBackground#d0d0d0
  • list.activeSelectionForeground#2e3440
  • list.focusBackground#88c0d099
  • list.focusForeground#2e3440
  • list.highlightForeground#88c0d0
  • list.hoverBackground#d0d0d0
  • list.hoverForeground#2e3440
  • list.inactiveSelectionBackground#d0d0d0
  • list.inactiveSelectionForeground#2e3440
  • notebook.cellBorderColor#d0d0d0
  • notebook.cellEditorBackground#ffffff
  • notebook.focusedCellBorder#88c0d0
  • notebook.focusedEditorBorder#88c0d0
  • notebook.outputContainerBackgroundColor#f0f0f0
  • notebook.selectedCellBorder#88c0d0
  • panel.background#f0f0f0
  • panel.border#d0d0d0
  • panelTitle.activeForeground#2e3440
  • peekView.border#d0d0d0
  • peekViewEditor.background#ffffff
  • peekViewEditor.matchHighlightBackground#88c0d050
  • peekViewEditorGutter.background#ffffff
  • peekViewResult.background#ffffff
  • peekViewResult.matchHighlightBackground#88c0d050
  • peekViewTitle.background#ffffff
  • peekViewTitleDescription.foreground#4c566a
  • pickerGroup.foreground#88c0d0
  • progressBar.background#88c0d0
  • scrollbar.shadow#d0d0d0
  • scrollbarSlider.activeBackground#88c0d0
  • scrollbarSlider.background#d0d0d0
  • scrollbarSlider.hoverBackground#d0d0d0
  • selection.background#88c0d0
  • sideBar.background#f0f0f0
  • sideBar.border#d0d0d0
  • sideBar.foreground#2e3440
  • sideBarSectionHeader.background#f0f0f0
  • sideBarTitle.foreground#2e3440
  • statusBar.background#f0f0f0
  • statusBar.border#d0d0d0
  • statusBar.debuggingBackground#b48ead
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#2e3440
  • statusBar.noFolderBackground#f0f0f0
  • tab.activeBorder#88c0d0
  • tab.activeForeground#2e3440
  • tab.border#d0d0d0
  • tab.hoverBackground#d0d0d0
  • tab.inactiveBackground#f0f0f0
  • tab.inactiveForeground#4c566a
  • tab.unfocusedActiveBorder#d0d0d0
  • tab.unfocusedActiveForeground#2e3440
  • terminal.ansiBlack#3b4252
  • terminal.ansiBlue#81a1c1
  • terminal.ansiBrightBlack#4c566a
  • terminal.ansiBrightBlue#81a1c1
  • terminal.ansiBrightCyan#8fbcbb
  • terminal.ansiBrightGreen#a3be8c
  • terminal.ansiBrightMagenta#b48ead
  • terminal.ansiBrightRed#bf616a
  • terminal.ansiBrightWhite#eceff4
  • terminal.ansiBrightYellow#ebcb8b
  • terminal.ansiCyan#88c0d0
  • terminal.ansiGreen#a3be8c
  • terminal.ansiMagenta#b48ead
  • terminal.ansiRed#bf616a
  • terminal.ansiWhite#2e3440
  • terminal.ansiYellow#ebcb8b
  • terminal.foreground#2e3440
  • textLink.activeForeground#2e3440
  • textLink.foreground#88c0d0
  • titleBar.activeBackground#f0f0f0
  • titleBar.activeForeground#2e3440
  • titleBar.border#d0d0d0
  • titleBar.inactiveBackground#f0f0f0
  • titleBar.inactiveForeground#4c566a
  • widget.shadow#d0d0d0

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
—#2e3440—
emphasis—italic
strong—bold
comment#4c566a—
constant.character#ebcb8b—
constant.character.escape#ebcb8b—
constant.language#81a1c1—
constant.numeric#b48ead—
constant.regexp#ebcb8b—
entity.name.class, entity.name.type.class#8fbcbb—
entity.name.function#88c0d0—
entity.name.tag#81a1c1—
entity.other.attribute-name#8fbcbb—
entity.other.inherited-class#8fbcbbbold
invalid.deprecated#2e3440—
invalid.illegal#2e3440—
keyword#81a1c1—
keyword.operator#81a1c1—
keyword.other.new#81a1c1—
markup.bold—bold
markup.changed#ebcb8b—
markup.deleted#bf616a—
markup.inserted#a3be8c—
meta.preprocessor#5e81ac—
punctuation#2e3440—
punctuation.definition.method-parameters, punctuation.definition.function-parameters, punctuation.definition.parameters#2e3440—
punctuation.definition.tag#81a1c1—
punctuation.definition.comment, punctuation.end.definition.comment, punctuation.start.definition.comment#4c566a—
punctuation.section#2e3440—
punctuation.section.embedded.begin, punctuation.section.embedded.end#81a1c1—
punctuation.terminator#81a1c1—
punctuation.definition.variable#81a1c1—
storage#81a1c1—
string#a3be8c—
string.regexp#ebcb8b—
support.class#8fbcbb—
support.constant#81a1c1—
support.function#88c0d0—
support.function.construct#81a1c1—
support.type#8fbcbb—
support.type.exception#8fbcbb—
token.debug-token#b48ead—
token.error-token#bf616a—
token.info-token#88c0d0—
token.warn-token#ebcb8b—