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.

  • editor.background#ffffff
  • editor.foreground#272727
  • editor.inactiveSelectionBackground#ededed
  • editor.lineHighlightBackground#00bbff15
  • editor.selectionBackground#c2e8ff
  • editor.selectionHighlightBackground#ffffff00
  • editor.selectionHighlightBorder#222222
  • editorCursor.foreground#00bbff
  • editorLineNumber.activeForeground#333
  • editorLineNumber.foreground#aaa
  • editorSuggestWidget.focusHighlightForeground#6700b9
  • editorSuggestWidget.highlightForeground#7653c1
  • editorSuggestWidget.selectedBackground#b8e9ff
  • editorSuggestWidget.selectedForeground#7653c1
  • editorWhitespace.foreground#e0e0e0
  • list.focusHighlightForeground#fff
  • quickInputList.focusBackground#3976ff
  • quickInputList.focusForeground#fff
  • selection.background#c2e8ff
  • terminal.ansiBlack#222222
  • terminal.ansiBlue#0099d0
  • terminal.ansiBrightBlack#222222
  • terminal.ansiBrightBlue#0099d0
  • terminal.ansiBrightCyan#00a6b2
  • terminal.ansiBrightGreen#5b9d4e
  • terminal.ansiBrightMagenta#66008d
  • terminal.ansiBrightRed#e45024
  • terminal.ansiBrightWhite#777777
  • terminal.ansiBrightYellow#f9ae02
  • terminal.ansiCyan#00a6b2
  • terminal.ansiGreen#5b9d4e
  • terminal.ansiMagenta#66008d
  • terminal.ansiRed#e45024
  • terminal.ansiWhite#777777
  • terminal.ansiYellow#f9ae02
  • terminal.foreground#222222
  • terminal.selectionBackground#c1ddff
  • terminalCursor.foreground#1998e0

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
source.ruby punctuation.separator.key-value#4c8fc7—
markup.inserted.diff, markup.inserted.git-commit, punctuation.definition.inserted.diff, punctuation.definition.to-file.diff, meta.diff.header.to-file#61862f—
markup.deleted.diff, punctuation.definition.deleted.diff, meta.diff.header.from-file, punctuation.definition.from-file.diff, markup.deleted.git-commit#d4420dc2—
meta.diff.header.git, meta.diff.range, punctuation.definition.range.diff#4c8fc7—
meta.diff.index.git, markup.changed.git-commit#bc670f—
comment, comment punctuation#adadad—
comment.block.preprocessor#adadad—
comment.documentation, comment.block.documentation#bc670f—
invalid.deprecated—italic underline
keyword.operator#626fc9—
keyword, storage#61862f—
storage.type, support.type#6700b9—
constant.language, support.constant, variable.language#7653c1—
variable, support.variable, meta.at-rule.include.scss, punctuation.definition.variable.less#4c8fc7—
entity.name.function, support.function, entity#61862f—
entity.name.type, entity.other.inherited-class, support.class#3a1d72—
entity.name.exception#f93232—
entity.name.section—
constant.numeric, constant#7653c1—
constant.character, string, meta.attribute-selector.scss#bc670f—
string punctuation#e69a4c—
constant.character.escape—bold
string.regexp#699d36—
markup.italic—italic
markup.error#f9f2ce—
markup.output, markup.raw#7f7f7f—
markup.prompt#555555—
markup.heading—bold
markup.bold—bold
markup.traceback#f93232—
markup.underline—underline
meta.tag.sgml.doctype#7f7f7f—
entity.name.tag#2f6f9f—
meta.tag string punctuation#5fafef—
punctuation.definition.tag#4f9fcf—
entity.other.attribute-name#4c8fc7—
meta.tag string.quoted, meta.tag string.quoted constant.character.entity#d44950—
text.pug meta.tag string.quoted#bc670f—
entity.name.tag.pug#61862f—
entity.other.attribute-name.tag.pug#2f6f9f—
entity.name.function.pug#9c27b0—
entity.other.attribute-name.class.pug#4f9fcf—
text.pug variable.other.readwrite.js, variable.control.import.include.pug#268bd2—
string.comment.buffered.block.pug#777—
meta.property-name, support.type.property-name#d4430d—
meta.selector, meta.selector entity, meta.selector entity punctuation#3a77bf—
entity.other.attribute-name, entity.other.attribute-name.parent-selector-suffix.css punctuation.definition.entity.css#4f9fcf—
constant.other.color.rgb-value.hex.css, constant.other.color.rgb-value.hex.css punctuation.definition.constant.css#43a202—
entity.name.tag.css, entity.name.tag.less#2f6f9f—
meta.property-value constant.numeric, meta.property-value constant, meta.property-value keyword, keyword.other.unit.px.css, keyword.other.unit.s.css, constant.numeric.css, meta.definition.variable.scss keyword.other.unit.percentage.css, constant.numeric.less, constant.other.color.rgb-value.less punctuation.definition.constant.less#43a202—
entity.other.attribute-name.class.css punctuation.definition.entity.css, entity.other.attribute-name.class.less punctuation.definition.entity.less#4c8fc7—
entity.other.attribute-name.pseudo-element.css, entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.less, entity.other.attribute-name.pseudo-class.less#4c8fc7—
punctuation.definition.entity.css, punctuation.definition.entity.less#4c8fc7—
support.function.misc.css, support.function.misc.scss, support.function.transform.css, support.function.transform.less, support.function.gradient.css, support.function.gradient.less, entity.name.function.scss, support.function.color.less#61862f—
punctuation.definition.keyword.css, punctuation.definition.keyword.scss, punctuation.definition.keyword.less#61862f—
keyword.other.important.css, keyword.other.important.scss, keyword.other.important.less, keyword.other.important.less punctuation.separator.less#d33682—
meta.at-rule.extend.scss, meta.at-rule.extend.scss support.constant.mathematical-symbols.scss#4f9fcf—
source.css.scss entity.other.attribute-name.placeholder.css punctuation.definition.entity.css#4f9fcf—
meta.function-call.less#7653c1—
keyword.other.pseudo-class.less#7653c1—
meta.embedded.line#272727—
soda by Nando Vieira - VS Code Theme