Skip to main content
CodingTheme

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.activeBorder#e0e0e0
  • activityBar.activeFocusBorder#e0e0e0
  • activityBar.background#2b2d2f
  • activityBar.border#343739
  • activityBar.dropBorder#424447
  • activityBar.foreground#e0e0e0
  • activityBar.inactiveForeground#a0a1a3
  • activityBarBadge.background#007aff
  • activityBarBadge.foreground#ffffff
  • badge.background#0267d4
  • badge.foreground#e0e0e0
  • button.background#0267d4
  • button.foreground#dfdfe0
  • button.hoverBackground#0267d4
  • debugIcon.breakpointForeground#e21414
  • dropdown.background#1e1e1e
  • editor.background#292a30
  • editor.findMatchBackground#fffb00
  • editor.findMatchBorder#fffb00
  • editor.findMatchHighlightBackground#8b7612
  • editor.findRangeHighlightBorder#2f3239
  • editor.foreground#e0e0e1
  • editor.hoverHighlightBackground#545558
  • editor.inactiveSelectionBackground#2f3239
  • editor.lineHighlightBackground#2f3239
  • editor.lineHighlightBorder#2f3239
  • editor.selectionBackground#646f83
  • editor.selectionForeground#ffffff
  • editor.selectionHighlightBackground#2f3239
  • editorCursor.foreground#ffffff
  • editorGroup.emptyBackground#1d1f21
  • editorGroup.focusedEmptyBorder#1d1f21
  • editorGroupHeader.border#343739
  • editorGroupHeader.noTabsBackground#1d1f21
  • editorGroupHeader.tabsBackground#1d1f21
  • editorGroupHeader.tabsBorder#343739
  • editorHoverWidget.background#303030
  • editorHoverWidget.border#585858
  • editorHoverWidget.foreground#dbdbdc
  • editorLineNumber.activeForeground#e0e0e1
  • editorLineNumber.foreground#737377
  • editorLink.activeForeground#6699ff
  • editorOverviewRuler.border#50565e
  • editorPane.background#1d1f21
  • editorWidget.background#333338
  • editorWidget.foreground#d7d7d7
  • foreground#dfdfe0
  • input.background#1e1e1e
  • input.foreground#e0e0e0
  • input.placeholderForeground#e0e0e0
  • list.activeSelectionBackground#0267d4
  • list.activeSelectionForeground#e0e0e0
  • list.dropBackground#535355
  • list.errorForeground#ffa14a
  • list.focusBackground#0267d4
  • list.highlightForeground#ff7ab2
  • list.hoverBackground#535355
  • list.hoverForeground#e0e0e0
  • list.inactiveSelectionBackground#535355
  • list.inactiveSelectionForeground#e0e0e0
  • minimap.background#292a30
  • minimap.findMatchHighlight#fffb00
  • minimap.selectionHighlight#3f4248
  • minimapGutter.addedBackground#3f4248
  • minimapGutter.modifiedBackground#3f4248
  • minimapSlider.activeBackground#ffffff20
  • minimapSlider.background#ffffff10
  • minimapSlider.hoverBackground#ffffff20
  • notificationCenterHeader.foreground#ffffff
  • notifications.foreground#dfdfe0
  • panel.background#2f3235
  • panel.border#000000ff
  • panelInput.border#707071
  • panelTitle.activeForeground#ffffff
  • peekViewEditor.background#292a30
  • peekViewResult.background#333338
  • scrollbar.shadow#1e1e1e00
  • scrollbarSlider.activeBackground#9a9b9d
  • scrollbarSlider.background#727376
  • scrollbarSlider.hoverBackground#9a9b9d
  • searchEditor.findMatchBackground#2f3239
  • searchEditor.findMatchBorder#2f3239
  • searchEditor.textInputBorder#2f3239
  • sideBar.background#2b2d2f
  • sideBar.border#000000ff
  • sideBar.dropBackground#2b2b2b
  • sideBar.foreground#dfdfe0
  • sideBarSectionHeader.background#333537
  • sideBarSectionHeader.foreground#dfdfe0
  • sideBarTitle.foreground#dfdfe0
  • statusBar.background#2f3235
  • statusBar.border#343739
  • statusBar.debuggingBackground#2f3235
  • statusBar.debuggingForeground#dfdfe0
  • statusBar.foreground#dfdfe0
  • statusBar.noFolderBackground#2f3235
  • statusBar.noFolderForeground#dfdfe0
  • statusBarItem.activeBackground#535355
  • statusBarItem.hoverBackground#535355
  • statusBarItem.remoteBackground#2f3235
  • statusBarItem.remoteForeground#dfdfe0
  • tab.activeBorderTop#292a30
  • tab.activeForeground#dcdddd
  • tab.border#1d1f21
  • tab.inactiveBackground#1d1f21
  • terminal.background#1d2023
  • terminal.foreground#dfdfe0
  • textCodeBlock.background#2f3239
  • widget.shadow#1e1e1e

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
text#dfdfe0
comment#7f8c98
markup.underline.link#6699ff
punctuation.definition.heading.markdown, punctuation.definition.list#cc9768bold
punctuation.definition.directive, keyword.control.directive, entity.name.function.preprocessor, entity.other.attribute-name.pragma.preprocessor, keyword.other.using, punctuation.separator.hash, keyword.control.preprocessor, punctuation.definition.preprocessor#ffa14f
string, support.type.property-name, entity.name.type.namespace#ff8170
constant.numeric, keyword.other.unit.hexadecimal, keyword.other.unit.exponent.hexadecimal, keyword.other.unit.suffix.integer, keyword.other.unit.suffix.floating-point, keyword.operator.minus.exponent.decimal#d9c97c
storage.type, storage.modifier, keyword.other.using.directive, keyword.control, keyword.other, keyword.type, keyword.operator.new, keyword.operator.delete, keyword.cmake, keyword.operator.type, constant.language.boolean, support.constant, constant.language, support.type.primitive#ff7ab2bold
entity.name.type, entity.name.namespace#6bdfff
support.type.swift, meta.definition.typealias.swift#dabaff
variable, storage.source.cmake#4eb0cc
entity.name, support.function#4eb0cc
support.function.swift#b281eb
punctuation.separator.colon.access.control, entity.name.function.operator, entity.name.function.templated, entity.name.type.template, variable.parameter, variable.other.enummember, variable.other.readwrite, storage.modifier.pointer, constant.language.import-export-all, storage.type.function.arrow, entity.name.variable.parameter, variable.other.local, variable.other.global, keyword.operator.comparison.swift, support.function.swift, support.function.any-method.swift, keyword.operator.assignment.swift, punctuation.separator, keyword.operator.type.optional.swift#dfdfe0

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

Loading...

Xcode (Default Dark) by Thomas Bergersen - VS Code Theme