Skip to main content
Coding Theme

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#160e03
  • activityBar.border#2f261c
  • activityBar.foreground#B4E1FD
  • activityBar.inactiveForeground#474747
  • activityBarBadge.background#FF0883
  • activityBarBadge.foreground#1F1305
  • badge.background#FF0883
  • badge.foreground#1F1305
  • button.background#FF0883
  • button.foreground#1F1305
  • button.hoverBackground#FF1E8E
  • contrastBorder#00000000
  • debugExceptionWidget.background#FF830840
  • debugExceptionWidget.border#FF830880
  • debugToolBar.background#1c1409
  • diffEditor.insertedTextBackground#83FF0825
  • diffEditor.removedTextBackground#FF088325
  • dropdown.background#2a1c0a
  • dropdown.border#3a2a10
  • dropdown.foreground#B4E1FD
  • editor.background#1F1305
  • editor.findMatchBackground#FF830840
  • editor.findMatchBorder#FF8E1ECC
  • editor.findMatchHighlightBackground#FF830825
  • editor.foreground#B4E1FD
  • editor.hoverHighlightBackground#2e261c
  • editor.inactiveSelectionBackground#2d2010
  • editor.lineHighlightBackground#2a1c0a
  • editor.lineHighlightBorder#2a2118
  • editor.rangeHighlightBackground#322a1f
  • editor.selectionBackground#3a2a10
  • editor.selectionHighlightBackground#5c4f4280
  • editor.wordHighlightBackground#4a4038
  • editor.wordHighlightStrongBackground#FF1E8E55
  • editorBracketMatch.background#8308FF30
  • editorBracketMatch.border#8308FF
  • editorCodeLens.foreground#8a9eb8
  • editorCursor.foreground#B4E1FD
  • editorError.foreground#FF0883
  • editorGroup.dropBackground#0883FF55
  • editorGroupHeader.tabsBackground#160e03
  • editorGutter.addedBackground#83FF0888
  • editorGutter.background#1F1305
  • editorGutter.deletedBackground#FF088388
  • editorGutter.modifiedBackground#1E8EFF88
  • editorHoverWidget.background#2e261c
  • editorHoverWidget.border#8EFF1E88
  • editorIndentGuide.activeBackground#3a3020
  • editorIndentGuide.background#2a2010
  • editorInfo.foreground#0883FF
  • editorLineNumber.activeForeground#BEBEBE
  • editorLineNumber.foreground#474747
  • editorLink.activeForeground#1E8EFF
  • editorOverviewRuler.border#2f261c
  • editorRuler.foreground#4a4038
  • editorSuggestWidget.background#1c1409
  • editorSuggestWidget.border#3d3225
  • editorSuggestWidget.selectedBackground#3d3228
  • editorWarning.foreground#FF8308
  • editorWhitespace.foreground#3a3020
  • editorWidget.background#1c1409
  • errorForeground#FF0883
  • extensionButton.prominentBackground#FF0883
  • extensionButton.prominentForeground#1F1305
  • extensionButton.prominentHoverBackground#FF1E8E
  • focusBorder#FF088360
  • foreground#B4E1FD
  • gitDecoration.addedResourceForeground#83FF08
  • gitDecoration.deletedResourceForeground#FF0883
  • gitDecoration.ignoredResourceForeground#474747
  • gitDecoration.modifiedResourceForeground#FF8308
  • gitDecoration.untrackedResourceForeground#8EFF1E
  • input.background#2a1c0a
  • input.border#3a2a10
  • input.foreground#B4E1FD
  • input.placeholderForeground#474747
  • inputOption.activeBorder#FF0883
  • inputValidation.errorBackground#FF0883
  • inputValidation.errorBorder#FF0883
  • inputValidation.infoBackground#0883FF
  • inputValidation.infoBorder#0883FF
  • inputValidation.warningBackground#FF8308
  • inputValidation.warningBorder#FF8308
  • list.activeSelectionBackground#3a2a10
  • list.activeSelectionForeground#B4E1FD
  • list.dropBackground#0883FF44
  • list.focusBackground#3a2a10
  • list.focusForeground#B4E1FD
  • list.highlightForeground#FF0883
  • list.hoverBackground#2a1c0a
  • list.hoverForeground#B4E1FD
  • list.inactiveSelectionBackground#2d2010
  • list.inactiveSelectionForeground#8EFF1E
  • merge.currentContentBackground#FF088340
  • merge.currentHeaderBackground#FF0883
  • merge.incomingContentBackground#0883FF40
  • merge.incomingHeaderBackground#1E8EFF99
  • minimapSlider.activeBackground#5a524860
  • minimapSlider.background#4a403860
  • minimapSlider.hoverBackground#5a524880
  • notificationLink.foreground#1E8EFF
  • notifications.background#2a1c0a
  • notifications.foreground#B4E1FD
  • panel.background#160e03
  • panel.border#2a1c0a
  • panelTitle.activeBorder#FF0883
  • panelTitle.activeForeground#B4E1FD
  • panelTitle.inactiveForeground#474747
  • peekView.border#8EFF1E
  • peekViewEditor.background#181008
  • peekViewEditor.matchHighlightBackground#FF830850
  • peekViewResult.background#181008
  • peekViewResult.matchHighlightBackground#FF830850
  • peekViewResult.selectionBackground#3d3228
  • peekViewTitle.background#181008
  • peekViewTitleDescription.foreground#7a8a9c
  • pickerGroup.border#4a4038
  • pickerGroup.foreground#8a9eb8
  • progressBar.background#8308FF
  • scrollbar.shadow#0f0a03
  • scrollbarSlider.activeBackground#3a2a10ff
  • scrollbarSlider.background#3a2a1080
  • scrollbarSlider.hoverBackground#3a2a10bb
  • selection.background#0883FF88
  • sideBar.background#180f04
  • sideBar.border#2a1c0a
  • sideBar.foreground#B4E1FD
  • sideBarSectionHeader.background#1F1305
  • sideBarSectionHeader.foreground#BEBEBE
  • sideBarTitle.foreground#BEBEBE
  • statusBar.background#160e03
  • statusBar.debuggingBackground#FF8308
  • statusBar.debuggingForeground#1F1305
  • statusBar.foreground#B4E1FD
  • statusBar.noFolderBackground#160e03
  • statusBarItem.activeBackground#8EFF1E44
  • statusBarItem.hoverBackground#2a1c0a
  • statusBarItem.prominentBackground#8308FF66
  • statusBarItem.prominentHoverBackground#8308FF99
  • tab.activeBackground#1F1305
  • tab.activeBorder#00000000
  • tab.activeBorderTop#FF0883
  • tab.activeForeground#B4E1FD
  • tab.border#2a1c0a
  • tab.inactiveBackground#160e03
  • tab.inactiveForeground#474747
  • terminal.ansiBlack#3F3F3F
  • terminal.ansiBlue#0883FF
  • terminal.ansiBrightBlack#474747
  • terminal.ansiBrightBlue#1E8EFF
  • terminal.ansiBrightCyan#1EFF8E
  • terminal.ansiBrightGreen#8EFF1E
  • terminal.ansiBrightMagenta#8E1EFF
  • terminal.ansiBrightRed#FF1E8E
  • terminal.ansiBrightWhite#C4C4C4
  • terminal.ansiBrightYellow#FF8E1E
  • terminal.ansiCyan#08FF83
  • terminal.ansiGreen#83FF08
  • terminal.ansiMagenta#8308FF
  • terminal.ansiRed#FF0883
  • terminal.ansiWhite#BEBEBE
  • terminal.ansiYellow#FF8308
  • terminal.background#1F1305
  • terminal.foreground#B4E1FD
  • terminalCursor.background#1F1305
  • terminalCursor.foreground#B4E1FD
  • titleBar.activeBackground#160e03
  • titleBar.activeForeground#B4E1FD
  • titleBar.inactiveBackground#160e03
  • titleBar.inactiveForeground#474747
  • walkThrough.embeddedEditorBackground#1c1409
  • widget.shadow#00000040

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.block, punctuation.definition.comment, comment.block.documentation, string.comment, markup.quote.markdown#5a5a5aitalic
invalid, invalid.illegal, invalid.deprecated#FF0883underline
meta.decorator, meta.decorator.python, entity.name.function.decorator, punctuation.decorator, support.other.decorator#8308FF—
keyword, keyword.control, keyword.operator.new, keyword.operator.expression, storage.type, storage.modifier, keyword.other.import, keyword.other.using, keyword.control.import, keyword.control.from, keyword.control.export, keyword.control.at-rule, keyword.control.directive, keyword.operator.expression.import, keyword.operator.expression.export#FF0883bold
keyword.operator, keyword.operator.arithmetic, keyword.operator.logical, keyword.operator.comparison, keyword.operator.assignment, keyword.operator.increment, keyword.operator.decrement, keyword.operator.bitwise, keyword.operator.relational, keyword.operator.spread, keyword.operator.ternary#BEBEBE—
entity.name.function, meta.function.python entity.name.function, meta.function.ts entity.name.function, meta.function.js entity.name.function, meta.method.declaration entity.name.function, meta.definition.method entity.name.function#8EFF1E—
entity.name.function.call, meta.function-call entity.name.function, meta.function-call.generic entity.name.function, meta.function-call.python entity.name.function, meta.function-call.ts entity.name.function, meta.function-call.js entity.name.function, meta.function-call.php entity.name.function, meta.function-call.object.ts entity.name.function, support.function.builtin, support.function.magic.python, variable.function#08FF83—
entity.name.type, entity.name.type.class, entity.name.class, meta.class entity.name.type, meta.class.python meta.class.inheritance entity.name.type, support.class, support.class.builtin, support.class.builtin.python, entity.name.type.alias, entity.name.type.interface, entity.name.type.module, entity.name.type.namespace#1E8EFF—
entity.other.inherited-class, meta.class.inheritance entity.other.inherited-class, entity.other.inherited-class.python, entity.other.inherited-class.ts#1EFF8E—
support.type, support.type.primitive, support.type.builtin, support.type.python, entity.name.type.parameter, meta.type.parameters, meta.type.annotation, meta.return.type, keyword.operator.type.annotation, punctuation.definition.typeparameters, punctuation.section.typeparameters#0883FF—
variable, variable.other, variable.other.readwrite, variable.other.constant, variable.other.local, variable.other.global, meta.definition.variable, variable.other.readwrite.alias, variable.language.this, variable.language.super, variable.language.self.python, variable.language.special.self.python, entity.name.tag.yaml, constant.character.entity.html, entity.name.tag, meta.template.expression variable#B4E1FD—
variable.parameter, variable.parameter.function, variable.parameter.ts, variable.parameter.js, meta.function.parameters variable.parameter, meta.function.parameters punctuation.definition.parameters#FF8E1Eitalic
variable.other.property, variable.other.object.property, variable.other.member, variable.other.object.property.ts, variable.other.object.property.js, support.variable.property, meta.property-name, entity.name.tag.reference, entity.other.attribute-name, entity.other.attribute-name.class.css, entity.other.attribute-name.id.css, meta.property-list.css entity.other.attribute-name, support.type.property-name.css, support.type.property-name, meta.structure.dictionary.key.python, meta.attribute-with-value entity.other.attribute-name#0883FF—
constant.numeric, constant.language, constant.language.boolean, constant.language.null, constant.language.undefined, constant.language.nan, constant.language.infinity, constant.other, constant.other.enum, constant.other.color, constant.other.character-class.regexp, constant.other.character-class.set.regexp, constant.character.escape, constant.character, constant.other.symbol, support.constant, support.constant.property-value.css, support.constant.color.w3c-standard-color-name.css, support.constant.dom, support.constant.json, keyword.other.unit, keyword.other.unit.css, entity.other.keyframe-offset.css#FF8308—
string, string.quoted, string.template, string.interpolated, string.quoted.single, string.quoted.double, string.quoted.triple, string.unquoted, string.regexp, string.other.link, punctuation.definition.string, text.html string, text.html.php string, text.html meta.embedded source.js string, markup.inline.raw, markup.inserted, text.xml string, text.html.markdown string.quoted#83FF08—
punctuation, punctuation.definition, punctuation.separator, punctuation.terminator, punctuation.section, punctuation.accessor, punctuation.definition.tag, punctuation.definition.parameters, punctuation.definition.template-expression, meta.brace, meta.template.expression.ts punctuation, meta.template.expression.js punctuation, meta.embedded.expression punctuation, punctuation.definition.entity.css, punctuation.definition.string.begin, punctuation.definition.string.end, punctuation.definition.attribute-selector, punctuation.definition.metadata.markdown#BEBEBE—
entity.name.tag.css, entity.name.tag.scss, entity.name.tag.less, source.css entity.name.tag, entity.selector, meta.selector#FF0883—
support.function, support.function.css, source.css support.function, meta.function.color.css support.function, meta.property-value.css support.function#08FF83—
entity.other.attribute-name.parent-selector.css, entity.other.attribute-name.parent-selector.scss, entity.other.attribute-name.placeholder.css, meta.at-rule.extend, meta.at-rule.mixin, meta.at-rule.include#8308FF—
token.info-token#0883FF—
token.warn-token#FF8308—
token.error-token#FF0883—
token.debug-token#8308FF—
markup.bold, markup.heading, markup.list, markup.changed, markup.deleted, meta.diff, meta.diff.header, beginning.punctuation.definition.list.markdown, fenced_code.block.language#B4E1FD—
Aco Theme by Lean Hackerman - VS Code Theme