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#254C9366
  • activityBar.dropBackground#A2CBFF80
  • activityBarBadge.background#007162
  • activityBarBadge.foreground#A2CBFF
  • button.background#4E78F1
  • button.hoverBackground#A2CBFF
  • debugToolBar.background#254C93
  • dropdown.background#263041
  • editor.background#1C232B
  • editor.findMatchBackground#B2443E
  • editor.foreground#E2E5E7
  • editor.lineHighlightBorder#263040
  • editor.rangeHighlightBackground#1C232B0d
  • editor.selectionBackground#629dc048
  • editor.selectionHighlightBackground#254C93
  • editor.wordHighlightBackground#1C232B18
  • editor.wordHighlightStrongBackground#1C232B18
  • editorCursor.foreground#ffffff
  • editorError.foreground#FF6F56
  • editorGroup.dropBackground#254C9366
  • editorGroup.focusedEmptyBorder#A2CBFF
  • editorGroupHeader.tabsBackground#254C9366
  • editorGutter.addedBackground#A2CBFF
  • editorGutter.deletedBackground#FF6F56
  • editorGutter.modifiedBackground#00A698
  • editorHoverWidget.background#1c2431
  • editorIndentGuide.background#A9B0B766
  • editorLineNumber.activeForeground#A2CBFF
  • editorLineNumber.foreground#A9B0B766
  • editorLink.activeForeground#A2CBFF
  • editorMarkerNavigation.background#1c2431
  • editorRuler.foreground#6F788136
  • editorWhitespace.foreground#254C93
  • editorWidget.background#1c2431
  • focusBorder#A2CBFF
  • foreground#E2E5E7
  • gitDecoration.conflictingResourceForeground#FFD448
  • gitDecoration.deletedResourceForeground#FF6F56
  • gitDecoration.ignoredResourceForeground#6F7881
  • gitDecoration.modifiedResourceForeground#00A698
  • gitDecoration.untrackedResourceForeground#A2CBFF
  • input.background#263041
  • inputOption.activeBorder#A2CBFF
  • list.activeSelectionBackground#A2CBFF80
  • list.dropBackground#A2CBFF80
  • list.errorForeground#f88070
  • list.focusBackground#A2CBFF80
  • list.hoverBackground#ffffff1a
  • list.inactiveSelectionBackground#A2CBFF30
  • panel.background#1c2431
  • panel.border#ffffff1a
  • panelTitle.activeBorder#E2E5E780
  • panelTitle.inactiveForeground#E2E5E780
  • peekView.border#A2CBFF
  • peekViewEditor.background#1C232B
  • peekViewResult.background#1c2431
  • peekViewTitle.background#1C232B
  • pickerGroup.border#ffffff1a
  • scrollbar.shadow#254C93
  • scrollbarSlider.activeBackground#3A66E5
  • scrollbarSlider.background#254C93
  • scrollbarSlider.hoverBackground#3A66E5
  • selection.background#00D4C3
  • sideBar.background#1c2431
  • sideBarSectionHeader.background#254C93
  • statusBar.background#1C232B
  • statusBar.debuggingBackground#1C232B
  • statusBar.noFolderBackground#1C232B
  • statusBarItem.activeBackground#A2CBFF80
  • statusBarItem.hoverBackground#ffffff1a
  • tab.activeBackground#254C93
  • tab.activeBorder#00C7AF
  • tab.activeModifiedBorder#FF8864
  • tab.border#00000033
  • tab.inactiveBackground#254C93
  • tab.inactiveModifiedBorder#254C93
  • tab.unfocusedActiveBorder#254C93
  • tab.unfocusedActiveModifiedBorder#254C93
  • tab.unfocusedInactiveModifiedBorder#254C93
  • terminal.ansiBlack#666666
  • terminal.ansiBlue#A2CBFF
  • terminal.ansiBrightBlack#666666
  • terminal.ansiBrightBlue#A2CBFF
  • terminal.ansiBrightCyan#00D4C3
  • terminal.ansiBrightGreen#00A698
  • terminal.ansiBrightMagenta#7091F2
  • terminal.ansiBrightRed#FF6F56
  • terminal.ansiBrightWhite#E2E5E7
  • terminal.ansiBrightYellow#FFD448
  • terminal.ansiCyan#00D4C3
  • terminal.ansiGreen#00A698
  • terminal.ansiMagenta#7091F2
  • terminal.ansiRed#FF6F56
  • terminal.ansiWhite#E2E5E7
  • terminal.ansiYellow#FFD448
  • terminal.background#000000
  • textLink.activeForeground#A2CBFF
  • textLink.foreground#A2CBFF
  • titleBar.activeBackground#1C232B

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
string#A2CBFF
constant.character.escape, text.html constant.character.entity.named, punctuation.definition.entity.html#FDC04C
constant.language.boolean#00A698
constant.numeric#FF9D84
variable, support.variable, support.class, support.constant, meta.definition.variable entity.name.function#4E78F1
keyword, modifier, variable.language.this, support.type.object, constant.language#FF6F56
entity.name.function, support.function#FDC04C
storage.type, storage.modifier#00C7AF
support.module, support.node#00A690italic
support.type#FDB624
entity.name.type, entity.other.inherited-class#FDB624
comment#6F7881italic
entity.name.type.class#017165underline
variable.object.property, meta.field.declaration entity.name.function#00A698
meta.definition.method entity.name.function#00A698
meta.function entity.name.function#00A698
template.expression.begin, template.expression.end, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end#A2CBFF
meta.embedded, source.groovy.embedded, meta.template.expression#E2E5E7
entity.name.tag.yaml#A2CBFF
meta.object-literal.key, meta.object-literal.key string, support.type.property-name.json#00A698
constant.language.json#A2CBFF
entity.other.attribute-name.class#A2CBFF
entity.other.attribute-name.id#FF6F56
source.css entity.name.tag#00D4C3
meta.tag, punctuation.definition.tag#A2CBFF
entity.name.tag#4E78F1
entity.other.attribute-name#FDC04C
markup.heading#A2CBFF
text.html.markdown meta.link.inline, meta.link.reference#00C7B0
text.html.markdown markup.quote#c0c0c0
text.html.markdown beginning.punctuation.definition.list#FDC04C
markup.italic#A2CBFFitalic
markup.bold#B2443Ebold
markup.bold markup.italic, markup.italic markup.bold#A2CBFFitalic bold
markup.fenced_code.block.markdown punctuation.definition.markdown#FF6F56
markup.inline.raw.string.markdown#FF6F56
keyword.other.definition.ini#A2CBFF
entity.name.section.group-title.ini#A2CBFF
source.cs meta.class.identifier storage.type#00D4C3underline
source.cs meta.method.identifier entity.name.function#00D4C3
source.cs meta.method-call meta.method, source.cs entity.name.function#FFD448
source.cs storage.type#00A698
source.cs meta.method.return-type#00A698
source.cs meta.preprocessor#6F7881
source.cs entity.name.type.namespace#E2E5E7
token.info-token#6796e6
token.warn-token#cd9731
token.error-token#f44747
token.debug-token#b267e6
comment#6F7881
Universe by aarsenault - VS Code Theme