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#1E242E
  • activityBar.foreground#7AFFB2
  • activityBar.inactiveForeground#6B8299
  • activityBarBadge.background#FF9B5E
  • activityBarBadge.foreground#1A2028
  • badge.background#FF9B5E
  • badge.foreground#1A2028
  • button.background#4B9783
  • button.foreground#FFFFFF
  • button.hoverBackground#5BA793
  • dropdown.background#2C353F
  • dropdown.border#3D4D60
  • dropdown.foreground#D8E3D2
  • editor.background#1A2028
  • editor.foreground#E9EAE6
  • editor.lineHighlightBackground#252F3A
  • editor.selectionBackground#4D5D7055
  • editor.wordHighlightBackground#374254AA
  • editorCursor.foreground#7AFFB2
  • editorGroup.border#4B9783
  • editorGroup.dropBackground#6B8299
  • editorGroupHeader.tabsBackground#2C353F
  • focusBorder#4B9783
  • input.background#2C353F
  • input.border#3D4D60
  • input.foreground#D8E3D2
  • list.activeSelectionBackground#374254
  • list.activeSelectionForeground#FFFFFF
  • list.highlightForeground#FFFFFF
  • list.hoverBackground#3D4D60
  • list.hoverForeground#D8E3D2
  • list.inactiveSelectionBackground#2C353F
  • list.inactiveSelectionForeground#D8E3D2
  • menu.background#2C353F
  • menu.border#3D4D60
  • menu.foreground#D8E3D2
  • menu.selectionBackground#4B9783
  • menu.selectionForeground#FFFFFF
  • notifications.background#2C353F
  • peekView.border#4B9783
  • peekViewEditor.background#1A2028
  • peekViewResult.background#2C353F
  • pickerGroup.border#3D4D60
  • pickerGroup.foreground#FFFFFF
  • scrollbar.shadow#1E242E
  • scrollbarSlider.activeBackground#6B8299
  • scrollbarSlider.background#4D5D70
  • scrollbarSlider.hoverBackground#5A6E85
  • sideBar.background#1E242E
  • sideBar.border#4B9783
  • sideBar.foreground#D8E3D2
  • sideBarSectionHeader.background#2C353F
  • sideBarSectionHeader.foreground#D8E3D2
  • sideBarTitle.foreground#66D9EF
  • statusBar.background#2C353F
  • statusBar.border#4B9783
  • statusBar.debuggingBackground#3D4D60
  • statusBar.foreground#D8E3D2
  • statusBar.noFolderBackground#2C353F
  • statusBarItem.activeBackground#2C353F
  • statusBarItem.hoverBackground#4D5D70
  • statusBarItem.prominentBackground#3D4D60
  • statusBarItem.prominentForeground#D8E3D2
  • tab.activeBackground#1F3D35
  • tab.activeForeground#FFFFFF
  • tab.border#4B9783
  • tab.hoverBackground#2C353F
  • tab.inactiveBackground#1E242E
  • tab.inactiveForeground#6B8299
  • tab.lastPinnedBorder#66D9EF
  • tab.unfocusedActiveForeground#6B8299
  • tab.unfocusedHoverForeground#6B8299
  • tab.unfocusedInactiveForeground#4D5D70
  • terminal.ansiBlack#2C353F
  • terminal.ansiBlue#66D9EF
  • terminal.ansiBrightBlack#6B8299
  • terminal.ansiBrightBlue#A3E4F2
  • terminal.ansiBrightCyan#B0FFF5
  • terminal.ansiBrightGreen#A2FFD0
  • terminal.ansiBrightMagenta#F2B8FF
  • terminal.ansiBrightRed#FF9B9B
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#FFE4A8
  • terminal.ansiCyan#4B9783
  • terminal.ansiGreen#7AFFB2
  • terminal.ansiMagenta#E7A3FF
  • terminal.ansiRed#FF7F7F
  • terminal.ansiWhite#E9EAE6
  • terminal.ansiYellow#FFD787
  • terminal.background#1A2028
  • terminal.foreground#D8E3D2
  • terminal.selectionBackground#374254
  • terminal.selectionForeground#FFFFFF
  • terminalCursor.background#FFFFFF
  • terminalCursor.foreground#7AFFB2
  • titleBar.activeBackground#2C353F
  • titleBar.activeForeground#D8E3D2
  • titleBar.border#4B9783
  • titleBar.inactiveBackground#1E242E
  • titleBar.inactiveForeground#6B8299
  • walkThrough.embeddedEditorBackground#1A2028

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
keyword#66D9EFbold
storage.type#4B9783italic
constant.numeric#FFD787bold
entity.name.class#7AFFB2italic bold
entity.name.function#66D9EF—
variable, variable.parameter#BFD7E3—
variable.other#D4E6F2—
keyword.operator#FF9B5Ebold
storage.modifier#87FFEDitalic
comment#6B8299italic
string#A2FFD0—
string.quoted.double.json#FFD787—
punctuation#E7A3FF—
invalid, invalid.illegal#FF7F7F—
entity.name.tag#66D9EFbold
meta.tag.attributes#BFD7E3—
entity.name.section.markdown#FFD787—
heading.markdown#66D9EFbold
markup.bold.markdown, markup.bold#A2FFD0bold
markup.italic.markdown, markup.italic#A2FFD0italic
variable.language#FF9B5Eitalic
meta.property-value#FFD787—
entity.other.attribute-name.pseudo-class#F2B8FF—
meta.function-call.generic#66D9EFbold
entity.other.inherited-class#A3FFD6italic
constant.language#FF9B5Ebold
support.function#7AFFB2—
support.type#87FFEDitalic
support.type.property-name#66D9EF—
support.type.property-name.json#A2FFD0—
meta.object-literal.key#7AFFB2—
entity.name.namespace#66D9EFitalic
keyword.control#E7A3FFbold
support.class#FFD787bold
ThemeDatabase All Themes by enes ozturk - VS Code Theme