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#7EC8E3
  • activityBar.background#101820
  • activityBar.foreground#FFFFFF
  • activityBar.inactiveForeground#6A7A8A
  • activityBarBadge.background#7EC8E3
  • activityBarBadge.foreground#0A1018
  • badge.background#7EC8E3
  • badge.foreground#0A1018
  • button.background#7EC8E3
  • button.foreground#0A1018
  • button.hoverBackground#8ED8F3
  • dropdown.background#1E2838
  • dropdown.border#283848
  • dropdown.foreground#D0E0E8
  • editor.background#1E2838
  • editor.foreground#D0E0E8
  • editor.lineHighlightBackground#283848
  • editor.selectionBackground#7EC8E380
  • editor.selectionHighlightBackground#7EC8E340
  • editorCursor.foreground#FFFFFF
  • editorGroupHeader.tabsBackground#141E28
  • editorLineNumber.foreground#5A6A7A
  • gitDecoration.addedResourceForeground#7EC8E3
  • gitDecoration.conflictingResourceForeground#C792EA
  • gitDecoration.deletedResourceForeground#E85D3A
  • gitDecoration.modifiedResourceForeground#C4A87C
  • input.background#101820
  • input.border#283848
  • input.foreground#D0E0E8
  • input.placeholderForeground#6A7A8A
  • inputOption.activeBorder#7EC8E3
  • list.activeSelectionBackground#283848
  • list.activeSelectionForeground#FFFFFF
  • list.focusBackground#283848
  • list.hoverBackground#283848
  • list.hoverForeground#D0E0E8
  • list.inactiveSelectionBackground#283848
  • minimap.background#141E28
  • minimap.findMatchHighlight#7EC8E380
  • panel.background#141E28
  • panel.border#283848
  • peekView.background#1E2838
  • peekView.border#7EC8E3
  • peekViewEditor.background#101820
  • peekViewResult.background#141E28
  • quickInput.background#1E2838
  • quickInput.foreground#D0E0E8
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#7EC8E3AA
  • scrollbarSlider.background#28384880
  • scrollbarSlider.hoverBackground#283848AA
  • sideBar.background#141E28
  • sideBar.foreground#B0C0C8
  • sideBarSectionHeader.background#1E2838
  • sideBarTitle.foreground#D0E0E8
  • statusBar.background#101820
  • statusBar.foreground#FFFFFF
  • statusBarItem.activeBackground#7EC8E366
  • statusBarItem.hoverBackground#283848
  • tab.activeBackground#1E2838
  • tab.activeForeground#FFFFFF
  • tab.hoverBackground#283848
  • tab.inactiveBackground#141E28
  • tab.inactiveForeground#6A7A8A
  • terminal.ansiBlack#2D2D2D
  • terminal.ansiBlue#A0B0C0
  • terminal.ansiBrightBlack#505050
  • terminal.ansiBrightBlue#B0C0D0
  • terminal.ansiBrightCyan#6AFFFF
  • terminal.ansiBrightGreen#8ED8F3
  • terminal.ansiBrightMagenta#D4A0FF
  • terminal.ansiBrightRed#FF6B4A
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#D4B88C
  • terminal.ansiCyan#4AE0E0
  • terminal.ansiGreen#7EC8E3
  • terminal.ansiMagenta#C792EA
  • terminal.ansiRed#E85D3A
  • terminal.ansiWhite#D0E0E8
  • terminal.ansiYellow#C4A87C
  • terminal.background#101820
  • terminal.foreground#D0E0E8
  • titleBar.activeBackground#101820
  • titleBar.activeForeground#FFFFFF
  • titleBar.inactiveBackground#0E141E
  • titleBar.inactiveForeground#6A7A8A

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#5A6A7Aitalic
keyword, storage.type, storage.modifier#7EC8E3
string, string.quoted, string.regexp#D0E0E8
constant.numeric, constant.language#A0B0C0
entity.name.function, meta.function-call, support.function#8EC8E8
entity.name.type, entity.name.class, support.type#A0B0C0
variable, variable.parameter#D0E0E8
variable.other.constant#A0B0C0
support.type.property-name.css#8EC8E8italic
meta.tag, entity.name.tag#7EC8E3
entity.other.attribute-name#D0E0E8
punctuation, meta.brace, meta.brace.round#6A7A8A
markup.heading, markup.heading entity.name#8EC8E8bold
markup.list#D0E0E8
markup.boldbold
markup.italicitalic
markup.inline.raw, markup.fenced_code.block#D0E0E8
constant.character.escape#4AE0E0
support.type.property-name.json#8EC8E8
constant.language.json#7EC8E3
Minecraft Theme by Mateo Ryhr - VS Code Theme