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.activeBackground#001122
  • activityBar.activeBorder#BBCCDD
  • activityBar.activeFocusBorder#77CCFF
  • activityBar.background#000011
  • activityBar.dropBackground#33557780
  • activityBar.foreground#BBCCDD
  • activityBarBadge.background#3388CC
  • activityBarBadge.foreground#FFF
  • badge.background#3388CC
  • badge.foreground#FFF
  • dropdown.background#001122
  • dropdown.foreground#BBCCDD
  • editor.background#112233
  • editor.findMatchBackground#001111
  • editor.findMatchHighlightBackground#001111
  • editor.findRangeHighlightBackground#001111
  • editor.foreground#BBCCDD
  • editor.inactiveSelectionBackground#001111
  • editor.lineHighlightBackground#223344
  • editor.lineHighlightBorder#223344
  • editor.selectionBackground#001111
  • editor.selectionHighlightBackground#001111
  • editor.wordHighlightBackground#001111
  • editorBracketMatch.border#667788
  • editorError.foreground#FF8800
  • editorGroup.dropBackground#00112280
  • editorGroupHeader.tabsBackground#001122
  • editorGroupHeader.tabsBorder#112233
  • editorGutter.addedBackground#99CC33
  • editorGutter.commentRangeForeground#DD99FF
  • editorGutter.deletedBackground#FF8800
  • editorGutter.modifiedBackground#77CCFF
  • editorHoverWidget.background#001111
  • editorIndentGuide.activeBackground#335577
  • editorIndentGuide.background#223355
  • editorInfo.foreground#77CCFF
  • editorLineNumber.foreground#556688
  • editorSuggestWidget.foreground#BBCCDD
  • editorSuggestWidget.highlightForeground#FFF
  • editorWarning.foreground#FF8800
  • editorWidget.background#001111
  • editorWidget.border#BBCCDD
  • editorWidget.foreground#BBCCDD
  • errorForeground#FF8800
  • focusBorder#223355
  • foreground#BBCCDD
  • input.background#001122
  • input.border#001111
  • input.foreground#BBCCDD
  • input.placeholderForeground#BBCCDD
  • inputOption.activeBorder#001111
  • list.activeSelectionBackground#ffffff00
  • list.activeSelectionForeground#77CCFF
  • list.errorForeground#FF8800
  • list.hoverBackground#ffffff00
  • list.hoverForeground#FFF
  • list.inactiveFocusBackground#001122
  • list.inactiveSelectionBackground#ffffff00
  • list.inactiveSelectionForeground#77CCFF
  • list.invalidItemForeground#FF8800
  • list.warningForeground#FF8800
  • panel.background#223355
  • panel.border#223355
  • panelTitle.activeBorder#77CCFF
  • panelTitle.activeForeground#77CCFF
  • panelTitle.inactiveForeground#BBCCDD
  • progressBar.background#77CCFF
  • scrollbar.shadow#ffffff00
  • scrollbarSlider.activeBackground#335577
  • scrollbarSlider.background#223355
  • scrollbarSlider.hoverBackground#335577
  • sideBar.background#001122
  • sideBar.border#000011
  • sideBar.dropBackground#00112280
  • sideBarSectionHeader.background#ffffff00
  • sideBarSectionHeader.border#ffffff00
  • statusBar.background#001122
  • statusBar.foreground#BBCCDD
  • statusBar.noFolderBackground#000011
  • statusBarItem.remoteBackground#000011
  • tab.activeBackground#112233
  • tab.activeForeground#BBCCDD
  • tab.border#001122
  • tab.hoverBackground#112233
  • tab.inactiveBackground#001122
  • tab.inactiveForeground#BBCCDD
  • tab.unfocusedHoverBackground#001122
  • terminal.ansiBlack#FFF
  • terminal.ansiBrightBlack#FFF
  • terminal.ansiBrightBlue#77CCFF
  • terminal.ansiBrightCyan#99AABB
  • terminal.ansiBrightGreen#99CC33
  • terminal.ansiBrightMagenta#DD99FF
  • terminal.ansiBrightRed#FF8800
  • terminal.ansiBrightWhite#FDF4C1
  • terminal.ansiBrightYellow#FFDD00
  • terminal.ansiCyan#77CCFF
  • terminal.ansiGreen#99CC33
  • terminal.ansiMagenta#DD99FF
  • terminal.ansiRed#FF8800
  • terminal.ansiWhite#77CCFF
  • terminal.ansiYellow#FFDD00
  • terminal.background#223355
  • terminal.foreground#FFF
  • titleBar.activeBackground#000011
  • titleBar.inactiveBackground#001122
  • tree.indentGuidesStroke#223355
  • widget.shadow#ffffff00

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
constant.numeric.css, constant.numeric.decimal.php, entity.name.tag.css, entity.name.tag.custom.css, entity.name.tag.html, entity.name.tag.wildcard.css, keyword.control.at-rule.media.css, support.constant.font-name.css, variable.other.object.property.js, support.variable.property.js, variable.other.property.js, constant.numeric.decimal.js, variable.other.object.js#77CCFF—
constant.language.php, entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css, keyword.control.import.include.php, keyword.operator.gradient.css, punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php, storage.modifier.php, storage.type.function.php, string.unquoted.html, support.class.php, support.constant.color.w3c-extended-color-name.css, support.constant.color.w3c-standard-color-name.css, support.constant.property-value.css, support.constant.vendored.property-value.css, support.function.gradient.css, storage.type.js, storage.type.function.js, keyword.control.flow.js#DD99FF—
entity.name.function.php, entity.other.attribute-name.class.css, entity.other.attribute-name.css, entity.other.attribute-name.html, entity.other.attribute-name.id.css, keyword.operator.pattern.css, meta.function-call.php, support.function.calc.css, support.function.construct.output.php, support.function.construct.php, support.function.misc.css, support.function.timing-function.css, support.function.transform.css, entity.name.function.js#FFDD00—
meta.embedded.block.php, meta.embedded.line.php, meta.function.variable.css, meta.property-list.css, punctuation.definition.arguments.begin.bracket.round.php, punctuation.definition.arguments.end.bracket.round.php, punctuation.definition.begin.bracket.curly.php, punctuation.definition.end.bracket.curly.php, punctuation.definition.entity.begin.bracket.square.css, punctuation.definition.entity.css, punctuation.definition.parameters.begin.bracket.round.css, punctuation.definition.parameters.begin.bracket.round.php, punctuation.definition.parameters.end.bracket.round.css, punctuation.definition.parameters.end.bracket.round.php, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.definition.variable.php, punctuation.section.array.begin.php, punctuation.section.array.end.php, punctuation.section.function.begin.bracket.round.css, punctuation.section.function.end.bracket.round.css, punctuation.section.media.begin.bracket.curly.css, punctuation.section.media.end.bracket.curly.css, punctuation.separator.delimiter.php, punctuation.separator.key-value.css, punctuation.separator.key-value.html, punctuation.separator.list.comma.css, punctuation.terminator.expression.php, support.type.property-name.media.css, variable.other.property.php, meta.brace.round.js, punctuation.accessor.js, punctuation.terminator.statement.js, punctuation.definition.block.js, punctuation.definition.parameters.begin.js, punctuation.definition.parameters.end.js, punctuation.definition.array.begin.bracket.round.php, punctuation.definition.array.end.bracket.round.php, variable.other.global.php, punctuation.definition.begin.bracket.round.php, punctuation.definition.end.bracket.round.php, punctuation.terminator.statement.php, keyword.operator.bitwise.php, variable.other.global.safer.php, support.constant.std.php#99AABB—
keyword.operator.arithmetic.css, keyword.operator.arithmetic.php, keyword.operator.assignment.php, keyword.operator.class.php, keyword.operator.combinator.css, keyword.operator.comparison.php, keyword.operator.gradient.css, keyword.operator.key.php, keyword.operator.logical.php, keyword.operator.string.php, keyword.operator.ternary.php, meta.attribute.class.html, meta.attribute.src.html, keyword.operator.increment-decrement.php, variable.parameter.js, keyword.operator.comparison.js, keyword.operator.error-control.php#FF8800—
punctuation.definition.string.begin.php, punctuation.definition.string.end.php, string.quoted.double, string.quoted.single, string.unquoted.attribute-value.css, support.function.url.css, string.regexp.single-quoted.php, string.regexp.double-quoted.php#99CC33—
keyword.control.else.php, keyword.control.elseif.php, keyword.control.endfor.php, keyword.control.endforeach.php, keyword.control.endif.php, keyword.control.endwhile.php, keyword.control.for.php, keyword.control.foreach.php, keyword.control.if.php, keyword.control.return.php, keyword.control.while.php, keyword.other.new.php, keyword.control.conditional.js#6699FF—
comment#667799—
constant.other.php, meta.property-value.css, support.constant.parity.css, text.html, variable.argument.css, variable.other.php, variable.other.readwrite.js#FFF—
entity.name.function.php, entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css—italic
Artneo by Artneo - VS Code Theme