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#101010
  • activityBar.foreground#A0A0A0
  • activityBarBadge.background#00FF9C
  • activityBarBadge.foreground#000
  • badge.background#FFFF00
  • badge.foreground#000
  • button.background#FFFF00
  • button.foreground#000
  • button.hoverBackground#FFFF0095
  • diffEditor.insertedLineBackground#99FFE415
  • diffEditor.insertedTextBackground#99FFE415
  • diffEditor.removedLineBackground#FF808015
  • diffEditor.removedTextBackground#FF808015
  • editor.background#101010
  • editor.foreground#FAFBFC
  • editor.selectionBackground#FFFFFF25
  • editor.selectionHighlightBackground#FFFFFF25
  • editorBracketHighlight.foreground1#A0A0A0
  • editorBracketHighlight.foreground2#A0A0A0
  • editorBracketHighlight.foreground3#A0A0A0
  • editorBracketHighlight.foreground4#A0A0A0
  • editorBracketHighlight.foreground5#A0A0A0
  • editorBracketHighlight.foreground6#A0A0A0
  • editorBracketHighlight.unexpectedBracket.foreground#FF8080
  • editorError.foreground#FF8080
  • editorGroupHeader.tabsBackground#101010
  • editorGutter.addedBackground#99FFE4
  • editorGutter.deletedBackground#FF8080
  • editorGutter.modifiedBackground#FFC799
  • editorHoverWidget.background#161616
  • editorHoverWidget.border#282828
  • editorInlayHint.background#1C1C1C
  • editorInlayHint.foreground#A0A0A0
  • editorLineNumber.foreground#505050
  • editorOverviewRuler.border#101010
  • editorWarning.foreground#FFC799
  • editorWidget.background#101010
  • focusBorder#140e1a
  • icon.foreground#A0A0A0
  • input.background#1C1C1C
  • list.activeSelectionBackground#333366
  • list.activeSelectionForeground#FFFF00
  • list.errorForeground#FF8080
  • list.highlightForeground#FFFF00
  • list.hoverBackground#333366
  • list.inactiveSelectionBackground#333366
  • menu.background#141414
  • menu.selectionBackground#333366
  • quickInput.background#141414
  • quickInput.foreground#FFFFFF
  • quickInputList.focusBackground#333366
  • quickInputList.focusForeground#FFFF00
  • quickInputList.focusIconForeground#FFFF00
  • scrollbarSlider.background#34343480
  • scrollbarSlider.hoverBackground#343434
  • selection.background#666
  • settings.modifiedItemIndicator#FFC799
  • sideBar.background#101010
  • sideBarSectionHeader.background#101010
  • sideBarSectionHeader.foreground#A0A0A0
  • sideBarTitle.foreground#01A3F4
  • statusBar.background#101010
  • statusBar.debuggingBackground#FF7300
  • statusBar.debuggingForeground#FFF
  • statusBar.foreground#A0A0A0
  • statusBarItem.remoteBackground#00FF9C
  • statusBarItem.remoteForeground#000
  • tab.activeBackground#101010
  • tab.border#101010
  • tab.inactiveBackground#101010
  • textLink.activeForeground#FFCFA8
  • textLink.foreground#FFC799
  • titleBar.activeBackground#101010
  • titleBar.activeForeground#FAFBFC
  • titleBar.inactiveBackground#101010
  • titleBar.inactiveForeground#707070

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
Default UI and plain text#D5CED9
comment, markup.quote.markdown, meta.diff, meta.diff.header#FFFF00
string, text.html.php string, markup.inline.raw, markup.inserted, punctuation.definition.string, punctuation.definition.markdown, text.html meta.embedded source.js string, text.html.php punctuation.definition.string, text.html meta.embedded source.js punctuation.definition.string, text.html punctuation.definition.string, text.html string#00FF9C
markup.bold, constant.numeric, meta.group.regexp, constant.other, support.constant, entity.other.attribute-name, support.type.exception.python, source.css keyword.other.unit, variable.other.object.property.js.jsx, variable.other.object.js#FEBA17
keyword, storage, markup.italic, meta.link, meta.image, source.js support.type#01A3F4italic
entity.name.function, meta.function-call.generic.python#FEBA17italic
support.function, meta.function.echo.blade#E50046
variable, support.variable, entity.name.tag.yaml, constant.character.entity.html, source.css entity.name.tag.reference, source.css entity.other.attribute-name.parent-selector, meta.structure.dictionary.json support.type.property-name, beginning.punctuation.definition.list.markdown#A1E3F9
entity.other.attribute-nameitalic
markup.list, text.xml string, meta.at-rule.extend, meta.at-rule.extend support.constant, entity.other.inherited-class, entity.other.keyframe-offset.css, text.html.markdown string.quoted, entity.other.attribute-name.class.jade, source.css entity.other.attribute-name, text.xml punctuation.definition.string#FEBA17
punctuation.definition.interpolation, punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php, punctuation.section.embedded.begin.ruby, punctuation.section.embedded.end.ruby, punctuation.definition.template-expression, entity.name.tag#E50046italic
punctuation.definition.metadata.markdown, punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown#D5CED9
support.class, keyword.operator#E83F25
string.regexp, markup.changed#7cb7ff
markup.heading, variable.language.this.js, variable.language.special.self.python#ff00aa
Overdrive Theme by Stenly Andika - VS Code Theme