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.background#12122a
  • activityBar.foreground#4ecdc4
  • badge.background#4ecdc4
  • badge.foreground#1a1a2e
  • button.background#4ecdc4
  • button.foreground#1a1a2e
  • editor.background#1a1a2e
  • editor.foreground#e0e0e0
  • editor.lineHighlightBackground#1f1f3a
  • editor.selectionBackground#3d3d5c
  • editorBracketMatch.background#3d3d5c
  • editorBracketMatch.border#4ecdc4
  • editorCursor.foreground#4ecdc4
  • editorIndentGuide.activeBackground1#4ecdc4
  • editorIndentGuide.background1#2a2a4a
  • editorLineNumber.activeForeground#e0e0e0
  • editorLineNumber.foreground#5c6370
  • focusBorder#4ecdc4
  • input.background#1f1f3a
  • input.border#2a2a4a
  • input.foreground#e0e0e0
  • list.activeSelectionBackground#2a2a4a
  • list.hoverBackground#1f1f3a
  • panel.background#16162a
  • panel.border#2a2a4a
  • sideBar.background#16162a
  • sideBar.foreground#c0c0c0
  • sideBarTitle.foreground#4ecdc4
  • statusBar.background#0e0e24
  • statusBar.debuggingBackground#c678dd
  • statusBar.foreground#e0e0e0
  • tab.activeBackground#1a1a2e
  • tab.activeBorderTop#4ecdc4
  • tab.activeForeground#e0e0e0
  • tab.inactiveBackground#12122a
  • tab.inactiveForeground#6c6c8c
  • terminal.ansiBlue#61afef
  • terminal.ansiCyan#4ecdc4
  • terminal.ansiGreen#98c379
  • terminal.ansiMagenta#c678dd
  • terminal.ansiRed#e06c75
  • terminal.ansiYellow#e5c07b
  • terminal.foreground#e0e0e0
  • titleBar.activeBackground#12122a
  • titleBar.activeForeground#e0e0e0

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.block#5c6370italic
keyword.declaration, keyword.declaration.function, keyword.declaration.let, keyword.declaration.struct, keyword.declaration.enum#c678dd
keyword.control, keyword.control.flow, keyword.control.match, keyword.control.for, keyword.control.in, keyword.control.import#c678dd
storage.modifier.mutable#e06c75bold
storage.type.primitive#4ecdc4
entity.name.type, entity.name.type.struct, entity.name.type.enum#4ecdc4
support.type.result#4ecdc4
support.type.result-constructor#98c379bold
entity.name.function.definition#61afef
entity.name.function.call, entity.name.function.method#61afef
support.function.io, support.function.array, support.function.string, support.function.conversion, support.function.math, support.function.result, support.function.utility, support.function.builtin#e5c07b
string.quoted.double, string.interpolated#98c379
constant.character.escape#56b6c2
punctuation.section.interpolation.begin, punctuation.section.interpolation.end#e06c75bold
constant.numeric, constant.numeric.integer, constant.numeric.float#d19a66
constant.language.boolean#d19a66
variable.other.enummember#d19a66
variable.other.declaration#e0e0e0
variable.other.iterator#e0e0e0
variable.other.property#e5c07b
keyword.operator#c678dd
keyword.operator.range#c678dd
keyword.operator.arrow.match#c678ddbold
punctuation.separator#8c8ca0
punctuation.section#e0e0e0
string.quoted.double.import-path#98c379underline
punctuation.definition.generic#4ecdc4
punctuation.separator.type, punctuation.separator.return-type#8c8ca0
invalid.illegal.unknown-escape#e06c75underline
URUS - Syntax Highlighting & Snippets by Urus Foundation - VS Code Theme