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#333333
  • activityBar.border#d35791
  • activityBar.foreground#008040
  • activityBar.inactiveForeground#6e7d69
  • activityBarBadge.background#d35791
  • activityBarBadge.foreground#ffffff
  • badge.background#d35791
  • badge.foreground#ffffff
  • button.background#87355B
  • button.foreground#ffffff
  • button.hoverBackground#6F2c32
  • dropdown.background#333333
  • dropdown.border#d35791
  • dropdown.foreground#E6D7E6
  • editor.background#211e1efc
  • editor.foreground#E6D7E6
  • editor.lineHighlightBackground#353030
  • editor.selectionBackground#6F2c32
  • editor.selectionHighlightBackground#87355B40
  • editorCursor.foreground#FFFFFF
  • editorGroup.border#d35791
  • editorGroupHeader.tabsBackground#333333
  • editorGroupHeader.tabsBorder#d35791
  • editorGutter.addedBackground#d35791
  • editorGutter.background#333333
  • editorGutter.deletedBackground#d35791
  • editorGutter.foldingControlForeground#d35791
  • editorGutter.modifiedBackground#d35791
  • editorIndentGuide.activeBackground1#008040
  • editorIndentGuide.background1#008040
  • editorLineNumber.activeForeground#ffffff
  • editorLineNumber.foreground#d35791
  • editorWhitespace.foreground#3F2D2D
  • input.background#211e1e
  • input.border#d35791
  • input.foreground#E6D7E6
  • inputOption.activeBorder#d35791
  • list.activeSelectionBackground#87355B
  • list.activeSelectionForeground#ffffff
  • list.focusBackground#87355B
  • list.hoverBackground#353030
  • list.inactiveSelectionBackground#6F2c32
  • menu.background#333333
  • menu.foreground#E6D7E6
  • menu.selectionBackground#87355B
  • menu.selectionForeground#ffffff
  • menu.separatorBackground#008040
  • menubar.selectionBackground#87355B
  • menubar.selectionForeground#ffffff
  • panel.background#333333
  • panel.border#f0f
  • panelTitle.activeForeground#ffffff
  • panelTitle.inactiveForeground#6e7d69
  • progressBar.background#008040
  • scrollbar.shadow#00000000
  • scrollbarSlider.activeBackground#00804080
  • scrollbarSlider.background#00804040
  • scrollbarSlider.hoverBackground#00804060
  • sideBar.background#333333
  • sideBar.border#d35791
  • sideBar.foreground#E6D7E6
  • sideBarSectionHeader.background#2a2a2a
  • sideBarSectionHeader.border#d35791
  • sideBarSectionHeader.foreground#008040
  • sideBarTitle.foreground#008040
  • statusBar.background#333333
  • statusBar.border#d35791
  • statusBar.debuggingBackground#87355B
  • statusBar.foreground#008040
  • statusBar.noFolderBackground#333333
  • statusBarItem.prominentBackground#87355B
  • statusBarItem.prominentHoverBackground#6F2c32
  • tab.activeBackground#211e1efc
  • tab.activeBorder#d35791
  • tab.activeForeground#ffffff
  • tab.border#d35791
  • tab.inactiveBackground#2a2a2a
  • tab.inactiveForeground#d35791
  • titleBar.activeBackground#333333
  • titleBar.activeForeground#ffffff
  • titleBar.border#d35791
  • titleBar.inactiveBackground#2a2a2a
  • titleBar.inactiveForeground#6e7d69
  • widget.shadow#00000040

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#6e7d69
string#AD9361
constant.numeric#CCCCCC
keyword, keyword.control.js#6CE26A
meta.preprocessor#dcdf73
keyword.control.import#E6D7E6bold
support.function#6CE26A
declaration.function function-result#0000FF
declaration.function function-name#E6D7E6bold
declaration.function argument-name#E6D7E6bold
declaration.function function-arg-type#0000FF
declaration.function function-argument#E6D7E6italic
declaration.class class-name#E6D7E6underline
declaration.class class-inheritance#E6D7E6italic underline
comment.merge-marker.yours, comment.merge-marker.end, comment.merge-marker.theirs#00ffaa
invalid.warning#ffffff
invalid#FFF9F9bold
invalid.deprecated.trailing-whitespace#E6D7E6
declaration.section section-name#E6D7E6italic
string.interpolation#C10006
string.regexp#666666
variable#C1C144
constant, support.constant#6782D3
constant.character#AFA472
constant.language#6CE26Abold
embedded#E6D7E6underline
keyword.markup.element-name#858EF4
keyword.markup.attribute-name, entity.name.type.attribute-name#D25B95
meta.attribute-with-value#9B456F
keyword.exception#C82255bold
keyword.operator#3ED6A8
keyword.control#6969FAbold
support.constant.tm-language-def, support.constant.name.tm-language-def#7171F3
meta.tag.preprocessor.xml#68685B
meta.tag.sgml.doctype#888888
string.quoted.docinfo.doctype.DTD#E6D7E6italic
comment.other.server-side-include.xhtml, comment.other.server-side-include.html#909090
text.html declaration.tag, text.html meta.tag, source.scss entity.name.tag, text.html entity.name.tag.xhtml#48d62c
keyword.other.phpdoc.php#777777
keyword.other.include.php#C82255
support.constant.core.php#DE8E20bold
support.constant.std.php#DE8E10bold
variable.other.global.php#B72E1D
variable.other.global.safer.php#00FF00
string.quoted.single.php#CEA4B5
keyword.storage.php#6969FA
string.quoted.double.php#CEA4B5
entity.other.attribute-name.id.css#EC9E00
entity.name.tag.css#91d506bold
entity.other.attribute-name.class.css#EDCA06
entity.other.attribute-name.pseudo-class.css#9b456f
invalid.bad-comma.css#FFFFFF
support.constant.property-value.css#d2679a
support.type.property-name.css, storage.modifier#E1C96B
support.constant.font-name.css#cea4b5
keyword.other.unit.css#6969FA
string.quoted.single.js#C1538A
string.quoted.double.js#C1538A
keyword.operator.new.js#6EBD87
storage.type#6EBD87
comment.line.number-sign.r#279797italic
comment.line.number-sign-tick.r#C5060Bitalic
comment.line.number-sign-plus.r#ff00ffitalic
markup.raw.block.markdown#CEA4B5
Mintberry Crunch by grahampheath.com - VS Code Theme