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#0b2728
  • activityBar.border#1c696b
  • activityBar.foreground#f4f8fb
  • activityBarBadge.background#42cacd
  • activityBarBadge.foreground#20014b
  • button.background#42cacd
  • button.foreground#20014b
  • button.hoverBackground#6ad5d8
  • button.secondaryBackground#2eabae
  • button.secondaryForeground#20014b
  • button.secondaryHoverBackground#32b8bb
  • checkbox.background#0e3435
  • checkbox.border#238486
  • checkbox.foreground#42cacd
  • debugIcon.continueForeground#ffc022
  • debugIcon.disconnectForeground#fd4e4e
  • debugIcon.restartForeground#16bc77
  • debugToolBar.background#1c696b
  • diffEditor.border#42cacd
  • diffEditor.diagonalFill#42cacd1a
  • diffEditor.insertedLineBackground#36a16866
  • diffEditor.insertedTextBackground#36a16866
  • diffEditor.removedTextBackground#fd4e4e33
  • dropdown.background#0e3435cc
  • dropdown.border#238486
  • editor.background#0e3435
  • editor.findMatchBackground#1c696b
  • editor.findMatchHighlightBackground#154f5099
  • editor.foreground#f4f8fb
  • editor.hoverHighlightBackground#154f5066
  • editor.inactiveSelectionBackground#154f5099
  • editor.lineHighlightBackground#154f50
  • editor.selectionBackground#154f50
  • editor.selectionHighlightBackground#1c696b33
  • editor.wordHighlightBackground#154f500d
  • editorCursor.foreground#f05656
  • editorGroup.border#1c696b
  • editorGroup.dropBackground#42cacd66
  • editorGroupHeader.tabsBackground#0b2728
  • editorGutter.addedBackground#36a168
  • editorGutter.background#0b272866
  • editorGutter.commentRangeForeground#1c696b
  • editorGutter.deletedBackground#b13737
  • editorGutter.foldingControlForeground#42cacd
  • editorGutter.modifiedBackground#1c696b
  • editorIndentGuide.activeBackground#2eabae
  • editorIndentGuide.background#2eabae33
  • editorLineNumber.activeForeground#42cacd
  • editorLineNumber.foreground#1c696b
  • editorOverviewRuler.addedForeground#36a168
  • editorOverviewRuler.background#0e3435
  • editorOverviewRuler.border#1c696b
  • editorOverviewRuler.deletedForeground#b13737
  • editorOverviewRuler.errorForeground#f05656
  • editorOverviewRuler.findMatchForeground#2eabae
  • editorWhitespace.foreground#23848666
  • editorWidget.background#0e3435
  • editorWidget.border#42cacd
  • gitlens.trailingLineForegroundColor#238486
  • input.background#0b2728
  • input.border#1c696b
  • input.foreground#f4f8fb
  • input.placeholderForeground#f4f8fb66
  • inputOption.activeBorder#42cacd
  • list.activeSelectionBackground#42cacd66
  • list.activeSelectionIconForeground#f4f8fb
  • list.dropBackground#42cacd33
  • list.focusOutline#42cacd66
  • list.hoverBackground#42cacd33
  • list.inactiveSelectionBackground#42cacd33
  • list.inactiveSelectionForeground#f4f8fb
  • minimap.background#0b2728cc
  • minimap.selectionOccurrenceHighlight#42cacd33
  • notifications.background#238486
  • notifications.border#238486
  • notifications.foreground#f4f8fb
  • notificationsErrorIcon.foreground#f05656
  • panel.background#071a1a
  • panel.border#1c696b
  • panelTitle.activeBorder#42cacd
  • panelTitle.activeForeground#f4f8fb
  • progressBar.background#42cacd
  • scrollbarSlider.activeBackground#42cacd99
  • scrollbarSlider.background#42cacd33
  • scrollbarSlider.hoverBackground#42cacd66
  • searchEditor.findMatchBackground#154f50
  • selection.background#42cacd66
  • sideBar.background#071a1a
  • sideBar.border#1c696b
  • sideBar.foreground#238486
  • sideBarSectionHeader.background#0e3435
  • sideBarSectionHeader.border#1c696b
  • sideBarTitle.foreground#238486
  • statusBar.background#0b2728
  • statusBar.border#1c696b
  • statusBar.debuggingBackground#42cacd
  • statusBar.debuggingForeground#20014b
  • statusBar.foreground#42cacd
  • tab.activeBorderTop#42cacd
  • tab.border#1c696b
  • tab.inactiveBackground#0b2728
  • titleBar.activeBackground#0b2728
  • titleBar.activeForeground#f4f8fb
  • titleBar.inactiveBackground#0b2728
  • titleBar.inactiveForeground#238486
  • window.activeBorder#1c696b
  • window.inactiveBorder#0b2728

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#238486italic
variable, string constant.other.placeholder#eeffff—
constant.other.color#ffffff—
invalid, invalid.illegal#ff5370—
keyword, storage.type, storage.modifier#c792ea—
keyword.control, constant.other.color, punctuation, meta.tag, 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#89ddff—
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#f07178—
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method#82aaff—
meta.block variable.other#f07178—
support.other.variable, string.other.link#f07178—
constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other#f78c6c—
string, constant.other.symbol, constant.other.key, entity.other.inherited-class, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js#c3e88d—
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#ffcb6b—
support.type#b2ccd6—
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#ff5370—
variable.language#ff5370italic
entity.other.attribute-name#c792ea—
markup.inserted#c3e88d—
markup.deleted#ff5370—
markup.changed#c792ea—
string.regexp#89ddff—
constant.character.escape#89ddff—
*url*, *link*, *uri*—underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#82aaffitalic
variable.other.global.c#ff5370bold
variable.other.local.c#f07178—
meta.block.c, meta.parens.block.c#c3e88d—
storage.modifier.c#16bc77—
constant.numeric.decimal.c#3794ff—
meta.function.definition.parameters.c#ffcb6bbold
meta.preprocessor.macro.c#b2ccd6bold
variable.other.global.cpp#ff5370bold
variable.other.local.cpp#f07178—
variable.other.object.access.cpp#ffcb6b—
meta.body.function.definition.cpp#16bc77bold
keyword.control.if.cpp#ff5370bold
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#b2ccd6—
entity.other.attribute-name.class#ffcb6b—
entity.other.attribute-name.id.css#b077ffbold
keyword.other.unit#16bc77—
source.go#ffcb6b—
entity.name.import.go#c3e88d—
entity.name.type.go#f07178—
punctuation.definition.begin.bracket.curly.go, punctuation.definition.end.bracket.curly.go, punctuation.definition.begin.bracket.round.go, punctuation.definition.end.bracket.round.go#b077ff—
keyword.control.go#ff5370—
keyword.type.go#16bc77bold
keyword.function.go#1482ffbold
entity.name.package.go#3794ffbold
constant.other.placeholder.go#b2ccd6bold
variable.other.assignment.go#1482ffbold
keyword.const.go#ff5370bold
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#ffcb6bitalic
text.html.derivative#b2ccd6—
entity.other.attribute-name.html#ffcb6b—
source.json meta.structure.dictionary.json support.type.property-name.json#279093—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#31b8bb—
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#4fcdd1—
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#78d9db—
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#a0e4e6—
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#c8eff1—
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#f0fbfb—
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#f0fbfb—
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#f0fbfb—
variable.other.definition.java, meta.try.body.java#ff5370—
storage.modifier.import.java#c3e88d—
variable.other.object.java#f78c6c—
variable.other.object.property.java#3794ff—
meta.method-call.java#ffcb6b—
meta.method.body.java#c3e88d—
entity.name.method.js#82aaffitalic
meta.class-method.js entity.name.function.js, variable.function.constructor#82aaff—
source.js constant.other.object.key.js string.unquoted.label.js#ff5370italic
variable.other.constant.js#f05656—
meta.object-literal.key.js#1482ff—
variable.other.object.js#f07178—
variable.other.constant.property.js, support.variable.property.js, variable.other.property.js#c3e88d—
keyword.control.conditional.js#f05656bold
variable.other.readwrite.js#82aaffbold
text.html.markdown, meta.paragraph.markdown#b2ccd6—
punctuation.definition.list.begin.markdown#f05656—
text.html.markdown markup.inline.raw.markdown#c792ea—
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#65737e—
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#c3e88d—
markup.quote punctuation.definition.blockquote.markdown#65737e—
string.other.link.title.markdown#82aaff—
string.other.link.description.title.markdown#c792ea—
constant.other.reference.link.markdown#ffcb6b—
entity.name.section.markdown#ffcb6bbold
markup.raw.block.fenced.markdown#00000050—
punctuation.definition.fenced.markdown#00000050—
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end#eeffff—
variable.language.fenced.markdown#65737e—
meta.separator#65737ebold
markup.italic#f07178italic
markup.bold, markup.bold string#f07178bold
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#f07178bold
string.other.link.title.markdown#f07178—
markup.underline#1482ffunderline
markup.inline.raw.string.markdown#b077ff—
markup.quote—italic
markup.raw.block#c792ea—
markup.table#eeffff—
constant.other.php#f07178—
constant.other.class.php#1482ff—
variable.other.php#ffcb6bbold
punctuation.definition.variable.php#f05656bold
variable.other.property.php#b077ffbold
source.python#ffcb6b—
source.ruby#82aaff—
variable.other.readwrite.instance.ruby#ffcb6b—
variable.other.ruby#82aaff—
variable.other.constant.ruby#f07178—
entity.name.function.ruby#b077ff—
keyword.control.ruby#f05656—
support.class.ruby#1482ff—
variable.other.block.ruby#b077ff—
punctuation.separator.arguments.ruby#f05656bold
keyword.control.pseudo-method.ruby#16bc77italic
meta.embedded.line.ruby#ffcb6b—
source.scala#82aaff—
variable.other.declaration.scala#ffcb6b—
entity.name.function.declaration, keyword.declaration.stable.scala#f07178—
meta.embedded.line.scala#c3e88d—
keyword.control.flow.scala#f05656—
entity.name.class#b077ff—
variable.scss#1482ffbold
support.type.property-name.css, meta.property-name.scss, meta.property-list.scss#82aaff—
meta.attribute-selector.scss#c3e88d—
constant.other.scss#ff7722—
source.shell#ff7722—
variable.other.bracket.shell, variable.other.normal.shell#1482ffbold
variable.other.positional.shell#ff7722—
meta.scope.group.shell#82aaff—
keyword.control.shell#f05656bold
meta.scope.case-pattern.shell#b077ff—
entity.name.function.shell#ffcb6b—
punctuation.definition.arguments.shell#ff7722—
constant.other.database-name.sql#1482ffbold
constant.other.table-name.sql#82aaffbold
source.sql#ffcb6b—
constant.numeric.sql#b077ff—
support.type.primitive.ts#ff7722—
variable.object.property.ts#b077ff—
variable.other.property.ts#b077ffbold
variable.other.readwrite.ts#c3e88d—
meta.object-literal.key.ts#1482ff—
variable.other.object.ts#ff7722—
variable.other.object.property.ts#ffcb6b—
keyword.operator.logical.ts#f05656bold
entity.name.type.ts#c3e88d—
variable.other.readwrite.tsx#16bc77—
variable.object.property.tsx#b077ff—
variable.other.constant.tsx#f05656bold
Crucible Theme by Setu Design - VS Code Theme