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#1d1f21
  • activityBar.foreground#c5c8c6
  • activityBar.inactiveForeground#969896
  • activityBarBadge.background#81a2be
  • activityBarBadge.foreground#ffffff
  • editor.background#1d1f21
  • editor.findMatchBackground#f8e71c33
  • editor.findMatchHighlightBackground#f8e71c22
  • editor.foreground#c5c8c6
  • editor.lineHighlightBackground#1b2529
  • editor.selectionBackground#373b41
  • editor.selectionHighlightBackground#373b4199
  • editorCursor.foreground#c5c8c6
  • editorHoverWidget.background#1d1f21
  • editorHoverWidget.border#373b41
  • editorLineNumber.activeForeground#c5c8c6
  • editorLineNumber.foreground#475f63
  • editorSuggestWidget.background#1d1f21
  • editorSuggestWidget.border#373b41
  • editorSuggestWidget.selectedBackground#373b41
  • editorWidget.background#1d1f21
  • editorWidget.border#373b41
  • gitDecoration.conflictingResourceForeground#f0c674
  • gitDecoration.deletedResourceForeground#cc6666
  • gitDecoration.ignoredResourceForeground#969896
  • gitDecoration.modifiedResourceForeground#80cbc4
  • gitDecoration.untrackedResourceForeground#b5bd68
  • input.background#1d1f21
  • input.border#373b41
  • input.foreground#c5c8c6
  • inputOption.activeBorder#81a2be
  • list.activeSelectionBackground#373b41
  • list.activeSelectionForeground#c5c8c6
  • list.highlightForeground#81a2be
  • list.hoverBackground#28282866
  • list.inactiveSelectionBackground#373b4180
  • list.inactiveSelectionForeground#c5c8c6
  • scrollbarSlider.activeBackground#373b41dd
  • scrollbarSlider.background#373b4180
  • scrollbarSlider.hoverBackground#373b41aa
  • sideBar.background#1d1f21
  • sideBar.foreground#c5c8c6
  • sideBarSectionHeader.background#1d1f21
  • sideBarSectionHeader.foreground#c5c8c6
  • sideBarTitle.foreground#c5c8c6
  • statusBar.background#1d1f21
  • statusBar.debuggingBackground#cc6666
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#c5c8c6
  • statusBar.noFolderBackground#1d1f21
  • tab.activeBackground#1d1f21
  • tab.activeBorderTop#81a2be
  • tab.activeForeground#c5c8c6
  • tab.border#1d1f21
  • tab.inactiveBackground#1d1f21
  • tab.inactiveForeground#969896
  • terminal.ansiBlack#1d1f21
  • terminal.ansiBlue#81a2be
  • terminal.ansiBrightBlack#969896
  • terminal.ansiBrightBlue#7eaef1
  • terminal.ansiBrightCyan#6cdada
  • terminal.ansiBrightGreen#70ff70
  • terminal.ansiBrightMagenta#ff99ff
  • terminal.ansiBrightRed#ff6b68
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#ffff00
  • terminal.ansiCyan#8abeb7
  • terminal.ansiGreen#b5bd68
  • terminal.ansiMagenta#b294bb
  • terminal.ansiRed#cc6666
  • terminal.ansiWhite#c5c8c6
  • terminal.ansiYellow#f0c674
  • terminal.background#1d1f21
  • terminal.foreground#c5c8c6
  • titleBar.activeBackground#1d1f21
  • titleBar.activeForeground#c5c8c6
  • titleBar.inactiveBackground#1d1f21
  • titleBar.inactiveForeground#969896

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#969896italic
string, string.quoted, string.template#b5bd68
constant.numeric#de935f
constant.language#b294bbitalic
constant.character, constant.other#de935f
variable, variable.other#cc6666
keyword, keyword.control, keyword.operator.new#b294bbitalic
storage#b294bbitalic
storage.type#b294bbitalic
entity.name.class, entity.name.type.class#f0c674
entity.other.inherited-class#b5bd68
entity.name.function, support.function#81a2be
variable.parameter#de935f
entity.name.tag#cc6666
entity.other.attribute-name#f0c674italic
support.function#81a2be
support.constant#de935f
support.type, support.class#f0c674
invalid#cc6666
invalid.deprecated#a3685a
punctuation#c5c8c6
keyword.operator#c5c8c6
keyword.other.kotlin, storage.type.kotlin#b294bbitalic
entity.name.class.kotlin, entity.name.type.class.kotlin#f0c674
entity.name.type.interface.kotlin#b5bd68italic
entity.name.function.kotlin#81a2be
variable.other.kotlin#cc6666
variable.parameter.kotlin#de935f
meta.annotation.kotlin, storage.type.annotation.kotlin#b294bb
keyword.other.package.kotlin#b294bbitalic
keyword.other.import.kotlin#b294bbitalic
meta.template.expression.kotlin#c5c8c6
keyword.soft.kotlin, keyword.hard.kotlin, keyword.hard.class.kotlin, keyword.hard.object.kotlin, keyword.hard.typealias.kotlin, keyword.hard.fun.kotlin, keyword.hard.package.kotlin, keyword.control.kotlin, storage.modifier.other.kotlin#b294bbitalic
entity.name.type.class.kotlin, entity.name.type.kotlin#f0c674
entity.name.type.object.kotlin#f0c674
entity.name.type.interface.kotlin#b5bd68italic
entity.name.function.declaration.kotlin, entity.name.function.call.kotlin, entity.name.function.reference.kotlin#81a2be
entity.name.type.class.extension.kotlin#cc6666
variable.other.kotlin, variable.parameter.kotlin#de935f
variable.language.this.kotlin#b294bbitalic
entity.name.type.annotation.kotlin, entity.name.type.annotation-site.kotlin#b294bb
entity.name.package.kotlin#b5bd68
meta.template.expression.kotlin, variable.string-escape.kotlin#cc6666
comment.block.javadoc.kotlin, keyword.other.documentation.javadoc.kotlin#969896italic
storage.type.function.arrow.kotlin#b294bbitalic
storage.modifier.kotlin#b294bbitalic
keyword.operator.comparison.kotlin, keyword.operator.assignment.arithmetic.kotlin, keyword.operator.assignment.kotlin, keyword.operator.arithmetic.kotlin, keyword.operator.logical.kotlin, keyword.operator.increment-decrement.kotlin, keyword.operator.range.kotlin#c5c8c6
variable.parameter#de935f
variable.parameter.kotlin#de935f
variable.parameter.kotlin#de935f
variable.parameter.kotlin, meta.function.parameters.kotlin#de935f
variable.other.kotlin#cc6666
meta.function.kotlin variable.parameter.kotlin#de935f
Tomorrow Night IJ by Arkadiy Dymkov-Weinstein - VS Code Theme