Skip to main content
Coding Theme

Color themes

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#100F0F
  • activityBar.foreground#B7B5AC
  • activityBarBadge.background#B658C4
  • activityBarBadge.foreground#000
  • badge.background#B658C4
  • badge.foreground#000
  • button.background#B658C4
  • button.foreground#000
  • button.hoverBackground#FFCFA8
  • diffEditor.insertedLineBackground#9EB1FF15
  • diffEditor.insertedTextBackground#9EB1FF15
  • diffEditor.removedLineBackground#FF8DCC15
  • diffEditor.removedTextBackground#FF8DCC15
  • editor.background#100F0F
  • editor.foreground#F2F0E5
  • editor.selectionBackground#FFFFFF25
  • editor.selectionHighlightBackground#FFFFFF25
  • editorBracketHighlight.foreground1#B7B5AC
  • editorBracketHighlight.foreground2#B7B5AC
  • editorBracketHighlight.foreground3#B7B5AC
  • editorBracketHighlight.foreground4#B7B5AC
  • editorBracketHighlight.foreground5#B7B5AC
  • editorBracketHighlight.foreground6#B7B5AC
  • editorBracketHighlight.unexpectedBracket.foreground#FF8DCC
  • editorError.foreground#FF8DCC
  • editorGroupHeader.tabsBackground#100F0F
  • editorGutter.addedBackground#9EB1FF
  • editorGutter.deletedBackground#FF8DCC
  • editorGutter.modifiedBackground#B658C4
  • editorHoverWidget.background#292929
  • editorHoverWidget.border#282828
  • editorInlayHint.background#1C1C1C
  • editorInlayHint.foreground#B7B5AC
  • editorLineNumber.foreground#505050
  • editorOverviewRuler.border#100F0F
  • editorWarning.foreground#B658C4
  • editorWidget.background#100F0F
  • focusBorder#B658C4
  • icon.foreground#B7B5AC
  • input.background#1C1C1C
  • list.activeSelectionBackground#232323
  • list.activeSelectionForeground#B658C4
  • list.errorForeground#FF8DCC
  • list.highlightForeground#B658C4
  • list.hoverBackground#282828
  • list.inactiveSelectionBackground#232323
  • scrollbarSlider.background#34343480
  • scrollbarSlider.hoverBackground#343434
  • selection.background#666
  • settings.modifiedItemIndicator#B658C4
  • sideBar.background#100F0F
  • sideBarSectionHeader.background#100F0F
  • sideBarSectionHeader.foreground#B7B5AC
  • sideBarTitle.foreground#B7B5AC
  • statusBar.background#100F0F
  • statusBar.debuggingBackground#FF7300
  • statusBar.debuggingForeground#F2F0E5
  • statusBar.foreground#B7B5AC
  • statusBarItem.remoteBackground#B658C4
  • statusBarItem.remoteForeground#000
  • tab.activeBackground#100F0F
  • tab.activeBorderTop#B658C4
  • tab.border#100F0F
  • tab.inactiveBackground#100F0F
  • textLink.activeForeground#FFCFA8
  • textLink.foreground#B658C4
  • titleBar.activeBackground#100F0F
  • titleBar.activeForeground#7E7E7E
  • titleBar.inactiveBackground#100F0F
  • titleBar.inactiveForeground#707070

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#8b8b8b94
variable, string constant.other.placeholder, entity.name.tag#F2F0E5
constant.other.color#F2F0E5
invalid, invalid.illegal#FF8DCC
keyword, storage.type, storage.modifier#B7B5AC
keyword.control, constant.other.color, punctuation.definition.tag, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution#B7B5AC
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#B658C4
entity.name.function, variable.function, support.function, keyword.other.special-method#B658C4
meta.block variable.other#F2F0E5
support.other.variable, string.other.link#F2F0E5
constant.numeric, support.constant, constant.character, constant.escape, keyword.other.unit, keyword.other, constant.language.boolean#B658C4
string, constant.other.symbol, constant.other.key, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js#9EB1FF
entity.name, support.type, support.class, support.other.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types#B658C4
source.css support.type.property-name, source.sass support.type.property-name, source.scss support.type.property-name, source.less support.type.property-name, source.stylus support.type.property-name, source.postcss support.type.property-name, source.postcss support.type.property-name, support.type.vendored.property-name.css, source.css.scss entity.name.tag, variable.parameter.keyframe-list.css, meta.property-name.css, variable.parameter.url.scss, meta.property-value.scss, meta.property-value.css#F2F0E5
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#FF8DCC
variable.language#B7B5AC
entity.name.method.js#F2F0E5F
meta.class-method.js entity.name.function.js, variable.function.constructor#F2F0E5F
entity.other.attribute-name, meta.property-list.scss, meta.attribute-selector.scss, meta.property-value.css, entity.other.keyframe-offset.css, meta.selector.css, entity.name.tag.reference.scss, entity.name.tag.nesting.css, punctuation.separator.key-value.css#B7B5AC
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#B658C4
entity.other.attribute-name.class, entity.other.attribute-name.id, meta.attribute-selector.scss, variable.parameter.misc.css#B658C4
source.sass keyword.control, meta.attribute-selector.scss#9EB1FF
markup.inserted#9EB1FF
markup.deleted#FF8DCC
markup.changed#B7B5AC
string.regexp#B7B5AC
constant.character.escape#B7B5AC
*url*, *link*, *uri*underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#F2F0E5F
source.js constant.other.object.key.js string.unquoted.label.js#FF8DCCitalic
source.json meta.structure.dictionary.json support.type.property-name.json#B658C4
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#B658C4
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#B658C4
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#B658C4
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#B658C4
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#B658C4
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#B658C4
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#B658C4
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#B658C4
text.html.markdown, punctuation.definition.list_item.markdown#F2F0E5
text.html.markdown markup.inline.raw.markdown#B7B5AC
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#F2F0E5
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown, markup.heading, markup.inserted.git_gutter#B658C4
emphasisitalic
comment, punctuation.definition.comment#6F6E69italic
markup.italic#F2F0E5italic
markup.bold, markup.bold string#F2F0E5bold
markup.bold markup.italic, markup.italic markup.bold, markup.quote markup.bold, markup.bold markup.italic string, markup.italic markup.bold string, markup.quote markup.bold string#F2F0E5bold
markup.underline#B658C4underline
markup.quote punctuation.definition.blockquote.markdown#F2F0E5
markup.quote
string.other.link.title.markdown#F2F0E5F
string.other.link.description.title.markdown#B7B5AC
constant.other.reference.link.markdown#B658C4
markup.raw.block#B7B5AC
markup.raw.block.fenced.markdown#00000050
punctuation.definition.fenced.markdown#00000050
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end#F2F0E5
variable.language.fenced.markdown#F2F0E5
meta.separator#65737Ebold
markup.table#F2F0E5

Shiki preview

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

Loading...

ramazzotti - Coding Theme