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#080504
  • activityBar.border#19120e
  • activityBar.foreground#ff2e93
  • activityBar.inactiveForeground#A08F80
  • editor.background#0d0907
  • editor.foreground#f5ebe0
  • editor.lineHighlightBackground#19120e
  • editor.selectionBackground#ff2e9333
  • editorBracketHighlight.foreground1#ff2e93
  • editorBracketHighlight.foreground2#00f5d4
  • editorBracketHighlight.foreground3#ffee58
  • editorBracketHighlight.foreground4#9b5de5
  • editorBracketHighlight.foreground5#00bfff
  • editorBracketHighlight.foreground6#ff9f1c
  • editorCursor.foreground#ff2e93
  • editorGroup.border#19120e
  • editorGroupHeader.tabsBackground#080504
  • editorIndentGuide.activeBackground#ff2e9380
  • editorIndentGuide.activeBackground1#ff2e93bb
  • editorIndentGuide.background#5c4e4340
  • editorIndentGuide.background1#5c4e4330
  • editorLineNumber.activeForeground#ff2e93
  • editorLineNumber.foreground#5c4e43
  • list.activeSelectionBackground#ff2e9325
  • list.activeSelectionForeground#ffffff
  • list.hoverBackground#ff2e9310
  • list.inactiveSelectionBackground#ffffff08
  • list.inactiveSelectionForeground#f5ebe0
  • sideBar.background#080504
  • sideBar.border#19120e
  • sideBar.foreground#d7ccc8
  • sideBarSectionHeader.background#0d0907
  • sideBarSectionHeader.border#19120e
  • sideBarTitle.foreground#f5ebe0
  • statusBar.background#080504
  • statusBar.border#19120e
  • statusBar.foreground#a89f95
  • tab.activeBackground#0d0907
  • tab.activeForeground#ffffff
  • tab.border#19120e
  • tab.inactiveBackground#080504
  • tab.inactiveForeground#A08F80
  • terminal.ansiBlack#080504
  • terminal.ansiBlue#00bfff
  • terminal.ansiBrightBlack#5c4e43
  • terminal.ansiBrightBlue#00bfff
  • terminal.ansiBrightCyan#00f5d4
  • terminal.ansiBrightGreen#00f5d4
  • terminal.ansiBrightMagenta#ff2e93
  • terminal.ansiBrightRed#ff2e93
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#ffee58
  • terminal.ansiCyan#00f5d4
  • terminal.ansiGreen#00f5d4
  • terminal.ansiMagenta#ff2e93
  • terminal.ansiRed#ff2e93
  • terminal.ansiWhite#ffffff
  • terminal.ansiYellow#ffee58
  • terminal.background#080504
  • terminal.foreground#f5ebe0
  • titleBar.activeBackground#080504
  • titleBar.activeForeground#f5ebe0
  • titleBar.border#19120e
  • widget.shadow#00000080

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#8A7A6Eitalic
keyword, keyword.control, keyword.operator.new, keyword.operator.expression, keyword.operator.logical, storage, storage.type, storage.modifier#ff2e93bold
entity.name.function, meta.function-call, support.function#00f5d4
string, string.quoted, punctuation.definition.string, string.template#ffee58
variable, variable.other, variable.parameter, variable.language.this#f5ebe0
variable.other.property, support.type.property-name, meta.object-literal.key#e0a899
entity.name.tag, punctuation.definition.tag#ff2e93
entity.other.attribute-name#ff9f1citalic
entity.name.type, entity.name.class, support.class, support.type#00bfff
constant, constant.numeric, constant.language.boolean, constant.language.null#9b5de5
keyword.control.import, keyword.control.export, keyword.control.default, keyword.control.from, keyword.control.as#ff2e93
punctuation, keyword.operator#00f5d4
T-Dev Cafe Themes by AnhhTuann - VS Code Theme