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#20242a
  • activityBar.foreground#fff
  • activityBarBadge.background#6190ee
  • activityBarBadge.foreground#fff
  • badge.background#6190ee
  • badge.foreground#fff
  • breadcrumb.activeSelectionForeground#fff
  • breadcrumb.focusForeground#fff
  • breadcrumb.foreground#abb2c1
  • breadcrumbPicker.background#272b33
  • debugToolBar.background#272b33
  • diffEditor.insertedTextBackground#73c99019
  • diffEditor.removedTextBackground#ff634719
  • dropdown.background#272b33
  • editor.background#272b33
  • editor.findMatchBackground#6190ee7a
  • editor.findMatchHighlightBackground#6190ee10
  • editor.foreground#abb2c1
  • editor.inactiveSelectionBackground#3a3d41
  • editor.lineHighlightBackground#2c323c
  • editor.lineHighlightBorder#2c323c
  • editor.selectionBackground#6190ee46
  • editor.selectionHighlightBackground#add6ff26
  • editorCursor.foreground#6190ee
  • editorGroup.border#fff
  • editorGroup.dropBackground#23262d
  • editorGroupHeader.tabsBackground#20242a
  • editorIndentGuide.background#404040
  • editorLineNumber.foreground#4a5364
  • editorLink.activeForeground#6190ee
  • editorWidget.background#20242a
  • focusBorder#6190ee
  • gitDecoration.conflictingResourceForeground#c776df
  • gitDecoration.deletedResourceForeground#e16971
  • gitDecoration.ignoredResourceForeground#5c6370
  • gitDecoration.modifiedResourceForeground#d19a66
  • gitDecoration.untrackedResourceForeground#96c474
  • input.background#272b33
  • list.activeSelectionBackground#6190ee50
  • list.activeSelectionForeground#fff
  • list.hoverBackground#272b33
  • list.inactiveSelectionBackground#6190ee30
  • list.inactiveSelectionForeground#fff
  • menu.background#272b33
  • menu.foreground#abb2c1
  • menubar.selectionBackground#20242a
  • menubar.selectionForeground#fff
  • notifications.background#20242a
  • notifications.foreground#fff
  • panel.background#20242a
  • panel.border#20242a
  • sideBar.background#20242a
  • sideBar.foreground#fff
  • statusBar.background#20242a
  • statusBar.debuggingBackground#6190ee
  • statusBar.debuggingForeground#fff
  • statusBar.foreground#fff
  • statusBar.noFolderBackground#20242a
  • statusBarItem.remoteBackground#6190ee
  • statusBarItem.remoteForeground#fff
  • tab.activeBackground#272b33
  • tab.activeForeground#fff
  • tab.border#20242a
  • tab.inactiveBackground#20242a
  • terminal.ansiBlack#000
  • terminal.ansiBlue#5eadf2
  • terminal.ansiBrightBlack#000
  • terminal.ansiBrightBlue#5eadf2
  • terminal.ansiBrightCyan#56b6c2
  • terminal.ansiBrightGreen#96c474
  • terminal.ansiBrightMagenta#c776df
  • terminal.ansiBrightRed#e16971
  • terminal.ansiBrightWhite#fff
  • terminal.ansiBrightYellow#eedd92
  • terminal.ansiCyan#56b6c2
  • terminal.ansiGreen#96c474
  • terminal.ansiMagenta#c776df
  • terminal.ansiRed#e16971
  • terminal.ansiWhite#fff
  • terminal.ansiYellow#eedd92
  • titleBar.activeBackground#20242a
  • titleBar.activeForeground#abb2c1
  • titleBar.inactiveBackground#20242a
  • titleBar.inactiveForeground#abb2c1

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, string.comment#e48c8citalic
string, punctuation.definition.string#93d167
constant, variable.other.constant#ff0000
constant.language#f0b05c
constant.numeric#5ccdf0
constant.character, variable.language#c776df
variable.readwrite, variable.readwrite.other.block, support.type.object.module#abb2c1
keyword, keyword.operator.new, keyword.operator.expression, punctuation.definition.keyword, storage#f0b05c
punctuation.separator.key-value, punctuation.destructuring, punctuation.separator.annotation.python, punctuation.separator.dict.python#a7e797
entity.name.class, entity.name.module, entity.name.type, entity.other.inherited-class, storage.identifier, storage.type.cs, support.class, support.other.namespace, support.type#eedd92italic
meta.function-call, meta.method-call, support.function.construct.output, entity.name.function.stylus, support.function.filter.css, support.function.misc, support.function.builtin.shell#a3289ditalic
meta.definition.function, meta.definition.method, entity.name.function.stylus, support.function.filter.css, entity.name.function.shell#a3289d
punctuation.accessor, punctuation.definition.arguments, punctuation.separator.delimiter, punctuation.terminator, punctuation.section, constant.name.attribute.tag, punctuation.definition.begin, punctuation.definition.end, punctuation.definition.parameters.begin, punctuation.definition.parameters.end, variable.other, support.variable, meta.function-call.arguments, support.constant, meta.embedded.block.html, entity.name.function.tagged-template.js#abb2c1
function.support.builtin, function.support.core#96c474
meta.template.expression#eedd92
entity.name.tag, entity.name.tag.class.js, entity.name.tag.class.jsx#e16971
entity.name.tag.class, entity.name.tag.id, entity.other.attribute-name.id#56b6c2
entity.other.attribute-name#d19a66
entity.other.attribute-name.class#eedd92
support.type.property-name.css, support.type.property-name.postcss, support.type.property-name.scss, support.type.property-name.less, support.type.property-name.sass#abb2bf
support.constant.css, support.constant.postcss, support.constant.scss, support.constant.less, support.constant.sass#96c474
variable.css, variable.postcss, variable.scss, variable.less, variable.sass#abb2c1
variable.css.string, variable.postcss.string, variable.scss.string, variable.less.string, variable.sass.string#e5c07b
unit.css, unit.postcss, unit.scss, unit.less, unit.sass#c776df
function.css, function.postcss, function.scss, function.less, function.sass#56b6c2
support.type.property-name, meta.object-literal.key, variable.object.property#e16971
invalid, invalid.deprecated#e16971underline
string.detected-link, linkForeground#eedd92 italic underline
meta.diff, meta.diff.header#5c6370bold
markup.deleted#e16971
markup.inserted#96c474
markup.changed#56b6c2
devyl60 by devyl60 - VS Code Theme