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#1B1C1E
  • activityBar.foreground#FFFFFF
  • button.background#1B1C1E
  • button.foreground#FFFFFF
  • debugToolBar.background#222529
  • dropdown.background#1B1C1E
  • dropdown.foreground#FFFFFF
  • editor.background#1B1C1E
  • editor.foreground#FFFFFF
  • editor.inactiveSelectionBackground#5F5FFF7F
  • editor.lineHighlightBackground#1B1C1E
  • editor.selectionBackground#5F5FFF
  • editorBracketHighlight.foreground1#F4A261
  • editorBracketHighlight.foreground2#F4BF6D
  • editorBracketHighlight.foreground3#F6D365
  • editorBracketHighlight.foreground4#F67400
  • editorBracketHighlight.foreground5#E76F51
  • editorBracketHighlight.foreground6#D98E56
  • editorBracketHighlight.foreground7#F4A261
  • editorBracketHighlight.unexpectedBracket.foreground#FF7F7F
  • editorCursor.foreground#7F7FFF
  • editorLineNumber.foreground#B0B0B0
  • foreground#FFFFFF
  • gitDecoration.conflictingResourceForeground#f67400
  • gitDecoration.deletedResourceForeground#ff7f7f
  • gitDecoration.ignoredResourceForeground#eff0f1
  • gitDecoration.modifiedResourceForeground#7f5dbf
  • gitDecoration.untrackedResourceForeground#98C379
  • input.background#1B1C1E
  • input.foreground#FFFFFF
  • list.activeSelectionBackground#5F5FFF
  • list.activeSelectionForeground#FFFFFF
  • list.inactiveSelectionBackground#1B1C1E
  • list.inactiveSelectionForeground#FFFFFF
  • panel.background#1B1C1E
  • panel.border#7F7FFF
  • panelTitle.activeForeground#FFFFFF
  • panelTitle.inactiveForeground#B0B0B0
  • sideBar.background#1B1C1E
  • sideBar.foreground#FFFFFF
  • statusBar.background#1B1C1E
  • statusBar.foreground#FFFFFF
  • tab.activeBackground#1B1C1E
  • tab.activeForeground#FFFFFF
  • tab.inactiveBackground#1B1C1E
  • tab.inactiveForeground#B0B0B0
  • terminal.ansiBlack#1B1C1E
  • terminal.ansiBlue#7FBaff
  • terminal.ansiBrightBlack#B0B0B0
  • terminal.ansiBrightBlue#7F7FFF
  • terminal.ansiBrightCyan#7F3FBF
  • terminal.ansiBrightGreen#98C379
  • terminal.ansiBrightMagenta#CC3980
  • terminal.ansiBrightRed#FF7F7F
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#F67400
  • terminal.ansiCyan#7F3FBF
  • terminal.ansiGreen#98C379
  • terminal.ansiMagenta#CC3980
  • terminal.ansiRed#FF7F7F
  • terminal.ansiWhite#FFFFFF
  • terminal.ansiYellow#F67400
  • terminal.background#1B1C1E
  • terminal.foreground#FFFFFF
  • terminal.selectionBackground#7f7fff7f
  • terminalCursor.background#222529
  • terminalCursor.foreground#e3e3ea
  • titleBar.activeBackground#1B1C1E
  • titleBar.activeForeground#FFFFFF
  • walkThrough.embeddedEditorBackground#222529
  • widget.foreground#FFFFFF

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
keyword, keyword.control, keyword.operator, keyword.other, keyword.function#7F7FFFbold
storage, storage.type, storage.modifier, storage.type.ts, storage.type.js#CDCCDB
variable, variable.other#FFFFFF
comment, comment.block, comment.line, comment.block.js, meta.class.js, meta.export.default.js, punctuation.definition.comment.ts, comment.block.documentation.ts#B1B1BA
punctuation.definition.block.ts, meta.block.ts, meta.arrow.ts, meta.var.expr.ts, meta.function.expression.ts, meta.export.default.ts#E3E3EA
constant#FFFFFF
entity#7F5DBF
entity.name.function#CC3980
invalid#FF7F7F
string#98C379
support#7FBaff
markup.heading#7F5DBF
markup.deleted#FF7F7F
markup.inserted#98C379
markup.changed#7F3FBF
markup.underlineunderline
markup.underline.link#7F7FFF
markup.list, markup.raw#FFFFFF

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

Loading...