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#2D3654
  • activityBar.foreground#98A3C6
  • activityBarBadge.background#8FF0FF
  • activityBarBadge.foreground#2D3139
  • badge.background#2D3654
  • button.background#404754
  • debugToolBar.background#2D3654
  • diffEditor.insertedTextBackground#fdffb630
  • diffEditor.removedTextBackground#E25F6530
  • dropdown.background#2A3147
  • dropdown.border#181a1f
  • editor.background#2D3654
  • editor.findMatchHighlightBackground#6774A1
  • editor.foreground#EFEFF3
  • editor.lineHighlightBackground#2A3147
  • editor.selectionBackground#6774A1
  • editor.selectionHighlightBackground#6774A1
  • editor.wordHighlightBackground#484e5b
  • editor.wordHighlightStrongBackground#EFEFF326
  • editorCursor.foreground#f8f8f0
  • editorError.foreground#E25F65
  • editorGroup.border#181a1f
  • editorGroupHeader.tabsBackground#2D3654
  • editorGutter.addedBackground#fdffb6c0
  • editorGutter.deletedBackground#E25F65c0
  • editorGutter.modifiedBackground#56b5c2c0
  • editorHoverWidget.background#2D3654
  • editorHoverWidget.border#181a1f
  • editorIndentGuide.background#333D5B
  • editorLineNumber.foreground#6774A1
  • editorMarkerNavigation.background#2D3654
  • editorOverviewRuler.addedForeground#fdffb680
  • editorOverviewRuler.deletedForeground#E25F6580
  • editorOverviewRuler.modifiedForeground#56b5c280
  • editorRuler.foreground#EFEFF326
  • editorSuggestWidget.background#2D3654
  • editorSuggestWidget.border#181a1f
  • editorSuggestWidget.selectedBackground#2D3654
  • editorWhitespace.foreground#333D5B
  • editorWidget.background#2D3654
  • focusBorder#333D5B
  • gitDecoration.deletedResourceForeground#E25F65
  • gitDecoration.modifiedResourceForeground#56b5c2
  • gitDecoration.untrackedResourceForeground#fdffb6
  • input.background#2A3147
  • list.activeSelectionBackground#384368
  • list.activeSelectionForeground#d7dae0
  • list.focusBackground#2A3147
  • list.highlightForeground#c5c5c5
  • list.hoverBackground#2A3147
  • list.inactiveSelectionBackground#2D3654
  • list.inactiveSelectionForeground#d7dae0
  • peekViewEditor.background#2D3654
  • peekViewEditor.matchHighlightBackground#314365
  • peekViewResult.background#2D3654
  • peekViewResult.matchHighlightBackground#314365
  • scrollbarSlider.activeBackground#3E486D
  • scrollbarSlider.background#3E486D
  • scrollbarSlider.hoverBackground#3E486D
  • sideBar.background#2D3654
  • sideBar.foreground#98A3C6
  • sideBarSectionHeader.background#2D3654
  • sideBarTitle.foreground#98A3C6
  • statusBar.background#2D3654
  • statusBar.debuggingBackground#2D3654
  • statusBar.foreground#9da5b4
  • statusBar.noFolderBackground#2D3654
  • statusBarItem.hoverBackground#2D3654
  • tab.activeBackground#2D3654
  • tab.activeBorder#8FF0FF
  • tab.border#2D3654
  • tab.inactiveBackground#2D3654
  • terminal.ansiBlack#2D3139
  • terminal.ansiBlue#2e8ccf
  • terminal.ansiGreen#fdffb6
  • terminal.ansiRed#E25F65
  • terminal.ansiYellow#B4881D
  • terminal.border#333D5B
  • terminal.foreground#98A3C6
  • titleBar.activeBackground#2D3654
  • titleBar.activeForeground#9da5b4
  • titleBar.inactiveBackground#2D3654
  • titleBar.inactiveForeground#98A3C6
  • tree.indentGuidesStroke#333D5B

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#98A3C6
comment#98A3C6
string.quoted.docstring.multi.python#EFEFF3
comment markup.link#EFEFF3
markup.inserted.diff#fdffb6
markup.deleted.diff#E25F65
keyword.control.cpp#e2adf2
punctuation.separator.key-value#EFEFF3
entity.other.attribute-name.js,entity.other.attribute-name.ts,entity.other.attribute-name.jsx,entity.other.attribute-name.tsx,variable.language.super
variable.language.super.js#8FF0FF
keyword.operator.expression.import#8FF0FF
support.constant.math#e2adf2
support.constant.property.math#94F298
variable.other.jsdoc#EFEFF3
meta.embedded.line.js#EFEFF3
storage.type.annotation.java#e2adf2
storage.modifier.import.java,storage.type.java#e2adf2
meta.definition.variable.name.java#e2adf2
keyword.operator.logical.js#56b6c2
keyword.operator.bitwise#56b6c2
support.constant.property-value.scss,support.constant.property-value.css#94F298
support.constant.color.w3c-standard-color-name.css,support.constant.color.w3c-standard-color-name.scss#94F298
punctuation.separator.list.comma.css#EFEFF3
support.constant.color.w3c-standard-color-name.css#94F298
support.type.vendored.property-name.css#56b6c2
punctuation.definition.template-expression.begin,punctuation.definition.template-expression.end#e2adf2
support.module.node,support.type.object.module,support.module.node#e2adf2
support.constant.json#94F298
keyword.operator.expression.instanceof,keyword.operator.new,keyword.operator.ternary#B8B6FF
support.type.object.console#e2adf2
support.variable.property.process#94F298
entity.name.function,support.function.console#8FF0FF
keyword.operator#56b6c2
support.type.object.dom#56b6c2
keyword.operator.arithmetic,keyword.operator.comparison#56b6c2
keyword.operator.assignment.c,keyword.operator.comparison.c,keyword.operator.c,keyword.operator.increment.c#B8B6FFff
punctuation.separator.delimiter.c#EFEFF3
support.type.posix-reserved.c#57adb8
keyword.operator.sizeof.c#C178DD
variable.parameter.function.language.special.self.python, variable.language.special.self.python#e2adf2
support.type.python#56b6c2
keyword.operator.logical.python#B8B6FF
variable.parameter.function.python#D18C4E
meta.function-call.generic.python#8FF0FF
punctuation.definition.comment#98A3C6
none#EFEFF3
keyword.operator#EFEFF3
keyword#B8B6FF
import.storage.java#e2adf2
token.package.keyword#B8B6FF
token.package#EFEFF3
entity.name.function, meta.require, support.function.any-method#8FF0FF
entity.name.type.namespace#e2adf2
support.class, entity.name.type.class#e2adf2
entity.name.class.identifier.namespace.type#e2adf2
entity.name.class#8FF0FF
entity.name.type#e2adf2
keyword.control#B8B6FF
control.elements, keyword.operator.less#94F298
keyword.other.special-method#8FF0FF
storage#B8B6FF
token.storage#B8B6FF
keyword.operator.expression.delete,keyword.operator.expression.in,keyword.operator.expression.of,keyword.operator.expression.instanceof,keyword.operator.new,keyword.operator.expression.typeof,keyword.operator.expression.void#B8B6FF
token.storage.type.java#e2adf2
support.function#56b6c2
support.constant.property-value#EFEFF3
support.constant.font-name#94F298
meta.tag#EFEFF3
string#fdffb6
entity.other.inherited-class#e2adf2
constant.other.symbol#56b6c2
constant.numeric#94F298
none#94F298
none#94F298
constant#94F298
punctuation.definition.constant#94F298
entity.name.tag#e2adf2
entity.other.attribute-name#94F298
entity.other.attribute-name.id#8FF0FF
entity.other.attribute-name.class.css#94F298
meta.selector#B8B6FF
none#D2945D
markup.heading#EFEFF3bold
markup.heading punctuation.definition.heading, entity.name.section
keyword.other.unit#94F298
markup.bold,todo.boldbold
emphasis md#B8B6FF
markup.inline.raw.markdown, markup.inline.raw.string.markdown#EFEFF3
beginning.punctuation.definition.list.markdown#E25F65
markup.quote.markdown#EFEFF3italic
markup.underline.link.markdown,markup.underline.link.image.markdown#EFEFF3italic
string.other.link.title.markdown,string.other.link.description.markdown#8FF0FF
markup.italic.markdownitalic
markup.bold.markdownbold
string.regexp#57B6C2
constant.character.escape#57B6C2
punctuation.section.embedded, variable.interpolation#EFEFF3
invalid.illegal#FFFFFF
invalid.broken#FFFFFF
invalid.deprecated#FFFFFF
invalid.unimplemented#FFFFFF
source.json meta.structure.dictionary.json > string.quoted.json#E25F65
source.json meta.structure.dictionary.json > string.quoted.json > punctuation.string#E25F65
source.json meta.structure.dictionary.json > value.json > string.quoted.json,source.json meta.structure.array.json > value.json > string.quoted.json,source.json meta.structure.dictionary.json > value.json > string.quoted.json > punctuation,source.json meta.structure.array.json > value.json > string.quoted.json > punctuation#fdffb6
source.json meta.structure.dictionary.json > constant.language.json,source.json meta.structure.array.json > constant.language.json#56B6C2
entity.name.function.decorator.python#8FF0FF
function.parameter#94F298
function.parameter#EFEFF3
function.brace#EFEFF3
var.this,variable.language.this.js,variable.language.this.ts,variable.language.this.jsx,variable.language.this.tsx#e2adf2
block.scope.end,block.scope.begin#EFEFF3
token.info-token#6796e6
token.warn-token#cd9731
token.error-token#E25F65
token.debug-token#b267e6
variable.other.normal.shell, variable.other.positional.shell#E25F65
entity.name.tag.yaml#EFEFF3ff
ThemeDatabase All Themes by enes ozturk - VS Code Theme