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#003e57
  • activityBar.border#002736
  • activityBar.foreground#faf9e6
  • activityBar.inactiveForeground#faf9e6
  • activityBarBadge.background#006e99
  • activityBarBadge.foreground#faf9e6
  • button.background#aaaaaa
  • button.foreground#111111
  • dropdown.background#1a1a1a
  • dropdown.border#101010
  • editor.background#001920
  • editor.findMatchBackground#444444
  • editor.findMatchHighlightBackground#333333
  • editor.foreground#cccccc
  • editor.lineHighlightBackground#252525
  • editor.lineHighlightBorder#1d1d1d
  • editor.selectionBackground#3c3c3c
  • editor.selectionHighlightBackground#303030
  • editor.selectionHighlightBorder#1d1d1d
  • editorBracketHighlight.foreground1#b0f5e6
  • editorBracketHighlight.foreground2#b0f5e6
  • editorBracketHighlight.foreground3#b0f5e6
  • editorBracketHighlight.foreground4#b0f5e6
  • editorBracketHighlight.foreground5#b0f5e6
  • editorBracketHighlight.foreground6#b0f5e6
  • editorBracketHighlight.unexpectedBracket.foreground#ff0000
  • editorBracketMatch.background#5c4e00
  • editorBracketMatch.border#3c3c3c
  • editorCursor.background#111111
  • editorCursor.foreground#fffb00
  • editorGroup.border#333333
  • editorGroup.dropBackground#333333aa
  • editorGroupHeader.tabsBackground#222222
  • editorIndentGuide.background#333333
  • editorLineNumber.activeForeground#aaaaaa
  • editorLineNumber.foreground#444444
  • editorWhitespace.foreground#333333
  • focusBorder#222222
  • foreground#cccccc
  • panel.background#0d1b20
  • panel.border#01415a
  • panelTitle.activeBorder#015475
  • panelTitle.activeForeground#ffffff
  • panelTitle.inactiveForeground#ffffff
  • scrollbar.shadow#06b3aa8e
  • scrollbarSlider.activeBackground#00324be0
  • scrollbarSlider.background#003e57e0
  • scrollbarSlider.hoverBackground#015272e0
  • sideBar.background#11252c
  • sideBar.border#013347
  • sideBar.dropBackground#11252c
  • sideBar.foreground#faf9e6
  • sideBarSectionHeader.background#14303a
  • sideBarSectionHeader.border#14303a
  • sideBarSectionHeader.foreground#faf9e6
  • sideBarTitle.foreground#faf9e6
  • statusBar.background#003e57
  • statusBar.border#016d16
  • statusBar.debuggingBackground#003e57
  • statusBar.debuggingBorder#b1ae22
  • statusBar.debuggingForeground#faf9e6
  • statusBar.foreground#faf9e6
  • statusBar.noFolderBackground#003e57
  • statusBar.noFolderBorder#3cd816
  • statusBar.noFolderForeground#faf9e6
  • statusBarItem.activeBackground#00324b
  • statusBarItem.hoverBackground#015272
  • statusBarItem.prominentBackground#003e57
  • statusBarItem.prominentHoverBackground#015272
  • tab.activeBackground#003e57
  • tab.activeBorder#0074a1
  • tab.activeBorderTop#002736
  • tab.activeForeground#faf9e6
  • tab.border#002736
  • tab.hoverBackground#015272
  • tab.hoverBorder#00000000
  • tab.inactiveBackground#003e57
  • tab.inactiveForeground#faf9e6
  • tab.unfocusedActiveBorder#0074a1
  • tab.unfocusedActiveBorderTop#0073a100
  • tab.unfocusedActiveForeground#faf9e6
  • tab.unfocusedHoverBackground#015272
  • tab.unfocusedHoverBorder#00000000
  • tab.unfocusedInactiveForeground#faf9e6
  • titleBar.activeBackground#003e57
  • titleBar.activeForeground#faf9e6
  • titleBar.border#002736
  • titleBar.inactiveBackground#003e57
  • titleBar.inactiveForeground#faf9e6
  • widget.shadow#00000000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#66AA66
variable, entity.name.function, meta.function, meta.function-call, support.type.property-name#CCCCCC
keyword, keyword.control, keyword.other, storage.type, storage.modifier, support.type.sys-types, support.type.posix-reserved, support.type.stdint, constant.language, keyword.operator, keyword.operator.logical, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.new, punctuation.separator, support.variable.glsl#999999
string, constant.numeric#AAAADD
meta.preprocessor, meta.preprocessor.include, meta.preprocessor.macro, keyword.control.directive.conditional, keyword.control.directive.include, keyword.control.directive.define, keyword.control.directive.undef, constant.character.escape.line-continuation, keyword.control.directive.pragma, meta.preprocessor.pragma, keyword.control.hlsl, markup.heading#7777AA
invalid#EE3322
meta.paragraph.markdown#CCCCCC
markup.bold#AAAAAAbold
markup.italic#AAAAAAitalic
markup.inline.raw, markup.raw#AAAADD
markup.list, beginning.punctuation.definition.list.markdown#AAAAAA
comment#2ED30D
punctuation.definition.comment#2ED30D
string#00DADA
meta.embedded.assembly#00DADA
keyword - keyword.operator#E0D497
keyword.control#E0D497
storage#E0D497
storage.type#E0D497
constant.numeric#FFFFFF
entity.name.function#F9FAF0
support.function#F9FAF0
variable#DDF2F5
entity.name.variable#DDF2F5
storage.modifier, keyword.control#E6D47E
entity.name.tag#FFFFFF
keyword.operator, keyword.operator.logical, keyword.operator.arithmetic, keyword.operator.assignment, punctuation.separator#B0F5E6
keyword, keyword.other, keyword.operator.new, keyword.control.directive.conditional, keyword.control.directive.include, keyword.control.directive.define, keyword.control.directive.undef, constant.language, meta.preprocessor, meta.preprocessor.include, meta.preprocessor.macro, constant.character.escape.line-continuation, keyword.control.directive.pragma, meta.preprocessor.pragma, keyword.control.hlsl, markup.heading#00D9FF
token.info-token#6796E6
token.warn-token#CD9731
token.error-token#F44747
token.debug-token#B267E6
Tartessos by Kiwii - VS Code Theme