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#0A1621
  • activityBarBadge.background#ee4444
  • activityBarBadge.foreground#ffffff
  • badge.background#ffffff33
  • badge.foreground#ffffffff
  • debugToolBar.background#0E1F2F
  • debugToolBar.border#00dd00
  • dropdown.background#203d55
  • editor.background#0E1F2F
  • editor.foreground#f0f0f0
  • editor.inactiveSelectionBackground#3a3d4180
  • editor.selectionHighlightBackground#add6ff26
  • editorCodeLens.foreground#808090
  • editorGroupHeader.tabsBackground#0A1621
  • editorHoverWidget.background#0A1621
  • editorIndentGuide.background1#404040
  • editorInlayHint.background#00000000
  • editorInlayHint.foreground#80809080
  • editorSuggestWidget.background#0A1621
  • editorSuggestWidget.selectedBackground#add6ff26
  • editorUnnecessaryCode.opacity#00000060
  • editorWidget.background#0E1F2F
  • editorWidget.border#0E1F2F
  • gitDecoration.addedResourceForeground#55dd55
  • gitDecoration.conflictingResourceForeground#ee5555
  • gitDecoration.deletedResourceForeground#ee5555
  • gitDecoration.modifiedResourceForeground#dddd55
  • gitDecoration.untrackedResourceForeground#55dd55
  • input.background#203d55
  • list.activeSelectionBackground#009aecff
  • list.activeSelectionForeground#ffffff
  • list.dropBackground#383b3d
  • list.focusBackground#007acc
  • list.focusForeground#ffffff
  • list.hoverBackground#ffffff11
  • list.hoverForeground#ffffff
  • list.inactiveSelectionBackground#009aec55
  • list.inactiveSelectionForeground#ffffff
  • menu.background#0E1F2F
  • menu.separatorBackground#777777bb
  • panel.background#0E1F2F
  • quickInput.background#550000
  • sideBar.background#0A1621
  • sideBarSectionHeader.background#0A1621
  • sideBarSectionHeader.border#777777bb
  • statusBar.background#0A1621
  • statusBar.foreground#ffffff88
  • statusBarItem.remoteBackground#0A1621
  • statusBarItem.remoteForeground#ffffff88
  • tab.activeBackground#0E1F2F
  • tab.activeBorderTop#ffffff
  • tab.activeForeground#ffffff
  • tab.border#00000060
  • tab.inactiveBackground#0A1621
  • titleBar.activeBackground#0A1621
  • titleBar.inactiveBackground#0A1621

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
meta.embedded, source.groovy.embedded#d0d0d0
emphasisitalic
strongbold
header#000080
comment#608b4e
entity.name.tag#93caec
entity.name.tag.css#83f1c9
entity.other.attribute-name#ffc0c0
entity.other.attribute-name.class.css, entity.other.attribute-name.class.mixin.css, entity.other.attribute-name.id.css, entity.other.attribute-name.parent-selector.css, entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css, source.css.less entity.other.attribute-name.id, entity.other.attribute-name.attribute.scss, entity.other.attribute-name.scss#83f1c9
invalid#f44747
markup.underlineunderline
markup.bold#83F1C9
markup.heading#ffffb7bold
markup.italicitalic
markup.inserted#b5cea8
markup.deleted#ce9178
markup.changed#93caec
beginning.punctuation.definition.quote.markdown#608b4e
beginning.punctuation.definition.list.markdown#6796e6
punctuation.definition.markdown#707080
markup.italic.markdown markup.inline.raw#ffffb7
markup.bold.markdown markup.inline.raw#83f1c9
markup.bold.markdown string.other.link.title.markdown#83f1c9underline
markup.italic.markdown string.other.link.title.markdown#f0f0f0italic underline
string.other.link.title.markdown#f0f0f0underline
markup.underline.link.markdown#547289underline
markup.inline.raw#93caec
meta.selector#d7ba7d
punctuation.definition.tag#93caec
meta.preprocessor#93caec
meta.preprocessor.string#ce9178
meta.preprocessor.numeric#b5cea8
meta.structure.dictionary.key.python#9cdcfe
meta.diff.header#93caec
storage#93caec
storage.type#93caec
storage.modifier#93caec
string#ce9178
string.tag#ce9178
string.value#ce9178
string.regexp#d16969
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded#93caec
meta.template.expression, meta.interpolation.cs#b0b0b0
support.type.vendored.property-name, support.type.property-name, variable.css, variable.scss, variable.other.less, source.coffee.embedded#ffffb7
keyword#93caec
keyword.control#93caec
keyword.operator#d0d0d0
keyword.operator.new, keyword.operator.expression, keyword.operator.cast, keyword.operator.sizeof, keyword.operator.logical.python#93caec
keyword.other.unit#ffc0c0
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#93caec
support.function.git-rebase#9cdcfe
constant.sha.git-rebase#b5cea8
storage.modifier.import.java, variable.language.wildcard.java, storage.modifier.package.java#d0d0d0
variable.language#93caec
string#ffc0c0
constant.numeric, variable.other.enummember#ffc0c0
constant.language#ffc0c0
constant.regexp#646695
comment#808090italic
punctuation#547289
entity.name.function, support.function, support.constant.handlebars#ffffb7
meta.return-type, support.class, support.type, entity.name.type, entity.name.class, storage.type.cs, storage.type.generic.cs, storage.type.modifier.cs, storage.type.variable.cs, storage.type.annotation.java, storage.type.generic.java, storage.type.java, storage.type.object.array.java, storage.type.primitive.array.java, storage.type.primitive.java, storage.type.token.java, storage.type.groovy, storage.type.annotation.groovy, storage.type.parameters.groovy, storage.type.generic.groovy, storage.type.object.array.groovy, storage.type.primitive.array.groovy, storage.type.primitive.groovy#83f1c9
meta.return.type, meta.type.cast.expr, meta.type.new.expr, support.constant.math, support.constant.dom, support.constant.json, entity.other.inherited-class#83f1c9
token.info-token#6796e6
token.warn-token#cd9731
token.error-token#f44747
token.debug-token#b267e6
meta.decorator.js, meta.decorator.js entity.name.function, meta.decorator.jsx, meta.decorator.jsx entity.name.function, meta.decorator.ts, meta.decorator.ts entity.name.function, meta.decorator.tsx, meta.decorator.tsx entity.name.function#93caecitalic
punctuation.terminator.statement, punctuation.accessor, keyword.operator.type.annotation#606070
nlog.id.0#f05455italic
nlog.id.1#ea3838italic
nlog.id.2#e64d3ditalic
nlog.id.3#d35501italic
nlog.id.4#f05455italic
nlog.id.5#ea3838italic
nlog.id.6#e64d3ditalic
nlog.id.7#d35501italic
nlog.text.0#2fcc71
nlog.text.1#ece05a
nlog.text.2#79c9d0
nlog.text.3#e67f23