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
emphasisitalic
strongbold
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.boldbold
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