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#282c34
  • activityBar.foreground#f8f8f2
  • activityBarBadge.background#d1eaf0
  • activityBarBadge.foreground#191a21
  • badge.background#44475a
  • badge.foreground#f8f8f2
  • breadcrumb.activeSelectionForeground#f8f8f2
  • breadcrumb.background#282c34
  • breadcrumb.focusForeground#f8f8f2
  • breadcrumb.foreground#d1eaf0
  • breadcrumbPicker.background#191a21
  • button.background#44475a
  • button.foreground#f8f8f2
  • commandCenter.background#343746
  • commandCenter.border#3a3b4b
  • contrastBorder#343746
  • debugToolBar.background#282c34
  • diffEditor.insertedTextBackground#50fa7b20
  • diffEditor.removedTextBackground#ff555550
  • dropdown.background#343746
  • dropdown.border#191a21
  • dropdown.foreground#f8f8f2
  • editor.background#282c34
  • editor.findMatchBackground#3e7437
  • editor.findMatchBorder#7fff6f
  • editor.findMatchHighlightBackground#725d13
  • editor.findMatchHighlightBorder#ffd12a
  • editor.foreground#ffffff
  • editor.lineHighlightBackground#8be9fd20
  • editor.selectionBackground#385480
  • editor.selectionHighlightBackground#46689f
  • editorBracketMatch.background#252b39
  • editorBracketMatch.border#c5a5c5
  • editorCodeLens.foreground#6272a4
  • editorGroupHeader.tabsBackground#282c34
  • editorGutter.addedBackground#50fa7b80
  • editorGutter.deletedBackground#ff555580
  • editorGutter.modifiedBackground#8be9fd80
  • editorHoverWidget.background#282c34
  • editorLineNumber.foreground#999999
  • editorRuler.foreground#424450
  • editorSuggestWidget.background#21222c
  • editorSuggestWidget.foreground#f8f8f2
  • editorSuggestWidget.selectedBackground#44475a
  • editorWarning.foreground#8be9fd
  • editorWidget.background#21222c
  • focusBorder#282c34
  • foreground#f8f8f2
  • gitDecoration.conflictingResourceForeground#ffb86c
  • gitDecoration.deletedResourceForeground#ff5555
  • gitDecoration.ignoredResourceForeground#6272a4
  • gitDecoration.modifiedResourceForeground#8be8fdbd
  • gitDecoration.untrackedResourceForeground#50fa7a8f
  • input.background#282a36
  • input.border#1e2127
  • input.foreground#eeffff
  • input.placeholderForeground#eeffff60
  • inputOption.activeBorder#bd93f9
  • inputValidation.errorBorder#ff5370
  • inputValidation.infoBorder#82aaff
  • inputValidation.warningBorder#ffcb6b
  • list.activeSelectionBackground#44475a
  • list.activeSelectionForeground#f8f8f2
  • list.dropBackground#44475a
  • list.errorForeground#ff5555
  • list.focusBackground#44475a75
  • list.highlightForeground#8be9fd
  • list.hoverBackground#44475a75
  • list.inactiveSelectionBackground#44475a75
  • list.warningForeground#ffb86c
  • panel.background#282c34
  • panel.border#1e2127
  • panelTitle.activeForeground#f8f8f2
  • panelTitle.inactiveForeground#6272a4
  • progressBar.background#d1eaf0
  • settings.checkboxBackground#21222c
  • settings.checkboxBorder#191a21
  • settings.checkboxForeground#f8f8f2
  • settings.dropdownBackground#21222c
  • settings.dropdownBorder#191a21
  • settings.dropdownForeground#f8f8f2
  • settings.headerForeground#f8f8f2
  • settings.modifiedItemIndicator#ffb86c
  • settings.numberInputBackground#21222c
  • settings.numberInputBorder#191a21
  • settings.numberInputForeground#f8f8f2
  • settings.textInputBackground#21222c
  • settings.textInputBorder#191a21
  • settings.textInputForeground#f8f8f2
  • sideBar.background#282c34
  • sideBar.foreground#bbbbbb
  • sideBarSectionHeader.background#282c34
  • statusBar.background#282c34
  • statusBar.foreground#dddddd
  • statusBar.noFolderBackground#282c34
  • statusBar.noFolderForeground#dddddd
  • tab.activeBorder#dddddd
  • tab.border#191a21
  • tab.inactiveBackground#282c34
  • tab.inactiveForeground#707070
  • terminal.ansiBlack#21222c
  • terminal.ansiBlue#bd93f9
  • terminal.ansiBrightBlack#6272a4
  • terminal.ansiBrightBlue#d6acff
  • terminal.ansiBrightCyan#a4ffff
  • terminal.ansiBrightGreen#69ff94
  • terminal.ansiBrightMagenta#ff92df
  • terminal.ansiBrightRed#ff6e6e
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#ffffa5
  • terminal.ansiCyan#8be9fd
  • terminal.ansiGreen#50fa7b
  • terminal.ansiMagenta#ff79c6
  • terminal.ansiRed#ff5555
  • terminal.ansiWhite#f8f8f2
  • terminal.ansiYellow#f1fa8c
  • terminal.background#282c34
  • terminal.foreground#f8f8f2
  • titleBar.activeBackground#282c34
  • titleBar.inactiveBackground#282c34
  • walkThrough.embeddedEditorBackground#21222c

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
storage.type.function.arrow, meta.function.arrow—normal
variable, meta.jsx.children, text.html, support.constant.property-value.css, variable.parameter, variable.other.readwrite, meta.object-literal.key, meta.definition.variable.ts variable.other.constant, meta.definition.variable.tsx variable.other.constant, source.dart, keyword.operator.comparison.dart#FFFFFF—
comment, punctuation.definition.comment, comment.line, comment.line.double-slash#797979—
keyword, storage.type.class, storage.modifier, storage.type, variable.language, entity.other.attribute-name#C5A5C5—
entity.name.tag.open.jsx, entity.name.tag.close.jsx, entity.name.tag.tsx, constant.numeric, punctuation.terminator.statement, support.variable.property.dom, keyword.operator, keyword.operator.new, punctuation.decorator.ts, entity.name.tag.html, entity.name.tag.localname.xml#F38E9A—
constant.character.entity, entity.name.exception#D67C9B—
markup.heading.1 punctuation.definition.heading#FF0000—
meta.selector.css, entity.name.tag.nesting.css, entity.name.tag.reference.scss#FF6E6E—
string#8DC891—
meta.object-literal.key, string.unquoted, meta.at-rule.keyframes.body.css, constant.other.object.key#8ADF69—
meta.var.expr meta.objectliteral meta.object.member meta.objectliteral meta.object.member meta.object-literal.key#CAFFB5—
type, support.type, source.css, source.css support.type.property-name, source.sass support.type.property-name, source.scss support.type.property-name, source.less support.type.property-name, source.stylus support.type.property-name, source.postcss support.type.property-name, support.type.property-name.css, support.type.vendored.property-name, support.class, support.class.component, entity.other.inherited-class, entity.name.type, entity.name.class#FAC863—
constant.language.boolean, constant.language.json, constant.language.infinity, constant.language.nan, constant.language.undefined, constant.language.null, constant.language.dart#FF8B50—
punctuation, punctuation.definition.tag, punctuation.section.embedded, meta.brace.round, meta.array.literal, entity.name.class.decorator, meta.decorator.ts, variable.other.readwrite.decorator, tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js, meta.decorator meta.function-call entity.name.function#88C6BE—
variable.parameter.keyframe-list.css, support.constant.property-value.misc.css, meta.property-list, meta.brace.square, variable.other.constant.property, variable.other.constant#27e4f1b8—
variable.other.class, meta.property.class#A4FFFF—
variable.other.property, source.css.scss entity.name.tag#BEEDFF—
function, support.constant.media.css, meta.definition.function, meta.definition.method, entity.name.function, variable.function, keyword.other.special-method, support.function, support.class.builtin, keyword.other.name-of-parameter, constructor, meta.function-call entity.name.function, meta.object.member meta.function-call entity.name.function, meta.function-call.generic.python#79B6F2—
source.json meta.structure.dictionary.json support.type.property-name.json#FAC863—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#FF92DF—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#8BE9FD—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#F79D70—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#C5A5C5—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#F38E9A—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#88C6BE—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#82AAFF—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#FF6E6E—
comment, comment.block, comment.block.documentation, comment.line, constant, constant.character, constant.character.escape, constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex, constant.numeric.octal, constant.other, constant.regexp, constant.rgb-value, emphasis, entity, entity.name, entity.name.class, entity.name.function, entity.name.method, entity.name.section, entity.name.selector, entity.name.tag, entity.name.type, entity.other, entity.other.attribute-name, entity.other.inherited-class, invalid, invalid.deprecated, invalid.illegal, keyword, keyword.control, keyword.operator, keyword.operator.new, keyword.operator.assignment, keyword.operator.arithmetic, keyword.operator.logical, keyword.other, markup, markup.bold, markup.changed, markup.deleted, markup.heading, markup.inline.raw, markup.inserted, markup.italic, markup.list, markup.list.numbered, markup.list.unnumbered, markup.other, markup.quote, markup.raw, markup.underline, markup.underline.link, meta, meta.block, meta.cast, meta.class, meta.function, meta.function-call, meta.preprocessor, meta.return-type, meta.selector, meta.tag, meta.type.annotation, meta.type, punctuation.definition.string.begin, punctuation.definition.string.end, punctuation.separator, punctuation.separator.continuation, punctuation.terminator, storage, storage.modifier, storage.type, string, string.interpolated, string.other, string.quoted, string.quoted.double, string.quoted.other, string.quoted.single, string.quoted.triple, string.regexp, string.unquoted, strong, support, support.class, support.constant, support.function, support.other, support.type, support.type.property-name, support.variable, variable, variable.language, variable.name, variable.other, variable.other.readwrite, variable.parameter, variable.parameter.function.language.special.self.python—
token.info-token#6796E6—
token.warn-token#CD9731—
token.error-token#F44747—
token.debug-token#B267E6—
my_reui by Jaime Abbariao - VS Code Theme