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#1d222c
  • activityBar.border#80808035
  • activityBar.foreground#ffffff
  • editor.background#2a313f
  • editor.foreground#abb2bf
  • editor.selectionBackground#354350
  • editorGroupHeader.noTabsBackground#131316
  • editorGroupHeader.tabsBackground#131316
  • editorGutter.modifiedBackground#6796e6
  • editorMarkerNavigation.background#2d2d30
  • editorMarkerNavigationError.background#e26852
  • editorMarkerNavigationInfo.background#8db9e2
  • editorMarkerNavigationWarning.background#e2c08d
  • editorOverviewRuler.addedForeground#6796e699
  • editorOverviewRuler.border#7f7f7f4d
  • editorOverviewRuler.bracketMatchForeground#a0a0a0
  • editorOverviewRuler.commonContentForeground#60606066
  • editorOverviewRuler.currentContentForeground#81b88b99
  • editorOverviewRuler.deletedForeground#6796e699
  • editorOverviewRuler.errorForeground#e2685299
  • editorOverviewRuler.findMatchForeground#e2c08d99
  • editorOverviewRuler.incomingContentForeground#6796e699
  • editorOverviewRuler.infoForeground#8db9e2
  • editorOverviewRuler.modifiedForeground#6796e699
  • editorOverviewRuler.rangeHighlightForeground#6796e699
  • editorOverviewRuler.selectionHighlightForeground#a0a0a0cc
  • editorOverviewRuler.warningForeground#e2c08d
  • editorOverviewRuler.wordHighlightForeground#a0a0a0cc
  • editorOverviewRuler.wordHighlightStrongForeground#6c6cc499
  • focusBorder#e2c08d99
  • foreground#abb2bf
  • gitDecoration.addedResourceForeground#81b88b
  • gitDecoration.conflictingResourceForeground#6c6cc4
  • gitDecoration.deletedResourceForeground#e26852
  • gitDecoration.ignoredResourceForeground#8c8c8c
  • gitDecoration.modifiedResourceForeground#e2c08d
  • gitDecoration.submoduleResourceForeground#8db9e2
  • gitDecoration.untrackedResourceForeground#73c991
  • input.background#131316
  • input.border#515c664c
  • input.foreground#abb2bf
  • list.activeSelectionBackground#8db9e299
  • list.activeSelectionForeground#ffffff
  • list.dropBackground#2d2d30
  • list.errorForeground#e26852
  • list.focusBackground#2d2d30
  • list.highlightForeground#0097fb
  • list.hoverBackground#2d2d3099
  • list.inactiveSelectionBackground#2d2d30
  • list.invalidItemForeground#d3652c99
  • list.warningForeground#e2c08d
  • panel.background#131316
  • settings.modifiedItemIndicator#6796e6
  • sideBar.background#1d222c
  • sideBar.border#80808035
  • statusBar.background#3a4348
  • statusBar.border#80808035
  • statusBar.debuggingBackground#14191f
  • statusBar.debuggingForeground#515c66
  • statusBar.foreground#ffffff
  • statusBar.noFolderBackground#131316
  • statusBarItem.activeBackground#f09253
  • statusBarItem.hoverBackground#e7813d
  • statusBarItem.prominentBackground#e7813d
  • statusBarItem.prominentHoverBackground#e7813d
  • tab.activeBackground#131316
  • tab.activeForeground#ffffff
  • tab.inactiveBackground#18181b
  • tab.inactiveForeground#ffffff80
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#3c93fd
  • terminal.ansiBrightBlack#2f3239
  • terminal.ansiBrightBlue#b3d7ff
  • terminal.ansiBrightCyan#b3f1ff
  • terminal.ansiBrightGreen#8ad1c3
  • terminal.ansiBrightMagenta#b9bbf8
  • terminal.ansiBrightRed#ff816f
  • terminal.ansiBrightWhite#dfdfe0
  • terminal.ansiBrightYellow#e0bc87
  • terminal.ansiCyan#84f0eb
  • terminal.ansiGreen#91d462
  • terminal.ansiMagenta#a79df8
  • terminal.ansiRed#fc6a5d
  • terminal.ansiWhite#c2c3c5
  • terminal.ansiYellow#fd8f3f
  • terminal.background#131316
  • terminal.border#80808059
  • terminal.foreground#cccccc
  • titleBar.activeBackground#262629
  • titleBar.activeForeground#cccccc
  • titleBar.inactiveBackground#131316
  • titleBar.inactiveForeground#cccccc99

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
source#C25664—
comment#5C5C5C—
string, punctuation.definition.string.end#E0BC87—
constant.numeric#C25664—
keyword.operator#DFDFDF—
constant.character, constant.regexp, constant.rgb-value, constant.language, constant.other#C25664—
new.expr entity.name#C25664—
constant.character, constant.other#A77283—
variable#A77283
variable.parameter#A77283—
variable.other.object#C25664—
punctuation.terminator, punctuation.separator, punctuation.accessor#DFDFDF—
storage, keyword.operator.assignment, keyword.operator.arithmetic, keyword.operator.logical, storage.type, keyword.type#E7813D—
keyword.operator, keyword.operator.assignment, storage.type.function.arrow, meta.template.expression punctuation, punctuation.separator.key-value, meta.object-literal.key meta.brace.square, meta.template.expression keyword.operator, keyword.operator.or.regexp, keyword.operator.quantifier, punctuation.definition.group.regexp, punctuation.definition.character-class, punctuation.accessor.js#FFFFFF—
support.type, support.class#A77283italic
entity.name.class#A77283—
entity.other.inherited-class#C8AE9Ditalic underline
entity.name.function#8eeee1
entity.name.tag#C25664
entity.other.attribute-name#D18466
support.class, support.other, support.variable#c25664
support.constant#D18466
support.function, support.other.variable#FFFFFF—
invalid#FFFFFF
invalid.deprecated#F8F8F0—
markup.quote#D18466—
markup.bold#D18466bold
markup.italic#D18466italic
markup.inline.raw#C8AE9D—
markup.heading.setext#E06C75—
token.info-token#6796E6—
token.warn-token#D18466—
token.error-token#E06C75—
token.debug-token#A79DF8—
keyword.control.conditional, keyword.control.loop, keyword.control.flow, keyword.control.exception#DFDFDF—
entity.name.variable.field.cs, entity.name.variable.parameter.cs, entity.name.variable.local.cs, variable.other.object.property.cs, variable.other.object.cs#A77283—
#8eeee1—
keyword.other.svelte#DFDFDF—
meta.jsx.children.js, punctuation.definition.tag.begin.js, punctuation.definition.tag.end.js, punctuation.definition.tag.begin.svelte, punctuation.definition.tag.end.svelte, text.svelte#ABB2BF—
meta.brace.round.js, punctuation.definition.parameters.begin.js, punctuation.definition.parameters.end.js, punctuation.section.embedded.begin.js, punctuation.section.embedded.end.js, meta.brace.round.ts, punctuation.definition.parameters.begin.ts, punctuation.definition.parameters.end.ts, punctuation.section.embedded.begin.ts, punctuation.section.embedded.end.ts#ffe207—
meta.brace.square.js, punctuation.definition.binding-pattern.array.js#df60da—
support.class.component.js#c25688—
variable.other.object.js#A77283—
comment, comment.block, comment.block.documentation, comment.line, constant, constant.character, constant.character.escape, constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex, constant.numeric.octal, constant.other, constant.regexp, constant.rgb-value, emphasis, entity, entity.name, entity.name.class, entity.name.function, entity.name.method, entity.name.section, entity.name.selector, entity.name.tag, entity.name.type, entity.other, entity.other.attribute-name, entity.other.inherited-class, invalid, invalid.deprecated, invalid.illegal, keyword, keyword.control, keyword.operator, keyword.operator.new, keyword.operator.assignment, keyword.operator.arithmetic, keyword.operator.logical, keyword.other, markup, markup.bold, markup.changed, markup.deleted, markup.heading, markup.inline.raw, markup.inserted, markup.italic, markup.list, markup.list.numbered, markup.list.unnumbered, markup.other, markup.quote, markup.raw, markup.underline, markup.underline.link, meta, meta.block, meta.cast, meta.class, meta.function, meta.function-call, meta.preprocessor, meta.return-type, meta.selector, meta.tag, meta.type.annotation, meta.type, punctuation.definition.string.begin, punctuation.definition.string.end, punctuation.separator, punctuation.separator.continuation, punctuation.terminator, storage, storage.modifier, storage.type, string, string.interpolated, string.other, string.quoted, string.quoted.double, string.quoted.other, string.quoted.single, string.quoted.triple, string.regexp, string.unquoted, strong, support, support.class, support.constant, support.function, support.other, support.type, support.type.property-name, support.variable, variable, variable.language, variable.name, variable.other, variable.other.readwrite, variable.parameter—
Rover Theme by glsaacke - VS Code Theme