Skip to main content
Coding Theme

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#33b8a8
  • activityBar.background#0b1113
  • activityBar.dropBorder#59d6c5
  • activityBar.foreground#d8e3e0
  • activityBar.inactiveForeground#718688
  • activityBarBadge.background#33b8a8
  • activityBarBadge.foreground#0b1113
  • badge.background#33b8a8
  • badge.foreground#0b1113
  • button.background#33b8a8
  • button.foreground#0b1113
  • button.hoverBackground#59d6c5
  • dropdown.background#11191c
  • dropdown.border#223033
  • dropdown.foreground#d8e3e0
  • editor.background#0b1113
  • editor.foreground#d8e3e0
  • editor.lineHighlightBackground#11191c
  • editor.selectionBackground#365156
  • editor.selectionHighlightBackground#36515688
  • editor.wordHighlightBackground#33b8a822
  • editor.wordHighlightStrongBackground#33b8a833
  • editorBracketMatch.background#33b8a81a
  • editorBracketMatch.border#33b8a8
  • editorCursor.foreground#d8e3e0
  • editorHint.foreground#59d6c5
  • editorHoverWidget.background#11191c
  • editorHoverWidget.border#223033
  • editorIndentGuide.activeBackground1#304144
  • editorIndentGuide.background1#223033
  • editorInfo.foreground#5e9bff
  • editorInlayHint.background#11191c
  • editorInlayHint.foreground#a4b4b2
  • editorLineNumber.activeForeground#d8e3e0
  • editorLineNumber.foreground#718688
  • editorSuggestWidget.background#11191c
  • editorSuggestWidget.foreground#d8e3e0
  • editorSuggestWidget.selectedBackground#365156
  • editorWarning.foreground#d9c76b
  • editorWhitespace.foreground#223033
  • editorWidget.background#11191c
  • editorWidget.border#223033
  • focusBorder#33b8a8
  • gitDecoration.addedResourceForeground#4dba7a
  • gitDecoration.conflictingResourceForeground#f4a259
  • gitDecoration.deletedResourceForeground#e16f73
  • gitDecoration.ignoredResourceForeground#718688
  • gitDecoration.modifiedResourceForeground#d9c76b
  • gitDecoration.untrackedResourceForeground#59d6c5
  • input.background#11191c
  • input.border#223033
  • input.foreground#d8e3e0
  • inputOption.activeBorder#33b8a8
  • list.activeSelectionBackground#365156
  • list.activeSelectionForeground#f2f8f6
  • list.dropBackground#33b8a855
  • list.errorForeground#e16f73
  • list.focusBackground#304144
  • list.focusForeground#f2f8f6
  • list.highlightForeground#33b8a8
  • list.hoverBackground#11191c
  • list.hoverForeground#f2f8f6
  • list.inactiveSelectionBackground#223033
  • list.inactiveSelectionForeground#d8e3e0
  • list.warningForeground#d9c76b
  • listFilterWidget.background#11191c
  • listFilterWidget.noMatchesOutline#e16f73
  • listFilterWidget.shadow#02040566
  • panel.background#0b1113
  • panel.border#223033
  • problemsErrorIcon.foreground#e16f73
  • problemsInfoIcon.foreground#5e9bff
  • problemsWarningIcon.foreground#d9c76b
  • scrollbarSlider.activeBackground#304144bb
  • scrollbarSlider.background#22303388
  • scrollbarSlider.hoverBackground#30414488
  • sideBar.background#11191c
  • sideBar.border#223033
  • sideBar.dropBackground#33b8a855
  • sideBar.foreground#d8e3e0
  • sideBarSectionHeader.background#11191c
  • sideBarSectionHeader.border#223033
  • sideBarSectionHeader.foreground#33b8a8
  • sideBarTitle.border#223033
  • sideBarTitle.foreground#f2f8f6
  • statusBar.background#11191c
  • statusBar.debuggingBackground#304144
  • statusBar.foreground#d8e3e0
  • statusBar.noFolderBackground#11191c
  • statusBarItem.remoteBackground#33b8a8
  • statusBarItem.remoteForeground#0b1113
  • tab.activeBackground#11191c
  • tab.activeForeground#d8e3e0
  • tab.border#223033
  • tab.inactiveBackground#0b1113
  • tab.inactiveForeground#718688
  • terminal.ansiBlack#182326
  • terminal.ansiBlue#5e9bff
  • terminal.ansiBrightBlack#4a5f62
  • terminal.ansiBrightBlue#78acff
  • terminal.ansiBrightCyan#5ccbbb
  • terminal.ansiBrightGreen#67cf94
  • terminal.ansiBrightMagenta#71e4d8
  • terminal.ansiBrightRed#f08787
  • terminal.ansiBrightWhite#f2f8f6
  • terminal.ansiBrightYellow#efd45e
  • terminal.ansiCyan#33b8a8
  • terminal.ansiGreen#67cf94
  • terminal.ansiMagenta#59d6c5
  • terminal.ansiRed#e16f73
  • terminal.ansiWhite#c0cecb
  • terminal.ansiYellow#d9c76b
  • terminal.background#0b1113
  • terminal.foreground#d8e3e0
  • terminalCursor.foreground#d8e3e0
  • titleBar.activeBackground#0b1113
  • titleBar.activeForeground#d8e3e0
  • titleBar.inactiveBackground#11191c
  • titleBar.inactiveForeground#718688
  • tree.inactiveIndentGuidesStroke#182326
  • tree.indentGuidesStroke#223033
  • tree.tableColumnsBorder#223033
  • tree.tableOddRowsBackground#0b1113

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#718688
keyword, storage.type, storage.modifier, keyword.control, keyword.other#33b8a8
string, string.quoted, string.template, string.regexp, constant.other.symbol, constant.character.escape#67cf94
constant.numeric, constant.language, support.constant, constant.character, constant.other#d9c76b
entity.name.function, support.function, meta.function-call, meta.function, variable.function, entity.name.method#59d6c5
variable, meta.definition.variable, entity.name.type, variable.parameter, variable.language, meta.object-literal.key#a4b4b2
entity.name.type.class, entity.name.type.enum, entity.name.type.interface, entity.name.type.struct, support.type, support.class, support.module, entity.name.namespace#71e4d8
entity.name.tag, punctuation.definition.tag, entity.other.attribute-name, meta.tag, meta.attribute#59d6c5
keyword.operator, operator, punctuation.definition, punctuation.separator, punctuation.terminator#718688
meta.brace, meta.brace.curly, meta.brace.square, meta.brace.round, meta.delimiter, meta.group, punctuation.section, punctuation.section.embedded#59d6c5
markup.heading, markup.italic, markup.bold, markup.list, markup.quote, markup.link, markup.raw, markup.deleted, markup.inserted#d8e3e0
markup.heading, entity.name.section#71e4d8bold
markup.link, string.other.link#33b8a8underline
markup.deleted#e16f73
markup.inserted#67cf94
markup.changed#f4a259
meta.diff.header, meta.diff.range#59d6c5
invalid, invalid.illegal#e16f73