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#e3e3e3
  • activityBar.activeBorder#00000000
  • activityBar.background#f7f7f7
  • activityBar.border#ececec
  • activityBar.foreground#6c707e
  • activityBar.inactiveForeground#6c707e
  • activityBarBadge.background#ffa3a3
  • activityBarBadge.foreground#444b61
  • badge.background#ffa8a0
  • badge.foreground#444b61
  • breadcrumb.background#f7f7f7
  • debugToolBar.background#f7f7f7
  • editor.background#ffffff
  • editor.findMatchBackground#ffa8a0
  • editor.findMatchBorder#00000044
  • editor.findMatchHighlightBackground#fcbd3866
  • editor.foreground#383838
  • editor.lineHighlightBackground#fdff0033
  • editor.selectionBackground#fecaca
  • editor.selectionHighlightBackground#fecaca
  • editor.wordHighlightBackground#fecaca
  • editor.wordHighlightStrongBackground#fecaca
  • editorGroupHeader.noTabsBackground#f7f7f7
  • editorGroupHeader.tabsBackground#ffffff
  • editorGroupHeader.tabsBorder#ffffff
  • editorGutter.background#ffffff
  • editorIndentGuide.activeBackground1#aeb3c2
  • editorIndentGuide.background1#ececec
  • editorInlayHint.background#fafafa
  • editorInlayHint.foreground#999999
  • editorLineNumber.activeForeground#767a8a
  • editorLineNumber.dimmedForeground#767a8a
  • editorLineNumber.foreground#b9beca
  • editorOverviewRuler.background#f7f7f7
  • editorOverviewRuler.border#f7f7f7
  • editorRuler.foreground#d8d8d8
  • editorWidget.background#f7f7f7
  • editorWidget.border#ececec
  • focusBorder#fcbd3866
  • foreground#1d1d1d
  • gitDecoration.addedResourceForeground#3e7718
  • gitDecoration.modifiedResourceForeground#0066bf
  • list.activeSelectionBackground#dfdfdf
  • list.activeSelectionForeground#000000
  • list.deemphasizedForeground#8e8e90
  • list.dropBackground#dfdfdf
  • list.errorForeground#b01011
  • list.filterMatchBackground#fcbd3866
  • list.focusAndSelectionOutline#dfdfdf
  • list.focusBackground#dfdfdf
  • list.focusForeground#000000
  • list.focusHighlightForeground#0066bf
  • list.focusOutline#dfdfdf
  • list.highlightForeground#0066bf
  • list.hoverBackground#dfdfdf
  • list.hoverForeground#000000
  • list.inactiveSelectionBackground#dfdfdf
  • list.inactiveSelectionForeground#000000
  • list.invalidItemForeground#b89500
  • list.warningForeground#855f00
  • listFilterWidget.background#f7f7f7
  • listFilterWidget.noMatchesOutline#be1100
  • listFilterWidget.outline#00000000
  • listFilterWidget.shadow#00000029
  • minimap.background#f7f7f7
  • minimapSlider.background#3a3a3a33
  • panel.background#f7f7f7
  • panel.border#ececec
  • panelSection.border#ececec
  • panelSectionHeader.background#f7f7f7
  • panelSectionHeader.border#ececec
  • scrollbarSlider.background#3a3a3a33
  • sideBar.background#f7f7f7
  • sideBar.border#ececec
  • sideBar.foreground#000000
  • sideBarSectionHeader.background#f7f7f7
  • sideBarSectionHeader.border#ececec
  • statusBar.background#f7f7f7
  • statusBar.border#ececec
  • statusBar.debuggingBackground#599e5e
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#000000
  • statusBar.noFolderBackground#f7f7f7
  • statusBarItem.remoteBackground#f7f7f7
  • statusBarItem.remoteForeground#000000
  • tab.activeBackground#fecaca
  • tab.activeBorder#eb085c
  • tab.activeForeground#000000
  • tab.border#00000000
  • tab.hoverBackground#fecaca
  • tab.hoverBorder#eb085c
  • tab.hoverForeground#000000
  • tab.inactiveBackground#ffffff
  • tab.inactiveForeground#777777
  • terminal.ansiBlack#6e6e6e
  • terminal.ansiBlue#ff00004d
  • terminal.ansiBrightBlack#1c1c1c
  • terminal.ansiBrightBlue#808080
  • terminal.ansiBrightCyan#8a8a8a
  • terminal.ansiBrightGreen#585858
  • terminal.ansiBrightMagenta#5f5faf
  • terminal.ansiBrightRed#d75f00
  • terminal.ansiBrightWhite#ffffd7
  • terminal.ansiBrightYellow#626262
  • terminal.ansiCyan#00afaf
  • terminal.ansiGreen#5f8700
  • terminal.ansiMagenta#af005f
  • terminal.ansiRed#d70000
  • terminal.ansiWhite#e4e4e4
  • terminal.ansiYellow#af8700
  • terminal.background#f7f7f7
  • terminal.foreground#383838
  • titleBar.activeBackground#f7f7f7
  • titleBar.activeForeground#000000
  • titleBar.border#ececec
  • titleBar.inactiveBackground#f7f7f7
  • tree.indentGuidesStroke#00000000
  • widget.border#ececec

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#AAAAAAitalic
comment.block.preprocessor#AAAAAA
comment.documentation, comment.block.documentation#448C27
invalid.deprecated
invalid.illegal#FF0000
keyword.operator#383838
keyword, storage#0f54d6
storage.type, support.type#0f54d6
constant.language, support.constant, variable.language#AB6526
variable, support.variable#383838
entity.name.function, support.function#00855f
entity.name.type, entity.other.inherited-class, support.class#6b2fba
entity.name.exception#660000
entity.name.sectionbold
constant.numeric, constant.character, constant#AB6526
string#8c6c41
constant.character.escape#777777
string.regexp#4B83CD
constant.other.symbol#AB6526
punctuation#777777
string source, text source#000000
meta.tag.sgml.doctype, meta.tag.sgml.doctype string, meta.tag.sgml.doctype entity.name.tag, meta.tag.sgml punctuation.definition.tag.html#AAAAAA
meta.tag, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html#6B2FBA
entity.name.tag#6B2FBA
meta.tag entity.other.attribute-name, entity.other.attribute-name.html#248700
string.quoted.double.html
source.css
constant.character.entity, punctuation.definition.entity#AB6526
meta.selector, meta.selector entity, meta.selector entity punctuation, entity.name.tag.css#7A3E9D
meta.property-name, support.type.property-name#008D90
meta.property-value, meta.property-value constant.other, support.constant.property-value#448C27
keyword.other.importantbold
markup.changed#000000
markup.deleted#000000
markup.italicitalic
markup.error#660000
markup.inserted#000000
meta.link#4B83CD
markup.output, markup.raw#777777
markup.prompt#777777
markup.heading#AA3731
markup.boldbold
markup.traceback#660000
markup.underlineunderline
markup.quote#7A3E9D
markup.list#4B83CD
markup.bold, markup.italic#448C27
markup.inline.raw#AB6526
meta.diff.range, meta.diff.index, meta.separator#434343
meta.diff.header.from-file#434343
meta.diff.header.to-file#434343
meta.object-literal.key, meta.object-literal.key entity.name.function#862F95
variable.language#0042B6
variable.other.object.js#008D90
variable.other.object.property.js
variable.other.object.property#0093a1
variable.other.property#0093a1
variable.other.readwrite.js
variable.other.property.js
string.quoted.double.js
string.quoted.single.js
entity.name.function.js#862F95
support.class.console.js, meta.function-call.js, meta.block.js, meta.function.expression.js, meta.block.js, meta.method.declaration.js, meta.objectliteral.js#862F95
entity.name.function.js#7D7840
variable.parameter.js#000000
keyword.operator.expression.delete.js#383838
constant.language #0042B6
storage.type.function.js#0042B6
storage.type.js#0042B6bold
token.info-token#316BCD
token.warn-token#CD9731
token.error-token#CD3131
token.debug-token#800080
keyword.operator.expression.instanceof, keyword.operator.new, keyword.operator.ternary, keyword.operator.optional, keyword.operator.expression.keyof#0f54d6
comment.line.double-slash,comment.block.documentation#248700
comment, punctuation.definition.comment#248700
constant.numeric.float.yaml#383838
constant.language.boolean.yaml#383838
string.unquoted.plain.out.yaml#383838
constant.numeric.integer.yaml#383838
entity.name.tag#6B2FBA
meta.paragraph.markdown#202020
punctuation.definition.heading.markdown#0f54d6
entity.name.section.markdown#0093a1
string.other.link.title.markdown#0f54d6
markup.underline.link.markdown#00855f
punctuation.definition.metadata.markdown#8c6c41
punctuation.definition.link.title.begin.markdown#0f54d6
comment, comment.block, comment.block.documentation, constant, constant.character, constant.character.escape, constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex, constant.numeric.octal, constant.other, constant.regexp, constant.rgb-value, emphasis, entity, entity.name, entity.name.class, entity.name.function, entity.name.method, entity.name.section, entity.name.selector, entity.name.tag, entity.name.type, entity.other, entity.other.attribute-name, entity.other.inherited-class, invalid, invalid.deprecated, invalid.illegal, keyword, keyword.control, keyword.operator, keyword.operator.new, keyword.operator.assignment, keyword.operator.arithmetic, keyword.operator.logical, keyword.other, markup, markup.bold, markup.changed, markup.deleted, markup.heading, markup.inline.raw, markup.inserted, markup.italic, markup.list, markup.list.numbered, markup.list.unnumbered, markup.other, markup.quote, markup.raw, markup.underline, markup.underline.link, meta, meta.block, meta.cast, meta.class, meta.function, meta.function-call, meta.preprocessor, meta.return-type, meta.selector, meta.tag, meta.type.annotation, meta.type, punctuation.definition.string.begin, punctuation.definition.string.end, punctuation.separator, punctuation.separator.continuation, punctuation.terminator, storage, storage.modifier, storage.type, string, string.interpolated, string.other, string.quoted, string.quoted.double, string.quoted.other, string.quoted.single, string.quoted.triple, string.regexp, string.unquoted, strong, support, support.class, support.constant, support.function, support.other, support.type, support.type.property-name, support.variable, variable, variable.language, variable.name, variable.other, variable.other.readwrite, variable.parameter
JetBrains Rider UI theme by idsyn - VS Code Theme