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#08080c
  • activityBar.border#ff336620
  • activityBar.foreground#ff3366
  • activityBar.inactiveForeground#ccccdd66
  • activityBarBadge.background#ff3366
  • activityBarBadge.foreground#ffffff
  • badge.background#ff3366
  • badge.foreground#ffffff
  • breadcrumb.activeSelectionForeground#ffff00
  • breadcrumb.focusForeground#f0f0f5
  • breadcrumb.foreground#ccccdd99
  • button.background#ff3366
  • button.foreground#ffffff
  • button.hoverBackground#ff1144
  • checkbox.background#0c0c14
  • checkbox.border#aa44ff40
  • diffEditor.border#aa44ff30
  • diffEditor.insertedTextBackground#00ff8840
  • diffEditor.removedTextBackground#ff336640
  • dropdown.background#0a0a10
  • dropdown.border#aa44ff40
  • dropdown.foreground#f0f0f5
  • editor.background#0d0d14
  • editor.findMatchBackground#ffff0055
  • editor.findMatchBorder#ffff00
  • editor.findMatchHighlightBackground#ffff0030
  • editor.findMatchHighlightBorder#ffff0060
  • editor.foreground#f0f0f5
  • editor.hoverHighlightBackground#aa44ff30
  • editor.inactiveSelectionBackground#ff44aa35
  • editor.lineHighlightBackground#ffffff08
  • editor.lineHighlightBorder#ffffff00
  • editor.rangeHighlightBackground#ff44aa20
  • editor.selectionBackground#ff44aa55
  • editor.selectionForeground#ffffff
  • editor.selectionHighlightBackground#ffff0030
  • editor.selectionHighlightBorder#ffff0060
  • editor.wordHighlightBackground#00ffff40
  • editor.wordHighlightBorder#00ffff70
  • editor.wordHighlightStrongBackground#ff880035
  • editor.wordHighlightStrongBorder#ff880070
  • editorBracketHighlight.foreground1#ff3366
  • editorBracketHighlight.foreground2#ffaa00
  • editorBracketHighlight.foreground3#ffff00
  • editorBracketHighlight.foreground4#00ff88
  • editorBracketHighlight.foreground5#00ffff
  • editorBracketHighlight.foreground6#aa44ff
  • editorBracketMatch.background#ffff0040
  • editorBracketMatch.border#ffff00aa
  • editorCursor.foreground#ffff00
  • editorError.foreground#ff3366
  • editorGroup.border#aa44ff30
  • editorGroupHeader.tabsBackground#0a0a10
  • editorGroupHeader.tabsBorder#ff336620
  • editorGutter.addedBackground#00ff88aa
  • editorGutter.deletedBackground#ff3366aa
  • editorGutter.modifiedBackground#ffaa00aa
  • editorHoverWidget.background#0a0a10
  • editorHoverWidget.border#aa44ff50
  • editorHoverWidget.foreground#f0f0f5
  • editorIndentGuide.activeBackground#aa44ff45
  • editorIndentGuide.background#aa44ff18
  • editorInfo.foreground#00ffff
  • editorLineNumber.activeForeground#ff3366
  • editorLineNumber.foreground#666688aa
  • editorOverviewRuler.border#aa44ff30
  • editorOverviewRuler.errorForeground#ff3366
  • editorOverviewRuler.infoForeground#00ffff
  • editorOverviewRuler.warningForeground#ffaa00
  • editorRuler.foreground#aa44ff25
  • editorSuggestWidget.background#0a0a10
  • editorSuggestWidget.border#aa44ff50
  • editorSuggestWidget.foreground#f0f0f5
  • editorSuggestWidget.highlightForeground#ffff00
  • editorSuggestWidget.selectedBackground#ff336650
  • editorSuggestWidget.selectedForeground#ffffff
  • editorWarning.foreground#ffaa00
  • editorWidget.background#0a0a10
  • editorWidget.border#aa44ff50
  • editorWidget.foreground#f0f0f5
  • extensionButton.prominentBackground#ff3366
  • extensionButton.prominentHoverBackground#ff1144
  • focusBorder#ff336655
  • gitDecoration.conflictingResourceForeground#ffff00
  • gitDecoration.deletedResourceForeground#ff3366
  • gitDecoration.ignoredResourceForeground#888899bb
  • gitDecoration.modifiedResourceForeground#ffaa00
  • gitDecoration.untrackedResourceForeground#00ff88
  • input.background#0c0c14
  • input.border#aa44ff40
  • input.foreground#f0f0f5
  • input.placeholderForeground#ccccdd88
  • list.activeSelectionBackground#ff336650
  • list.activeSelectionForeground#ffffff
  • list.focusBackground#ff336650
  • list.focusForeground#ffffff
  • list.foreground#f0f0f5
  • list.highlightForeground#ffff00
  • list.hoverBackground#aa44ff25
  • list.hoverForeground#f0f0f5
  • list.inactiveSelectionBackground#ff336635
  • list.inactiveSelectionForeground#f0f0f5
  • menu.background#0a0a10
  • menu.border#aa44ff30
  • menu.foreground#f0f0f5
  • menu.selectionBackground#ff336650
  • menu.separatorBackground#aa44ff30
  • notificationCenterHeader.background#0a0a10
  • notificationCenterHeader.foreground#f0f0f5
  • notifications.background#0a0a10
  • notifications.border#aa44ff30
  • notifications.foreground#f0f0f5
  • notificationsErrorIcon.foreground#ff3366
  • notificationsInfoIcon.foreground#00ffff
  • notificationsWarningIcon.foreground#ffaa00
  • panel.background#0a0a10
  • panel.border#ff336620
  • panelTitle.activeBorder#00ffff
  • panelTitle.activeForeground#ffffff
  • panelTitle.inactiveForeground#ccccddaa
  • peekView.border#ff336655
  • peekViewEditor.background#0a0a10
  • peekViewResult.background#08080c
  • peekViewTitle.background#0a0a10
  • peekViewTitleDescription.foreground#ccccdd
  • peekViewTitleLabel.foreground#ffffff
  • pickerGroup.border#aa44ff40
  • pickerGroup.foreground#00ffff
  • quickInput.background#0a0a10
  • quickInput.foreground#f0f0f5
  • quickInputList.focusBackground#ff336650
  • quickInputList.focusForeground#ffffff
  • quickInputTitle.background#0a0a10
  • scrollbar.shadow#00000000
  • scrollbarSlider.activeBackground#ff336675
  • scrollbarSlider.background#ff336635
  • scrollbarSlider.hoverBackground#ff336655
  • selection.background#ff44aa66
  • sideBar.background#0a0a10
  • sideBar.border#ff336620
  • sideBar.foreground#ccccdd
  • sideBarSectionHeader.background#0a0a10
  • sideBarSectionHeader.foreground#ccccdd
  • sideBarTitle.foreground#ccccddcc
  • statusBar.background#0a0a10
  • statusBar.border#ff336620
  • statusBar.debuggingBackground#ff3366
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#ccccddcc
  • statusBar.noFolderBackground#0a0a10
  • tab.activeBackground#0d0d14
  • tab.activeBorderTop#ff3366
  • tab.activeForeground#ffffff
  • tab.border#00000000
  • tab.inactiveBackground#0a0a10
  • tab.inactiveForeground#ccccddcc
  • terminal.ansiBlack#0d0d14
  • terminal.ansiBlue#4488ff
  • terminal.ansiBrightBlack#888899
  • terminal.ansiBrightBlue#66aaff
  • terminal.ansiBrightCyan#66ffff
  • terminal.ansiBrightGreen#66ffaa
  • terminal.ansiBrightMagenta#ff88ff
  • terminal.ansiBrightRed#ff6688
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#ffff66
  • terminal.ansiCyan#00ffff
  • terminal.ansiGreen#00ff88
  • terminal.ansiMagenta#ff44ff
  • terminal.ansiRed#ff3366
  • terminal.ansiWhite#f0f0f5
  • terminal.ansiYellow#ffff00
  • terminal.background#0a0a10
  • terminal.foreground#f0f0f5
  • terminalCursor.foreground#ffff00
  • titleBar.activeBackground#0a0a10
  • titleBar.activeForeground#ff3366
  • titleBar.border#ff336620
  • titleBar.inactiveBackground#08080c
  • titleBar.inactiveForeground#ccccddaa
  • welcomePage.buttonBackground#0c0c14
  • welcomePage.buttonHoverBackground#ffffff10
  • widget.shadow#00000066
  • window.activeBorder#0d0d14

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.block, punctuation.definition.comment#666688ccitalic
punctuation.definition.tag, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, meta.tag, punctuation.separator.inheritance.php, keyword.other.template, keyword.other.substitution, meta.arrow, storage.type.function.arrow, keyword.operator.assignment, punctuation.terminator.rule.css, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded.begin, punctuation.section.embedded.end#bbbbcc
entity.name.function, support.function, meta.function-call, entity.name.tag, entity.name.tag.html, entity.name.tag.css, support.class.component, support.class.component.tsx, support.class.component.jsx, punctuation.definition.heading.markdown, entity.name.section.markdown#ff3366
keyword, keyword.control, keyword.operator.new, keyword.operator.expression, keyword.operator.logical, keyword.operator.delete, storage, storage.type, storage.modifier, keyword.control.import, keyword.control.export, keyword.control.from, keyword.control.default, keyword.control.as#ff8800
constant.numeric, constant.numeric.decimal, constant.numeric.integer, constant.numeric.float, constant.numeric.hex, constant.language, constant.language.boolean, constant.language.null, constant.language.undefined, support.constant, variable.other.constant#ffff00
entity.name.type, entity.name.type.class, entity.name.class, support.class, entity.other.inherited-class, entity.name.type.interface, entity.name.type.enum, entity.name.type.alias, meta.type.annotation, support.type#88ff00
string, string.quoted, string.quoted.single, string.quoted.double, string.quoted.template, string.template, punctuation.definition.string.begin, punctuation.definition.string.end#00ff88
variable, variable.other, variable.other.readwrite, meta.object-literal.key, entity.name.tag.yaml, entity.other.attribute-name, support.type.property-name, support.type.property-name.css, support.type.property-name.json, meta.property-name#00ffff
variable.parameter, meta.parameter, entity.other.attribute-name.html, entity.other.attribute-name.jsx, entity.other.attribute-name.tsx, variable.other.property, meta.attribute#4488ff
variable.language, variable.language.this, variable.language.self, variable.language.super, keyword.other.this, entity.name.type.module#6666ff
meta.decorator, punctuation.decorator, entity.name.function.decorator, meta.annotation, storage.type.annotation, punctuation.definition.annotation#aa44ff
keyword.operator, keyword.operator.arithmetic, keyword.operator.comparison, keyword.operator.relational, keyword.operator.ternary, keyword.operator.spread, keyword.operator.rest, keyword.operator.type, keyword.operator.optional#ff44ff
string.regexp, constant.character.escape, constant.other.character-class.regexp, keyword.operator.quantifier.regexp, punctuation.definition.group.regexp#ff66aa
text, source, meta.brace, punctuation.separator, punctuation.terminator#f0f0f5
meta.tag.sgml.doctype, entity.name.tag.doctype, meta.tag.sgml.doctype.html#ff8800
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css, entity.name.tag.css#ff3366
support.constant.property-value.css, constant.other.color.rgb-value.css, constant.other.color.rgb-value.hex.css, support.constant.color.w3c-standard-color-name.css, meta.property-value.css#00ff88
keyword.other.unit.css, keyword.other.unit.px.css, keyword.other.unit.rem.css, keyword.other.unit.em.css, keyword.other.unit.percentage.css#ffff00
entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css#aa44ff
keyword.other.DML.sql, keyword.other.DDL.sql, keyword.other.sql, keyword.other.create.sql, keyword.other.data-integrity.sql, keyword.other.alias.sql#ff8800
support.function.aggregate.sql, support.function.string.sql, support.function.scalar.sql#ff3366
storage.type.sql, support.type.sql#88ff00
entity.name.tag.xml, entity.name.tag.localname.xml#ff3366
entity.other.attribute-name.xml, entity.other.attribute-name.localname.xml#4488ff
entity.name.tag.namespace.xml, entity.other.attribute-name.namespace.xml#aa44ff
entity.name.tag.yaml, support.type.property-name.yaml#00ffff
entity.name.type.anchor.yaml, punctuation.definition.anchor.yaml, variable.other.alias.yaml, keyword.control.flow.alias.yaml#aa44ff
keyword.key.toml, support.type.property-name.toml#00ffff
entity.other.attribute-name.table.toml, support.type.property-name.table.toml, entity.other.attribute-name.table.array.toml#ff3366
support.type.property-name.json#ff3366
meta.structure.dictionary.value.json support.type.property-name.json#ff8800
meta.structure.dictionary.value.json meta.structure.dictionary.value.json support.type.property-name.json#ffff00
meta.structure.dictionary.value.json meta.structure.dictionary.value.json meta.structure.dictionary.value.json support.type.property-name.json#00ff88
meta.structure.dictionary.value.json meta.structure.dictionary.value.json meta.structure.dictionary.value.json meta.structure.dictionary.value.json support.type.property-name.json#00ffff
heading.1.markdown entity.name.section.markdown, heading.1.markdown punctuation.definition.heading.markdown#ff3366bold
heading.2.markdown entity.name.section.markdown, heading.2.markdown punctuation.definition.heading.markdown#ff8800bold
heading.3.markdown entity.name.section.markdown, heading.3.markdown punctuation.definition.heading.markdown#ffff00bold
heading.4.markdown entity.name.section.markdown, heading.4.markdown punctuation.definition.heading.markdown#00ff88bold
heading.5.markdown entity.name.section.markdown, heading.5.markdown punctuation.definition.heading.markdown#00ffffbold
heading.6.markdown entity.name.section.markdown, heading.6.markdown punctuation.definition.heading.markdown#aa44ffbold
markup.bold.markdown, punctuation.definition.bold.markdown#ff8800bold
markup.italic.markdown, punctuation.definition.italic.markdown#ff44ffitalic
markup.underline.link.markdown, string.other.link.title.markdown, string.other.link.description.markdown#4488ff
markup.inline.raw.string.markdown, markup.fenced_code.block.markdown#00ff88
punctuation.definition.list.begin.markdown#ffff00
markup.quote.markdown, punctuation.definition.quote.begin.markdown#6666ffitalic
entity.name.function.decorator.python, meta.function.decorator.python, punctuation.definition.decorator.python#aa44ff
support.function.magic.python, support.variable.magic.python#ff66aa
meta.fstring.python, storage.type.format.python#00ff88
punctuation.definition.lifetime.rust, entity.name.type.lifetime.rust, storage.modifier.lifetime.rust#ff66aa
entity.name.function.macro.rust, meta.macro.rust, support.function.macro.rust#aa44ff
meta.attribute.rust, punctuation.definition.attribute.rust, punctuation.brackets.attribute.rust#6666ff
entity.name.package.go#88ff00
entity.name.type.interface.go#00ffff
variable.other.php, punctuation.definition.variable.php#00ffff
support.class.php, entity.name.type.class.php#88ff00
variable.other.normal.shell, variable.other.special.shell, variable.other.positional.shell, punctuation.definition.variable.shell#00ffff
support.function.builtin.shell, entity.name.command.shell#ff3366
keyword.other.special-method.dockerfile, keyword.control.dockerfile#ff8800
entity.name.type.graphql, support.type.graphql#88ff00
variable.graphql, entity.name.fragment.graphql#00ffff
entity.name.function.directive.graphql, punctuation.definition.directive.graphql#aa44ff
entity.name.type.model.prisma, entity.name.type.enum.prisma#88ff00
variable.other.member.prisma, entity.name.field.prisma#00ffff
entity.name.function.attribute.prisma, punctuation.definition.attribute.prisma#aa44ff
BESUR by BESUR Themes - VS Code Theme