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#1c1d21
  • activityBar.border#1c1d21
  • activityBar.dropBackground#4fb4d8
  • activityBar.foreground#535458
  • activityBarBadge.background#4fb4d8
  • activityBarBadge.foreground#1c1d21
  • badge.background#1c1d21
  • badge.foreground#cbcdd2
  • button.background#cbcdd2
  • button.foreground#1c1d21
  • button.hoverBackground#cbcdd2
  • contrastBorder#1c1d21
  • debugExceptionWidget.background#1c1d21
  • debugExceptionWidget.border#4fb4d8
  • debugToolBar.background#1c1d21
  • diffEditor.insertedTextBackground#78bd6525
  • diffEditor.insertedTextBorder#78bd6525
  • diffEditor.removedTextBackground#eb3d5425
  • diffEditor.removedTextBorder#eb3d5425
  • dropdown.background#1c1d21
  • dropdown.border#3f4044
  • dropdown.foreground#cbcdd2
  • editor.background#1c1d21
  • editor.findMatchHighlightBackground#2F3137
  • editor.findRangeHighlightBackground#2F3137
  • editor.foreground#cbcdd2
  • editor.hoverHighlightBackground#2F3137
  • editor.inactiveSelectionBackground#25272d
  • editor.lineHighlightBackground#2F3137
  • editor.lineHighlightBorder#2F3137
  • editor.rangeHighlightBackground#2F3137
  • editor.selectionBackground#2F3137
  • editor.selectionHighlightBackground#2F3137
  • editor.wordHighlightBackground#2F3137
  • editor.wordHighlightStrongBackground#2F3137
  • editorCursor.foreground#4fb4d8
  • editorError.foreground#eb3d54
  • editorGroupHeader.tabsBackground#1c1d21
  • editorGroupHeader.tabsBorder#1c1d21
  • editorGutter.addedBackground#78bd65
  • editorGutter.deletedBackground#eb3d54
  • editorGutter.modifiedBackground#e5cd52
  • editorHoverWidget.background#1c1d21
  • editorHoverWidget.border#4fb4d8
  • editorIndentGuide.activeBackground#686b78
  • editorIndentGuide.background#3f4044
  • editorLineNumber.foreground#686b78
  • editorLink.activeForeground#6dd2f6
  • editorMarkerNavigation.background#1c1d21
  • editorMarkerNavigationError.background#eb3d54
  • editorMarkerNavigationWarning.background#ef7c2a
  • editorOverviewRuler.addedForeground#78bd65
  • editorOverviewRuler.commonContentForeground#4fb4d8
  • editorOverviewRuler.currentContentForeground#4fb4d8
  • editorOverviewRuler.deletedForeground#eb3d54
  • editorOverviewRuler.errorForeground#eb3d54
  • editorOverviewRuler.incomingContentForeground#4fb4d8
  • editorOverviewRuler.modifiedForeground#e5cd52
  • editorOverviewRuler.warningForeground#ef7c2a
  • editorRuler.foreground#686b78
  • editorWarning.foreground#78bd65
  • editorWidget.background#1c1d21
  • errorForeground#eb3d54
  • extensionButton.prominentBackground#cbcdd2
  • extensionButton.prominentForeground#1c1d21
  • extensionButton.prominentHoverBackground#cbcdd2
  • focusBorder#1c1d21
  • foreground#cbcdd2
  • gitDecoration.deletedResourceForeground#eb3d54
  • gitDecoration.modifiedResourceForeground#e5cd52
  • gitDecoration.untrackedResourceForeground#78bd65
  • input.border#686b78
  • input.foreground#cbcdd2
  • input.placeholderForeground#cbcdd2
  • inputOption.activeBorder#cbcdd2
  • inputValidation.errorBackground#eb3d54
  • inputValidation.errorBorder#eb3d54
  • inputValidation.infoBackground#4fb4d8
  • inputValidation.infoBorder#4fb4d8
  • inputValidation.warningBackground#ef7c2a
  • inputValidation.warningBorder#ef7c2a
  • list.activeSelectionBackground#3f4044
  • list.activeSelectionForeground#cbcdd2
  • list.errorForeground#ef7c2a
  • list.focusBackground#494a4e
  • list.focusForeground#cbcdd2
  • list.highlightForeground#cbcdd2
  • list.hoverBackground#494a4e
  • list.hoverForeground#cbcdd2
  • list.inactiveSelectionBackground#3f4044
  • list.inactiveSelectionForeground#cbcdd2
  • list.warningForeground#eb3d54
  • merge.currentHeaderBackground#4fb4d8
  • merge.incomingHeaderBackground#4fb4d8
  • notification.background#1c1d21
  • notification.buttonForeground#1c1d21
  • notification.errorBackground#eb3d54
  • notification.errorForeground#1c1d21
  • notification.foreground#cbcdd2
  • notification.infoBackground#4fb4d8
  • notification.infoForeground#1c1d21
  • notification.warningBackground#ef7c2a
  • notification.warningForeground#1c1d21
  • panel.background#1c1d21
  • panel.border#3f4044
  • panelTitle.activeBorder#4fb4d8
  • panelTitle.activeForeground#cbcdd2
  • peekView.border#4fb4d8
  • peekViewEditor.matchHighlightBackground#2F3137
  • peekViewResult.fileForeground#cbcdd2
  • peekViewResult.lineForeground#cbcdd2
  • peekViewResult.matchHighlightBackground#2F3137
  • peekViewResult.selectionForeground#cbcdd2
  • peekViewTitle.background#1c1d21
  • peekViewTitleLabel.foreground#cbcdd2
  • pickerGroup.foreground#4fb4d8
  • progressBar.background#4fb4d8
  • scrollbarSlider.activeBackground#3f4044
  • scrollbarSlider.background#3f404480
  • scrollbarSlider.hoverBackground#3f4044
  • sideBar.background#141519
  • sideBar.border#1c1d21
  • sideBar.foreground#cbcdd2
  • sideBarSectionHeader.background#3f4044
  • sideBarSectionHeader.foreground#cbcdd2
  • sideBarTitle.foreground#cbcdd2
  • statusBar.background#1c1d21
  • statusBar.border#1c1d21
  • statusBar.foreground#686b78
  • statusBar.noFolderBackground#1c1d21
  • tab.activeBackground#212226
  • tab.activeBorder#686b78
  • tab.activeForeground#cbcdd2
  • tab.border#1c1d21
  • tab.inactiveBackground#1c1d21
  • tab.inactiveForeground#686b78
  • tab.unfocusedActiveBorder#1c1d21
  • terminal.ansiBlack#818491
  • terminal.ansiBlue#4fb4d8
  • terminal.ansiBrightBlack#818491
  • terminal.ansiBrightBlue#4fb4d8
  • terminal.ansiBrightCyan#4fb4d8
  • terminal.ansiBrightGreen#78bd65
  • terminal.ansiBrightMagenta#78bd65
  • terminal.ansiBrightRed#eb3d54
  • terminal.ansiBrightWhite#cbcdd2
  • terminal.ansiBrightYellow#e5cd52
  • terminal.ansiCyan#4fb4d8
  • terminal.ansiGreen#78bd65
  • terminal.ansiMagenta#eb3d54
  • terminal.ansiRed#eb3d54
  • terminal.ansiWhite#cbcdd2
  • terminal.ansiYellow#e5cd52
  • textLink.activeForeground#6dd2f6
  • textLink.foreground#4fb4d8
  • textPreformat.foreground#e5cd52
  • titleBar.activeForeground#cbcdd2

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
Global settings#cbcdd2
comment#686b78
string#4fb4d8
string.quoted#4fb4d8
support.constant.math#e5cd52
constant.numeric, constant.character.numeric#ef7c2a
constant.language, punctuation.definition.constant, variable.other.constant#cbcdd2
constant.character, constant.other#e5cd52
constant.character.escape#ef7c2a
string.regexp, string.regexp keyword.other#4fb4d8
meta.function punctuation.separator.comma#cbcdd2
variable#e5cd52
punctuation.accessor, keyword#78bd65
storage#78bd65
storage.type, meta.var.expr storage.type, meta.class meta.method.declaration meta.var.expr storage.type.js#eb3d54
entity.name.class, meta.class entity.name.type.class#e5cd52
entity.other.inherited-class#4fb4d8
entity.name.function#e5cd52
variable.parameter#4fb4d8
punctuation.definition.tag, meta.tag#cbcdd2
support.class.component, meta.tag.other.html, meta.tag.other.js, meta.tag.other.tsx, meta.tag.tsx, meta.tag.html#eb3d54
entity.name.tag.tsx, entity.name.tag.js, entity.name.tag#eb3d54
entity.other.attribute-name#e5cd52
entity.name.tag.custom#e5cd52
support.function, support.constant#e5cd52
support.constant.meta.property-value#ef7c2a
support.type, support.class#e5cd52
support.variable.dom#e5cd52
invalid#cbcdd2
invalid.deprecated#cbcdd2
keyword.operator#78bd65
keyword.operator.relational#78bd65
keyword.operator.assignment#78bd65
comment.line.double-slash#686b78
constant.language.null#ef7c2a
meta.brace#cbcdd2
meta.delimiter.period#78bd65
constant.language.boolean#ef7c2a
object.comma#cbcdd2
variable.parameter.function#ef7c2a
support.type.vendored.property-name, support.constant.vendored.property-value, support.type.property-name, meta.property-list entity.name.tag#4fb4d8
meta.property-list entity.name.tag.reference#eb3d54
constant.other.color.rgb-value punctuation.definition.constant#ef7c2a
constant.other.color#78bd65
keyword.other.unit#78bd65
meta.selector#78bd65
entity.other.attribute-name.id#e5cd52
meta.property-name#4fb4d8
entity.name.tag.doctype, meta.tag.sgml.doctype#78bd65
punctuation.definition.parameters#cbcdd2
keyword.control.operator#ef7c2a
keyword.operator.logical#78bd65
variable.instance, variable.other.instance, variable.reaedwrite.instance, variable.other.readwrite.instance#eb3d54
variable.other.property, variable.other.object.property#ef7c2a
entity.name.function#e5cd52
keyword.operator.comparison#78bd65
support.constant, keyword.other.special-method, keyword.other.new#ef7c2a
support.function#ef7c2a
invalid.broken#1c1d21
invalid.unimplemented#cbcdd2
invalid.illegal#cbcdd2
variable.language#eb3d54
support.variable.property#ef7c2a
variable.function#e5cd52
variable.interpolation#eb3d54
meta.function-call#e5cd52
punctuation.section.embedded#eb3d54
string.template meta.template.expression#eb3d54
italic#78bd65italic
bold#e5cd52bold
quote#4fb4d8italic
raw#4fb4d8
variable.assignment.coffee#ef7c2a
variable.parameter.function.coffee#cbcdd2
variable.assignment.coffee#ef7c2a
variable.other.readwrite.cs#cbcdd2
entity.name.type.class.cs, storage.type.cs#e5cd52
entity.name.type.namespace.cs#78bd65
entity.name.tag.css, entity.name.tag.less, entity.name.tag.custom.css#eb3d54
entity.name.tag.wildcard.css, entity.name.tag.wildcard.less, entity.name.tag.wildcard.scss, entity.name.tag.wildcard.sass#eb3d54
keyword.other.unit.css#78bd65
meta.attribute-selector.css entity.other.attribute-name.attribute#ef7c2a
source.elixir support.type.elixir, source.elixir meta.module.elixir entity.name.class.elixir#e5cd52
source.elixir entity.name.function#e5cd52
source.elixir constant.other.symbol.elixir, source.elixir constant.other.keywords.elixir#e5cd52
source.elixir punctuation.definition.string#4fb4d8
source.elixir variable.other.readwrite.module.elixir, source.elixir variable.other.readwrite.module.elixir punctuation.definition.variable.elixir#e5cd52
source.elixir .punctuation.binary.elixir#78bd65
source.go meta.function-call.go#e5cd52
entity.other.attribute-name.id.html#e5cd52
punctuation.definition.tag.html#ef7c2a
meta.tag.sgml.doctype.html#78bd65
meta.class entity.name.type.class.js#e5cd52
meta.method.declaration storage.type.js#e5cd52normal
terminator.js#cbcdd2
meta.js punctuation.definition.js#cbcdd2
entity.name.type.instance.jsdoc, entity.name.type.instance.phpdoc#cbcdd2
variable.other.jsdoc, variable.other.phpdoc#4fb4d8
variable.other.meta.import.js, meta.import.js variable.other#cbcdd2
variable.parameter.function.js#4fb4d8
variable.other.readwrite.js#cbcdd2
variable.other.object.js, variable.other.object.jsx, variable.object.property.js, variable.object.property.jsx#cbcdd2
variable.js, variable.other.js#cbcdd2
entity.name.type.js, entity.name.type.module.js#e5cd52
support.class.js#cbcdd2
support.type.property-name.json#eb3d54
support.constant.json#e5cd52
meta.structure.dictionary.value.json string.quoted.double#4fb4d8
string.quoted.double.json punctuation.definition.string.json#4fb4d8
meta.structure.dictionary.json meta.structure.dictionary.value constant.language#ef7c2a
variable.other.ruby#cbcdd2
constant.language.symbol.hashkey.ruby#ef7c2a
entity.name.tag.less#eb3d54
keyword.other.unit.css#78bd65
meta.attribute-selector.less entity.other.attribute-name.attribute#ef7c2a
markup.heading.markdown#e5cd52
markup.italic.markdown#78bd65italic
markup.bold.markdown#e5cd52bold
markup.quote.markdown#4fb4d8italic
markup.inline.raw.markdown#4fb4d8
markup.underline.link.markdown, markup.underline.link.image.markdown#4fb4d8
string.other.link.title.markdown, string.other.link.description.markdown#cbcdd2
punctuation.definition.string.markdown, punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, meta.link.inline.markdown punctuation.definition.string#e5cd52
punctuation.definition.metadata.markdown#eb3d54
beginning.punctuation.definition.list.markdown#e5cd52
support.class.php#e5cd52
meta.function-call.php punctuation#cbcdd2
variable.other.global.php#e5cd52
variable.other.global.php punctuation.definition.variable#e5cd52
constant.language.python#ef7c2a
variable.parameter.function.python, meta.function-call.arguments.python#4fb4d8
punctuation.python#cbcdd2
entity.name.function.decorator.python#e5cd52
source.css.scss meta.at-rule variable, source.css.sass meta.at-rule variable#e5cd52
meta.attribute-selector.scss entity.other.attribute-name.attribute, meta.attribute-selector.sass entity.other.attribute-name.attribute#ef7c2a
entity.name.tag.scss, entity.name.tag.sass#eb3d54
keyword.other.unit.scss, keyword.other.unit.sass#78bd65
variable.other.readwrite.alias.ts, variable.other.readwrite.alias.tsx, variable.other.readwrite.ts, variable.other.readwrite.tsx, variable.other.object.ts, variable.other.object.tsx, variable.object.property.ts, variable.object.property.tsx, variable.other.ts, variable.other.tsx, variable.tsx, variable.ts#cbcdd2
entity.name.type.ts, entity.name.type.tsx#e5cd52
support.class.node.ts, support.class.node.tsx#e5cd52
meta.type.parameters.ts entity.name.type, meta.type.parameters.tsx entity.name.type#cbcdd2
meta.import.ts punctuation.definition.block, meta.import.tsx punctuation.definition.block#cbcdd2
meta.decorator punctuation.decorator.ts, meta.decorator punctuation.decorator.tsx#e5cd52
meta.jsx.children.tsx, meta.tag.js meta.jsx.children.tsx#cbcdd2
entity.name.tag.yaml#ef7c2a
meta.property-list.css meta.property-value.css variable.other.less, meta.property-list.scss variable.scss, meta.property-list.sass variable.sass, keyword.operator.logical, keyword.operator.arithmetic, keyword.operator.bitwise, keyword.operator.increment, keyword.operator.ternary, keyword.operator.comparison, keyword.operator.assignment, keyword.operator.operator, keyword.operator.or.regexp, punctuation.definintion.string, punctuationnormal
meta.import.ts meta.block.ts variable.other.readwrite.alias.ts, meta.import.tsx meta.block.tsx variable.other.readwrite.alias.tsx, meta.import.js variable.other, entity.name.function.ts, entity.name.function.tsx, support.type.primitive, entity.name.tag.yaml, meta.tag.sgml.doctype.html, entity.name.tag.doctype, meta.tag.sgml.doctype, entity.other.attribute-name, entity.name.tag.custom, source.js.jsx keyword.control.flow.js, support.type.property.css, support.function.basic_functions, variable.assignment.coffee, support.function.basic_functions, keyword.operator.expression.typeof, keyword.operator.type.annotation, assignment.coffee, entity.name.type.ts, support.constant.math, meta.object-literal.key, meta.var.expr storage.type, parameter, string, italic, quote, keyword, storage, language, type .function, type.function, storage.type.class, type.var, meta.parameter, variable.parameter, meta.parameters, keyword.control, modifier, this, commentitalic

Shiki preview

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

Loading...

An Old Hope Theme - Coding Theme