Skip to main content
CodingTheme

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#333842
  • activityBar.foreground#d7dae0
  • activityBarBadge.background#528bff
  • activityBarBadge.foreground#d7dae0
  • badge.background#528bff
  • badge.foreground#d7dae0
  • button.background#4d78cc
  • button.foreground#ffffff
  • button.hoverBackground#6087cf
  • diffEditor.insertedTextBackground#00809b33
  • dropdown.background#353b45
  • dropdown.border#181a1f
  • editor.background#282c34
  • editor.findMatchHighlightBackground#528bff3d
  • editor.foreground#C1C4CA
  • editor.lineHighlightBackground#99bbff0a
  • editor.selectionBackground#3e4451
  • editorCursor.foreground#528bff
  • editorGroup.border#181a1f
  • editorGroupHeader.tabsBackground#21252b
  • editorHoverWidget.background#21252b
  • editorHoverWidget.border#181a1f
  • editorIndentGuide.activeBackground#626772
  • editorIndentGuide.background#C1C4CA26
  • editorLineNumber.activeForeground#C1C4CA
  • editorLineNumber.foreground#636d83
  • editorRuler.foreground#C1C4CA26
  • editorSuggestWidget.background#21252b
  • editorSuggestWidget.border#181a1f
  • editorSuggestWidget.selectedBackground#2c313a
  • editorWhitespace.foreground#C1C4CA26
  • editorWidget.background#21252b
  • editorWidget.border#3a3f4b
  • extensionButton.prominentBackground#2ba143
  • extensionButton.prominentHoverBackground#37af4e
  • focusBorder#528bff
  • input.background#1b1d23
  • input.border#181a1f
  • list.activeSelectionBackground#2c313a
  • list.activeSelectionForeground#d7dae0
  • list.focusBackground#2c313a
  • list.highlightForeground#d7dae0
  • list.hoverBackground#2c313a66
  • list.inactiveSelectionBackground#2c313a
  • list.inactiveSelectionForeground#d7dae0
  • peekView.border#528bff
  • peekViewEditor.background#1b1d23
  • peekViewResult.background#21252b
  • peekViewResult.selectionBackground#2c313a
  • peekViewTitle.background#1b1d23
  • pickerGroup.border#528bff
  • scrollbarSlider.activeBackground#747d9180
  • scrollbarSlider.background#4e566680
  • scrollbarSlider.hoverBackground#5a637580
  • sideBar.background#21252b
  • sideBarSectionHeader.background#333842
  • statusBar.background#2b4977
  • statusBar.border#757575
  • statusBar.debuggingBackground#6d4f3f
  • statusBar.debuggingBorder#757575
  • statusBar.debuggingForeground#C1C4CA
  • statusBar.foreground#C1C4CA
  • statusBar.noFolderBackground#53365a
  • statusBar.noFolderBorder#757575
  • statusBar.noFolderForeground#C1C4CA
  • statusBarItem.hoverBackground#ffffff1f
  • statusBarItem.remoteBackground#376d5b
  • statusBarItem.remoteForeground#C1C4CA
  • tab.activeBackground#282c34
  • tab.activeForeground#d7dae0
  • tab.border#181a1f
  • tab.inactiveBackground#21252b
  • terminal.ansiBlack#333333
  • terminal.ansiBlue#99B7D7
  • terminal.ansiBrightBlack#A6A6A6
  • terminal.ansiBrightBlue#99B7D7
  • terminal.ansiBrightCyan#9CC1C5
  • terminal.ansiBrightGreen#B6C5AB
  • terminal.ansiBrightMagenta#B6ADDB
  • terminal.ansiBrightRed#DCB4B4
  • terminal.ansiBrightWhite#C1C4CA
  • terminal.ansiBrightYellow#CAB880
  • terminal.ansiCyan#9CC1C5
  • terminal.ansiGreen#B6C5AB
  • terminal.ansiMagenta#B6ADDB
  • terminal.ansiRed#DCB4B4
  • terminal.ansiWhite#C1C4CA
  • terminal.ansiYellow#CAB880
  • titleBar.activeBackground#21252b
  • titleBar.activeForeground#9da5b4
  • titleBar.inactiveBackground#21252b
  • titleBar.inactiveForeground#9da5b4

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, string.comment, comment.block.documentation, entity.name.tag.localname.cs#5F687C
string, string.template#C2BBE1
constant.numeric, entity.name.function.preprocessor#CAB880
string.embedded.begin, string.embedded.end, punctuation.definition.template-expression, punctuation.section.embedded, punctuation.separator.hash#DCB4B4
punctuation.definition.string.begin, punctuation.definition.string.end, punctuation.section.embedded.begin.js, punctuation.section.embedded.end.js, punctuation.section.embedded.begin.erb, punctuation.section.embedded.end.erb, source.elixir.embedded, punctuation.separator, punctuation.accessor, meta.brace#C1C4CA
constant.language#DCB4B4
constant.character#CAB880
constant.other#CAB880
variable.language#DCB4B4
keyword, keyword.operator.constructor#DCB4B4
keyword.operator, keyword.operator.logical#C1C4CA
keyword.operator.new#DCB4B4
storage, storage.modifier.pointer, storage.modifier.reference#C1C4CA
storage.type, storage.modifier#DCB4B4
entity.name.namespace, entity.other.attribute-name#9CC1C5
entity.name.function.operator#C1C4CA
entity.name.class, entity.name.module, entity.name.type, storage.identifier, support.class#99B7D7
variable.other.object, variable.other.constant, variable.other.global, variable.other.readwrite.class, variable.other.readwrite.instance, variable.other.readwrite.batchfile, variable.readwrite, variable.readwrite.other.block#99B7D7
variable.other, variable.other.object.property, variable.other.property, variable.other.block#C1C4CA
entity.other.inherited-class#C2BBE1
storage.modifier.import, storage.modifier.package#99B7D7
entity.name.function, support.function#B6C5AB
parameter, variable.parameter, entity.name.variable.parameter, parameter.variable, string.unquoted.preprocessor.message#C1C4CAitalic
entity.name.function-call#C1C4CA
function.support.builtin, function.support.core#C2BBE1
entity.name.tag, entity.name.tag.class.js#DCB4B4
entity.name.tag.class, entity.name.tag.id#99B7D7
entity.name.type.class.templated#C2BBE1
support.constant#C2BBE1
support.type, support.variable#99B7D7
support.dictionary.json#C2BBE1
support.type.property-name.css, support.type.property-name.scss, support.type.property-name.less, support.type.property-name.sass#C1C4CA
entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-class.scss, entity.other.attribute-name.pseudo-class.less, entity.other.attribute-name.pseudo-class.sass, entity.other.attribute-name.pseudo-element.css, entity.other.attribute-name.pseudo-element.scss, entity.other.attribute-name.pseudo-element.less, entity.other.attribute-name.pseudo-element.sass#C2BBE1
support.constant.css, support.constant.scss, support.constant.less, support.constant.sass#C2BBE1
variable.css, variable.scss, variable.less, variable.sass#C2BBE1
variable.css.string, variable.scss.string, variable.less.string, variable.sass.string#C2BBE1
unit.css, unit.scss, unit.less, unit.sass#DCB4B4
function.css, function.scss, function.less, function.sass#9CC1C5
support.other.variable
invalid#e4e4d3
invalid.deprecated#F8F8F0
support.type.property-name.json#9CC1C5
string.detected-link#99B7D7
string.unquoted.cdata#CAB880
meta.diff, meta.diff.header#75715E
markup.deleted#DCB4B4
markup.inserted#B6C5AB
markup.changed#DCB4B4
constant.numeric.line-number.find-in-files - match#9CC1C5A0
entity.name.filename.find-in-files#DCB4B4
markup.italic, markup.italic.markdownitalic
punctuation.definition.italic.markdown, punctuation.definition.bold.markdown, punctuation.definition.heading.markdown#676F7D
punctuation.definition.italic.markdownitalic
markup.underline.link.markdown#99B7D7
markup.bold.markdownbold
markup.heading.markdown#DCB4B4bold
markup.quote.markdown#B6C5AB
meta.separator.markdown#DCB4B4bold
markup.raw.inline.markdown, markup.raw.block.markdown#9CC1C5
punctuation.definition.list_item.markdown#C1C4CAbold
token.info-token#99B7D7
token.warn-token#CAB880
token.error-token#DCB4B4
token.debug-token#C2BBE1

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

Loading...

Atom One Dark Muted Theme by calro - VS Code Theme