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