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#1B1B26
  • activityBar.foreground#FFD580
  • editor.background#141416
  • editor.foreground#EDEDED
  • editor.selectionBackground#283347
  • editor.selectionHighlightBackground#2A2E35AA
  • editor.wordHighlightBackground#383c4a80
  • editor.wordHighlightStrongBackground#4b526380
  • editorBracketMatch.background#2C313A
  • editorBracketMatch.border#00FFC2
  • editorCursor.foreground#00FFC2
  • editorLineNumber.activeForeground#FFDD57
  • editorLineNumber.foreground#6E6B80
  • panel.background#1A1B1F
  • panel.border#2C2C2C
  • sideBar.background#1B1B1F
  • sideBar.foreground#B0B0B0
  • statusBar.background#121218
  • statusBar.foreground#CCCCCC
  • tab.activeBackground#1E1F22
  • tab.activeForeground#FFD580
  • tab.inactiveBackground#18181C
  • tab.inactiveForeground#8A8A8A
  • terminal.ansiBlack#1D1E22
  • terminal.ansiBlue#82AAFF
  • terminal.ansiBrightBlack#4C566A
  • terminal.ansiBrightBlue#82AAFF
  • terminal.ansiBrightCyan#89DDFF
  • terminal.ansiBrightGreen#C3E88D
  • terminal.ansiBrightMagenta#C792EA
  • terminal.ansiBrightRed#FF5370
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#FFCB6B
  • terminal.ansiCyan#89DDFF
  • terminal.ansiGreen#C3E88D
  • terminal.ansiMagenta#C792EA
  • terminal.ansiRed#FF6B6B
  • terminal.ansiWhite#EDEDED
  • terminal.ansiYellow#FFDD57
  • terminal.background#1B1C1F
  • terminal.foreground#EDEDED
  • terminalCursor.foreground#00FFC2
  • titleBar.activeBackground#18181C
  • titleBar.activeForeground#F5F5F5
  • titleBar.inactiveForeground#A0A0A0

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#6E6B80italic
keyword, storage.type, storage.modifier#F50087bold
string, string.quoted, string.template#FFDD57
variable, identifier, meta.definition.variable.name#00FFC2
entity.name.function, support.function#00B3FF
entity.name.type, support.class, support.type#FF6B6B
constant.numeric, constant.language.boolean, constant.language.null#C792EA
meta.import, keyword.control.import#C792EA
meta.class, meta.interface#FF6B6Bbold
entity.name.tag, meta.tag#F50087
entity.other.attribute-name, entity.other.attribute-name.html#FFD580
string.quoted, string.quoted.double.html, string.quoted.single.html#FFDD57
punctuation.definition.tag, punctuation.separator.key-value#C792EA
entity.other.attribute-name.class.css#F50087
entity.other.attribute-name.id.css#FFD580
support.type.property-name.css, support.property-name#00B3FF
support.constant.property-value.css, constant.other.color.rgb-value.css, constant.other.color.hex.css#FFDD57
variable, identifier, meta.definition.variable.name, variable.other.readwrite.js, variable.other.js#00FFC2
entity.name.function, support.function, meta.function-call.js, meta.function.js#00B3FF
keyword, storage.type, storage.modifier, keyword.control.js, keyword.operator.js#F50087bold
constant.numeric, constant.language.boolean, constant.language.null, constant.numeric.js#C792EA
punctuation.terminator.statement.js, punctuation.separator.parameter.js#FFD580
comment, punctuation.definition.comment#6E6B80italic
markup.boldbold
markup.italicitalic
entity.name.class, entity.name.type.class, entity.name.type.interface#FF6B6B
variable.other, variable.parameter, variable.language#00FFC2
constant, constant.language, constant.character, constant.other#C792EA
keyword.operator, keyword.other#FFD580
punctuation, meta.brace.round, meta.brace.square, meta.brace.curly, punctuation.separator.comma, punctuation.definition.parameters.begin, punctuation.definition.parameters.end#C792EA
invalid, invalid.deprecated#FFFFFFbold
storage.type.annotation, meta.annotation#FFD580
entity.name.namespace, entity.name.module#82AAFF
entity.name.enum, support.type.enum#FFCB6B
entity.name.type.parameter#00B3FF
entity.name.function.macro#00FFC2
meta.preprocessor#FFD580
comment.documentation#C792EAitalic
markup.heading#FFD580bold
markup.link#00B3FFunderline
markup.quote#C792EAitalic
markup.list#FFD580
meta.diff, meta.diff.header, meta.diff.header.from, meta.diff.header.to#F50087bold
meta.diff.line#EDEDED
meta.separator#6E6B80
ChidoCode by Alan Christian Ramirez Rodriguez - VS Code Theme