Skip to main content
Coding Theme

Color themes

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#3F51B522
  • activityBar.background#1b1e2f
  • activityBar.border#3F51B544
  • activityBar.foreground#3F51B5
  • activityBar.inactiveForeground#eee
  • activityBarBadge.background#3F51B5
  • breadcrumb.activeSelectionForeground#ccc
  • breadcrumb.focusForeground#ccc
  • breadcrumb.foreground#aaa
  • breadcrumbPicker.background#222
  • button.background#3F51B5
  • button.foreground#ffffff
  • button.hoverBackground#3F51B5
  • checkbox.border#3F51B544
  • descriptionForeground#11163380
  • diffEditor.insertedTextBackground#34d05822
  • diffEditor.removedTextBackground#d73a4922
  • dropdown.background#1f0d13
  • dropdown.border#3F51B544
  • dropdown.foreground#3F51B5
  • dropdown.listBackground#3F51B520
  • editor.background#101325
  • editor.findMatchBackground#3F51B566
  • editor.findMatchHighlightBackground#3F51B544
  • editor.focusedStackFrameHighlightBackground#3F51B544
  • editor.foldBackground#fafbfc8e
  • editor.foreground#ccc
  • editor.inactiveSelectionBackground#fff3f720
  • editor.lineHighlightBackground#3F51B511
  • editor.selectionBackground#3F51B544
  • editor.selectionHighlightBackground#3F51B544
  • editor.selectionHighlightBorder#3F51B544
  • editor.stackFrameHighlightBackground#3F51B544
  • editor.wordHighlightBackground#34d05800
  • editor.wordHighlightBorder#3F51B544
  • editor.wordHighlightStrongBackground#34d05800
  • editor.wordHighlightStrongBorder#24943e50
  • editorBracketMatch.background#3F51B544
  • editorBracketMatch.border#3F51B544
  • editorCursor.foreground#3F51B5
  • editorGroup.border#3F51B544
  • editorGroupHeader.tabsBackground#1b1e2f
  • editorGroupHeader.tabsBorder#3F51B544
  • editorGutter.addedBackground#3F51B5
  • editorGutter.deletedBackground#3F51B5
  • editorGutter.modifiedBackground#3F51B5
  • editorHoverWidget.background#21252b
  • editorHoverWidget.border#181a1f
  • editorIndentGuide.activeBackground#3F51B5
  • editorIndentGuide.background#eeeeee40
  • editorLineNumber.activeForeground#eeeeeedd
  • editorLineNumber.foreground#eeeeee90
  • editorWhitespace.foreground#11163340
  • editorWidget.background#222
  • errorForeground#3F51B5
  • focusBorder#3F51B5
  • foreground#eee
  • gitDecoration.addedResourceForeground#3F51B5
  • gitDecoration.conflictingResourceForeground#3F51B5
  • gitDecoration.deletedResourceForeground#3F51B5
  • gitDecoration.ignoredResourceForeground#11163380
  • gitDecoration.modifiedResourceForeground#3F51B5
  • gitDecoration.submoduleResourceForeground#11163380
  • gitDecoration.untrackedResourceForeground#3F51B5
  • icon.foreground#eee
  • input.background#1f0d13
  • input.border#3F51B544
  • input.foreground#ccc
  • input.placeholderForeground#3F51B5aa
  • list.activeSelectionBackground#3F51B5
  • list.activeSelectionForeground#eee
  • list.activeSelectionIconForeground#eee
  • list.focusBackground#3F51B520
  • list.hoverBackground#3F51B510
  • list.hoverForeground#eee
  • list.inactiveFocusBackground#3F51B520
  • list.inactiveSelectionBackground#3F51B520
  • list.inactiveSelectionForeground#eee
  • menu.background#222
  • menu.border#3F51B5
  • notificationCenterHeader.background#3F51B520
  • notificationCenterHeader.foreground#eee
  • notifications.background#222
  • notifications.border#3F51B5
  • notifications.foreground#111633
  • notificationsErrorIcon.foreground#3F51B5
  • notificationsInfoIcon.foreground#3F51B5
  • notificationsWarningIcon.foreground#3F51B5
  • notificationToast.border#3F51B5
  • panel.background#161827
  • panel.border#3F51B544
  • panelInput.border#3F51B544
  • panelTitle.activeForeground#ccc
  • panelTitle.inactiveForeground#999
  • pickerGroup.border#3F51B544
  • pickerGroup.foreground#111633
  • progressBar.background#3F51B5
  • quickInput.background#222
  • quickInput.foreground#eee
  • scrollbar.shadow#3F51B555
  • scrollbarSlider.activeBackground#3F51B580
  • scrollbarSlider.background#3F51B530
  • scrollbarSlider.hoverBackground#3F51B544
  • settings.headerForeground#eee
  • settings.modifiedItemIndicator#3F51B5
  • sideBar.background#171823
  • sideBar.border#3F51B544
  • sideBar.foreground#ccc
  • sideBarSectionHeader.background#141522
  • sideBarSectionHeader.border#3F51B544
  • sideBarSectionHeader.foreground#eee
  • sideBarTitle.foreground#aaa
  • statusBar.background#1e2034
  • statusBar.border#3F51B544
  • statusBar.debuggingBackground#3F51B5
  • statusBar.debuggingForeground#aaa
  • statusBar.foreground#aaa
  • statusBar.noFolderBackground#ffffff
  • statusBarItem.prominentBackground#3a242c
  • tab.activeBackground#23273c
  • tab.activeBorder#3F51B544
  • tab.activeBorderTop#3F51B5
  • tab.activeForeground#eee
  • tab.border#3F51B544
  • tab.hoverBackground#21253c
  • tab.inactiveBackground#1b1e2f
  • tab.inactiveForeground#aaa
  • tab.unfocusedActiveBorder#3F51B544
  • tab.unfocusedActiveBorderTop#3F51B5
  • tab.unfocusedHoverBackground#1b1e2f
  • terminal.foreground#8f93bc
  • textBlockQuote.background#3F51B544
  • textBlockQuote.border#3F51B544
  • textCodeBlock.background#3F51B544
  • textLink.activeForeground#3F51B5
  • textLink.foreground#3F51B5
  • textPreformat.foreground#aaa
  • textSeparator.foreground#aaa
  • titleBar.activeBackground#1b1e2f
  • titleBar.activeForeground#bbb
  • titleBar.border#3F51B544
  • titleBar.inactiveBackground#1b1e2fdd
  • titleBar.inactiveForeground#ccc
  • tree.indentGuidesStroke#3F51B533

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#AAAAAAitalic
comment.block.preprocessor#AAAAAA
comment.documentation, comment.block.documentation#71fff1
invalid.illegal#ff6f6f
keyword.operator#777777
keyword, storage#77a9ff
storage.type, support.type#db86ff
constant.language, support.constant, variable.language#ff9771
variable, support.variable#db86ff
entity.name.function, support.function#ff9973bold
entity.name.type, entity.other.inherited-class, support.class#d77bffbold
entity.name.exception#ff6969
entity.name.sectionbold
constant.numeric, constant.character, constant#8fdaff
string#ff6565
constant.character.escape#787878
string.regexp#649dff
constant.other.symbol#ff8559
punctuation#787878
meta.tag.sgml.doctype, meta.tag.sgml.doctype string, meta.tag.sgml.doctype entity.name.tag, meta.tag.sgml punctuation.definition.tag.html#AAAAAA
meta.tag, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html#60d7cb
entity.name.tag#7c92ff
meta.tag entity.other.attribute-name, entity.other.attribute-name.html#e37900italic
constant.character.entity, punctuation.definition.entity#ffb69b
meta.selector, meta.selector entity, meta.selector entity punctuation, entity.name.tag.css#7dabfb
meta.property-name, support.type.property-name#ffb69b
meta.property-value, meta.property-value constant.other, support.constant.property-value#009688
keyword.other.importantbold
markup.changed#fff
markup.deleted#fff
markup.italicitalic
markup.error#ff7575
markup.inserted#fff
meta.link#3360ad
markup.output, markup.raw#787878
markup.prompt#787878
markup.heading#e67f59
markup.boldbold
markup.traceback#e67f59
markup.underlineunderline
markup.quote#c183e4
markup.list#7dabfb
markup.bold, markup.italic#48d8ca
markup.inline.raw#e67f59
meta.diff.range, meta.diff.index, meta.separator#cbcbcb
meta.diff.header.from-file#cbcbcb
meta.diff.header.to-file#cbcbcb
Plain Light/Dark Theme by PlainCatMoe - VS Code Theme