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#0c0c13
  • activityBar.border#131114
  • activityBar.foreground#C8C9DB
  • activityBar.inactiveForeground#8A7F8AAA
  • activityBarBadge.background#C8C9DB
  • activityBarBadge.foreground#0c0c13
  • badge.background#C8C9DB
  • badge.foreground#0c0c13
  • breadcrumbPicker.background#06060c
  • button.background#C8C9DB
  • button.foreground#0c0c13
  • contrastActiveBorder#00000000
  • debugExceptionWidget.background#22232E
  • debugExceptionWidget.border#131114
  • debugToolBar.background#22232E
  • descriptionForeground#FFFFFFcc
  • diffEditor.border#131114
  • diffEditor.diagonalFill#22232E
  • diffEditor.insertedTextBackground#55FF7430
  • diffEditor.insertedTextBorder#00000000
  • diffEditor.removedTextBackground#FF613E30
  • diffEditor.removedTextBorder#00000000
  • dropdown.background#06060c
  • dropdown.border#8A7F8Aaa
  • dropdown.foreground#FFFFFFcc
  • editor.background#06060c
  • editor.findMatchBackground#C8C9DB20
  • editor.findMatchBorder#C8C9DB60
  • editor.findMatchHighlightBackground#C8C9DB20
  • editor.findMatchHighlightBorder#C8C9DB40
  • editor.foreground#FFFFFFcc
  • editor.hoverHighlightBackground#C8C9DB40
  • editor.inactiveSelectionBackground#C8C9DB20
  • editor.lineHighlightBackground#C8C9DB0c
  • editor.lineHighlightBorder#C8C9DB1a
  • editor.rangeHighlightBackground#C8C9DB20
  • editor.selectionBackground#C8C9DB40
  • editor.selectionForeground#C8C9DB
  • editor.selectionHighlightBackground#00000000
  • editor.selectionHighlightBorder#C8C9DB60
  • editor.wordHighlightBackground#C8C9DB20
  • editor.wordHighlightStrongBackground#C8C9DB40
  • editorBracketMatch.background#C8C9DB20
  • editorBracketMatch.border#C8C9DB40
  • editorCodeLens.foreground#FFFFFFcc
  • editorCursor.foreground#FFED4F
  • editorGroup.border#131114
  • editorGroup.dropBackground#C8C9DB15
  • editorGroupHeader.border#00000000
  • editorGroupHeader.noTabsBackground#06060c
  • editorGroupHeader.tabsBackground#0c0c13
  • editorGroupHeader.tabsBorder#00000000
  • editorGutter.addedBackground#55FF74cc
  • editorGutter.background#06060c
  • editorGutter.commentRangeForeground#22232E
  • editorGutter.deletedBackground#FF613Ecc
  • editorGutter.modifiedBackground#4EE6EEcc
  • editorHoverWidget.background#22232E
  • editorHoverWidget.border#0c0c13
  • editorIndentGuide.activeBackground#8A7F8Abb
  • editorIndentGuide.background#8A7F8A30
  • editorLineNumber.activeForeground#8A7F8A
  • editorLineNumber.foreground#8A7F8A90
  • editorLink.activeForeground#FFFFFFcc
  • editorMarkerNavigation.background#0c0c13
  • editorMarkerNavigationError.background#FF613E90
  • editorMarkerNavigationInfo.background#4EE6EE90
  • editorMarkerNavigationWarning.background#FA575790
  • editorOverviewRuler.border#131114
  • editorOverviewRuler.commonContentForeground#FFED4F
  • editorOverviewRuler.currentContentForeground#FF613E
  • editorOverviewRuler.incomingContentForeground#55FF74
  • editorSuggestWidget.background#06060c
  • editorSuggestWidget.border#131114
  • editorSuggestWidget.foreground#FFFFFF80
  • editorSuggestWidget.highlightForeground#FFED4F
  • editorSuggestWidget.selectedBackground#C8C9DB4d
  • editorWarning.border#00000000
  • editorWarning.foreground#FFED4F
  • editorWhitespace.foreground#8A7F8A60
  • editorWidget.background#22232E
  • editorWidget.resizeBorder#C8C9DB50
  • errorForeground#FF613E
  • extensionButton.prominentBackground#C8C9DB9d
  • extensionButton.prominentForeground#0c0c13
  • extensionButton.prominentHoverBackground#C8C9DB
  • focusBorder#C8C9DB40
  • foreground#FFFFFFcc
  • gitDecoration.conflictingResourceForeground#C8C9DB
  • gitDecoration.deletedResourceForeground#FF613E
  • gitDecoration.ignoredResourceForeground#8A7F8A
  • gitDecoration.modifiedResourceForeground#4EE6EE
  • gitDecoration.untrackedResourceForeground#55FF74
  • icon.foreground#FFFFFFcc
  • input.background#00000000
  • input.border#C8C9DB30
  • input.foreground#FFFFFF80
  • input.placeholderForeground#C8C9DB60
  • inputOption.activeBorder#C8C9DB
  • inputValidation.errorBackground#22232E
  • inputValidation.errorBorder#FFED4F
  • inputValidation.infoBackground#22232E
  • inputValidation.infoBorder#C8C9DB
  • inputValidation.warningBackground#22232E
  • inputValidation.warningBorder#FFED4F
  • list.activeSelectionBackground#C8C9DB45
  • list.activeSelectionForeground#FFFFFFcc
  • list.dropBackground#C8C9DB15
  • list.errorForeground#FF613E
  • list.focusBackground#C8C9DB40
  • list.focusForeground#FFFFFF80
  • list.highlightForeground#FFED4F
  • list.hoverBackground#13111460
  • list.hoverForeground#FFFFFFcc
  • list.inactiveSelectionBackground#C8C9DB45
  • list.warningForeground#FA5757
  • menu.background#22232E
  • menu.foreground#FFFFFF80
  • menu.selectionBackground#C8C9DB20
  • menu.selectionForeground#FFFFFF80
  • menu.separatorBackground#131114
  • menubar.selectionBackground#22232E
  • menubar.selectionForeground#FFFFFF80
  • merge.border#131114
  • merge.commonContentBackground#FFED4F30
  • merge.commonHeaderBackground#FFED4F80
  • merge.currentContentBackground#55FF7430
  • merge.currentHeaderBackground#55FF7480
  • merge.incomingContentBackground#4EE6EE30
  • merge.incomingHeaderBackground#4EE6EE80
  • notificationCenterHeader.background#22232E
  • notificationCenterHeader.foreground#FFFFFF80
  • notificationLink.foreground#FFED4F
  • notifications.background#22232E
  • notifications.border#C8C9DB50
  • notifications.foreground#FFFFFF80
  • panel.background#06060c
  • panel.border#131114
  • panelInput.border#8A7F8A
  • panelSection.background#131114
  • panelSection.border#131114
  • panelSectionHeader.background#8A7F8A20
  • panelSectionHeader.border#131114
  • panelSectionHeader.foreground#FFFFFFcc
  • panelTitle.activeBorder#C8C9DB
  • panelTitle.activeForeground#C8C9DB
  • panelTitle.inactiveForeground#8A7F8A
  • peekView.border#C8C9DB
  • peekViewEditor.background#22232E40
  • peekViewEditor.matchHighlightBackground#22232E40
  • peekViewEditorGutter.background#22232E40
  • peekViewResult.background#22232E40
  • peekViewResult.fileForeground#FFFFFFcc
  • peekViewResult.lineForeground#FFFFFFcc
  • peekViewResult.matchHighlightBackground#22232E
  • peekViewResult.selectionBackground#22232E
  • peekViewResult.selectionForeground#FFFFFFcc
  • peekViewTitle.background#131114
  • peekViewTitleDescription.foreground#FFFFFFcc
  • peekViewTitleLabel.foreground#FFFFFFcc
  • pickerGroup.border#131114
  • pickerGroup.foreground#FFFFFFcc
  • progressBar.background#FFED4F
  • scrollbar.shadow#131114
  • scrollbarSlider.activeBackground#C8C9DB60
  • scrollbarSlider.background#C8C9DB40
  • scrollbarSlider.hoverBackground#C8C9DB50
  • selection.background#C8C9DB60
  • settings.headerForeground#C8C9DB
  • settings.modifiedItemIndicator#C8C9DB
  • sideBar.background#0c0c13
  • sideBar.border#131114
  • sideBar.foreground#FFFFFFcc
  • sideBarSectionHeader.background#0c0c13
  • sideBarSectionHeader.border#131114
  • sideBarSectionHeader.foreground#FFFFFFcc
  • sideBarTitle.foreground#8A7F8A
  • statusBar.background#0c0c13
  • statusBar.border#131114
  • statusBar.debuggingBackground#C8C9DB44
  • statusBar.debuggingForeground#FFFFFFcc
  • statusBar.foreground#FFFFFFcc
  • statusBar.noFolderBackground#131114
  • statusBar.noFolderBorder#C8C9DB
  • statusBar.noFolderForeground#FFFFFFcc
  • statusBarItem.activeBackground#22232E
  • statusBarItem.hoverBackground#8A7F8A30
  • statusBarItem.prominentBackground#131114
  • statusBarItem.prominentHoverBackground#22232E
  • tab.activeBackground#06060c
  • tab.activeBorderTop#C8C9DB
  • tab.activeForeground#C8C9DB
  • tab.border#00000000
  • tab.hoverBackground#06060ccc
  • tab.hoverBorder#00000000
  • tab.inactiveBackground#0c0c13
  • tab.inactiveForeground#8A7F8A
  • tab.unfocusedActiveForeground#FFFFFFcc
  • tab.unfocusedHoverBackground#C8C9DB10
  • tab.unfocusedHoverBorder#00000000
  • tab.unfocusedInactiveForeground#FFFFFFcc
  • terminal.ansiBlack#06060c
  • terminal.ansiBlue#4EE6EE
  • terminal.ansiBrightBlack#4EE6EE
  • terminal.ansiBrightBlue#4EE6EE
  • terminal.ansiBrightCyan#4AFFC8
  • terminal.ansiBrightGreen#55FF74
  • terminal.ansiBrightMagenta#F9A7F3
  • terminal.ansiBrightRed#FF613E
  • terminal.ansiBrightWhite#22232E
  • terminal.ansiBrightYellow#FFED4F
  • terminal.ansiCyan#4AFFC8
  • terminal.ansiGreen#55FF74
  • terminal.ansiMagenta#F9A7F3
  • terminal.ansiRed#FF613E
  • terminal.ansiWhite#FFFFFFcc
  • terminal.ansiYellow#FFED4F
  • terminal.background#06060c
  • terminalCursor.background#FFED4F
  • terminalCursor.foreground#FFED4F
  • textBlockQuote.background#4EE6EE34
  • textBlockQuote.border#4EE6EEb9
  • textCodeBlock.background#4EE6EE34
  • textLink.activeForeground#4EE6EE
  • textLink.foreground#4EE6EE
  • textPreformat.foreground#FFED4F
  • textSeparator.foreground#C8C9DB
  • titleBar.activeBackground#0c0c13
  • titleBar.activeForeground#8A7F8A
  • titleBar.border#131114
  • titleBar.inactiveBackground#131114
  • titleBar.inactiveForeground#8A7F8A
  • tree.indentGuidesStroke#8A7F8A70
  • walkThrough.embeddedEditorBackground#06060c
  • widget.shadow#131114

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
support.module.elm, entity.other.inherited-class.python, variable.other.object, support.other.namespace.php, entity.other.attribute-name.namespace.xml, record.accessor, entity.name.record.field.accessor#FFA34Fitalic
entity.name.type#7E9E2D
comment, punctuation.definition.comment, string.quoted.docstring.multi, comment.block.documentation source#C8C9DB60italic
constant#FF4A7C
source, support, constant.character.entity.named, meta.jsx.children, source.lua#FFFFFFcc
entity.name.function.decorator, meta.decorator entity.name.function, meta.decorator punctuation.decorator, punctuation.definition.decorator, meta.decorator variable.other.readwrite.ts#F9A7F3
keyword.control.export, support.type.object.module#FFED4F
support.function, entity.name.function, meta.function-call, meta.function, meta.method.declaration, meta.function-call support, meta.decorator meta.definition.method entity.name.function, meta.decorator meta.method.declaration entity.name.function, variable.language.super.ts, source.directive, meta.function-call.generic, meta.method-call.static.php, meta.method-call.php, meta.class storage.type#4ACADA
keyword.control.import, meta.module.name.elm support, meta.import.elm support, keyword.control.at-rule, punctuation.definition.keyword, variable.control.import.include#FFED4F
keyword.control, keyword.control.conditional, storage.modifier, keyword.operator.new, keyword.operator.expression, keyword.begin.blade, keyword.end.blade, keyword.blade, keyword.type-alias, keyword.type, support.class.console, keyword.other.await, storage.type.class.jsdoc, punctuation.definition.block.tag.jsdoc#FFED4F
meta.object-literal.key, variable.object.property#FFFFFFcc
keyword.other.definition.ini, support.type.property-name, entity.name.tag.yaml#FFED4F
keyword.operator.comparison, storage.type.function.arrow, keyword.operator.lua#FFED4F
punctuation, attribute_value, meta.brace, punctuation.definition.parameters, punctuation.definition.template-expression, keyword.operator, keyword.other, punctuation.terminator, punctuation.separator, punctuation.definition.generic.begin, punctuation.definition.generic.end, meta.function.type-declaration, keyword.other.colon.elm, meta.record.field.elm keyword.other.elm, keyword.other.period.elm, meta.tag.xml, meta.tag.preprocessor.xml, punctuation.definition.block, punctuation.accessor, constant.name.attribute.tag.pug, string.interpolated.pug, keyword.other.whitespace.liquid, meta.tag.template.block.twig, meta.tag.template.value.twig, begin.bracket, end.bracket, text.html.twig meta.tag.inline.any, text.html.twig meta.tag.block.any, support.function.construct.begin.blade, support.function.construct.end.blade source.php, support.function.construct.end.blade, meta.function.echo.blade source.php, punctuation.definition.list.begin.python, punctuation.definition.list.end.python, text.html.vue-html meta.tag.block.any#8A7F8A
variable.language.this, variable.language.special.self, variable.parameter.function.language.special.self#FFA34Fitalic
storage, meta.var.expr storage.type, storage.type.function, keyword.function, storage.type.class, storage.type.property, keyword.other, keyword.local.lua, entity.name.class, meta.function.lua keyword.control.lua, storage.type.enum, storage.type.interface, storage.type.type#4AFFC8italic
string, string.template, string.quoted.single, punctuation.definition.string, punctuation.definition.string.template, punctuation.definition.string.begin, punctuation.definition.string.end, string.other.link, constant.character.escape.regexp, variable.parameter.url#B2FD67
entity.name.type, support.type, support.class, storage.type, entity.other.inherited-class, keyword.type#BFB2FF
variable, variable.language, entity.name.type.class.js, entity.name.variable, support.variable.magic, meta.method.body, entity.name.variable, punctuation.definition.variable, support.variable.property, meta.class variable.object.property, variable.other.constant entity.name.function#FF7597
source.elm constant.type-constructor#FF7597
source.elm storage.type#BFB2FFnormal
support.variable.liquid, support.class.liquid#FF7597
text.html.basic entity.name, source.js-ignored-vscode, entity.name.tag, entity.name.tag support.class.component, support.class.component.html, meta.embedded.block.blade constant.other.php, meta.embedded.block.blade keyword.operator.comparison.php, meta.embedded.block.blade keyword.operator.arithmetic.php#4ACADA
meta.tag.sgml.doctype.html, punctuation.definition.tag, meta.tag.block.any, meta.tag.block.any.html, meta.tag.inline.any, source.css-ignored-vscode, meta.tag.metadata.style.end.html#4ACADAaa
entity.other.attribute-name, entity.name.tag.liquid, invalid.deprecated.entity.other.attribute-name, meta.embedded.block.blade storage.type.php#FFED4Fitalic
markup.inline.raw.string.markdown, punctuation.definition.raw.markdown, markup.fenced_code.block.markdown, markup.fenced_code.block.markdown punctuation, markup.raw.block.markdown#BFB2FF
fenced_code.block.language#BFB2FF
markup.list.unnumbered.markdown meta.paragraph.markdown#4ACADA
punctuation.definition.list.begin#4ACADA
entity.name.section, markup.heading.setext#FFED4F
punctuation.definition.heading#FFED4F
markup.underline.link, markup.underline.link.image#4ACADA
markup.bold, punctuation.definition.bold#4ACADAbold
markup.italic, punctuation.definition.italic#4ACADAitalic
markup.quote#4ACADAitalic
punctuation.definition.quote.begin#4ACADAitalic
entity.other.attribute-name.pseudo-class#F9A7F3
entity.other.attribute-name.pseudo-element#F9A7F3
entity.other.attribute-name.class, entity.other.attribute-name.class punctuation.definition.entity#4AFFC8italic
entity.other.attribute-name.parent-selector-suffix punctuation.definition.entity#4AFFC8italic
support.type.property-name.css, support.type.vendored.property-name, meta.property-list entity.name.tag.css#FFFFFFcc
source.css.scss entity.other.attribute-name.id , source.css entity.other.attribute-name.id , entity.other.attribute-name.id punctuation.definition.entity#BFB2FF
entity.name.tag.reference, meta.property-list#FFA34F
keyword.other.unit#FFA34Fitalic
support.constant.property-value, support.constant.font-name, meta.property-value.css#FFA34F
constant.numeric#FFA34F
ThemeDatabase All Themes by enes ozturk - VS Code Theme