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#193036
  • activityBar.foreground#c9d6da
  • activityBar.inactiveForeground#617d8a
  • activityBarBadge.background#e57373
  • activityBarBadge.foreground#c9d6da
  • badge.background#e57373
  • badge.foreground#f2f2f2
  • breadcrumb.activeSelectionForeground#c9d6da
  • breadcrumb.background#0F1923
  • breadcrumb.focusForeground#c9d6da
  • breadcrumb.foreground#617d8a
  • button.background#e57373dc
  • button.foreground#f2f2f2
  • button.hoverBackground#e57373
  • button.secondaryBackground#38494d
  • button.secondaryForeground#c9d6da
  • button.secondaryHoverBackground#455a64
  • checkbox.border#e57373
  • checkbox.foreground#e57373
  • debugExceptionWidget.background#172734
  • debugExceptionWidget.border#617d8a70
  • debugToolBar.background#172734
  • debugToolBar.border#617d8a70
  • diffEditor.border#617d8a
  • diffEditor.insertedTextBackground#3ca29c33
  • diffEditor.removedTextBackground#e5737333
  • dropdown.background#1e3242
  • dropdown.border#617d8a70
  • dropdown.foreground#c9d6da
  • editor.background#0F1923
  • editor.findMatchBackground#e5737348
  • editor.findMatchBorder#e57373
  • editor.findMatchHighlightBackground#e5737366
  • editor.findRangeHighlightBackground#000d0c33
  • editor.foldBackground#e573731e
  • editor.foreground#c9d6da
  • editor.hoverHighlightBackground#e5737340
  • editor.inactiveSelectionBackground#95aab445
  • editor.lineHighlightBackground#182835
  • editor.rangeHighlightBackground#1e3242
  • editor.selectionBackground#e5737355
  • editor.selectionHighlightBackground#e5737348
  • editor.selectionHighlightBorder#e57373
  • editor.wordHighlightBackground#e5737348
  • editor.wordHighlightStrongBackground#e5737340
  • editor.wordHighlightStrongBorder#e57373
  • editorBracketHighlight.foreground1#87cbff
  • editorBracketHighlight.foreground2#d792cd
  • editorBracketHighlight.foreground3#e57373
  • editorBracketHighlight.foreground4#e5c275
  • editorBracketHighlight.foreground5#82c781
  • editorBracketHighlight.foreground6#e89e30
  • editorBracketMatch.background#e5737366
  • editorBracketMatch.border#e57373
  • editorBracketPairGuide.activeBackground1#87cbff
  • editorBracketPairGuide.activeBackground2#d792cd
  • editorBracketPairGuide.activeBackground3#e57373
  • editorBracketPairGuide.activeBackground4#e5c275
  • editorBracketPairGuide.activeBackground5#82c781
  • editorBracketPairGuide.activeBackground6#e89e30
  • editorCodeLens.foreground#617d8a
  • editorCursor.background#c9d6da
  • editorCursor.foreground#e57373
  • editorError.foreground#e57373
  • editorGhostText.foreground#376D7A
  • editorGroup.border#617d8a
  • editorGroupHeader.border#00000000
  • editorGroupHeader.tabsBackground#0e1720
  • editorGroupHeader.tabsBorder#00000000
  • editorGutter.addedBackground#82c781
  • editorGutter.background#0F1923
  • editorGutter.deletedBackground#e57373
  • editorGutter.foldingControlForeground#617d8a
  • editorGutter.foldingControlHoverForeground#c9d6da
  • editorGutter.modifiedBackground#e5c275
  • editorHoverWidget.background#172734
  • editorHoverWidget.border#617d8a70
  • editorHoverWidget.foreground#617d8a
  • editorIndentGuide.activeBackground#c9d6da
  • editorIndentGuide.background#617d8a
  • editorInfo.foreground#64B5F6
  • editorLineNumber.activeForeground#e57373
  • editorLineNumber.foreground#617d8a
  • editorLink.activeForeground#4DD0E1
  • editorMarkerNavigation.background#193036
  • editorMarkerNavigationError.background#e57373
  • editorMarkerNavigationInfo.background#64B5F6
  • editorMarkerNavigationWarning.background#e5c275
  • editorOverviewRuler.border#617d8a66
  • editorRuler.foreground#617d8a
  • editorSuggestWidget.background#172734
  • editorSuggestWidget.border#617d8a70
  • editorSuggestWidget.foreground#617d8a
  • editorSuggestWidget.highlightForeground#e57373
  • editorSuggestWidget.selectedBackground#1e3242
  • editorWarning.foreground#e89e30
  • editorWhitespace.foreground#c9d6da66
  • editorWidget.background#172734
  • editorWidget.foreground#c9d6da
  • editorWidget.resizeBorder#e57373
  • focusBorder#617d8a
  • foreground#c9d6da
  • gitDecoration.addedResourceForeground#82c781
  • gitDecoration.conflictingResourceForeground#87cbff
  • gitDecoration.deletedResourceForeground#e57373
  • gitDecoration.ignoredResourceForeground#617d8a
  • gitDecoration.modifiedResourceForeground#e5c275
  • gitDecoration.stageDeletedResourceForeground#e89e30
  • gitDecoration.stageModifiedResourceForeground#e89e30
  • gitDecoration.submoduleResourceForeground#64B5F6
  • gitDecoration.untrackedResourceForeground#3ca29c
  • icon.foreground#c9d6da
  • input.background#1e3242
  • input.foreground#c9d6da
  • input.placeholderForeground#617d8a
  • inputOption.activeBackground#617d8a
  • inputOption.activeForeground#c9d6da
  • list.activeSelectionBackground#1e3242
  • list.activeSelectionForeground#c9d6da
  • list.dropBackground#151f24
  • list.focusBackground#1e3242
  • list.focusForeground#c9d6da
  • list.focusHighlightForeground#e57373
  • list.focusOutline#00000000
  • list.highlightForeground#c9d6da
  • list.hoverBackground#00000000
  • list.hoverForeground#c9d6da
  • list.inactiveSelectionBackground#1e3242
  • list.inactiveSelectionForeground#95aab4
  • listFilterWidget.background#c9d6da
  • listFilterWidget.noMatchesOutline#e57373
  • menu.background#172734
  • menu.border#617d8a30
  • menu.foreground#617d8a
  • menu.selectionBackground#1e3242
  • menu.selectionBorder#00000000
  • menu.selectionForeground#c9d6da
  • menu.separatorBackground#617d8a
  • menubar.selectionBackground#172734
  • menubar.selectionForeground#c9d6da
  • merge.commonContentBackground#37474f
  • merge.commonHeaderBackground#546e7a
  • merge.currentContentBackground#00695c
  • merge.currentHeaderBackground#00897b
  • merge.incomingContentBackground#00838f
  • merge.incomingHeaderBackground#00acc1
  • minimap.background#0F1923
  • minimapGutter.addedBackground#82c781
  • minimapGutter.deletedBackground#e57373
  • minimapGutter.modifiedBackground#87cbff
  • notificationCenter.border#617d8a70
  • notificationCenterHeader.background#193036
  • notificationCenterHeader.foreground#c9d6da
  • notificationLink.foreground#e57373
  • notifications.background#172734
  • notifications.border#617d8a70
  • notifications.foreground#c9d6da
  • notificationsErrorIcon.foreground#e57373
  • notificationsInfoIcon.foreground#64B5F6
  • notificationsWarningIcon.foreground#e5c275
  • panel.background#0F1923
  • panel.border#617d8a
  • panelTitle.activeBorder#e57373
  • panelTitle.activeForeground#c9d6da
  • panelTitle.inactiveForeground#617d8a
  • peekView.border#617d8a
  • peekViewEditor.background#262d38
  • peekViewEditor.matchHighlightBackground#e5737366
  • peekViewEditor.matchHighlightBorder#e57373
  • peekViewEditorGutter.background#262d38
  • peekViewResult.background#172734
  • peekViewResult.fileForeground#617d8a
  • peekViewResult.lineForeground#617d8a
  • peekViewResult.matchHighlightBackground#e5737366
  • peekViewResult.selectionBackground#1e3242
  • peekViewResult.selectionForeground#c9d6da
  • peekViewTitle.background#172734
  • peekViewTitleDescription.foreground#617d8a
  • peekViewTitleLabel.foreground#c9d6da
  • pickerGroup.border#38494d
  • pickerGroup.foreground#e57373
  • progressBar.background#617d8a
  • quickInput.foreground#617d8a
  • quickInputList.focusBackground#1e3242
  • quickInputList.focusForeground#c9d6da
  • scrollbar.shadow#17252a
  • scrollbarSlider.activeBackground#e5737399
  • scrollbarSlider.background#e5737333
  • scrollbarSlider.hoverBackground#e5737366
  • selection.background#e5737355
  • settings.checkboxBackground#1e3242
  • settings.dropdownBackground#1e3242
  • settings.dropdownBorder#617d8a
  • settings.dropdownForeground#c9d6da
  • settings.dropdownListBorder#00000000
  • settings.focusedRowBackground#132330
  • settings.focusedRowBorder#00000000
  • settings.headerForeground#c9d6da
  • settings.modifiedItemIndicator#e57373
  • settings.rowHoverBackground#172734
  • sideBar.background#132430
  • sideBar.foreground#617d8a
  • sideBarSectionHeader.background#193036
  • sideBarSectionHeader.border#c9d6da15
  • sideBarSectionHeader.foreground#c9d6da
  • sideBarTitle.foreground#c9d6da
  • statusBar.background#0F1923
  • statusBar.border#617d8a70
  • statusBar.debuggingBackground#e57373
  • statusBar.debuggingForeground#f2f2f2
  • statusBar.foreground#c9d6da
  • statusBar.noFolderBackground#64B5F6
  • statusBar.noFolderForeground#f2f2f2
  • statusBarItem.activeBackground#e57373
  • statusBarItem.hoverBackground#c9d6da33
  • statusBarItem.remoteBackground#193036
  • statusBarItem.remoteForeground#c9d6da
  • tab.activeBackground#0F1923
  • tab.activeBorderTop#e57373
  • tab.activeForeground#c9d6da
  • tab.hoverForeground#c9d6da
  • tab.inactiveBackground#172734
  • tab.inactiveForeground#617d8a
  • terminal.ansiBlack#617d8a
  • terminal.ansiBlue#64B5F6
  • terminal.ansiBrightBlack#95aab4
  • terminal.ansiBrightBlue#64B5F6
  • terminal.ansiBrightCyan#87cbff
  • terminal.ansiBrightGreen#82c781
  • terminal.ansiBrightMagenta#d792cd
  • terminal.ansiBrightRed#ef5350
  • terminal.ansiBrightWhite#f2f2f2
  • terminal.ansiBrightYellow#e89e30
  • terminal.ansiCyan#4DD0E1
  • terminal.ansiGreen#82c781
  • terminal.ansiMagenta#b39afd
  • terminal.ansiRed#e57373
  • terminal.ansiWhite#c9d6da
  • terminal.ansiYellow#e5c275
  • terminal.border#617d8a
  • terminal.foreground#c9d6da
  • terminal.selectionBackground#e5737333
  • terminalCursor.background#e57373
  • terminalCursor.foreground#c9d6da
  • textBlockQuote.border#617d8a
  • textLink.activeForeground#e57373
  • textLink.foreground#e57373dc
  • textPreformat.foreground#c9d6da
  • titleBar.activeBackground#193036
  • titleBar.activeForeground#c9d6da
  • titleBar.border#617d8a70
  • titleBar.inactiveBackground#193036
  • titleBar.inactiveForeground#617d8a
  • toolbar.activeBackground#e57373
  • toolbar.hoverBackground#c9d6da11
  • tree.indentGuidesStroke#617d8a
  • walkThrough.embeddedEditorBackground#193036
  • welcomePage.buttonHoverBackground#4DD0E1
  • widget.shadow#0b181e66

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
constant.other.character-class.regexp#e57373ff
keyword.operator.quantifier.regexp#e89e30ff
punctuation.definition.string.begin,punctuation.definition.string.end#3ca29c
punctuation.definition.keyword#3ca29c
punctuation.definition.entity#3ca29c
punctuation.destructuring#3ca29c
variable.parameter.function#95aab4
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#617d8aitalic
comment markup.link#617d8a
markup.changed.diff#e5c275
meta.diff.header.from-file,punctuation.definition.from-file.diff#64B5F6
markup.inserted.diff#82c781
markup.deleted.diff#e57373
meta.function.c#e57373
keyword.control.cpp#e89e30
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#3ca29c
punctuation.separator.key-value#3ca29c
punctuation.accessor#3ca29c
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#64B5F6
support.constant.math#e89e30
support.constant.property.math#e89e30
variable.other.constant#e89e30
variable.other.property#e57373
variable.other.object.property#e57373
storage.type.annotation.java#e89e30ff
source.java#e57373
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#95aab4
meta.method.java#64B5F6
storage.modifier.import.java, storage.type.java#e89e30
meta.definition.variable.name.java#e57373
keyword.operator.logical.js#3ca29c
keyword.operator.bitwise#3ca29c
support.constant.property-value.scss,support.constant.property-value.css#e89e30
support.constant.color.w3c-standard-color-name.css,support.constant.color.w3c-standard-color-name.scss#e89e30
punctuation.separator.list.comma.css#95aab4
support.constant.color.w3c-standard-color-name.css#e89e30
support.type.vendored.property-name.css#3ca29c
punctuation.definition.template-expression.begin,punctuation.definition.template-expression.end#e57373
punctuation.definition.string.template.begin, punctuation.definition.string.template.end#3ca29c
support.module.node,support.type.object.module,support.module.node#e89e30
variable.other.readwrite,support.variable.object.process,support.variable.object.node#e89e30
meta.object-literal.key#e57373
support.variable.property#e57373
variable.object.property#e57373
comment.line.double-slash,comment.block.documentationitalic
support.constant.json#e89e30
support.constant.media#e57373
keyword.operator.expression.instanceof,keyword.operator.new,keyword.operator.ternary#d792cd
support.type.object.console#e57373
support.variable.property.process#e89e30
entity.name.function,support.function.console#64B5F6
keyword.operator#3ca29c
support.type.object.dom#3ca29c
support.variable.dom,support.variable.property.dom#e57373
keyword.operator.arithmetic, keyword.operator, punctuation.separator, punctuation.terminator#3ca29c
keyword.operator.increment, keyword.operator.decrement#e5c275
keyword.operator.comparison, keyword.operator.relational#e57373
keyword.operator.assignment.c,keyword.operator.comparison.c,keyword.operator.c,keyword.operator.increment.c#d792cdff
punctuation.separator.delimiter.c#95aab4
support.type.posix-reserved.c#3ca29c
keyword.operator.sizeof.c#d792cd
variable.parameter.function.language.python#e89e30
support.type.python#3ca29c
keyword.operator.logical.python#d792cd
meta.function-call.arguments.python#e57373
meta.function-call.python#e57373
variable.parameter.function.python#e89e30
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#95aab4
meta.function-call.generic.python#64B5F6
constant.character.format.placeholder.other.python#82c781
none#95aab4
keyword.operator#3ca29c
keyword#d792cd
variable#e89e30
token.variable.parameter.java#95aab4
import.storage.java#e89e30
token.package.keyword#d792cd
token.package#95aab4
entity.name.function, meta.require, support.function.any-method#64B5F6
entity.name.type.namespace#e89e30
support.class, entity.name.type.class#e89e30
support.class.component, entity.name.tag.js#e57373
entity.name.class.identifier.namespace.type#e89e30
entity.name.class#64B5F6
entity.name.type#e89e30
keyword.control#d792cditalic
control.elements, keyword.operator.less#e89e30
keyword.other.special-method#64B5F6
storage#b39afditalic
token.storage#d792cd
storage.modifier#d792cd
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#d792cd
token.storage.type.java#e89e30
support.function#64B5F6
support.type.property-name#e57373
support.constant.property-value#95aab4
support.constant.font-name#e89e30
meta.tag#3ca29c
string#82c781
entity.other.inherited-class#e57373
constant.other.symbol#3ca29c
constant.numeric#e5c275
none#e89e30
none#e89e30
constant#e5c275
punctuation.definition.constant#e89e30
entity.name.tag#e57373
entity.name.tag.css#e57373
entity.other.attribute-name#e89e30
entity.other.attribute-name.id#d792cdnormal
entity.other.attribute-name.class.css#e89e30normal
meta.selector#d792cd
none#e89e30
markup.heading#e57373bold
markup.heading punctuation.definition.heading, entity.name.section#64B5F6
keyword.other.unit#e89e30
markup.bold,todo.bold#e89e30bold
punctuation.definition.bold#e89e30
markup.italic, punctuation.definition.italic,todo.emphasis#d792cd
emphasis md#d792cd
entity.name.section.markdown#e57373
punctuation.definition.heading.markdown#e57373
markup.heading.setext#95aab4
punctuation.definition.bold.markdown#e89e30
markup.inline.raw.markdown#82c781
markup.inline.raw.string.markdown#82c781
beginning.punctuation.definition.list.markdown#e57373
markup.quote.markdown#95aab4italic
punctuation.definition.string.begin.markdown,punctuation.definition.string.end.markdown,punctuation.definition.metadata.markdown#95aab4
punctuation.definition.metadata.markdown#d792cd
markup.underline.link.markdown,markup.underline.link.image.markdown#d792cd
string.other.link.title.markdown,string.other.link.description.markdown#64B5F6
markup.italic.markdownitalic
markup.bold.markdownbold
string.regexp#3ca29c
constant.character.escape#e5c275
punctuation.section.embedded, variable.interpolation#e57373
invalid.illegal#c9d6da
invalid.broken#c9d6da
invalid.deprecated#c9d6da
invalid.unimplemented#c9d6da
source.json meta.structure.dictionary.json > string.quoted.json#e57373
source.json meta.structure.dictionary.json > string.quoted.json > punctuation.string#e57373
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#82c781
source.json meta.structure.dictionary.json > constant.language.json,source.json meta.structure.array.json > constant.language.json#3ca29c
support.type.property-name.json#e57373
support.type.property-name.json punctuation#3ca29c
text.html.laravel-blade source.php.embedded.line.html entity.name.tag.laravel-blade#d792cd
text.html.laravel-blade source.php.embedded.line.html support.constant.laravel-blade#d792cd
support.other.namespace.use.php,support.other.namespace.use-as.php,support.other.namespace.php,entity.other.alias.php#e89e30
keyword.operator.error-control.php#d792cd
keyword.operator.type.php#d792cd
punctuation.section.array.begin.php#95aab4
punctuation.section.array.end.php#95aab4
invalid.illegal.non-null-typehinted.php#e57373
storage.type.php,meta.other.type.phpdoc.php,keyword.other.type.php,keyword.other.array.phpdoc.php#e89e30
meta.function-call.php,meta.function-call.object.php,meta.function-call.static.php#64B5F6
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#95aab4
support.constant.ext.php,support.constant.std.php,support.constant.core.php,support.constant.parser-token.php#e89e30
entity.name.goto-label.php,support.other.php#64B5F6
keyword.operator.logical.php,keyword.operator.bitwise.php,keyword.operator.arithmetic.php#3ca29c
keyword.operator.regexp.php#d792cd
keyword.operator.comparison.php#3ca29c
punctuation.definition.variable.php#e57373
keyword.operator.heredoc.php,keyword.operator.nowdoc.php#d792cd
meta.function.decorator.python#64B5F6
support.token.decorator.python,meta.function.decorator.identifier.python#3ca29c
function.parameter#e89e30
function.parameter#95aab4
function.brace#95aab4
function.parameter.ruby, function.parameter.cs#95aab4
rgb-value#3ca29c
inline-color-decoration rgb-value#e89e30
less rgb-value#e89e30
selector.sass#e57373
var.this,variable.language.this.js,variable.language.this.ts,variable.language.this.jsx,variable.language.this.tsx#e89e30italic
support.type.primitive.ts,support.type.builtin.ts,support.type.primitive.tsx,support.type.builtin.tsx#e89e30
block.scope.end,block.scope.begin#95aab4
storage.type.cs#e89e30ff
entity.name.variable.local.cs#e57373
token.info-token#64B5F6
token.warn-token#e89e30
token.error-token#e57373
token.debug-token#d792cd
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#e57373italic
variable.parameter,entity.other.function-parameter.cfml#e57373italic

Shiki preview

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

Loading...

Valorant Theme by Tasnimul Hasan - VS Code Theme