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#94a6db
  • activityBar.activeBorder#ffb5b5
  • activityBar.background#4e4e4e
  • activityBar.foreground#b6366a
  • activityBar.inactiveForeground#ced6dc
  • activityBarBadge.background#566ca7
  • activityBarBadge.foreground#f4ff54
  • badge.background#505152
  • badge.foreground#f1f082
  • button.background#4d5558
  • button.foreground#ffacd6
  • commandCenter.activeBackground#000000
  • commandCenter.activeBorder#d5d695
  • commandCenter.activeForeground#fff12d
  • commandCenter.background#000000
  • commandCenter.border#f08ec4
  • commandCenter.foreground#ffcc3f
  • commandCenter.inactiveForeground#b3fcff
  • debugExceptionWidget.background#00212B
  • debugExceptionWidget.border#88f6fa
  • debugIcon.startForeground#ff98bb
  • debugToolBar.background#00212B
  • descriptionForeground#fdff8a
  • diffEditor.insertedLineBackground#6ceeee2d
  • diffEditor.insertedTextBackground#81d4c13f
  • diffEditor.removedLineBackground#0e0849a1
  • diffEditor.removedTextBackground#56e0bd3f
  • diffEditorOverview.insertedForeground#0e0f55
  • diffEditorOverview.removedForeground#ff0000
  • dropdown.background#3a3a3a
  • dropdown.border#ffb4da
  • dropdown.foreground#f3fd92
  • editor.background#1e2124
  • editor.findMatchBackground#7c797b91
  • editor.findMatchForeground#ffa7a7
  • editor.findMatchHighlightBackground#546263
  • editor.findMatchHighlightForeground#f7c1f2
  • editor.foreground#f89898
  • editor.lineHighlightBackground#4a4f50
  • editor.lineHighlightBorder#eaf17f
  • editor.selectionBackground#534294b9
  • editor.selectionForeground#ff0000
  • editor.selectionHighlightBackground#ff006aaa
  • editor.wordHighlightBackground#64dbff3b
  • editorBracketHighlight.foreground1#ffffff
  • editorBracketHighlight.foreground2#94a5f3
  • editorBracketHighlight.foreground3#a88cce
  • editorCursor.foreground#b0f6ff
  • editorGroup.border#00212B
  • editorGroup.dropBackground#2AA19844
  • editorGroupHeader.tabsBackground#a1cef2
  • editorHoverWidget.background#dd6e8a
  • editorHoverWidget.border#bbbbbb
  • editorHoverWidget.foreground#f8ff96
  • editorIndentGuide.activeBackground#C3E1E180
  • editorIndentGuide.background#93A1A180
  • editorLineNumber.activeForeground#fff671
  • editorLineNumber.dimmedForeground#ff97d4
  • editorLineNumber.foreground#c2c2c2
  • editorWhitespace.foreground#93A1A180
  • editorWidget.background#18191a
  • editorWidget.border#befbff
  • errorForeground#ffeaea
  • extensionButton.prominentBackground#000000
  • extensionIcon.starForeground#fafc81
  • extensionIcon.verifiedForeground#ffa1b1
  • focusBorder#ffa7b6
  • gitDecoration.addedResourceForeground#94a6db
  • gitDecoration.modifiedResourceForeground#fff344
  • gitDecoration.stageModifiedResourceForeground#f2ffab
  • icon.foreground#ffe1a9
  • input.background#18191a
  • input.border#f8a5dc
  • input.foreground#85baff
  • input.placeholderForeground#ff9fc4
  • inputOption.activeBackground#000000
  • inputOption.activeBorder#f8a5a5
  • inputOption.activeForeground#ffffff
  • inputValidation.errorBackground#571b26
  • inputValidation.errorBorder#a92049
  • inputValidation.infoBackground#052730
  • inputValidation.infoBorder#363b5f
  • inputValidation.warningBackground#f1df39
  • inputValidation.warningBorder#f1e640
  • list.activeSelectionBackground#606061
  • list.activeSelectionForeground#8db1ff
  • list.dropBackground#798b8f88
  • list.highlightForeground#fdff8a
  • list.hoverBackground#fa1c71d3
  • list.hoverForeground#f7ffab
  • list.inactiveSelectionBackground#72727270
  • list.inactiveSelectionForeground#fc698e
  • list.inactiveSelectionIconForeground#a0cdf1
  • list.warningForeground#fff238
  • menu.background#f86060
  • menu.foreground#e9f865
  • menu.selectionBackground#a1a1a1
  • menu.selectionBorder#f5dba3
  • menu.selectionForeground#fdd6d6
  • minimap.selectionHighlight#8ac4eb
  • notificationCenter.border#4d5db6
  • notificationCenterHeader.background#000000
  • notificationCenterHeader.foreground#f0ff9b
  • notifications.background#000000
  • notifications.border#ffbebe
  • notifications.foreground#ffabb7
  • notificationsErrorIcon.foreground#ff0000
  • notificationsInfoIcon.foreground#f8ff90
  • notificationsWarningIcon.foreground#fff348
  • notificationToast.border#4d5db6
  • panel.background#727272
  • panel.border#ffb5b5
  • panelSection.dropBackground#ffffff
  • panelSectionHeader.background#ffffff
  • panelTitle.activeBorder#6e85eb
  • panelTitle.activeForeground#ffffff
  • panelTitle.inactiveForeground#fcb5c5
  • peekView.border#2b2b4a
  • peekViewEditor.background#10192c
  • peekViewEditor.matchHighlightBackground#7744AA40
  • peekViewResult.background#000000
  • peekViewTitle.background#00212B
  • pickerGroup.border#2AA19899
  • pickerGroup.foreground#2AA19899
  • ports.iconRunningProcessForeground#ff7688
  • progressBar.background#6c7a83
  • quickInputList.focusBackground#ff8e8e
  • quickInputList.focusForeground#696969
  • scmGraph.historyItemBaseRefColor#75c8ff
  • scrollbar.shadow#000000
  • scrollbarSlider.activeBackground#ff8898
  • scrollbarSlider.background#f8fa8d
  • scrollbarSlider.hoverBackground#dbdedf
  • selection.background#00000099
  • sideBar.background#333333
  • sideBar.border#f0ff9d
  • sideBar.foreground#cecece
  • sideBarSectionHeader.background#fd6d6d
  • sideBarSectionHeader.foreground#fff6a7
  • sideBarStickyScroll.border#ffffff
  • sideBarTitle.background#b90019
  • sideBarTitle.foreground#ffee91
  • statusBar.background#fd819c
  • statusBar.debuggingBackground#00212B
  • statusBar.foreground#fff9a9
  • statusBar.noFolderBackground#00212B
  • statusBarItem.prominentBackground#e61194
  • statusBarItem.prominentHoverBackground#1298bd
  • statusBarItem.remoteBackground#f14a7c
  • statusBarItem.remoteForeground#67f5ff
  • statusBarItem.remoteHoverForeground#00d9ff
  • tab.activeBackground#555c83
  • tab.activeBorderTop#5e5e5e
  • tab.activeForeground#ecddea
  • tab.activeModifiedBorder#ff0000
  • tab.border#ffb5b5
  • tab.inactiveBackground#8186a8
  • tab.inactiveForeground#a0cdf2
  • tab.inactiveModifiedBorder#003847
  • tab.lastPinnedBorder#ff84c1
  • tab.unfocusedActiveBackground#7c7c7c
  • tab.unfocusedActiveForeground#ffffff
  • tab.unfocusedActiveModifiedBorder#eeff91
  • tab.unfocusedInactiveBackground#0d022c
  • tab.unfocusedInactiveForeground#ffffff
  • terminal.ansiBlue#c1e6ff
  • terminal.ansiBrightBlue#96d5ff
  • terminal.ansiBrightCyan#95e2f5
  • terminal.ansiBrightGreen#ffb7d5
  • terminal.ansiBrightRed#fffd95
  • terminal.ansiBrightYellow#5ac7fa
  • terminal.ansiCyan#f84764
  • terminal.ansiGreen#ffffff
  • terminal.ansiMagenta#9de0fa
  • terminal.ansiRed#ffffff
  • terminal.ansiYellow#a6c9ff
  • terminal.background#414141
  • terminal.foreground#dddddd
  • textLink.activeForeground#b1fff8
  • textLink.foreground#ffffff
  • titleBar.activeBackground#2b2a2a
  • titleBar.activeForeground#fda1a1
  • titleBar.border#c2f1ff

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#839496
meta.embedded, source.groovy.embedded, string meta.image.inline.markdown, variable.legacy.builtin.python#839496
comment#586E75italic
string#ffffff
string.regexp#b9b5b5
constant.numeric#d1d1d1
variable.language, variable.other#c9cacc
keyword#f38d8dbold
storage#ffeb77bold
entity.name.class, entity.name.type, entity.name.namespace, entity.name.scope-resolution#ffffff
entity.name.function#6fddff
punctuation.definition.variable#ffffff
punctuation.section.embedded.begin, punctuation.section.embedded.end#DC322F
constant.language, meta.preprocessor#f9ffa4
support.function.construct, keyword.other.new#9c86ff
constant.character, constant.other#d1d1d1
entity.other.inherited-class#85d8ff
entity.name.tag#b8b8b8
punctuation.definition.tag#586E75
entity.other.attribute-name#93A1A1
support.function#8bcbff
punctuation.separator.continuation#90c4ff
support.type, support.class#b9aef7
support.type.exception#fff672
invalid#DC322F
meta.diff, meta.diff.header#2ddab4italic
markup.deleted#DC322F
markup.changed#CB4B16
markup.inserted#2fa57d
markup.quote#fa3556
markup.list#a1cef2
markup.bold, markup.italic#83faf4
markup.boldbold
markup.italicitalic
markup.strikethrough#ff0000strikethrough
markup.inline.raw#b0f1fa
markup.heading#e0f38dbold
markup.heading.setext#1c97bd
source.json meta.structure.dictionary.json support.type.property-name.json#f3fd95
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#f09999
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#fd6666
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#ae91fd
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#f3fd95
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#f09999
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#fd6666
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#ae91fd
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#f3fd95
entity.name.function, support.function, support.constant.handlebars#ffffff
entity.name.function.python#f58888bold
constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other, meta.item-access.arguments.python, #e6e497
keyword.control#f74242
keyword.control, constant.other.color, punctuation, meta.tag, 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, keyword.operator.new.ts, meta.object-literal.key.ts#e08282
comment.line.double-slash.cs, comment.block.cs, punctuation.definition.comment.json.comments, comment.line.double-slash.js, meta.structure.array.json.comments, meta.structure.dictionary.value.json.comments, meta.structure.dictionary.json.comments, source.json.comments, comment.block.css, comment.block.html, meta.property-list.css, comment.line.number-sign.python, punctuation.definition.comment.cs, comment.block.documentation.cs, punctuation.definition.comment.ts, comment.line.double-slash.ts, comment.line.scss, comment.block.ts, comment.block.scss, comment.block.documentation.ts, comment.line.double-slash.tsx, comment.block.tsx#bdbdbd
support.variable, constant.numeric, support.constant#f9ffaabold
meta.return-type, support.class, support.type, entity.name.type, entity.name.class, source.cs storage.type#f7ffae
entity.name, support.type, support.class, support.orther.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types, variable.object.property.ts#fca6c2
meta.function-call.generic.python#ffe694bold
support.type#d4d4d4
storage.type#ffbbbb
constant.character.escape#608cc5
variable.language#ff686fitalic
string.quoted.single, string.quoted.triple, string.quoted.other#ffffff
variable, meta.definition.variable.name, support.variable#acf5ff
meta.structure.dictionary.key.python#8ebbff
*url*, *link*, *uri*#ffffffitalic underline
Jinhsi: Thawborn Renewal Theme by cryoimpact7 - VS Code Theme