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#ff4f6d
  • activityBar.background#05181d
  • activityBar.foreground#eaf2f3
  • activityBar.inactiveForeground#648b93
  • activityBarBadge.background#ff4f6d
  • activityBarBadge.foreground#082228
  • badge.background#ff4f6d
  • badge.foreground#082228
  • breadcrumb.focusForeground#eaf2f3
  • breadcrumb.foreground#648b93
  • breadcrumbPicker.background#05181d
  • descriptionForeground#648b93
  • diffEditor.insertedTextBackground#6ee0b01a
  • diffEditor.removedTextBackground#ff4f6d1a
  • dropdown.background#103138
  • dropdown.foreground#eaf2f3
  • editor.background#082228
  • editor.findMatchBackground#ff4f6d55
  • editor.findMatchHighlightBackground#ff4f6d33
  • editor.foreground#eaf2f3
  • editor.lineHighlightBackground#103138
  • editor.selectionBackground#ff4f6d33
  • editor.selectionHighlightBackground#ff4f6d22
  • editor.wordHighlightBackground#6aa8ff22
  • editorBracketHighlight.foreground1#ff4f6d
  • editorBracketHighlight.foreground2#6aa8ff
  • editorBracketHighlight.foreground3#5fe3d0
  • editorBracketHighlight.foreground4#c8b6ff
  • editorBracketHighlight.foreground5#ffe08a
  • editorBracketHighlight.foreground6#ff9e7a
  • editorBracketHighlight.unexpectedBracket.foreground#ff5c66
  • editorBracketMatch.background#ff4f6d22
  • editorBracketMatch.border#ff4f6d
  • editorCursor.foreground#ff4f6d
  • editorGroupHeader.noTabsBackground#05181d
  • editorGroupHeader.tabsBackground#05181d
  • editorGutter.addedBackground#6ee0b0
  • editorGutter.deletedBackground#ff4f6d
  • editorGutter.modifiedBackground#6aa8ff
  • editorHoverWidget.background#103138
  • editorIndentGuide.activeBackground1#648b93
  • editorIndentGuide.background1#103138
  • editorLineNumber.activeForeground#eaf2f3
  • editorLineNumber.foreground#648b93
  • editorSuggestWidget.background#103138
  • editorSuggestWidget.highlightForeground#ff4f6d
  • editorSuggestWidget.selectedBackground#082228
  • editorWhitespace.foreground#103138
  • editorWidget.background#103138
  • editorWidget.foreground#eaf2f3
  • errorForeground#ff5c66
  • focusBorder#ff4f6d
  • foreground#eaf2f3
  • gitDecoration.deletedResourceForeground#ff4f6d
  • gitDecoration.ignoredResourceForeground#648b93
  • gitDecoration.modifiedResourceForeground#6aa8ff
  • gitDecoration.untrackedResourceForeground#6ee0b0
  • icon.foreground#eaf2f3
  • input.background#103138
  • input.border#103138
  • input.foreground#eaf2f3
  • input.placeholderForeground#648b93
  • inputOption.activeBorder#ff4f6d
  • list.activeSelectionBackground#103138
  • list.activeSelectionForeground#eaf2f3
  • list.highlightForeground#ff4f6d
  • list.hoverBackground#103138aa
  • list.inactiveSelectionBackground#103138
  • notificationCenterHeader.background#05181d
  • notifications.background#103138
  • panel.background#05181d
  • panel.border#103138
  • panelTitle.activeBorder#ff4f6d
  • panelTitle.activeForeground#eaf2f3
  • peekView.border#ff4f6d
  • peekViewEditor.background#05181d
  • peekViewEditor.matchHighlightBackground#ff4f6d44
  • peekViewResult.background#05181d
  • peekViewResult.selectionBackground#103138
  • peekViewTitle.background#05181d
  • pickerGroup.border#103138
  • pickerGroup.foreground#ff4f6d
  • progressBar.background#ff4f6d
  • quickInput.background#05181d
  • quickInputList.focusBackground#103138
  • scrollbarSlider.activeBackground#648b9388
  • scrollbarSlider.background#648b9344
  • scrollbarSlider.hoverBackground#648b9366
  • sideBar.background#05181d
  • sideBar.foreground#eaf2f3
  • sideBarSectionHeader.background#05181d
  • sideBarTitle.foreground#eaf2f3
  • statusBar.background#05181d
  • statusBar.border#ff4f6d
  • statusBar.debuggingBackground#ff4f6d
  • statusBar.debuggingForeground#082228
  • statusBar.foreground#648b93
  • statusBar.noFolderBackground#05181d
  • statusBarItem.remoteBackground#ff4f6d
  • statusBarItem.remoteForeground#082228
  • tab.activeBackground#082228
  • tab.activeBorderTop#ff4f6d
  • tab.activeForeground#eaf2f3
  • tab.border#05181d
  • tab.inactiveBackground#05181d
  • tab.inactiveForeground#648b93
  • terminal.ansiBlack#103138
  • terminal.ansiBlue#6aa8ff
  • terminal.ansiBrightBlack#648b93
  • terminal.ansiBrightBlue#6aa8ff
  • terminal.ansiBrightCyan#5fe3d0
  • terminal.ansiBrightGreen#6ee0b0
  • terminal.ansiBrightMagenta#c8b6ff
  • terminal.ansiBrightRed#ff4f6d
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#ffe08a
  • terminal.ansiCyan#5fe3d0
  • terminal.ansiGreen#6ee0b0
  • terminal.ansiMagenta#c8b6ff
  • terminal.ansiRed#ff4f6d
  • terminal.ansiWhite#eaf2f3
  • terminal.ansiYellow#ffe08a
  • terminal.background#082228
  • terminal.foreground#eaf2f3
  • terminalCursor.foreground#ff4f6d
  • textLink.activeForeground#6aa8ff
  • textLink.foreground#ff4f6d
  • textPreformat.foreground#5fe3d0
  • titleBar.activeBackground#05181d
  • titleBar.activeForeground#eaf2f3
  • titleBar.inactiveBackground#05181d
  • titleBar.inactiveForeground#648b93

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#648b93italic
keyword, keyword.control, storage, storage.type, storage.modifier#ff4f6d—
keyword.operator#eaf2f3—
string, string.quoted, string.template, punctuation.definition.string#5fe3d0—
entity.name.function, support.function, meta.function-call, entity.other.attribute-name#6aa8ff—
entity.name.type, entity.name.class, support.type, support.class, entity.name.tag#c8b6ff—
variable.language.this, variable.other.property, support.variable.property, meta.object-literal.key, support.type.property-name#ff9e7a—
constant.numeric, constant.language, constant.other#ffe08a—
variable, variable.other.readwrite, variable.parameter#eaf2f3—
markup.heading, entity.name.section#ff4f6dbold
markup.bold—bold
markup.italic—italic
markup.inline.raw, markup.fenced_code#5fe3d0—
markup.underline.link, string.other.link#ff4f6d—
invalid, invalid.illegal#ff5c66—