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.activeBackground#2b2b2b
  • activityBar.activeBorder#eeeeee
  • activityBar.background#2b2b2b
  • activityBar.border#292b2d
  • activityBar.foreground#eeeeee
  • activityBar.inactiveForeground#a9a9a9
  • contrastActiveBorder#46484a
  • contrastBorder#46484a
  • editor.background#2b2b2b
  • editor.findMatchBackground#515c6a80
  • editor.findMatchHighlightBackground#ea5c0080
  • editor.findRangeHighlightBackground#3a3d4180
  • editor.foreground#6688cc
  • editor.hoverHighlightBackground#264f78
  • editor.inactiveSelectionBackground#bf0d1cc0
  • editor.lineHighlightBackground#323232
  • editor.lineHighlightBorder#323232
  • editor.rangeHighlightBackground#f3f0f5
  • editor.selectionBackground#214283
  • editor.wordHighlightBackground#77577740
  • editor.wordHighlightStrongBackground#97597740
  • editorBracketHighlight.foreground1#a9b7c6
  • editorBracketHighlight.foreground2#888888
  • editorBracketHighlight.foreground3#a9b7c6
  • editorBracketHighlight.foreground4#888888
  • editorBracketHighlight.foreground5#a9b7c6
  • editorBracketHighlight.foreground6#888888
  • editorBracketMatch.background#3b514d
  • editorBracketMatch.border#666666
  • editorCursor.foreground#bbbbbb
  • editorGroupHeader.border#2b2b2b
  • editorGroupHeader.tabsBackground#3c3f41
  • editorGroupHeader.tabsBorder#292b2d
  • editorGutter.background#313335
  • editorIndentGuide.activeBackground1#666666
  • editorIndentGuide.background1#404040
  • editorLineNumber.activeForeground#888888
  • editorLineNumber.foreground#888888
  • editorOverviewRuler.background#2b2b2b
  • editorOverviewRuler.border#2b2b2b
  • editorWhitespace.foreground#002040
  • foreground#bbbbbb
  • gitDecoration.modifiedResourceForeground#1ab8ff
  • icon.foreground#adadad
  • input.background#45494a
  • input.foreground#bbbbbb
  • input.placeholderForeground#999999
  • list.activeSelectionForeground#bbbbbb
  • list.activeSelectionIconForeground#bbbbbb
  • list.hoverForeground#bbbbbb
  • list.inactiveSelectionBackground#0d293e
  • list.inactiveSelectionForeground#bbbbbb
  • list.warningForeground#b8b8ba
  • peekViewEditor.matchHighlightBackground#ff8f00
  • peekViewResult.matchHighlightBackground#ea5c0080
  • scrollbarSlider.background#585858
  • scrollbarSlider.hoverBackground#686868
  • sideBar.background#3c3f41
  • sideBar.border#292b2d
  • sideBar.foreground#bbbbbb
  • sideBarSectionHeader.background#3c3f41
  • sideBarSectionHeader.border#46484a
  • sideBarSectionHeader.foreground#bbbbbb
  • sideBarTitle.background#3c3f41
  • sideBarTitle.foreground#bbbbbb
  • statusBar.background#3c3f41
  • statusBar.border#292b2d
  • statusBar.debuggingBackground#ffa50080
  • statusBar.debuggingForeground#bbbbbb
  • statusBar.focusBorder#3c3f41
  • statusBar.foreground#bbbbbb
  • statusBar.noFolderBackground#292b2d
  • statusBar.noFolderForeground#bbbbbb
  • statusBarItem.remoteBackground#262a30
  • statusBarItem.remoteForeground#abb2bf
  • tab.activeBackground#64686b
  • tab.activeBorder#00ff0099
  • tab.activeBorderTop#292b2d
  • tab.activeForeground#bbbbbb
  • tab.border#292b2d
  • tab.hoverBackground#494c50
  • tab.hoverBorder#676b6e
  • tab.inactiveBackground#484b4f
  • tab.inactiveForeground#bbbbbb
  • tab.lastPinnedBorder#292b2d
  • tab.unfocusedHoverForeground#bbbbbb

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#223355
string#22AA44
constant.numeric#F280D0
constant.language#F280D0
constant.character, constant.other#F280D0
variable
keyword#225588
storage#225588
storage.type#9966B8
entity.name.class#FFEEBBunderline
entity.other.inherited-class#DDBB88italic underline
entity.name.function#DDBB88
variable.parameter#2277FF
entity.name.tag#225588
entity.other.attribute-name#DDBB88
support.function#9966B8
support.constant#9966B8
support.type, support.class#9966B8
support.other.variable
invalid#F8F8F0
invalid.deprecated#F8F8F0
markup.quote#22AA44
markup.bold, markup.italic#22AA44
markup.inline.raw#9966B8
markup.heading.setext#DDBB88
comment#808080
punctuation.definition.comment#808080
string#6A8759
meta.embedded.assembly#6A8759
keyword - keyword.operator#CC7832
keyword.control#CC7832
storage#CC7832
storage.type#CC7832
constant.numeric#6897BB
entity.name.type#A9B7C6
entity.name.class#A9B7C6
support.type#A9B7C6
support.class#A9B7C6
entity.name.function#FFC66D
support.function#FFC66D
variable#9876AA
entity.name.variable#9876AA
constant.other, variable.language, punctuation.definition.variable.php, variable.other.property.php#9876AA
keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.logical, keyword, support.class, support.other, storage.modifier.reference.php, support.function.datetime.php, entity.other.alias.php, punctuation.separator.inheritance.php, punctuation.terminator.expression.php, entity.name.type.class.php, keyword.operator.class.php, keyword.operator.comparison.php, keyword.operator.null-coalescing.php, punctuation.separator.delimiter.php, keyword.operator.key.php, keyword.operator.increment-decrement.php#A9B7C6
support.function, keyword.other.new.php, constant.language.php, storage.modifier.php, keyword.other.use.php, keyword.other.use-as.php, keyword.other.namespace.php, punctuation.section.embedded#CC7832
entity.name.function.php#FFC66D
punctuation.definition.string#6A8759
variable.other.readwrite, keyword.other, comment.block.documentation.phpdoc.php, comment.block.php#808080
token.info-token#6796E6
token.warn-token#CD9731
token.error-token#F44747
token.debug-token#B267E6
NetBeans FlatLaf Dark Theme W77 by W77 - VS Code Theme