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#DDD
  • activityBar.dropBackground#d3d0d0
  • activityBar.foreground#403C3A
  • activityBarBadge.background#CF3B00
  • activityBarBadge.foreground#FFF
  • badge.background#F15D22
  • badge.foreground#FFF
  • button.background#F6F6F6
  • debugExceptionWidget.background#DEDEDE
  • debugExceptionWidget.border#FF793E
  • debugToolBar.background#FF9459
  • dropdown.background#F6F6F6
  • dropdown.border#63524b00
  • dropdown.foreground#403C3A
  • editor.background#FFF
  • editor.foreground#403C3A
  • editor.lineHighlightBackground#EDEDED
  • editor.selectionBackground#48B9C744
  • editorCursor.foreground#2B2928
  • editorGroup.background#EDEDED
  • editorGroup.border#DEDEDE22
  • editorGroup.dropBackground#FAA41AAA
  • editorGroupHeader.noTabsBackground#EDEDED
  • editorGroupHeader.tabsBackground#EDEDED
  • editorHoverWidget.background#F6F6F6
  • editorLineNumber.activeForeground#403C3A
  • editorLineNumber.foreground#403C3A66
  • editorWhitespace.foreground#DEDEDE11
  • editorWidget.background#DEDEDE
  • extensionButton.prominentBackground#faa41a
  • extensionButton.prominentHoverBackground#584c27aa
  • focusBorder#574F4A
  • input.background#FFFFFF
  • input.border#0008
  • input.foreground#403C3A
  • input.placeholderForeground#403C3A88
  • inputOption.activeBorder#FAA41A
  • list.activeSelectionBackground#574F4A33
  • list.activeSelectionForeground#403C3A
  • list.focusBackground#48B9C7
  • list.focusForeground#FCFCFC
  • list.highlightForeground#FAA41A
  • list.hoverBackground#FCFCFC44
  • list.inactiveSelectionBackground#48B9C7AA
  • notification.background#bebebe
  • notification.buttonBackground#48b9c7
  • notification.foreground#383838
  • notification.infoBackground#48b9c7
  • notification.infoForeground#ffffff
  • notification.warningBackground#bebebe
  • panel.background#E6E6E6
  • panel.border#403C3A11
  • panelTitle.activeBorder#FAA41A
  • panelTitle.activeForeground#C26C00
  • panelTitle.inactiveForeground#403C3A
  • peekView.border#FAA41A
  • peekViewEditor.background#EDEDED
  • peekViewEditor.matchHighlightBackground#FFCE5199
  • peekViewResult.background#EDEDED
  • peekViewTitle.background#FCFCFC
  • pickerGroup.border#2AA19899
  • pickerGroup.foreground#2AA19899
  • progressBar.background#48B9C7
  • selection.background#1C8D9B
  • sideBar.background#F6F6F6
  • sideBar.foreground#403C3A
  • sideBarSectionHeader.background#DEDEDE
  • sideBarSectionHeader.foreground#403C3A
  • sideBarTitle.foreground#403C3AAA
  • statusBar.background#403C3A
  • statusBar.debuggingBackground#d3d0d0
  • statusBar.foreground#F6F6F6
  • statusBar.noFolderBackground#403C3A
  • statusBarItem.prominentBackground#403C3A
  • statusBarItem.prominentHoverBackground#DEDEDE22
  • tab.activeBackground#0000
  • tab.activeBorder#FAA41A
  • tab.activeForeground#C26C00
  • tab.border#0000
  • tab.inactiveBackground#00000000
  • tab.inactiveForeground#403C3A
  • terminal.ansiBlack#111
  • terminal.ansiBlue#3F51B5
  • terminal.ansiBrightBlack#574F4A
  • terminal.ansiBrightBlue#839496
  • terminal.ansiBrightCyan#93a1a1
  • terminal.ansiBrightGreen#574e4a
  • terminal.ansiBrightMagenta#6c71c4
  • terminal.ansiBrightRed#cb4b16
  • terminal.ansiBrightWhite#d3d0d0
  • terminal.ansiBrightYellow#657b83
  • terminal.ansiCyan#48B9C7
  • terminal.ansiGreen#73C48F
  • terminal.ansiMagenta#9C27B0
  • terminal.ansiRed#F15D22
  • terminal.ansiWhite#DEDEDE
  • terminal.ansiYellow#faa41a
  • textLink.activeForeground#DE8800
  • textLink.foreground#C26C00
  • titleBar.activeBackground#574F4A
  • titleBar.activeForeground#F6F6F6
  • titleBar.inactiveBackground#655C56
  • titleBar.inactiveForeground#F6F6F699

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
—#657B83—
meta.embedded, source.groovy.embedded#657B83—
comment#93A1A1italic
string#175541—
string.regexp#f15d22—
constant.numeric#f15d22—
variable.language, variable.other#3d5d6b—
keyword#b94c4c—
storage#073642—
entity.name.class, entity.name.type#607D8B—
entity.name.function, support.function#5e4825—
punctuation.definition.variable#34a357—
punctuation.section.embedded.begin, punctuation.section.embedded.end#f15d22—
constant.language, meta.preprocessor#d37f00—
support.function.construct, keyword.other.new#f15d22—
constant.character, constant.other#CB4B16—
entity.other.inherited-class——
variable.parameter——
entity.name.tag#607D8B—
punctuation.definition.tag.begin, punctuation.definition.tag.end#376161—
entity.other.attribute-name#439b9b—
support.function#376161—
punctuation.separator.continuation#f15d22—
support.constant——
support.type, support.class#6e8b34—
support.type.exception#CB4B16—
support.other.variable——
invalid——
meta.diff, meta.diff.header#E0EDDDitalic
markup.deleted#f15d22
markup.changed#cb4b16
markup.inserted#219186—
markup.quote#488d5e—
markup.list#faa41a—
markup.bold, markup.italic#f15d22—
markup.inline.raw#2AA198
markup.heading#607D8B—
markup.heading.setext#607D8B