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#222222
  • activityBarBadge.background#1D978D
  • button.background#0077B5
  • button.foreground#FFF
  • button.hoverBackground#005076
  • debugExceptionWidget.background#141414
  • debugExceptionWidget.border#FFF
  • debugToolBar.background#141414
  • editor.background#222222
  • editor.foreground#E6E6E6
  • editor.inactiveSelectionBackground#3a3d41
  • editor.lineHighlightBackground#141414
  • editor.lineHighlightBorder#141414
  • editor.selectionHighlightBackground#add6ff26
  • editorIndentGuide.activeBackground#707070
  • editorIndentGuide.background#404040
  • editorLink.activeForeground#0077B5
  • editorSuggestWidget.selectedBackground#0077B5
  • extensionButton.prominentBackground#0077B5
  • extensionButton.prominentForeground#FFF
  • extensionButton.prominentHoverBackground#005076
  • focusBorder#0077B5
  • gitDecoration.addedResourceForeground#FFF
  • gitDecoration.conflictingResourceForeground#FFF
  • gitDecoration.deletedResourceForeground#FFF
  • gitDecoration.ignoredResourceForeground#FFF
  • gitDecoration.modifiedResourceForeground#FFF
  • gitDecoration.submoduleResourceForeground#FFF
  • gitDecoration.untrackedResourceForeground#FFF
  • input.placeholderForeground#7A7A7A
  • list.activeSelectionBackground#222222
  • list.dropBackground#383b3d
  • list.focusBackground#0077B5
  • list.hoverBackground#222222
  • list.inactiveSelectionBackground#000
  • list.inactiveSelectionForeground#fff
  • menu.background#252526
  • menu.foreground#E6E6E6
  • notificationLink.foreground#0077B5
  • settings.numberInputBackground#292929
  • settings.textInputBackground#292929
  • sideBar.background#283741
  • sideBarSectionHeader.background#222222
  • sideBarTitle.foreground#E6E6E6
  • statusBar.background#222222
  • statusBar.debuggingBackground#1D978D
  • statusBar.noFolderBackground#141414
  • tab.inactiveBackground#283741
  • textLink.activeForeground#0077B5
  • textLink.foreground#0077B5
  • titleBar.activeBackground#222222
  • titleBar.activeForeground#E6E6E6
  • titleBar.inactiveBackground#222222
  • titleBar.inactiveForeground#7A7A7A
  • tree.indentGuidesStroke#555

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasisitalic
strongbold
header#458588
comment, punctuation.definition.comment#506899italic
constant, variable.arguments#d3869b
constant.rgb-value#ebdbb2
entity.name.selector#7ec16e
entity.other.attribute-name#7ec16e
entity.other.attribute-name.css#fe8019
invalid#cc241d
markup.underlineunderline
markup.bold#fe8019bold
markup.heading#fe8019bold
markup.italicitalic
markup.inserted#b8bb26
markup.deleted#d65d0e
markup.changed#fe8019
markup.punctuation.quote.beginning#98971a
markup.punctuation.list.beginning#99c6ca
markup.inline.raw#d65d0e
meta.selector#7ec16e
#d79921
meta.preprocessor#fe8019
meta.preprocessor.string#b8bb26
meta.preprocessor.numeric#b8bb26
meta.structure.dictionary.key.python#689d6a
meta.header.diff#fe8019
storage#f42c3e
storage.modifier#fe8019
string#b8bb26
string.tag#b8bb26
string.value#b8bb26
string.regexp#fe8019
string.escape#f42c3e
string.quasi#7ec16e
string.entity#b8bb26
object#ebdbb2
module.node#99c6ca
support.type.property-name#fabd2f
keyword#f42c3e
keyword.control#f42c3e
keyword.control.module#7ec16e
keyword.control.less#d79921
keyword.operator#7ec16e
keyword.operator.new#fe8019
keyword.other.unit#b8bb26
metatag.php#fe8019
support.function.git-rebase#689d6a
constant.sha.git-rebase#b8bb26
storage.modifier.import.java, storage.modifier.package.java#ebdbb2
meta.type.name, meta.return.type, meta.return-type, meta.cast, meta.type.annotation, support.type, storage.type.cs, storage.type.java, variable.class#fabd2f
variable.this#d3869b
entity.name, entity.static, entity.name.class.static.function, entity.name.function, entity.name.class, entity.name.type#fabd2f
storage.type.function, entity.function, entity.name.function.static#7ec16e
variable.language#d3869bitalic
entity.name.function.function-call#7ec16e
entity.name.method, entity.name.method.function-call, entity.name.static.function-call#689d6a
brace#d5c4a1
meta.parameter.type.variable, variable.parameter, variable, variable.name, variable.other#99c6ca
support.property-value, constant.rgb-value, support.property-value.scss, constant.rgb-value.scss#d65d0e
prototype#d3869b
storage.type.class#f42c3e
support.type.property-name.css#fabd2f
meta.property-group, support.constant.property-value.css#b8bb26
entity.name.tag, punctuation.tag#fabd2f
punctuation#ebdbb2
punctuation.quasi#f42c3e
combine-color-theme by ethanyou - VS Code Theme