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.background#1c212cad
  • activityBar.border#26282e
  • activityBar.dropBackground#838dad40
  • activityBar.foreground#05fafa
  • activityBar.inactiveForeground#12afc4
  • activityBarBadge.background#ff711e
  • activityBarBadge.foreground#FFFFFF
  • badge.background#ff0000
  • breadcrumb.activeSelectionForeground#06f7e3
  • breadcrumb.focusForeground#66cfff
  • breadcrumb.foreground#108ee9
  • breadcrumbPicker.background#050a1d
  • diffEditor.insertedTextBackground#fcff31
  • diffEditor.removedTextBackground#ed484933
  • dropdown.background#292d44
  • dropdown.border#0f3f55
  • dropdown.foreground#a9aaaa
  • dropdown.listBackground#0f3f55
  • editor.background#292c35
  • editor.findMatchBackground#5b6ca299
  • editor.findMatchBorder#51535a99
  • editor.findMatchHighlightBackground#84868a33
  • editor.findMatchHighlightBorder#5b6ca233
  • editor.foreground#bfc2c0
  • editor.inactiveSelectionBackground#eb9a05dc
  • editor.lineHighlightBackground#0a0c1465
  • editor.selectionBackground#0d1d5099
  • editor.selectionHighlightBackground#5b6ca233
  • editor.selectionHighlightBorder#2a324b
  • editorCursor.background#00000000
  • editorCursor.foreground#6f9edd
  • editorGroup.border#242b40
  • editorGroup.dropBackground#5b6ca240
  • editorGroup.emptyBackground#242b40
  • editorGroup.focusedEmptyBorder#2a324b
  • editorGroupHeader.noTabsBackground#242b40
  • editorGroupHeader.tabsBackground#242b40
  • editorGroupHeader.tabsBorder#242b40
  • editorHint.border#1cf1c3
  • editorHoverWidget.background#242b40
  • editorHoverWidget.border#242b40
  • editorIndentGuide.activeBackground#697179
  • editorIndentGuide.background#303956
  • editorLineNumber.activeForeground#01f837
  • editorLineNumber.foreground#566288
  • editorLink.activeForeground#1a92f3
  • editorOverviewRuler.addedForeground#52adf299
  • editorOverviewRuler.border#040d29f3
  • editorOverviewRuler.deletedForeground#f75110
  • editorOverviewRuler.errorForeground#ed4849
  • editorOverviewRuler.findMatchForeground#52adf280
  • editorOverviewRuler.modifiedForeground#242b40
  • editorOverviewRuler.selectionHighlightForeground#52adf280
  • editorOverviewRuler.warningForeground#fcc04f
  • editorSuggestWidget.background#243640
  • editorSuggestWidget.border#242b40
  • editorSuggestWidget.foreground#e2e6e980
  • editorSuggestWidget.highlightForeground#fff
  • editorSuggestWidget.selectedBackground#303956
  • editorWhitespace.foreground#4f5e8c
  • input.background#5b6ca240
  • input.border#8880f5a6
  • input.foreground#fff
  • input.placeholderForeground#ffffff80
  • inputOption.activeBorder#ffffff80
  • inputValidation.errorBackground#ed4849
  • inputValidation.errorBorder#ed4849
  • inputValidation.infoBackground#52adf299
  • inputValidation.infoBorder#52adf299
  • inputValidation.warningBackground#fcc04f
  • inputValidation.warningBorder#fcc04f
  • list.activeSelectionBackground#010c30
  • list.activeSelectionForeground#4879ff
  • list.dropBackground#5b6ca280
  • list.errorForeground#e74646
  • list.focusBackground#36436d40
  • list.focusForeground#ffffff
  • list.highlightForeground#FFFFFF
  • list.hoverBackground#061827e1
  • list.hoverForeground#04f804
  • list.inactiveFocusBackground#5b6ca240
  • list.inactiveSelectionBackground#051138
  • list.inactiveSelectionForeground#02f82b
  • list.invalidItemForeground#000000b6
  • list.warningForeground#eafa0f
  • menu.background#242a3d
  • notificationCenter.border#1482ff
  • notificationCenterHeader.background#364161E6
  • notificationCenterHeader.foreground#fff
  • notificationLink.foreground#1482ff
  • notifications.background#364161E6
  • notifications.border#1482ff
  • notifications.foreground#fff
  • notificationToast.border#364161E6
  • scrollbar.shadow#ffffff
  • scrollbarSlider.activeBackground#0687ffe1
  • scrollbarSlider.background#53c4f17a
  • scrollbarSlider.hoverBackground#06b9ffe1
  • settings.checkboxBackground#223a70
  • settings.checkboxBorder#242b40
  • settings.checkboxForeground#f75104
  • settings.dropdownBackground#242b40
  • settings.dropdownBorder#242b40
  • settings.dropdownForeground#bebbbb
  • settings.dropdownListBorder#FFF
  • settings.headerForeground#1482ff
  • settings.numberInputBackground#313f68
  • settings.numberInputBorder#223a70
  • settings.numberInputForeground#f6f7c8
  • settings.textInputBackground#313f68
  • settings.textInputBorder#223a70
  • settings.textInputForeground#f6f7c8
  • sideBar.background#242b40
  • sideBar.border#242b40
  • sideBar.dropBackground#5b6ca240
  • sideBar.foreground#898a8b
  • sideBarSectionHeader.background#303956
  • sideBarSectionHeader.foreground#a4c8e4
  • sideBarTitle.foreground#ff811a
  • statusBar.background#242b40
  • statusBar.border#3c476b
  • statusBar.debuggingBackground#14d0ff
  • statusBar.debuggingBorder#14d0ff
  • statusBar.debuggingForeground#151822
  • statusBar.foreground#f8fa78
  • statusBar.noFolderBackground#242b40
  • statusBar.noFolderBorder#242b40
  • statusBar.noFolderForeground#e2e6e9
  • statusBarItem.activeBackground#5b6ca299
  • statusBarItem.hoverBackground#6b7ebdcc
  • tab.activeBackground#2a324b
  • tab.activeBorder#e2e6e9
  • tab.activeBorderTop#2a324b
  • tab.activeForeground#e2e6e9
  • tab.border#2a324b
  • tab.hoverBackground#6b81c4
  • tab.hoverBorder#2a324b
  • tab.inactiveBackground#242b40
  • tab.inactiveForeground#e2e6e9
  • tab.unfocusedActiveBorder#2a324b
  • tab.unfocusedActiveBorderTop#2a324b
  • tab.unfocusedActiveForeground#96969680
  • tab.unfocusedHoverBackground#232b41
  • tab.unfocusedHoverBorder#2a324b
  • tab.unfocusedInactiveForeground#38a9ff80
  • titleBar.activeBackground#10131a
  • titleBar.activeForeground#cbf0f193
  • titleBar.inactiveBackground#2d2d2e
  • titleBar.inactiveForeground#a0a0a0
  • walkThrough.embeddedEditorBackground#242b40
  • welcomePage.buttonBackground#242b40
  • welcomePage.buttonHoverBackground#364161
  • widget.shadow#18ecf380

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#7b89b5italic
variable.parameter.function#a6b2c0
text.html.basic#e2e6e9
punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, meta.tag.block.any.html#a6b2c0
support.constant.property-type.scss,support.constant.property-type.css#d8985f
support.constant.color.w3c-standard-color-name.css,support.constant.color.w3c-standard-color-name.scss#d8985f
punctuation.separator.list.comma.css#b9c0ca
meta.paragraph.markdown, text.html.markdown#e2e6e9
support.constant.color.w3c-standard-color-name.css#d8985f
entity.other.attribute-name.class.css#f2c37b
support.type.property-name.scss,support.type.property-name.css#fe8183
support.type.vendored.property-name.css#2bbac5
constant.numeric.css, meta.property-value.scss, source.css.scss#2bbac5
keyword.other.unit.vw.css, keyword.other.unit.vh.css, keyword.other.unit.px.css#2bbac5
constant.numeric.css, meta.property-value.scss, source.css.scss#2bbac5
punctuation.section.property-list.begin.bracket.curly.scss, meta.property-list.scss, source.css.scss#e2e6e980
support.constant.edge#77dcb8ff
punctuation.definition.string.begin,punctuation.definition.string.end#7b89b5
constant.other.character-class.regexp#e06c75ff
keyword.operator.quantifier.regexp#d19a66ff
comment markup.link#5c6370
markup.changed.diff#e0c285
meta.diff.header.from-file,punctuation.definition.from-file.diff#569cd6
markup.inserted.diff#89ca78
markup.deleted.diff#ef596f
meta.function.c#ef596f
keyword.control.cpp#e5c07b
punctuation.section.block.begin.bracket.curly.cpp,punctuation.section.block.end.bracket.curly.cpp,punctuation.terminator.statement.c,punctuation.section.block.begin.bracket.curly.c,punctuation.section.block.end.bracket.curly.c,punctuation.section.parens.begin.bracket.round.c,punctuation.section.parens.end.bracket.round.c,punctuation.section.parameters.begin.bracket.round.c,punctuation.section.parameters.end.bracket.round.c#aab1c0
punctuation.separator.key-value#bbbbbb
entity.other.attribute-name.js,entity.other.attribute-name.ts,entity.other.attribute-name.jsx,entity.other.attribute-name.tsx,variable.parameter,variable.language.superitalic
keyword.operator.expression.import#52adf2
support.constant.math#e5c07b
support.constant.property.math#d19a66
variable.other.constant#e5c07b
storage.type.annotation.java#e5c07bff
source.java#ef596f
punctuation.section.block.begin.java,punctuation.section.block.end.java,punctuation.definition.method-parameters.begin.java,punctuation.definition.method-parameters.end.java,punctuation.section.method.begin.java,punctuation.section.method.end.java,punctuation.section.class.begin.java,punctuation.section.class.end.java,punctuation.section.inner-class.begin.java,punctuation.section.inner-class.end.java,storage.type.generic.java,meta.method.body.java#fff
meta.method.body.java#ef596f
punctuation.section.class.begin.bracket.curly.java, punctuation.section.class.end.bracket.curly.java, punctuation.section.method.begin.bracket.curly.java, punctuation.section.method.end.bracket.curly.java, punctuation.terminator.java, meta.method.identifier.java#aab1c0
punctuation.separator.period.java#fff
meta.method-call.java#c178dd
meta.method.java#52adf2
storage.modifier.import.java,storage.type.java#e5c07b
meta.definition.variable.name.java#ef596f
keyword.operator.logical#ed8085
keyword.operator.bitwise#2bbac5
punctuation.definition.template-expression.begin,punctuation.definition.template-expression.end#ef596f
support.module.node,support.type.object.module#e5c07b
variable.other.readwrite,meta.object-literal.key,support.variable.property,support.variable.object.process,support.variable.object.node#ef596f
comment.line.double-slash,comment.block.documentationitalic
comment.line.double-slash.c,comment.block.documentation.c,comment.line.double-slash.cpp,comment.block.documentation.cppbold
support.constant.json#d8985f
keyword.operator.expression.instanceof, keyword.operator.new, keyword.operator.ternary, keyword.operator.optional#d55fde
support.type.object.console#ef596f
support.variable.property.process#d8985f
entity.name.function,support.function.console#52adf2
keyword.operator#2bbac5
support.type.object.dom#2bbac5
support.variable.dom,support.variable.property.dom#ef596f
keyword.operator.arithmetic,keyword.operator.comparison#eadac3
keyword.operator.assignment.c,keyword.operator.comparison.c,keyword.operator.c,keyword.operator.increment.c,keyword.operator.bitwise.shift.c#77dcb8ff
punctuation.separator.delimiter.c#bbbbbb
support.type.posix-reserved.c#57adb8
keyword.operator.sizeof.c#c178dd
variable.parameter.function.language.python#d8985f
support.type.python#2bbac5
keyword.operator.logical.python#77dcb8
meta.function-call.arguments.python#e06c60
meta.function-call.python#e06c60
variable.parameter.function.python#d18c4e
punctuation.definition.arguments.begin.python,punctuation.definition.arguments.end.python,punctuation.separator.arguments.python,punctuation.definition.list.begin.python,punctuation.definition.list.end.python,meta.function-call.arguments.python#aab1c0
meta.function-call.generic.python#52adf2
constant.character.format.placeholder.other.python#98c379
none#a6b2c0
keyword.operator#aab1c0
keyword#77dcb8
variable#ef596f
token.variable.parameter.java#aab1c0
import.storage.java#e5c07b
token.package.keyword#77dcb8
token.package#aab1c0
entity.name.function, meta.require, support.function.any-method#52adf2
entity.name.type.namespace#e5c07b
support.class, entity.name.type.class#e5c07b
entity.name.class.identifier.namespace.type#e5c07b
entity.name.class, variable.other.class#e5c07b
variable.other.class.php#ef596fff
entity.name.type#e5c07b
keyword.control#0ec05c
control.elements, keyword.operator.less#d8985f
keyword.other.special-method#52adf2
storage#ec8086
token.storage#77dcb8
keyword.operator.expression.delete,keyword.operator.expression.in,keyword.operator.expression.of,keyword.operator.expression.instanceof,keyword.operator.new,keyword.operator.expression.typeof,keyword.operator.expression.void#77dcb8
token.storage.type.java#e5c07b
support.function#2bbac5
support.type.property-name#aab1c0
support.constant.property-value#aab1c0
support.constant.font-name#d8985f
meta.tag#aab1c0
string, entity.other.inherited-class#f2c37b
constant.other.symbol#2bbac5
constant.numeric#d8985f
none#d8985f
none#d8985f
constant#d8985f
punctuation.definition.constant#d8985f
entity.name.tag#ef596f
entity.other.attribute-name#5ad2a0
entity.other.attribute-name.id#52adf2
meta.selector#77dcb8
none#d2945d
markup.heading#ef596fbold
markup.heading punctuation.definition.heading, entity.name.section#52adf2
keyword.other.unit#d8985fff
markup.bold,todo.bold#d8985fbold
punctuation.definition.bold#e5c07b
markup.italic,punctuation.definition.italic,todo.emphasis#77dcb8
emphasis md#77dcb8
entity.name.section.markdown#ef596f
punctuation.definition.heading.markdown#ef596f
markup.heading.setext#aab1c0
punctuation.definition.bold.markdown#d8985f
markup.inline.raw.markdown#89ca78
markup.inline.raw.string.markdown#98c379
beginning.punctuation.definition.list.markdown#ef596f
markup.quote.markdown#5c6370italic
punctuation.definition.string.begin.markdown,punctuation.definition.string.end.markdown,punctuation.definition.metadata.markdown#aab1c0
punctuation.definition.metadata.markdown#77dcb8
markup.underline.link.markdown,markup.underline.link.image.markdown#77dcb8
string.other.link.title.markdown,string.other.link.description.markdown#52adf2
markup.italic.markdownitalic
markup.fenced_code.block.markdown#928aee
punctuation.definition.markdown#ef596f
markup.underline.link.markdown, markup.underline.link.image.markdown#5ad2a0
punctuation.definition.metadata.markdown#5ad2a0
markup.bold.markdownbold
string.regexp#57b6c2
constant.character.escape#57b6c2
punctuation.section.embedded, variable.interpolation#be4f44
invalid.illegal#ffffff
invalid.broken#ffffff
invalid.deprecated#ffffff
invalid.unimplemented#ffffff
source.json meta.structure.dictionary.json > string.quoted.json#ef596f
source.json meta.structure.dictionary.json > string.quoted.json > punctuation.string#ef596f
source.json meta.structure.dictionary.json > value.json > string.quoted.json,source.json meta.structure.array.json > value.json > string.quoted.json,source.json meta.structure.dictionary.json > value.json > string.quoted.json > punctuation,source.json meta.structure.array.json > value.json > string.quoted.json > punctuation#89ca78
source.json meta.structure.dictionary.json > constant.language.json,source.json meta.structure.array.json > constant.language.json#2bbac5
support.type.property-name.json#ef596f
support.type.property-name.json punctuation#ef596f
text.html.laravel-blade source.php.embedded.line.html entity.name.tag.laravel-blade#c679dd
text.html.laravel-blade source.php.embedded.line.html support.constant.laravel-blade#c679dd
support.other.namespace.use.php,support.other.namespace.use-as.php,support.other.namespace.php,entity.other.alias.php,meta.interface.php#e5c07b
keyword.operator.error-control.php#77dcb8
keyword.operator.type.php#77dcb8
punctuation.section.array.begin.php#aab1c0
punctuation.section.array.end.php#aab1c0
invalid.illegal.non-null-typehinted.php#ff0000
storage.type.php,meta.other.type.phpdoc.php,keyword.other.type.php,keyword.other.array.phpdoc.php#e5c07b
meta.function-call.php,meta.function-call.object.php,meta.function-call.static.php#52adf2
punctuation.definition.parameters.begin.bracket.round.php,punctuation.definition.parameters.end.bracket.round.php,punctuation.separator.delimiter.php,punctuation.section.scope.begin.php,punctuation.section.scope.end.php,punctuation.terminator.expression.php,punctuation.definition.arguments.begin.bracket.round.php,punctuation.definition.arguments.end.bracket.round.php,punctuation.definition.storage-type.begin.bracket.round.php,punctuation.definition.storage-type.end.bracket.round.php,punctuation.definition.array.begin.bracket.round.php,punctuation.definition.array.end.bracket.round.php,punctuation.definition.begin.bracket.round.php,punctuation.definition.end.bracket.round.php,punctuation.definition.begin.bracket.curly.php,punctuation.definition.end.bracket.curly.php,punctuation.definition.section.switch-block.end.bracket.curly.php,punctuation.definition.section.switch-block.start.bracket.curly.php,punctuation.definition.section.switch-block.begin.bracket.curly.php,punctuation.definition.section.switch-block.end.bracket.curly.php#bbbbbb
support.constant.ext.php,support.constant.std.php,support.constant.core.php,support.constant.parser-token.php#d8985f
entity.name.goto-label.php,support.other.php#52adf2
keyword.operator.logical.php,keyword.operator.bitwise.php,keyword.operator.arithmetic.php#2bbac5
keyword.operator.regexp.php#77dcb8
keyword.operator.comparison.php#2bbac5
punctuation.definition.variable.php#ef596f
keyword.operator.heredoc.php,keyword.operator.nowdoc.php#77dcb8
meta.function.decorator.python#52adf2
support.token.decorator.python,meta.function.decorator.identifier.python#2bbac5
function.parameter#d8985f
function.parameter#aab1c0
function.brace#aab1c0
function.parameter.ruby, function.parameter.cs#aab1c0
rgb-value#2bbac5
inline-color-decoration rgb-value#d8985f
less rgb-value#d8985f
selector.sass#ef596f
var.this,variable.language.this.js,variable.language.this.ts,variable.language.this.jsx,variable.language.this.tsx#e5c07bitalic
support.type.primitive.ts,support.type.builtin.ts,support.type.primitive.tsx,support.type.builtin.tsx#e5c07b
block.scope.end,block.scope.begin#aab1c0
storage.type.cs#e5c07bff
entity.name.variable.local.cs#ef596f
token.info-token#6796e6
token.warn-token#cd9731
token.error-token#f44747
token.debug-token#b267e6
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded#77dcb8
meta.template.expression#aab1c0
keyword.operator.assignment.go, keyword.operator.address.go#e5c07bff
support.type.prelude.elm#2bbac5ff
support.constant.elm#d8985fff
punctuation.quasi.element#77dcb8
constant.character.entity#ef596f
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class#56b6c2
Hope Theme by halo-951 - VS Code Theme