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.activeBorder#23386e
  • activityBar.background#141b24
  • activityBar.foreground#dbdae8
  • activityBarBadge.background#efbd5dcc
  • activityBarBadge.foreground#141b24
  • badge.background#efbd5d
  • badge.foreground#141b24
  • breadcrumb.activeSelectionForeground#dbdae8
  • breadcrumb.focusForeground#90a5c8
  • breadcrumbPicker.background#111520ee
  • button.background#d44dae
  • debugConsole.errorForeground#c00c0c
  • debugConsole.infoForeground#41a7fc
  • debugConsole.sourceForeground#90a5c8
  • debugConsole.warningForeground#d2723b
  • debugConsoleInputIcon.foreground#3ecd83
  • debugIcon.breakpointCurrentStackframeForeground#ff4762
  • debugIcon.breakpointDisabledForeground#455573
  • debugIcon.breakpointForeground#ff4762
  • debugIcon.breakpointUnverifiedForeground#90a5c8
  • debugIcon.continueForeground#3ecd83
  • debugIcon.disconnectForeground#ff4762
  • debugIcon.pauseForeground#dd9046
  • debugIcon.restartForeground#d44dae
  • debugIcon.stepBackForeground#41a7fc
  • debugIcon.stepIntoForeground#41a7fc
  • debugIcon.stepOutForeground#41a7fc
  • debugIcon.stepOverForeground#41a7fc
  • debugIcon.stopForeground#ff4762
  • debugTokenExpression.boolean#dd9046
  • debugTokenExpression.error#ff4762
  • debugTokenExpression.name#c77ddd
  • debugTokenExpression.number#dd9046
  • debugTokenExpression.string#8acd5b
  • debugTokenExpression.value#92d6cf
  • debugToolBar.background#111520ee
  • debugView.exceptionLabelBackground#c00c0c1a
  • debugView.exceptionLabelForeground#c00c0c
  • debugView.stateLabelBackground#efbd5d
  • debugView.stateLabelForeground#141b24
  • diffEditor.diagonalFill#45557380
  • diffEditor.insertedTextBackground#10a27326
  • diffEditor.removedTextBackground#c00c0c26
  • dropdown.background#111520ee
  • dropdown.foreground#90a5c8
  • editor.background#1a212e
  • editor.findMatchBackground#3ecd831a
  • editor.findMatchHighlightBackground#add6921a
  • editor.findMatchHighlightBorder#78e6c346
  • editor.foreground#90a5c8
  • editor.hoverHighlightBackground#dbdae826
  • editor.lineHighlightBackground#212a3f
  • editor.rangeHighlightBackground#3ecd831a
  • editor.selectionBackground#3a5599ac
  • editor.stackFrameHighlightBackground#ebb3d32d
  • editor.symbolHighlightBackground#3ecd831a
  • editor.symbolHighlightBorder#dd9046
  • editor.wordHighlightBackground#f6b86826
  • editor.wordHighlightBorder#f6b86880
  • editor.wordHighlightStrongBackground#41a7fc4d
  • editorBracketHighlight.foreground1#c77ddd
  • editorBracketHighlight.foreground2#3dacb4
  • editorBracketHighlight.foreground3#f6b868
  • editorBracketHighlight.unexpectedBracket.foreground#c00c0c
  • editorCodeLens.foreground#455573
  • editorCursor.background#1a212e
  • editorCursor.foreground#dbdae8
  • editorError.foreground#c00c0c
  • editorGhostText.foreground#455573
  • editorGroup.border#141b24
  • editorGroup.dropBackground#3dacb433
  • editorGroupHeader.tabsBackground#141b24
  • editorGutter.addedBackground#10a273
  • editorGutter.deletedBackground#ff4762
  • editorGutter.foldingControlForeground#90a5c8
  • editorGutter.modifiedBackground#efbd5d
  • editorHoverWidget.background#111520ee
  • editorHoverWidget.border#0000
  • editorInlayHint.background#253c7a70
  • editorInlayHint.foreground#5fa89a
  • editorLightBulb.foreground#f6b868
  • editorLineNumber.activeForeground#90a5c8
  • editorLineNumber.foreground#455573
  • editorLink.activeForeground#41a7fc
  • editorRuler.foreground#45557380
  • editorSuggestWidget.background#111520ee
  • editorSuggestWidget.border#0000
  • editorSuggestWidget.selectedIconForeground#d44dae
  • editorUnicodeHighlight.border#ff4762
  • editorWarning.foreground#d2723b
  • editorWidget.background#111520ee
  • editorWidget.border#23386e
  • errorLens.errorBackground#c00c0c1a
  • errorLens.errorForeground#c00c0c
  • errorLens.warningBackground#d2723b1a
  • errorLens.warningForeground#d2723b
  • extensionButton.prominentBackground#10a273
  • extensionButton.prominentForeground#0c0e15
  • extensionButton.prominentHoverBackground#add692
  • extensionIcon.preReleaseForeground#d2723b80
  • extensionIcon.starForeground#f6b86880
  • extensionIcon.verifiedForeground#92d6cf80
  • focusBorder#dd9046
  • foreground#dcbb
  • gitDecoration.addedResourceForeground#10a273
  • gitDecoration.conflictingResourceForeground#d44dae
  • gitDecoration.deletedResourceForeground#ff4762
  • gitDecoration.ignoredResourceForeground#455573
  • gitDecoration.modifiedResourceForeground#efbd5d
  • gitDecoration.renamedResourceForeground#92d6cf
  • gitDecoration.stageDeletedResourceForeground#ff4762
  • gitDecoration.stageModifiedResourceForeground#efbd5d
  • gitDecoration.untrackedResourceForeground#8acd5b
  • icon.foreground#dcbb
  • input.background#111520ee
  • input.foreground#90a5c8
  • input.placeholderForeground#455573
  • keybindingLabel.background#283140
  • keybindingLabel.bottomBorder#efbd5d
  • keybindingLabel.foreground#90a5c8
  • list.activeSelectionBackground#23386e
  • list.activeSelectionForeground#dbdae8
  • list.deemphasizedForeground#455573
  • list.dropBackground#3dacb433
  • list.errorForeground#c00c0c
  • list.filterMatchBackground#78e6c346
  • list.focusBackground#1a2950
  • list.focusForeground#dbdae8
  • list.highlightForeground#8acd5b
  • list.hoverBackground#1a2950
  • list.hoverForeground#dbdae8
  • list.inactiveFocusBackground#20283d69
  • list.inactiveSelectionBackground#212a3f
  • list.inactiveSelectionForeground#90a5c8
  • list.invalidItemForeground#c00c0c
  • list.warningForeground#dd9046
  • listFilterWidget.background#283140
  • listFilterWidget.noMatchesOutline#c00c0c
  • minimap.errorHighlight#c00c0c
  • minimap.findMatchHighlight#3ecd8380
  • minimap.selectionHighlight#3a5599ac
  • minimap.warningHighlight#d2723b
  • notificationCenterHeader.background#111520ee
  • notifications.background#111520ee
  • panel.border#141b24
  • panelSectionHeader.background#141b24
  • panelSectionHeader.foreground#90a5c8
  • panelTitle.activeForeground#90a5c8
  • peekView.border#efbd5d
  • peekViewEditor.background#212a3f
  • peekViewEditor.matchHighlightBackground#ebb3d32d
  • peekViewResult.background#141b24
  • peekViewResult.fileForeground#90a5c8
  • peekViewResult.lineForeground#dcbb
  • peekViewResult.matchHighlightBackground#78e6c346
  • peekViewResult.selectionBackground#23386e
  • peekViewResult.selectionForeground#dbdae8
  • peekViewTitle.background#111520ee
  • peekViewTitleDescription.foreground#dcbb
  • peekViewTitleLabel.foreground#dbdae8
  • quickInput.background#111520ee
  • quickInputTitle.background#111520ee
  • sash.hoverBorder#efbd5d
  • scrollbar.shadow#0000
  • scrollbarSlider.activeBackground#23386ebf
  • scrollbarSlider.background#25314dbb
  • scrollbarSlider.hoverBackground#1a2950bb
  • selection.background#3a5599ac
  • settings.modifiedItemIndicator#efbd5d
  • sideBar.background#141b24
  • sideBarSectionHeader.background#141b24
  • sideBarSectionHeader.foreground#90a5c8
  • statusBar.background#141b24
  • statusBar.debuggingBackground#ff7e00
  • statusBar.debuggingForeground#141b24
  • statusBar.foreground#dcbb
  • statusBar.noFolderBackground#141b24
  • statusBarItem.compactHoverBackground#23386e59
  • statusBarItem.errorBackground#c00c0c
  • statusBarItem.hoverBackground#23386e59
  • statusBarItem.prominentHoverBackground#23386e59
  • statusBarItem.remoteBackground#61afef
  • statusBarItem.warningBackground#d2723b
  • tab.activeBackground#1a212e
  • tab.activeBorder#0000
  • tab.activeBorderTop#61afef
  • tab.activeForeground#90a5c8
  • tab.activeModifiedBorder#efbd5d
  • tab.border#0000
  • tab.hoverBackground#1a2950
  • tab.hoverForeground#dbdae8
  • tab.inactiveBackground#141b24
  • tab.inactiveForeground#90a5c899
  • tab.unfocusedActiveBorderTop#0000
  • terminal.ansiBlack#0c0e15
  • terminal.ansiBlue#41a7fc
  • terminal.ansiBrightGreen#3ecd83
  • terminal.ansiBrightYellow#f6b868
  • terminal.ansiCyan#3dacb4
  • terminal.ansiGreen#8acd5b
  • terminal.ansiMagenta#d44dae
  • terminal.ansiRed#ff4762
  • terminal.ansiWhite#dbdae8
  • terminal.ansiYellow#efbd5d
  • terminal.selectionBackground#3a5599ac
  • terminalCursor.background#1a212e
  • terminalCursor.foreground#dbdae8
  • textCodeBlock.background#90a5c826
  • textLink.activeForeground#61afef
  • textLink.foreground#41a7fc
  • titleBar.activeBackground#141b24
  • titleBar.activeForeground#dcbb
  • titleBar.inactiveBackground#1a212e
  • tree.indentGuidesStroke#455573
  • widget.shadow#0c0e1566

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
source keyword.control, source keyword.other, source keyword.other.unit, keyword.access.angelscript, keyword.code.angelscript.this.reference, keyword.const, keyword.declaration, keyword.function, keyword.interface, keyword.local.lua, keyword.operator.address, keyword.operator.arrow, keyword.operator.expression, keyword.operator.lua, keyword.operator.new, keyword.package, keyword.preprocessor, keyword.operator.word.hcl, keyword.statement, keyword.struct, keyword.type, keyword.var, meta.preprocessor.angelsript, storage.type, support.type.object.module, variable.language.self, variable.language.super, variable.language.this, punctuation.definition.block.sequence.item, punctuation.definition.keyword.svelte, punctuation.definition.list.begin#d44dae
entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css, keyword.specifier.angelscript, meta.at-rule.media.header.css, punctuation.definition.quote.begin, storage.modifier#ff7e00
punctuation.definition.char, punctuation.definition.string, string, support.constant.property-value#8acd5b
constant.character.escape, keyword.operator.comparison, keyword.operator.conditional, keyword.operator.definiteassignment, keyword.operator.hcl, keyword.operator.logical, keyword.operator.optional.ts, keyword.operator.question, keyword.operator.relational, keyword.operator.ternary, keyword.operator.type, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.definition.variable.shell#ff4762
comment.line, comment.block, markup.fenced_code.block, markup.inline.raw, punctuation.definition.comment#455573italic
punctuation.definition.headingbold
meta.paragraph.markdown#dcbb
source.toml meta.table support.type.property-name.toml, entity.name.variable.local, meta.property-value.css, meta.unrealmacro.property.angelsript, variable.css, variable.language.special, variable.other, variable.parameter, variable.key.table#92d6cf
meta.table support.type.property-name.table, source.python variable.parameter.function-call.python, source.go variable.other.property.go, constant.other.option, entity.name.variable.field, entity.other.attribute-name, entity.other.attribute.lua, meta.braces.hcl, meta.object-literal.key, meta.scope.case-pattern.shell, support.resource.attribute, support.variable.property, variable.key, variable.object.property, variable.other.enummember, variable.other.constant.property, variable.other.object.property, variable.other.property, variable.parameter.key.prisma#c77ddd
source meta.attribute, entity.name.function, keyword.generator.asterisk, keyword.operator.angelscript, keyword.operator.arithmetic, keyword.operator.assignment.compound, keyword.operator.bitwise, keyword.operator.borrow, keyword.operator.decrement, keyword.operator.dereference, keyword.operator.expansion, keyword.operator.heredoc, keyword.operator.increment, keyword.operator.math, keyword.operator.range, keyword.operator.redirect, keyword.operator.rest, keyword.operator.spread, markup.underline.link, meta.function-call.generic.python, punctuation.definition.heading, support.function#41a7fc
string.quoted.double.shell meta.parameter-expansion, constant.language.boolean, constant.language, constant.numeric, constant.other.caps, constant.other.color.rgb-value.hex, keyword.code.angelscript, support.constant, support.type.builtin, variable.other.constant.rust#dd9046
entity.name, entity.other, meta.use.rust, punctuation.support.type.property-name, support.class, support.type, support.type.primitive, support.type.property-name, support.type.vendored.property-name, variable.language.relations.prisma#efbd5d
keyword.operator.access.dot, keyword.operator.arrow.skinny, keyword.operator.assignment, keyword.operator.namespace, punctuation.accessor, punctuation.definition.entity.css, punctuation.eq#add692
keyword.operator.key-value, keyword.operator.type.annotation, meta.brace.round, meta.brace.square, punctuation.terminator, punctuation.semi, punctuation.parenthesis.open, punctuation.parenthesis.close, punctuation.separator, punctuation.brackets.angle, punctuation.comma, punctuation.definition.case-pattern, punctuation.definition.link.title.begin, punctuation.definition.link.title.end, punctuation.definition.metadata, punctuation.definition.tag.begin, punctuation.definition.tag.end, punctuation.definition.tag.xml, punctuation.definition.typeparameters, punctuation.definition.table.inline, punctuation.section.array.shell#3dacb4
punctuation.definition.comment.shebang.shell#add692bold
Fullmetal Theme by Daniel Zhang - VS Code Theme