Skip to main content
CodingTheme

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#2d3543
  • activityBar.border#00000000
  • activityBar.dropBorder#9142F5
  • activityBar.inactiveForeground#687696
  • activityBarBadge.background#9142F5
  • activityBarBadge.foreground#d6e0e8
  • badge.background#9142F5
  • badge.foreground#f9fafb
  • breadcrumb.activeSelectionForeground#d6e0e8
  • breadcrumb.background#1d222b
  • breadcrumb.focusForeground#d6e0e8
  • breadcrumb.foreground#687696
  • button.background#9142F5
  • button.foreground#f9fafb
  • button.hoverBackground#9142F5
  • button.secondaryBackground#566581
  • button.secondaryForeground#d6e0e8
  • button.secondaryHoverBackground#5e6e8d
  • button.separator#d6e0e866
  • checkbox.background#9142F5
  • checkbox.border#9142F5
  • checkbox.foreground#f9fafb
  • debugExceptionWidget.background#353e50
  • debugExceptionWidget.border#68769670
  • debugToolBar.background#353e50
  • debugToolBar.border#68769670
  • diffEditor.border#687696
  • diffEditor.insertedTextBackground#38944833
  • diffEditor.removedTextBackground#e06c7533
  • dropdown.background#14181f
  • dropdown.border#68769670
  • dropdown.foreground#d6e0e8
  • dropdown.listBackground#252b37
  • editor.background#1d222b
  • editor.findMatchBackground#68769625
  • editor.findMatchBorder#9142F5
  • editor.findMatchHighlightBackground#68769640
  • editor.findMatchHighlightBorder#68769670
  • editor.findRangeHighlightBackground#68769640
  • editor.foldBackground#9142F51e
  • editor.foreground#d6e0e8
  • editor.hoverHighlightBackground#68769648
  • editor.inactiveSelectionBackground#68769645
  • editor.lineHighlightBackground#252b37
  • editor.rangeHighlightBackground#14181f
  • editor.selectionBackground#68769635
  • editor.selectionHighlightBackground#68769625
  • editor.selectionHighlightBorder#9142F5
  • editor.wordHighlightBackground#68769625
  • editor.wordHighlightStrongBackground#68769625
  • editor.wordHighlightStrongBorder#9142F5
  • editorBracketHighlight.foreground1#87cbff
  • editorBracketHighlight.foreground2#c678dd
  • editorBracketHighlight.foreground3#e06c75
  • editorBracketHighlight.foreground4#e5c07b
  • editorBracketHighlight.foreground5#75c074
  • editorBracketHighlight.foreground6#e49a26
  • editorBracketHighlight.unexpectedBracket.foreground#d6e0e8
  • editorBracketMatch.background#9142F566
  • editorBracketMatch.border#9142F5
  • editorBracketPairGuide.activeBackground1#87cbff
  • editorBracketPairGuide.activeBackground2#c678dd
  • editorBracketPairGuide.activeBackground3#e06c75
  • editorBracketPairGuide.activeBackground4#e5c07b
  • editorBracketPairGuide.activeBackground5#75c074
  • editorBracketPairGuide.activeBackground6#e49a26
  • editorCodeLens.foreground#687696
  • editorCursor.background#d6e0e8
  • editorCursor.foreground#9142F5
  • editorError.foreground#e06c75
  • editorGhostText.foreground#455168
  • editorGroup.border#9142F566
  • editorGroup.dropBackground#56658135
  • editorGroupHeader.border#00000000
  • editorGroupHeader.tabsBackground#0c0e12
  • editorGroupHeader.tabsBorder#00000000
  • editorGutter.addedBackground#75c074
  • editorGutter.background#1d222b
  • editorGutter.deletedBackground#e06c75
  • editorGutter.foldingControlForeground#687696
  • editorGutter.modifiedBackground#61afef
  • editorHoverWidget.background#353e50
  • editorHoverWidget.border#68769670
  • editorHoverWidget.foreground#687696
  • editorIndentGuide.activeBackground#d6e0e8
  • editorIndentGuide.background#687696
  • editorInfo.foreground#87cbff
  • editorLineNumber.activeForeground#9142F5
  • editorLineNumber.foreground#687696
  • editorLink.activeForeground#C08FFB
  • editorMarkerNavigationError.background#e06c75
  • editorMarkerNavigationInfo.background#61afef
  • editorMarkerNavigationWarning.background#e5c07b
  • editorOverviewRuler.border#68769666
  • editorRuler.foreground#687696
  • editorSuggestWidget.background#353e50
  • editorSuggestWidget.border#68769670
  • editorSuggestWidget.foreground#687696
  • editorSuggestWidget.highlightForeground#e06c75
  • editorSuggestWidget.selectedBackground#14181f
  • editorWarning.foreground#e49a26
  • editorWhitespace.foreground#d6e0e866
  • editorWidget.background#353e50
  • editorWidget.border#e06c75
  • editorWidget.foreground#d6e0e8
  • editorWidget.resizeBorder#e06c75
  • focusBorder#687696
  • foreground#d6e0e8
  • gitDecoration.addedResourceForeground#75c074
  • gitDecoration.conflictingResourceForeground#87cbff
  • gitDecoration.deletedResourceForeground#e06c75
  • gitDecoration.ignoredResourceForeground#687696
  • gitDecoration.modifiedResourceForeground#e5c07b
  • gitDecoration.stageDeletedResourceForeground#e49a26
  • gitDecoration.stageModifiedResourceForeground#e49a26
  • gitDecoration.submoduleResourceForeground#61afef
  • gitDecoration.untrackedResourceForeground#389448
  • icon.foreground#d6e0e8
  • input.background#14181f
  • input.border#68769670
  • input.foreground#d6e0e8
  • input.placeholderForeground#687696
  • inputOption.activeBackground#687696
  • inputOption.activeForeground#d6e0e8
  • inputValidation.errorBackground#e06c7545
  • inputValidation.errorBorder#e06c75
  • inputValidation.errorForeground#d6e0e8
  • inputValidation.infoBackground#87cbff45
  • inputValidation.infoBorder#87cbff
  • inputValidation.infoForeground#d6e0e8
  • inputValidation.warningBackground#e49a2645
  • inputValidation.warningBorder#e49a26
  • inputValidation.warningForeground#d6e0e8
  • list.activeSelectionBackground#9142F5dd
  • list.activeSelectionForeground#f9fafb
  • list.dropBackground#68769625
  • list.focusBackground#252b37
  • list.focusForeground#f9fafb
  • list.focusHighlightForeground#9142F5
  • list.focusOutline#00000000
  • list.highlightForeground#d6e0e8
  • list.hoverBackground#2d3543
  • list.hoverForeground#d6e0e8
  • list.inactiveSelectionBackground#313a46
  • list.inactiveSelectionForeground#d6e0e8
  • listFilterWidget.background#2d3543
  • listFilterWidget.noMatchesOutline#9142F5
  • menu.background#353e50
  • menu.border#68769630
  • menu.foreground#687696
  • menu.selectionBackground#14181f
  • menu.selectionBorder#00000000
  • menu.selectionForeground#d6e0e8
  • menu.separatorBackground#687696
  • menubar.selectionBackground#353e50
  • menubar.selectionForeground#d6e0e8
  • merge.commonContentBackground#37474f
  • merge.commonHeaderBackground#546e7a
  • merge.currentContentBackground#00695c
  • merge.currentHeaderBackground#00897b
  • merge.incomingContentBackground#00838f
  • merge.incomingHeaderBackground#00acc1
  • minimap.background#1d222b
  • minimap.errorHighlight#e06c75dd
  • minimap.findMatchHighlight#9142F580
  • minimap.foregroundOpacity#040506c0
  • minimap.selectionHighlight#9142F5bg
  • minimap.selectionOccurrenceHighlight#38944880
  • minimap.warningHighlight#e49a26dd
  • minimapGutter.addedBackground#75c074
  • minimapGutter.deletedBackground#e06c75
  • minimapGutter.modifiedBackground#61afef
  • minimapSlider.activeBackground#68769645
  • minimapSlider.background#68769625
  • minimapSlider.hoverBackground#68769635
  • notificationCenter.border#68769670
  • notificationCenterHeader.foreground#d6e0e8
  • notificationLink.foreground#e06c75
  • notifications.background#353e50
  • notifications.border#68769670
  • notifications.foreground#d6e0e8
  • notificationsErrorIcon.foreground#e06c75
  • notificationsInfoIcon.foreground#61afef
  • notificationsWarningIcon.foreground#e5c07b
  • panel.background#1d222b
  • panel.border#687696
  • panelTitle.activeBorder#e06c75
  • panelTitle.activeForeground#d6e0e8
  • panelTitle.inactiveForeground#687696
  • peekView.border#687696
  • peekViewEditor.matchHighlightBackground#e06c7566
  • peekViewEditor.matchHighlightBorder#e06c75
  • peekViewResult.background#353e50
  • peekViewResult.fileForeground#687696
  • peekViewResult.lineForeground#687696
  • peekViewResult.matchHighlightBackground#e06c7566
  • peekViewResult.selectionBackground#14181f
  • peekViewResult.selectionForeground#d6e0e8
  • peekViewTitle.background#353e50
  • peekViewTitleDescription.foreground#687696
  • peekViewTitleLabel.foreground#d6e0e8
  • pickerGroup.border#566581
  • pickerGroup.foreground#e06c75
  • progressBar.background#9142F5
  • quickInput.foreground#687696
  • quickInputList.focusBackground#14181f
  • quickInputList.focusForeground#d6e0e8
  • scrollbar.shadow#2d3543dd
  • scrollbarSlider.activeBackground#68769645
  • scrollbarSlider.background#68769625
  • scrollbarSlider.hoverBackground#68769635
  • selection.background#68769635
  • sideBar.background#252b37
  • sideBar.border#00000000
  • sideBar.foreground#d6e0e8
  • sideBarSectionHeader.background#252b37
  • sideBarSectionHeader.border#68769670
  • sideBarSectionHeader.foreground#d6e0e8
  • sideBarTitle.foreground#d6e0e8
  • statusBar.background#1d222b
  • statusBar.border#68769670
  • statusBar.debuggingBackground#e06c75
  • statusBar.debuggingForeground#f9fafb
  • statusBar.foreground#d6e0e8
  • statusBar.noFolderBackground#61afef
  • statusBar.noFolderForeground#f9fafb
  • statusBarItem.activeBackground#e06c75
  • statusBarItem.hoverBackground#d6e0e833
  • statusBarItem.remoteForeground#d6e0e8
  • tab.activeBackground#1d222b
  • tab.activeBorderTop#9142F5
  • tab.activeForeground#d6e0e8
  • tab.hoverForeground#d6e0e8
  • tab.inactiveBackground#14181f
  • tab.inactiveForeground#687696
  • tab.lastPinnedBorder#00000000
  • terminal.ansiBlack#687696
  • terminal.ansiBlue#61afef
  • terminal.ansiBrightBlack#808EAA
  • terminal.ansiBrightBlue#61afef
  • terminal.ansiBrightCyan#87cbff
  • terminal.ansiBrightGreen#75c074
  • terminal.ansiBrightMagenta#c678dd
  • terminal.ansiBrightRed#ef5350
  • terminal.ansiBrightWhite#f9fafb
  • terminal.ansiBrightYellow#e49a26
  • terminal.ansiCyan#56b6c2
  • terminal.ansiGreen#75c074
  • terminal.ansiMagenta#9185E0
  • terminal.ansiRed#e06c75
  • terminal.ansiWhite#d6e0e8
  • terminal.ansiYellow#e5c07b
  • terminal.border#687696
  • terminal.foreground#d6e0e8
  • terminal.selectionBackground#e06c7533
  • terminalCursor.background#e06c75
  • terminalCursor.foreground#d6e0e8
  • textBlockQuote.background#2d3543
  • textBlockQuote.border#687696
  • textCodeBlock.background#14181f
  • textLink.activeForeground#C08FFB
  • textLink.foreground#B37DFC
  • textPreformat.foreground#d6e0e8
  • textSeparator.foreground#687696
  • titleBar.activeForeground#d6e0e8
  • titleBar.border#68769670
  • titleBar.inactiveForeground#687696
  • toolbar.activeBackground#3d485c
  • toolbar.hoverBackground#353e50aa
  • tree.indentGuidesStroke#d6e0e8
  • widget.shadow#0c0e1266

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
constant.other.character-class.regexp#e06c75ff
keyword.operator.quantifier.regexp#e49a26ff
punctuation.definition.string.begin,punctuation.definition.string.end#389448
punctuation.definition.keyword#389448
punctuation.definition.entity#389448
punctuation.destructuring#389448
variable.parameter.function#808EAA
comment, punctuation.definition.comment, comment.block.documentation.cfml, comment.block.documentation.js, comment.block.documentation.ts, comment.line.double-slash.cfml, comment.line.double-slash.js, comment.line.double-slash.ts, comment.line.double-slash.php, comment.block.documentation.phpdoc.php#687696italic
comment markup.link#687696
markup.changed.diff#e5c07b
meta.diff.header.from-file,punctuation.definition.from-file.diff#61afef
markup.inserted.diff#75c074
markup.deleted.diff#e06c75
meta.function.c#e06c75
keyword.control.cpp#e49a26
punctuation.section.block.begin.bracket.curly.cpp, punctuation.section.block.end.bracket.curly.cpp, punctuation.terminator.statement.c, punctuation.section.block.begin.bracket.curly.c, punctuation.section.block.end.bracket.curly.c, punctuation.section.parens.begin.bracket.round.c, punctuation.section.parens.end.bracket.round.c, punctuation.section.parameters.begin.bracket.round.c, punctuation.section.parameters.end.bracket.round.c#389448
punctuation.separator.key-value#389448
punctuation.accessor#389448
entity.other.attribute-name.js, entity.other.attribute-name.ts, entity.other.attribute-name.jsx, entity.other.attribute-name.tsx, variable.parameter, variable.language.superitalic
keyword.operator.expression.import#61afef
support.constant.math#e49a26
support.constant.property.math#e49a26
variable.other.constant#e49a26
variable.other.property#e06c75
variable.other.object.property#e06c75
storage.type.annotation.java#e49a26ff
source.java#e06c75
punctuation.section.block.begin.java, punctuation.section.block.end.java, punctuation.definition.method-parameters.begin.java, punctuation.definition.method-parameters.end.java, meta.method.identifier.java, punctuation.section.method.begin.java, punctuation.section.method.end.java, punctuation.terminator.java, punctuation.section.class.begin.java, punctuation.section.class.end.java, punctuation.section.inner-class.begin.java, punctuation.section.inner-class.end.java, meta.method-call.java, storage.type.generic.java, punctuation.section.class.begin.bracket.curly.java, punctuation.section.class.end.bracket.curly.java, punctuation.section.method.begin.bracket.curly.java, punctuation.section.method.end.bracket.curly.java, punctuation.separator.period.java, meta.method.body.java#808EAA
meta.method.java#61afef
storage.modifier.import.java, storage.type.java#e49a26
meta.definition.variable.name.java#e06c75
keyword.operator.logical.js#389448
keyword.operator.bitwise#389448
support.constant.property-value.scss,support.constant.property-value.css#e49a26
support.constant.color.w3c-standard-color-name.css,support.constant.color.w3c-standard-color-name.scss#e49a26
punctuation.separator.list.comma.css#808EAA
support.constant.color.w3c-standard-color-name.css#e49a26
support.type.vendored.property-name.css#389448
punctuation.definition.template-expression.begin,punctuation.definition.template-expression.end#e06c75
punctuation.definition.string.template.begin, punctuation.definition.string.template.end#389448
support.module.node,support.type.object.module,support.module.node#e49a26
variable.other.readwrite,support.variable.object.process,support.variable.object.node#e49a26
meta.object-literal.key#e06c75
support.variable.property#e06c75
variable.object.property#e06c75
comment.line.double-slash,comment.block.documentationitalic
support.constant.json#e49a26
support.constant.media#e06c75
keyword.operator.expression.instanceof,keyword.operator.new,keyword.operator.ternary#c678dd
support.type.object.console#e06c75
support.variable.property.process#e49a26
entity.name.function,support.function.console#61afef
keyword.operator#389448
support.type.object.dom#389448
support.variable.dom,support.variable.property.dom#e06c75
keyword.operator.arithmetic, keyword.operator, punctuation.separator, punctuation.terminator#389448
keyword.operator.increment, keyword.operator.decrement#e5c07b
keyword.operator.comparison, keyword.operator.relational#e06c75
keyword.operator.assignment.c,keyword.operator.comparison.c,keyword.operator.c,keyword.operator.increment.c#c678ddff
punctuation.separator.delimiter.c#808EAA
support.type.posix-reserved.c#389448
keyword.operator.sizeof.c#c678dd
variable.parameter.function.language.python#e49a26
support.type.python#389448
keyword.operator.logical.python#c678dd
meta.function-call.arguments.python#e06c75
meta.function-call.python#e06c75
variable.parameter.function.python#e49a26
punctuation.definition.arguments.begin.python, punctuation.definition.arguments.end.python, punctuation.definition.list.begin.python, punctuation.definition.list.end.python, meta.function-call.arguments.python#808EAA
meta.function-call.generic.python#61afef
constant.character.format.placeholder.other.python#75c074
none#808EAA
keyword.operator#389448
keyword#c678dd
variable#e49a26
token.variable.parameter.java#808EAA
import.storage.java#e49a26
token.package.keyword#c678dd
token.package#808EAA
entity.name.function, meta.require, support.function.any-method#61afef
entity.name.type.namespace#e49a26
support.class, entity.name.type.class#e49a26
support.class.component, entity.name.tag.js#e06c75
entity.name.class.identifier.namespace.type#e49a26
entity.name.class#61afef
entity.name.type#e49a26
keyword.control#c678dditalic
control.elements, keyword.operator.less#e49a26
keyword.other.special-method#61afef
storage#9185E0italic
token.storage#c678dd
storage.modifier#c678dd
storage.type.function.arrownormal
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#c678dd
token.storage.type.java#e49a26
support.function#61afef
support.type.property-name#e06c75
support.constant.property-value#808EAA
support.constant.font-name#e49a26
meta.tag#389448
string#75c074
entity.other.inherited-class#e06c75
constant.other.symbol#389448
constant.numeric#e5c07b
none#e49a26
none#e49a26
constant#e5c07b
punctuation.definition.constant#e49a26
entity.name.tag#e06c75
entity.name.tag.css#e06c75
entity.other.attribute-name#e49a26
entity.other.attribute-name.id#c678ddnormal
entity.other.attribute-name.class.css#e49a26normal
meta.selector#c678dd
none#e49a26
markup.heading#e06c75bold
markup.heading punctuation.definition.heading, entity.name.section#61afef
keyword.other.unit#e49a26
markup.bold,todo.bold#e49a26bold
punctuation.definition.bold#e49a26
markup.italic, punctuation.definition.italic,todo.emphasis#c678dd
emphasis md#c678dd
entity.name.section.markdown#e06c75
punctuation.definition.heading.markdown#e06c75
markup.heading.setext#808EAA
punctuation.definition.bold.markdown#e49a26
markup.inline.raw.markdown#75c074
markup.inline.raw.string.markdown#75c074
beginning.punctuation.definition.list.markdown#e06c75
markup.quote.markdown#808EAAitalic
punctuation.definition.string.begin.markdown,punctuation.definition.string.end.markdown,punctuation.definition.metadata.markdown#808EAA
punctuation.definition.metadata.markdown#c678dd
markup.underline.link.markdown,markup.underline.link.image.markdown#c678dd
string.other.link.title.markdown,string.other.link.description.markdown#61afef
markup.italic.markdownitalic
markup.bold.markdownbold
string.regexp#389448
constant.character.escape#e5c07b
punctuation.section.embedded, variable.interpolation#e06c75
invalid.illegal#d6e0e8
invalid.broken#d6e0e8
invalid.deprecated#d6e0e8
invalid.unimplemented#d6e0e8
source.json meta.structure.dictionary.json > string.quoted.json#e06c75
source.json meta.structure.dictionary.json > string.quoted.json > punctuation.string#e06c75
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#75c074
source.json meta.structure.dictionary.json > constant.language.json,source.json meta.structure.array.json > constant.language.json#389448
support.type.property-name.json#e06c75
support.type.property-name.json punctuation#389448
text.html.laravel-blade source.php.embedded.line.html entity.name.tag.laravel-blade#c678dd
text.html.laravel-blade source.php.embedded.line.html support.constant.laravel-blade#c678dd
support.other.namespace.use.php,support.other.namespace.use-as.php,support.other.namespace.php,entity.other.alias.php#e49a26
keyword.operator.error-control.php#c678dd
keyword.operator.type.php#c678dd
punctuation.section.array.begin.php#808EAA
punctuation.section.array.end.php#808EAA
invalid.illegal.non-null-typehinted.php#e06c75
storage.type.php,meta.other.type.phpdoc.php,keyword.other.type.php,keyword.other.array.phpdoc.php#e49a26
meta.function-call.php,meta.function-call.object.php,meta.function-call.static.php#61afef
punctuation.definition.parameters.begin.bracket.round.php, punctuation.definition.parameters.end.bracket.round.php, punctuation.separator.delimiter.php, punctuation.section.scope.begin.php, punctuation.section.scope.end.php, punctuation.terminator.expression.php, punctuation.definition.arguments.begin.bracket.round.php, punctuation.definition.arguments.end.bracket.round.php, punctuation.definition.storage-type.begin.bracket.round.php, punctuation.definition.storage-type.end.bracket.round.php, punctuation.definition.array.begin.bracket.round.php, punctuation.definition.array.end.bracket.round.php, punctuation.definition.begin.bracket.round.php, punctuation.definition.end.bracket.round.php, punctuation.definition.begin.bracket.curly.php, punctuation.definition.end.bracket.curly.php, punctuation.definition.section.switch-block.end.bracket.curly.php, punctuation.definition.section.switch-block.start.bracket.curly.php, punctuation.definition.section.switch-block.begin.bracket.curly.php, punctuation.definition.section.switch-block.end.bracket.curly.php#808EAA
support.constant.ext.php,support.constant.std.php,support.constant.core.php,support.constant.parser-token.php#e49a26
entity.name.goto-label.php,support.other.php#61afef
keyword.operator.logical.php,keyword.operator.bitwise.php,keyword.operator.arithmetic.php#389448
keyword.operator.regexp.php#c678dd
keyword.operator.comparison.php#389448
punctuation.definition.variable.php#e06c75
keyword.operator.heredoc.php,keyword.operator.nowdoc.php#c678dd
meta.function.decorator.python#61afef
support.token.decorator.python,meta.function.decorator.identifier.python#389448
function.parameter#e49a26
function.parameter#808EAA
function.brace#808EAA
function.parameter.ruby, function.parameter.cs#808EAA
rgb-value#389448
inline-color-decoration rgb-value#e49a26
less rgb-value#e49a26
selector.sass#e06c75
var.this,variable.language.this.js,variable.language.this.ts,variable.language.this.jsx,variable.language.this.tsx#e49a26italic
support.type.primitive.ts,support.type.builtin.ts,support.type.primitive.tsx,support.type.builtin.tsx#e49a26
block.scope.end,block.scope.begin#808EAA
storage.type.cs#e49a26ff
entity.name.variable.local.cs#e06c75
token.info-token#61afef
token.warn-token#e49a26
token.error-token#e06c75
token.debug-token#c678dd
emphasisitalic
entity.other.attribute-name.html, entity.other.attribute-name.tag.jade, entity.other.attribute-name.tag.pug, entity.other.attribute-name.cfml, keyword.operator.expression.delete, keyword.other.required.argument.cfml, keyword.other.namespace.php, keyword.other.use.phpitalic
variable.language#e06c75italic
variable.parameter,entity.other.function-parameter.cfml#e06c75italic

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

Loading...

Valorant Theme by Tasnimul Hasan - VS Code Theme