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.activeBorder#e093d9
  • activityBar.background#212121
  • activityBar.border#00000000
  • activityBar.foreground#B0BEC5
  • activityBar.inactiveForeground#727272bf
  • activityBarBadge.background#e093d9
  • activityBarBadge.foreground#212121
  • badge.background#e093d9
  • badge.foreground#212121
  • breadcrumb.activeSelectionForeground#727272
  • breadcrumb.focusForeground#B0BEC5
  • breadcrumb.foreground#727272
  • breadcrumbPicker.background#212121
  • button.background#e093d9
  • button.foreground#212121
  • button.hoverBackground#e093d9b3
  • button.secondaryBackground#2A2A2A
  • button.secondaryForeground#727272
  • button.secondaryHoverBackground#2a2a2abf
  • checkbox.background#212121
  • checkbox.border#00000000
  • debugConsole.errorForeground#f07178
  • debugConsole.infoForeground#727272
  • debugConsole.sourceForeground#ffcb6b
  • debugConsole.warningForeground#ffcb6b
  • debugConsoleInputIcon.foreground#e093d9
  • debugIcon.breakpointForeground#f07178
  • debugTokenExpression.boolean#F78C6C
  • debugTokenExpression.error#FF5370
  • debugTokenExpression.name#727272
  • debugTokenExpression.number#F78C6C
  • debugTokenExpression.string#C3E88D
  • debugTokenExpression.value#C3E88D
  • debugToolBar.background#212121
  • descriptionForeground#727272
  • diffEditor.insertedLineBackground#264b33
  • diffEditor.insertedTextBackground#447152
  • diffEditor.removedLineBackground#656e76
  • diffEditor.removedTextBackground#41454b
  • dropdown.background#212121
  • dropdown.border#00000000
  • dropdown.foreground#B0BEC5
  • dropdown.listBackground#212121
  • editor.background#212121
  • editor.findMatchBackground#e093d9
  • editor.findMatchHighlightBackground#292929
  • editor.focusedStackFrameHighlightBackground#c3e88d
  • editor.foldBackground#212121
  • editor.fontFamily'IBM Plex Mono', 'JetBrains Mono', Consolas, 'Courier New', monospace
  • editor.fontLigatures
  • editor.fontSize15
  • editor.foreground#B0BEC5
  • editor.inactiveSelectionBackground#292929
  • editor.lineHeight2
  • editor.lineHighlightBackground#1A1A1A
  • editor.lineHighlightBorder#00000000
  • editor.linkedEditingBackground#292929
  • editor.selectionBackground#404040
  • editor.selectionForeground#FFFFFF
  • editor.selectionHighlightBackground#353535
  • editor.stackFrameHighlightBackground#474747
  • editor.wordHighlightBackground#40404033
  • editor.wordHighlightBorder#40404033
  • editor.wordHighlightStrongBackground#3232324d
  • editor.wordHighlightStrongBorder#32323299
  • editorBracketHighlight.foreground1#89DDFF
  • editorBracketHighlight.foreground2#89DDFF
  • editorBracketHighlight.foreground3#89DDFF
  • editorBracketHighlight.foreground4#89DDFF
  • editorBracketHighlight.foreground5#89DDFF
  • editorBracketHighlight.foreground6#89DDFF
  • editorBracketHighlight.unexpectedBracket.foreground#727272
  • editorBracketMatch.background#e093d9b3
  • editorBracketMatch.border#e093d9
  • editorCursor.foreground#e093d9
  • editorGroup.border#00000000
  • editorGroupHeader.tabsBackground#212121
  • editorGroupHeader.tabsBorder#00000000
  • editorGutter.addedBackground#c3e88d
  • editorGutter.deletedBackground#f07178
  • editorGutter.modifiedBackground#474747
  • editorIndentGuide.activeBackground#b0bec53d
  • editorIndentGuide.background#b0bec51f
  • editorInlayHint.background#1A1A1A
  • editorInlayHint.foreground#727272
  • editorInlayHint.paramBackground#1A1A1A
  • editorInlayHint.paramForeground#727272
  • editorInlayHint.typeBackground#1A1A1A
  • editorInlayHint.typeForeground#727272
  • editorLineNumber.activeForeground#727272
  • editorLineNumber.foreground#72727240
  • editorOverviewRuler.border#00000000
  • editorWhitespace.foreground#00000000
  • editorWidget.background#212121
  • errorForeground#f07178
  • focusBorder#e093d9
  • foreground#B0BEC5
  • gitDecoration.addedResourceForeground#c3e88d
  • gitDecoration.conflictingResourceForeground#f07178
  • gitDecoration.deletedResourceForeground#f07178
  • gitDecoration.ignoredResourceForeground#727272
  • gitDecoration.modifiedResourceForeground#B0BEC5
  • gitDecoration.submoduleResourceForeground#727272
  • gitDecoration.untrackedResourceForeground#c3e88d
  • icon.foreground#727272
  • input.background#212121
  • input.border#00000000
  • input.foreground#B0BEC5
  • input.placeholderForeground#727272
  • keybindingLabel.foreground#B0BEC5
  • list.activeSelectionBackground#323232
  • list.activeSelectionForeground#e093d9
  • list.errorForeground#f07178
  • list.focusBackground#e093d940
  • list.focusForeground#e093d9
  • list.focusHighlightForeground#e093d9
  • list.foreground#727272bf
  • list.highlightForeground#e093d9
  • list.hoverBackground#323232
  • list.hoverForeground#e093d9
  • list.inactiveFocusBackground#40404033
  • list.inactiveSelectionBackground#323232
  • list.inactiveSelectionForeground#727272bf
  • list.warningForeground#ffcb6b
  • listFilterWidget.background#212121
  • minimap.findMatchHighlight#e093d980
  • minimap.selectionHighlight#404040
  • minimapSlider.activeBackground#e093d926
  • minimapSlider.background#212121
  • minimapSlider.hoverBackground#e093d91a
  • notificationCenterHeader.background#212121
  • notificationCenterHeader.foreground#727272
  • notifications.background#212121
  • notifications.border#00000000
  • notifications.foreground#B0BEC5
  • notificationsErrorIcon.foreground#f07178
  • notificationsInfoIcon.foreground#e093d9
  • notificationsWarningIcon.foreground#ffcb6b
  • panel.background#212121
  • panel.border#00000000
  • panelInput.border#00000000
  • panelTitle.activeBorder#e093d9
  • panelTitle.activeForeground#B0BEC5
  • panelTitle.inactiveForeground#727272
  • peekViewEditor.background#212121
  • peekViewEditor.matchHighlightBackground#e093d980
  • peekViewResult.background#212121
  • peekViewResult.matchHighlightBackground#e093d980
  • pickerGroup.border#00000000
  • pickerGroup.foreground#727272
  • progressBar.background#e093d9
  • quickInput.background#212121
  • quickInput.foreground#B0BEC5
  • scrollbar.shadow#00000020
  • scrollbarSlider.activeBackground#e093d9
  • scrollbarSlider.background#e093d9b3
  • scrollbarSlider.hoverBackground#e093d9
  • selection.background#404040
  • settings.headerForeground#B0BEC5
  • settings.modifiedItemIndicator#727272
  • sideBar.background#212121
  • sideBar.border#00000000
  • sideBar.foreground#727272bf
  • sideBarSectionHeader.background#212121
  • sideBarSectionHeader.border#00000000
  • sideBarSectionHeader.foreground#B0BEC5
  • sideBarTitle.foreground#B0BEC5
  • statusBar.background#212121
  • statusBar.border#00000000
  • statusBar.debuggingBackground#e093d9
  • statusBar.debuggingForeground#212121
  • statusBar.focusBorder#00000000
  • statusBar.foreground#727272
  • statusBar.noFolderBackground#212121
  • statusBarItem.activeBackground#212121
  • statusBarItem.focusBorder#00000000
  • statusBarItem.hoverBackground#e093d9b3
  • statusBarItem.hoverForeground#212121
  • statusBarItem.prominentBackground#1A1A1A
  • statusBarItem.remoteBackground#212121
  • statusBarItem.remoteForeground#e093d9
  • symbolIcon.arrayForeground#89DDFF
  • symbolIcon.booleanForeground#F78C6C
  • symbolIcon.classForeground#FFCB6B
  • symbolIcon.colorForeground#F8F8F2
  • symbolIcon.constantForeground#F78C6C
  • symbolIcon.constructorForeground#8AFF80
  • symbolIcon.enumeratorForeground#C3E88D
  • symbolIcon.enumeratorMemberForeground#F78C6C
  • symbolIcon.eventForeground#E093D9
  • symbolIcon.fieldForeground#F8F8F2
  • symbolIcon.fileForeground#C3E88D
  • symbolIcon.folderForeground#FFCB6B
  • symbolIcon.functionForeground#98FF98
  • symbolIcon.interfaceForeground#C3E88D
  • symbolIcon.keyForeground#E093D9
  • symbolIcon.keywordForeground#E093D9
  • symbolIcon.methodForeground#98FF98
  • symbolIcon.moduleForeground#C3E88D
  • symbolIcon.namespaceForeground#C3E88D
  • symbolIcon.nullForeground#F78C6C
  • symbolIcon.numberForeground#F78C6C
  • symbolIcon.objectForeground#FFCB6B
  • symbolIcon.operatorForeground#89DDFF
  • symbolIcon.packageForeground#FFCB6B
  • symbolIcon.propertyForeground#F8F8F2
  • symbolIcon.referenceForeground#F8F8F2
  • symbolIcon.snippetForeground#C3E88D
  • symbolIcon.stringForeground#C3E88D
  • symbolIcon.structForeground#FFCB6B
  • symbolIcon.textForeground#F8F8F2
  • symbolIcon.typeParameterForeground#F78C6C
  • symbolIcon.unitForeground#F78C6C
  • symbolIcon.variableForeground#F8F8F2
  • tab.activeBackground#e093d913
  • tab.activeBorder#e093d9
  • tab.activeBorderTop#00000000
  • tab.activeForeground#eeffff
  • tab.border#00000000
  • tab.hoverBackground#212121
  • tab.inactiveBackground#212121
  • tab.inactiveForeground#727272
  • tab.unfocusedActiveBorder#212121
  • tab.unfocusedActiveBorderTop#00000000
  • tab.unfocusedHoverBackground#323232
  • terminal.ansiBlack#212121
  • terminal.ansiBlue#82AAFF
  • terminal.ansiBrightBlack#616161
  • terminal.ansiBrightBlue#82AAFF
  • terminal.ansiBrightCyan#89DDFF
  • terminal.ansiBrightGreen#C3E88D
  • terminal.ansiBrightMagenta#E093D9
  • terminal.ansiBrightRed#FF5370
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#FFCB6B
  • terminal.ansiCyan#89DDFF
  • terminal.ansiGreen#C3E88D
  • terminal.ansiMagenta#E093D9
  • terminal.ansiRed#FF5370
  • terminal.ansiWhite#F8F8F2
  • terminal.ansiYellow#FFCB6B
  • terminal.background#212121
  • terminal.border#292929
  • terminal.foreground#B0BEC5
  • terminal.integrated.fontFamily'IBM Plex Mono', 'JetBrains Mono', Consolas, 'Courier New', monospace
  • terminal.integrated.fontSize13
  • terminal.integrated.lineHeight1.4
  • terminalCursor.background#F8F8F2
  • terminalCursor.foreground#E093D9
  • textBlockQuote.background#323232
  • textBlockQuote.border#00000000
  • textCodeBlock.background#323232
  • textLink.activeForeground#e093d9
  • textLink.foreground#e093d9
  • textPreformat.background#323232
  • textPreformat.foreground#727272
  • textSeparator.foreground#2A2A2A
  • titleBar.activeBackground#212121
  • titleBar.activeForeground#727272
  • titleBar.border#00000000
  • titleBar.inactiveBackground#323232
  • titleBar.inactiveForeground#727272
  • tree.indentGuidesStroke#2A2A2A
  • tree.tableColumnsBorder#00000000
  • welcomePage.buttonBackground#e093d9
  • welcomePage.buttonForeground#212121
  • welcomePage.buttonHoverBackground#e093d980
  • widget.shadow#00000020

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
source, text#F8F8F2
comment, punctuation.definition.comment#616161italic
comment.block.documentation, comment.line.documentation#616161italic
comment.block.documentation storage.type, comment.block.documentation punctuation.definition.block.tag, comment.block.documentation variable.other#E093D9italic underline
comment.block.documentation string#F8F8F2italic
string#C3E88D
constant.character.escape, string .source.regexp .meta.character-class#89DDFF
string.regexp#C3E88D
constant.numeric#F78C6C
constant.language.boolean#F78C6Citalic
constant.language.null, constant.language.nil, constant.language.undefined#F78C6Citalic
keyword, storage.type, storage.modifier#E093D9italic
keyword.operator#89DDFF
meta.type.parameters, keyword.control, keyword.control.flow, keyword.control.conditional, keyword.control.loop, keyword.control.exception, meta.parameters, keyword.operator.expression.typeof.ts, keyword.operator.new#E093D9italic
punctuation, meta.brace, meta.delimiter#89DDFF
meta.import, meta.block.ts#C3E88D
variable, variable.other.object, variable.other.constant, support.variable#F8F8F2
variable.parameter#F78C6C
variable.other.reassigned
variable.language.this, variable.language.super, variable.language.self#FFCB6Bitalic
entity.name.function, support.function#98FF98
meta.function-call entity.name.function, support.function.any-method#8AFF80
entity.name.class, support.class#FFCB6B
entity.name.type.abstract#C3E88D
declaration, entity.name.type, entity.name.interface, entity.name.type.interface#C3E88Ditalic
entity.name.type.parameter#F78C6C
entity.other.inherited-class#C3E88D
variable.instance, variable.other.property, member.access#F8F8F2
variable.static, variable.other.static#F8F8F2italic
variable.other.constant.static.final#F8F8F2italic bold
meta.decorator entity.name.function, meta.decorator punctuation.decorator, meta.annotation entity.name.type, meta.annotation punctuation.definition.annotation#E093D9
meta.annotation meta.attribute-pair variable.other#F78C6C
entity.name.tag, punctuation.definition.tag#F07178
punctuation.definition.tag#89DDFF
entity.other.attribute-name#FFCB6Bitalic
string.quoted.double.html#C3E88D
constant.character.entity#F78C6C
entity.name.tag.css#F07178
entity.other.attribute-name.class.css#FFCB6Bitalic
entity.other.attribute-name.id.css#E093D9
entity.other.attribute-name.pseudo-element.css, entity.other.attribute-name.pseudo-class.css#E093D9italic
support.type.property-name.css#E0E1E4
support.constant.property-value.css, constant.numeric.css, support.constant.color.css#F78C6C
support.function.misc.css#AF9CFF
keyword.other.important.css#F78C6Citalic
variable.parameter.url.css#E093D9underline
support.type.property-name.json#E093D9
constant.language.json#F78C6Citalic
markup.heading#C3E88D
markup.bold#F07178bold
markup.italic#F07178italic
markup.strikethroughstrikethrough
string.other.link.title.markdown#E093D9underline italic
markup.underline.link.markdown#E093D9
markup.inline.raw.string.markdown, markup.fenced_code.block.markdown#E093D9italic
markup.quote.markdown#8AFF80italic
punctuation.definition.list.begin.markdown#FF5370italic
entity.name.function.decorator.python#98FF98
variable.parameter.function.language.special.self.python, variable.parameter.function.language.special.cls.python, variable.parameter.function.keyword.python#FFCB6Bitalic
variable.language.this.java#FFCB6Bitalic
support.type.object.console.js#FFCB6B
string.quoted.double.js, string.quoted.single.js, variable.other.module.jssyntax.defaultStringitalic
entity.name.type.parameter.ts#FFCB6B
keyword.operator.expression, support.type.primitive, support.type.builtin, support.type.python, support.type.go, support.type.c, support.type.cpp, support.type.rust, entity.name.type.primitive.rust#E093D9italic
variable.other.readwrite#FFCB6Bitalic
keyword.other.rust, variable.language.self.rust, entity.name.namespace.rust#F78C6C
variable.language.self.rust#FFCB6Bitalic
entity.name.type.lifetime.rust#FFCB6Bitalic
support.function.macro.rust#F8F8F2
invalid#FF5370
invalid.deprecated#616161strikethrough
meta.todo, keyword.other.documentation.todo#FFEB95italic
Zen theme for VS Code by cmion - VS Code Theme