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.activeBorder#f9826c
  • activityBar.background#1C2128
  • activityBar.foreground#CDD9E5
  • activityBarBadge.background#4184E4
  • badge.background#373E47
  • badge.foreground#ADBAC7
  • button.background#255AB2
  • button.foreground#CDD9E5
  • debugToolBar.background#2D333B
  • dropdown.background#373E47
  • dropdown.listBackground#2D333B
  • editor.background#22272e
  • editor.lineHighlightBackground#22272E
  • editorGroupHeader.tabsBackground#1C2128
  • editorIndentGuide.activeBackground#636E7B
  • editorIndentGuide.background#373E47
  • editorLineNumber.foreground#545D68
  • editorSuggestWidget.background#22272E
  • editorSuggestWidget.border#444C56
  • editorSuggestWidget.foreground#ADBAC7
  • editorSuggestWidget.highlightForeground#539BF5
  • editorSuggestWidget.selectedBackground#2D333B
  • editorWidget.background#22272E
  • focusBorder#444C56
  • foreground#ADBAC7
  • gitDecoration.ignoredResourceForeground#768390
  • input.background#373E47
  • input.foreground#ffffff
  • input.placeholderForeground#909DAB
  • list.activeSelectionBackground#2D333B
  • list.activeSelectionForeground#FFFFFF
  • list.focusBackground#22272E
  • list.highlightForeground#539BF5
  • list.hoverBackground#2D333B
  • list.hoverForeground#ffffff
  • list.inactiveSelectionBackground#2D333B
  • panelTitle.activeBorder#f9826c
  • panelTitle.inactiveForeground#545D68
  • peekView.border#539BF5
  • peekViewEditor.background#22272E
  • pickerGroup.border#22272E
  • pickerGroup.foreground#539BF5
  • progressBar.background#539BF5
  • quickInput.background#1C2128
  • scrollbar.shadow#101e31
  • scrollbarSlider.activeBackground#545D68
  • scrollbarSlider.background#373E47
  • scrollbarSlider.hoverBackground#444C56
  • settings.dropdownBackground#373E47
  • settings.focusedRowBackground#2D333B
  • settings.numberInputBackground#373E47
  • settings.textInputBackground#373E47
  • sideBar.background#1C2128
  • statusBar.background#2d333b
  • statusBar.debuggingBackground#539BF5
  • statusBar.debuggingForeground#1C2128
  • statusBar.foreground#ADBAC7
  • statusBar.noFolderBackground#373E47
  • statusBarItem.prominentBackground#2D333B
  • statusBarItem.remoteBackground#316DCA
  • statusBarItem.remoteForeground#CDD9E5
  • symbolIcon.classForeground#6BC46D
  • symbolIcon.constructorForeground#b392f0
  • symbolIcon.enumeratorForeground#6BC46D
  • symbolIcon.enumeratorMemberForeground#539BF5
  • symbolIcon.eventForeground#6BC46D
  • symbolIcon.fieldForeground#539BF5
  • symbolIcon.functionForeground#b392f0
  • symbolIcon.interfaceForeground#539BF5
  • symbolIcon.methodForeground#b392f0
  • symbolIcon.variableForeground#539BF5
  • tab.activeBackground#22272e
  • tab.inactiveBackground#1C2128
  • textBlockQuote.border#539BF5
  • textLink.activeForeground#4184E4
  • textLink.foreground#539BF5
  • titleBar.activeBackground#2d333b
  • titleBar.activeForeground#ADBAC7
  • welcomePage.buttonBackground#2D333B
  • welcomePage.buttonHoverBackground#22272E

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#b392f0
emphasisitalic
strong, markup.heading.markdown, markup.bold.markdown#6CB6FFbold
markup.italic.markdownitalic
meta.link.inline.markdown#1976D2underline
string, markup.fenced_code#9db1c5
comment#4e5761
variable.other.enummember, meta.enum.declaration, meta.interface, keyword.operator.assignment, keyword.operator.type, punctuation.separator.key-value, meta.object-literal.key, variable.other.object.property, variable.other.property.tsx, constant.numeric.decimal, constant.language.boolean, keyword#6cb6ff
meta.objectliteral, meta.array.literal, meta.var.expr, string.other.link.title.markdown#96D0FF
constant.language, variable.language.this, variable.other.object, variable.other.class, variable.other.constant, meta.property-name, support, keyword.operator.type.annotation, punctuation.definition.block, punctuation.terminator.statement, meta.object.member, meta.brace.round, punctuation.definition.binding-pattern.array, meta.var.expr, keyword.other.unit.px, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, meta.template.expression, keyword.control.export, meta.property-value, constant.numeric#adbac7
constant.other.placeholder, constant.character.format.placeholder, keyword.other.unit, keyword.other.template, entity.name.tag.yaml, entity.other.attribute-name, support.type.property-name, storage.type.function.arrow#6cb6ff
storage.modifier, storage.type, storage.control.clojure, entity.name.function.clojure, support.function.node, punctuation.definition.template-expression, punctuation.definition.keyword, keyword.control.at-rule.media, keyword.control.at-rule.keyframes, keyword.control.import, keyword.control.export#F47067
variable.parameter.function#FF9800
entity.name.type, entity.other.inherited-class, meta.function-call, meta.instance.constructor, entity.name.function, constant.keyword.clojure, support.function#DCBDFB
entity.name.type, meta.brace.square#adbac7
string.quoted, string.regexp, string.interpolated, string.template, string.unquoted.plain.out.yaml, keyword.other.template, constant.other.color.rgb-value.hex#96d0ff
entity.name.tag, support.class.component#8ddb8c
punctuation.definition.tag.begin, punctuation.definition.tag.end#6cb6ff
token.info-token#96D0FF
token.warn-token#ffea7f
token.error-token#F47067
token.debug-token#96D0FF
markup.underline.link#CDD9E5
beginning.punctuation.definition.list.markdown#96D0FF
punctuation.definition.list.begin.markdown, entity.name.type.interface, entity.name.type#F69D50
punctuation.definition.metadata.markdown#96D0FF
punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown#96D0FF
Timber Cove Theme by David Dossett - VS Code Theme