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#141414
  • activityBar.foreground#888888
  • activityBarBadge.background#FB90B7
  • activityBarBadge.foreground#000000
  • badge.background#FB90B7
  • badge.foreground#000000
  • button.background#FB90B7
  • button.foreground#000000
  • button.hoverBackground#FF3F85
  • contrastActiveBorder#00000000
  • contrastBorder#00000000
  • diffEditor.insertedLineBackground#FF3F8515
  • diffEditor.insertedTextBackground#FF3F8515
  • diffEditor.removedLineBackground#FF6B6B15
  • diffEditor.removedTextBackground#FF6B6B15
  • editor.background#141414
  • editor.foreground#FFCEE4
  • editor.lineHighlightBackground#141414
  • editor.lineHighlightBorder#141414
  • editor.selectionBackground#FFCEE420
  • editor.selectionHighlightBackground#FFCEE418
  • editorBracketHighlight.foreground1#888888
  • editorBracketHighlight.foreground2#888888
  • editorBracketHighlight.foreground3#888888
  • editorBracketHighlight.foreground4#888888
  • editorBracketHighlight.foreground5#888888
  • editorBracketHighlight.foreground6#888888
  • editorBracketHighlight.unexpectedBracket.foreground#FF6B6B
  • editorError.foreground#FF6B6B
  • editorGroupHeader.tabsBackground#141414
  • editorGutter.addedBackground#FB90B780
  • editorGutter.deletedBackground#FF6B6B
  • editorGutter.modifiedBackground#FB90B7
  • editorHoverWidget.background#1B1B1B
  • editorHoverWidget.border#303030
  • editorInlayHint.background#202020
  • editorInlayHint.foreground#929292
  • editorLineNumber.activeForeground#FFCEE4
  • editorLineNumber.foreground#484848
  • editorOverviewRuler.border#141414
  • editorWarning.foreground#FB90B7
  • editorWidget.background#141414
  • focusBorder#FB90B7
  • gitDecoration.addedResourceForeground#88C9A4
  • gitDecoration.conflictingResourceForeground#FF3F85
  • gitDecoration.deletedResourceForeground#FF6B6B
  • gitDecoration.ignoredResourceForeground#666666
  • gitDecoration.modifiedResourceForeground#B09BF0
  • gitDecoration.submoduleResourceForeground#888888
  • gitDecoration.untrackedResourceForeground#F2B87E
  • icon.foreground#888888
  • input.background#202020
  • inputOption.activeBorder#FB90B7
  • list.activeSelectionBackground#2A2A2A
  • list.activeSelectionForeground#FB90B7
  • list.errorForeground#FF6B6B
  • list.focusOutline#FB90B7
  • list.highlightForeground#FB90B7
  • list.hoverBackground#303030
  • list.inactiveSelectionBackground#2A2A2A
  • list.warningForeground#F2B87E
  • menu.background#202020
  • menu.border#303030
  • menu.foreground#FFCEE4
  • menu.selectionBackground#2A2A2A
  • menu.selectionBorder#00000000
  • menu.selectionForeground#FB90B7
  • menu.separatorBackground#484848
  • peekView.border#FB90B7
  • peekViewEditor.background#202020
  • peekViewEditorGutter.background#202020
  • peekViewResult.background#141414
  • peekViewResult.fileForeground#888888
  • peekViewResult.lineForeground#FFCEE4
  • peekViewResult.matchHighlightBackground#FF3F8515
  • peekViewResult.selectionBackground#2A2A2A
  • peekViewResult.selectionForeground#FB90B7
  • peekViewTitle.background#141414
  • peekViewTitleDescription.foreground#666666
  • peekViewTitleLabel.foreground#FFCEE4
  • quickInput.background#202020
  • quickInput.foreground#FFCEE4
  • quickInputList.focusBackground#2A2A2A
  • quickInputList.focusForeground#FB90B7
  • quickInputList.focusIconForeground#FB90B7
  • quickInputTitle.background#141414
  • scrollbar.shadow#00000000
  • scrollbarSlider.background#2E2E2E80
  • scrollbarSlider.hoverBackground#2E2E2E
  • selection.background#505050
  • settings.modifiedItemIndicator#FB90B7
  • sideBar.background#141414
  • sideBarSectionHeader.background#141414
  • sideBarSectionHeader.foreground#888888
  • sideBarTitle.foreground#888888
  • statusBar.background#141414
  • statusBar.debuggingBackground#8B0030
  • statusBar.debuggingForeground#FFCEE4
  • statusBar.foreground#888888
  • statusBar.noFolderBackground#141414
  • statusBarItem.remoteBackground#FB90B7
  • statusBarItem.remoteForeground#000000
  • statusBarItem.remoteHoverBackground#FF3F85
  • statusBarItem.remoteHoverForeground#000000
  • tab.activeBackground#1C1C1C
  • tab.activeBorder#1C1C1C
  • tab.border#141414
  • tab.inactiveBackground#141414
  • tab.unfocusedActiveBorder#1C1C1C
  • terminal.ansiBlack#1E1E1E
  • terminal.ansiBlue#82B4F5
  • terminal.ansiBrightBlack#5C5C72
  • terminal.ansiBrightBlue#82B4F5
  • terminal.ansiBrightCyan#88D4CC
  • terminal.ansiBrightGreen#96D98E
  • terminal.ansiBrightMagenta#FB90B7
  • terminal.ansiBrightRed#FF6B8A
  • terminal.ansiBrightWhite#BEB2C2
  • terminal.ansiBrightYellow#F5D6A0
  • terminal.ansiCyan#88D4CC
  • terminal.ansiGreen#96D98E
  • terminal.ansiMagenta#FB90B7
  • terminal.ansiRed#FF6B8A
  • terminal.ansiWhite#D4C8D8
  • terminal.ansiYellow#F5D6A0
  • terminal.background#141414
  • terminal.foreground#FFCEE4
  • terminal.selectionBackground#FFCEE420
  • terminalCommandDecoration.defaultBackground#88888850
  • terminalCommandDecoration.errorBackground#FF6B6B60
  • terminalCommandDecoration.successBackground#96D98E60
  • terminalCursor.background#141414
  • terminalCursor.foreground#FB90B7
  • textLink.activeForeground#FF3F85
  • textLink.foreground#FB90B7
  • titleBar.activeBackground#141414
  • titleBar.activeForeground#767676
  • titleBar.inactiveBackground#141414
  • titleBar.inactiveForeground#666666
  • tree.inactiveIndentGuidesStroke#48484830
  • tree.indentGuidesStroke#48484860

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#7A7A7A94
variable, string constant.other.placeholder, constant.other.color, meta.block variable.other, support.other.variable, string.other.link, 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.vendored.property-name.css, source.css.scss entity.name.tag, variable.parameter.keyframe-list.css, meta.property-name.css, variable.parameter.url.scss, meta.property-value.scss, meta.property-value.css, entity.name.method.js, meta.class-method.js entity.name.function.js, variable.function.constructor, tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#FFCEE4
keyword, storage.type, storage.modifier, keyword.control, punctuation.definition.tag, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution, variable.language, entity.other.attribute-name, meta.property-list.scss, entity.other.keyframe-offset.css, meta.selector.css, entity.name.tag.reference.scss, entity.name.tag.nesting.css, punctuation.separator.key-value.css, markup.changed, string.regexp, constant.character.escape#888888
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter, entity.name.function, variable.function, support.function, keyword.other.special-method, constant.numeric, support.constant, constant.character, constant.escape, keyword.other.unit, keyword.other, constant.language.boolean, entity.name, support.type, support.class, support.other.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types, text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name, entity.other.attribute-name.class, entity.other.attribute-name.id, meta.attribute-selector.scss, variable.parameter.misc.css#FB90B7
string, constant.other.symbol, constant.other.key, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js, source.sass keyword.control, markup.inserted#FF3F85
invalid, invalid.illegal, entity.name.module.js, variable.import.parameter.js, variable.other.class.js, markup.deleted#FF6B6B
markup.italic#FFCEE4italic
markup.bold, markup.bold string#FFCEE4bold
markup.bold markup.italic, markup.italic markup.bold, markup.quote markup.bold, markup.bold markup.italic string, markup.italic markup.bold string, markup.quote markup.bold string#FFCEE4bold italic
markup.underline#FB90B7underline
*url*, *link*, *uri*underline
comment.line.double-slash.gleam, punctuation.definition.comment.gleam#7A7A7A94
keyword.control.gleam, keyword.other.gleam, storage.type.gleam, storage.modifier.gleam#888888
string.quoted.double.gleam, punctuation.definition.string.begin.gleam, punctuation.definition.string.end.gleam#FF3F85
constant.numeric.integer.gleam, constant.numeric.float.gleam#FF3F85
constant.language.gleam, variable.language.wildcard.gleam, constant.language.placeholder.gleam#FB90B7
keyword.operator.comparison.gleam, keyword.operator.logical.gleam, keyword.operator.arithmetic.gleam, keyword.operator.assignment.gleam, keyword.operator.arrow.gleam, keyword.operator.pipe.gleam, keyword.operator.capture.gleam, keyword.operator.access.gleam#888888
entity.name.type.gleam, support.type.primitive.gleam, support.type.gleam#FB90B7
entity.name.module.gleam, support.other.namespace.gleam, variable.other.module.gleam, entity.name.function.imported.gleam#FFCEE4
entity.name.function.gleam, support.function.gleam#FB90B7
variable.parameter.gleam, variable.other.gleam#FFCEE4
variable.other.property.gleam, entity.name.label.gleam, variable.other.pattern.gleam#FFCEE4
meta.attribute.gleam, storage.type.attribute.gleam, entity.name.tag.attribute.gleam#888888italic
punctuation.definition.list.begin.gleam, punctuation.definition.list.end.gleam, punctuation.definition.tuple.begin.gleam, punctuation.definition.tuple.end.gleam, punctuation.definition.block.gleam, punctuation.definition.parameters.begin.gleam, punctuation.definition.parameters.end.gleam, punctuation.separator.comma.gleam, punctuation.separator.colon.gleam, punctuation.terminator.statement.gleam#88888890
source.json support.type.property-name.json#FB90B7
text.html.markdown, meta.paragraph.markdown, markup.table#FFCEE4
markup.heading, markup.heading entity.name.section#FB90B7bold
punctuation.definition.heading.markdown, markup.heading.setext#888888
markup.bold.markdown#FFCEE4bold
markup.italic.markdown#FFCEE4italic
markup.bold.markdown markup.italic.markdown, markup.italic.markdown markup.bold.markdown#FFCEE4bold italic
punctuation.definition.bold.markdown, punctuation.definition.italic.markdown#88888890
markup.quote.markdown#FFCEE4B3italic
punctuation.definition.blockquote.markdown#888888italic
markup.inline.raw.string.markdown#FF3F85
punctuation.definition.raw.markdown#FF3F8590
markup.fenced_code.block.markdown, meta.embedded.block.markdown#FFCEE4
punctuation.definition.fenced.markdown#888888
fenced_code.block.language.markdown, markup.fenced_code.block.markdown meta.tag#888888italic
markup.underline.link.markdown, string.other.link.title.markdown#FB90B7
markup.link.markdown, string.other.link.description.title.markdown, constant.other.reference.link.markdown#888888
punctuation.definition.link.markdown, punctuation.definition.link.title.begin.markdown, punctuation.definition.link.title.end.markdown, punctuation.definition.link.description.begin.markdown, punctuation.definition.link.description.end.markdown, punctuation.definition.metadata.markdown#88888890
punctuation.definition.list.begin.markdown, markup.list.unnumbered.marker, markup.list.numbered.marker#FB90B7
meta.separator.markdown, punctuation.definition.hr.markdown#5E6E78bold
meta.tag.inline.any.html, meta.tag.block.any.html, entity.name.tag.html#FB90B7
punctuation.definition.tag.html#FB90B790
entity.other.attribute-name.html#888888
string.quoted.double.html, string.quoted.single.html#FF3F85
comment.line.double-slash.proto, comment.block.proto, punctuation.definition.comment.proto#7A7A7A94
keyword.proto, keyword.other.proto#888888
storage.type.proto, constant.language.proto#FB90B7
entity.name.type.message.proto, entity.name.type.enum.proto, support.class.proto, entity.name.package.proto#FFCEE4
variable.other.field.proto, variable.other.enummember.proto#FFCEE4
entity.name.function.service.proto, entity.name.function.rpc.proto#FB90B7
constant.numeric.proto, variable.other.option.proto, string.quoted.double.proto, string.quoted.single.proto, string.quoted.double.include.proto, string.quoted.single.include.proto#FF3F85
punctuation.definition.message.begin.proto, punctuation.definition.message.end.proto, punctuation.definition.enum.begin.proto, punctuation.definition.enum.end.proto, punctuation.definition.service.begin.proto, punctuation.definition.service.end.proto, punctuation.definition.rpc.begin.proto, punctuation.definition.rpc.end.proto, punctuation.terminator.proto, punctuation.separator.key-value.proto, keyword.operator.assignment.proto#888888
source.js constant.other.object.key.js string.unquoted.label.js#FF6B6Bitalic
Midas Touch by vshakitskiy - VS Code Theme