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#2e3440
  • activityBar.foreground#88c0d0
  • activityBar.inactiveForeground#4c566a
  • activityBarBadge.background#88c0d0
  • activityBarBadge.foreground#2e3440
  • badge.background#88c0d0
  • badge.foreground#2e3440
  • button.background#88c0d0
  • button.foreground#2e3440
  • button.hoverBackground#81a1c1
  • debugToolBar.background#2e3440
  • debugToolBar.border#4c566a
  • editor.background#2e3440
  • editor.findMatchBackground#5e81ac99
  • editor.findMatchHighlightBackground#5e81ac55
  • editor.foreground#d8dee9
  • editor.inactiveSelectionBackground#3b4252
  • editor.lineHighlightBackground#3b4252
  • editor.selectionBackground#434c5e
  • editor.wordHighlightBackground#434c5e99
  • editor.wordHighlightStrongBackground#434c5ecc
  • editorBracketMatch.background#434c5e
  • editorBracketMatch.border#88c0d0
  • editorCursor.foreground#d8dee9
  • editorError.foreground#bf616a
  • editorGroupHeader.tabsBackground#2e3440
  • editorHint.foreground#a3be8c
  • editorIndentGuide.activeBackground#4c566a
  • editorIndentGuide.background#3b4252
  • editorInfo.foreground#88c0d0
  • editorLineNumber.activeForeground#d8dee9
  • editorLineNumber.foreground#4c566a
  • editorSuggestWidget.background#2e3440
  • editorSuggestWidget.border#4c566a
  • editorSuggestWidget.selectedBackground#434c5e
  • editorWarning.foreground#ebcb8b
  • editorWhitespace.foreground#4c566a
  • editorWidget.background#2e3440
  • editorWidget.border#4c566a
  • extensionButton.prominentBackground#88c0d0
  • extensionButton.prominentForeground#2e3440
  • extensionButton.prominentHoverBackground#81a1c1
  • gitDecoration.conflictingResourceForeground#b48ead
  • gitDecoration.deletedResourceForeground#bf616a
  • gitDecoration.ignoredResourceForeground#4c566a
  • gitDecoration.modifiedResourceForeground#ebcb8b
  • gitDecoration.untrackedResourceForeground#a3be8c
  • input.background#3b4252
  • input.border#4c566a
  • input.foreground#d8dee9
  • inputOption.activeBackground#434c5e
  • inputOption.activeForeground#eceff4
  • list.activeSelectionBackground#434c5e
  • list.activeSelectionForeground#eceff4
  • list.hoverBackground#3b4252
  • list.hoverForeground#eceff4
  • list.inactiveSelectionBackground#3b4252
  • notificationCenter.border#4c566a
  • notifications.background#2e3440
  • notifications.border#4c566a
  • notificationToast.border#4c566a
  • panel.background#2e3440
  • panel.border#3b4252
  • panelTitle.activeBorder#88c0d0
  • panelTitle.activeForeground#eceff4
  • panelTitle.inactiveForeground#4c566a
  • peekViewEditor.background#2e3440
  • peekViewResult.background#2e3440
  • peekViewTitle.background#3b4252
  • pickerGroup.border#4c566a
  • pickerGroup.foreground#88c0d0
  • scrollbarSlider.activeBackground#434c5e
  • scrollbarSlider.background#4c566a80
  • scrollbarSlider.hoverBackground#4c566a
  • sideBar.background#2e3440
  • sideBar.foreground#d8dee9
  • sideBarSectionHeader.background#2e3440
  • sideBarSectionHeader.foreground#88c0d0
  • sideBarTitle.foreground#eceff4
  • statusBar.background#2e3440
  • statusBar.debuggingBackground#bf616a
  • statusBar.debuggingForeground#eceff4
  • statusBar.foreground#d8dee9
  • statusBar.noFolderBackground#2e3440
  • tab.activeBackground#3b4252
  • tab.activeForeground#eceff4
  • tab.border#2e3440
  • tab.inactiveBackground#2e3440
  • tab.inactiveForeground#4c566a
  • 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#e5e9f0
  • terminal.ansiYellow#ebcb8b
  • terminal.background#2e3440
  • terminal.foreground#d8dee9
  • titleBar.activeBackground#2e3440
  • titleBar.activeForeground#eceff4
  • titleBar.inactiveBackground#2e3440
  • titleBar.inactiveForeground#4c566a

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#616e88italic
keyword, storage.type, storage.modifier#81a1c1
keyword.control, keyword.operator#81a1c1
string, string.quoted#a3be8c
constant.numeric, constant.language#b48ead
constant.character.escape#ebcb8b
entity.name.function, support.function#88c0d0
entity.name.class, entity.name.type, support.class#8fbcbb
variable, variable.other#d8dee9
variable.parameter#d8dee9
entity.name.tag#81a1c1
entity.other.attribute-name#8fbcbb
support.type.property-name#88c0d0
markup.heading#88c0d0bold
markup.bold#81a1c1bold
markup.italic#b48eaditalic
markup.underlineunderline
markup.inline.raw#a3be8c
punctuation.definition.tag#616e88
meta.function-call#88c0d0
invalid#bf616a
Smit Dark Theme by Smit Dudhat - VS Code Theme